├── .gitignore ├── README.md ├── package.json ├── public ├── _redirects ├── alex.jpg ├── icon.png └── index.html ├── src ├── App.jsx ├── components │ ├── BarChart.jsx │ ├── GeographyChart.jsx │ ├── Header.jsx │ ├── LineChart.jsx │ ├── PieChart.jsx │ ├── ProgressCircle.jsx │ ├── StatBox.jsx │ └── index.js ├── constants │ ├── contactsColumns.js │ ├── faq.js │ ├── inputFormFields.js │ ├── inputFormValues.js │ ├── invoicesColumns.js │ ├── mockData.js │ ├── mockGeoFeatures.js │ ├── sidebarMenu.js │ └── teamColumns.js ├── index.js ├── pages │ ├── Dashboard.jsx │ ├── charts │ │ ├── Bar.jsx │ │ ├── Geography.jsx │ │ ├── Line.jsx │ │ └── Pie.jsx │ ├── global │ │ ├── SidebarMenu.jsx │ │ ├── SidebarMenuItem.jsx │ │ └── Topbar.jsx │ ├── index.js │ ├── info │ │ ├── Contacts.jsx │ │ ├── Invoices.jsx │ │ └── Team.jsx │ └── inputs │ │ ├── Calendars.jsx │ │ ├── FAQ.jsx │ │ └── InputForm.jsx └── styles │ ├── index.css │ └── theme.js └── yarn.lock /.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 | build 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | z/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > 17 Nov 2022 2 | 3 | # React Admin Dashboard | [Live Link][hostedLink] 4 | 5 | 6 | ## Technology used 7 | 1. React 8 | 2. Material UI 9 | 3. Formik 10 | 4. Yup 11 | 5. Nivo chart 12 | 6. Full-calendar 13 | 7. React-Pro-Sidebar 14 | 15 | 16 | 17 | ### This application consists of 18 | * Light & Dark Mode 19 | * Dashboard Summary 20 | * 3 Different Data Table Pages 21 | * User Input Form Page 22 | * Calendar Integration 23 | * FAQ Page 24 | * 4 Different Charts 25 | 26 | 27 | 28 | ## Learning Context 29 | * ...spread operator + conditional base object property loading at theme level 30 | * introduce with css tool ==> [Pesticide][link] 31 | * by array of object{text,icon}, construct side-menu 32 | * row-column material-ui layout data display... 33 | * usage of `data-grid` layout of `material ui`... 34 | * path name become selected menu item, after refresh also... 35 | * user input form validation `yup` checking... 36 | * phone number regex pattern from input string... 37 | * usage of `react-pro-sidebar@0.7.1` with its `css`... 38 | * usage of `full-calendar` library... 39 | * usage of `nivo chart` system... 40 | * migrate experience from Vite to React, 41 | * because Vite have some issus with full-calendar lib... 42 | 43 | 44 | 45 | ## Yarn base packages/lib... 46 | |No | Packages Name | Description | 47 | |---|----------------------------------|------------------| 48 | |01 |yarn add `react-router-dom` | URL Navigation | 49 | |02 |yarn add `react-pro-sidebar@0.7.1`| React Pro Sidebar| 50 | |03 |yarn add `formik` | Form Elements | 51 | |04 |yarn add `yup` | Form Validations | 52 | |05 |yarn add `@mui/material` | [Material UI][mui] | 53 | |06 |yarn add `@emotion/react` | [Material UI][mui] | 54 | |07 |yarn add `@emotion/styled` | [Material UI][mui] | 55 | |08 |yarn add `@emotion/styled` | [Material UI][mui] | 56 | |09 |yarn add `@mui/x-data-grid` | [Material UI][mui] | 57 | |10 |yarn add `@mui/icons-material` | [Material UI][mui] | 58 | |11 |yarn add `@fullcalendar/core` | [Full Calendar][📆] 📆 | 59 | |12 |yarn add `@fullcalendar/daygrid` | [Full Calendar][📆] 📆 | 60 | |13 |yarn add `@fullcalendar/timegrid` | [Full Calendar][📆] 📆 | 61 | |14 |yarn add `@fullcalendar/list` | [Full Calendar][📆] 📆 | 62 | |15 |yarn add `@fullcalendar/interaction`| [Full Calendar][📆] 📆 | 63 | |16 |yarn add `@fullcalendar/react` | [Full Calendar][📆] 📆 | 64 | |17 |yarn add `@nivo/core` | [Nivo Chart][📈] 📈 | 65 | |18 |yarn add `@nivo/pie` | [Nivo Chart][📈] 📈 | 66 | |19 |yarn add `@nivo/bar` | [Nivo Chart][📈] 📈 | 67 | |20 |yarn add `@nivo/line` | [Nivo Chart][📈] 📈 | 68 | |21 |yarn add `@nivo/geo` | [Nivo Chart][📈] 📈 | 69 | 70 |
71 | 72 | ## File & Folder Hierarchy 73 | 74 | ``` 75 | 🟨 76 | src 77 | ├── components 78 | | ├── BarChart.jsx 79 | | ├── GeographyChart.jsx 80 | | ├── Header.jsx 81 | | ├── index.js 82 | | ├── LineChart.jsx 83 | | ├── PieChart.jsx 84 | | ├── ProgressCircle.jsx 85 | | └── StatBox.jsx 86 | | 87 | ├── constants 88 | | ├── contactsColumns.js 89 | | ├── faq.js 90 | | ├── inputFormFields.js 91 | | ├── inputFormValues.js 92 | | ├── invoicesColumns.js 93 | | ├── mockData.js 94 | | ├── mockGeoFeatures.js 95 | | ├── sidebarMenu.js 96 | | └── teamColumns.js 97 | | 98 | ├── pages 99 | | | Dashboard.jsx 100 | | | index.js 101 | | | 102 | | ├── charts 103 | | | ├── Bar.jsx 104 | | | ├── Geography.jsx 105 | | | ├── Line.jsx 106 | | | └── Pie.jsx 107 | | | 108 | | ├── global 109 | | | ├── SidebarMenu.jsx 110 | | | ├── SidebarMenuItem.jsx 111 | | | └── Topbar.jsx 112 | | | 113 | | ├── info 114 | | | ├── Contacts.jsx 115 | | | ├── Invoices.jsx 116 | | | └── Team.jsx 117 | | | 118 | | └── inputs 119 | | ├── Calendars.jsx 120 | | ├── FAQ.jsx 121 | | └── InputForm.jsx 122 | | 123 | ├── styles 124 | | ├── index.css 125 | | └── theme.js 126 | | 127 | ├── App.jsx 128 | └── index.js 129 | 🟨 130 | ``` 131 | 132 | ``` 133 | tree /f 134 | ``` 135 | 136 | 137 | [📈]: https://nivo.rocks 138 | [📆]: https://fullcalendar.io 139 | [hostedLink]: https://react-adb-mui.netlify.app 140 | [mui]: https://mui.com/material-ui/getting-started/installation 141 | [link]: https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi 142 | 143 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "admin-dashboard", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "react-scripts start", 7 | "build": "react-scripts build", 8 | "test": "react-scripts test", 9 | "eject": "react-scripts eject" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "^11.10.5", 13 | "@emotion/styled": "^11.10.5", 14 | "@fullcalendar/core": "^5.11.3", 15 | "@fullcalendar/daygrid": "^5.11.3", 16 | "@fullcalendar/interaction": "^5.11.3", 17 | "@fullcalendar/list": "^5.11.3", 18 | "@fullcalendar/react": "^5.11.3", 19 | "@fullcalendar/timegrid": "^5.11.3", 20 | "@mui/icons-material": "^5.10.14", 21 | "@mui/material": "^5.10.14", 22 | "@mui/x-data-grid": "^5.17.11", 23 | "@nivo/bar": "^0.80.0", 24 | "@nivo/core": "^0.80.0", 25 | "@nivo/geo": "^0.80.0", 26 | "@nivo/line": "^0.80.0", 27 | "@nivo/pie": "^0.80.0", 28 | "@testing-library/jest-dom": "^5.14.1", 29 | "@testing-library/react": "^13.0.0", 30 | "@testing-library/user-event": "^13.2.1", 31 | "formik": "^2.2.9", 32 | "react": "^18.2.0", 33 | "react-dom": "^18.2.0", 34 | "react-pro-sidebar": "0.7.1", 35 | "react-router-dom": "^6.4.3", 36 | "react-scripts": "5.0.1", 37 | "web-vitals": "^2.1.0", 38 | "yup": "^0.32.11" 39 | }, 40 | "eslintConfig": { 41 | "extends": [ 42 | "react-app", 43 | "react-app/jest" 44 | ] 45 | }, 46 | "browserslist": { 47 | "production": [ 48 | ">0.2%", 49 | "not dead", 50 | "not op_mini all" 51 | ], 52 | "development": [ 53 | "last 1 chrome version", 54 | "last 1 firefox version", 55 | "last 1 safari version" 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/alex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taiseen/react-admin-dashboard-material-ui/97bdbbc5beb93f05b2202d5180c99eb88434981c/public/alex.jpg -------------------------------------------------------------------------------- /public/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taiseen/react-admin-dashboard-material-ui/97bdbbc5beb93f05b2202d5180c99eb88434981c/public/icon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Admin Dashboard 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Bar, Calendars, Contacts, Dashboard, FAQ, Geography, InputForm, Invoices, Line, Pie, SidebarMenu, Team, Topbar } from './pages'; 2 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 3 | import { CssBaseline, ThemeProvider } from '@mui/material'; // reset all default css 4 | import { ColorModeContext, useMode } from './styles/theme'; 5 | 6 | 7 | const App = () => { 8 | 9 | const [theme, coloMode] = useMode(); 10 | 11 | return ( 12 | 13 | 14 | {/* Rest CSS */} 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | } /> 27 | 28 | } /> 29 | } /> 30 | } /> 31 | 32 | } /> 33 | } /> 34 | } /> 35 | 36 | } /> 37 | } /> 38 | } /> 39 | } /> 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | 48 | ) 49 | } 50 | 51 | export default App -------------------------------------------------------------------------------- /src/components/BarChart.jsx: -------------------------------------------------------------------------------- 1 | import { mockBarData as data } from "../constants/mockData"; 2 | import { ResponsiveBar } from "@nivo/bar"; 3 | import { useTheme } from "@mui/material"; 4 | import { tokens } from "../styles/theme"; 5 | 6 | const BarChart = ({ isDashboard = false }) => { 7 | 8 | const theme = useTheme(); 9 | const colors = tokens(theme.palette.mode); 10 | 11 | return ( 12 | 128 | ); 129 | }; 130 | 131 | export default BarChart; -------------------------------------------------------------------------------- /src/components/GeographyChart.jsx: -------------------------------------------------------------------------------- 1 | import { mockGeographyData as data } from "../constants/mockData"; 2 | import { geoFeatures } from "../constants/mockGeoFeatures"; 3 | import { ResponsiveChoropleth } from "@nivo/geo"; 4 | import { useTheme } from "@mui/material"; 5 | import { tokens } from "../styles/theme"; 6 | 7 | 8 | const GeographyChart = ({ isDashboard = false }) => { 9 | 10 | const theme = useTheme(); 11 | const colors = tokens(theme.palette.mode); 12 | 13 | return ( 14 | 85 | ); 86 | }; 87 | 88 | export default GeographyChart; -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { Typography, Box, useTheme } from "@mui/material"; 2 | import { tokens } from "../styles/theme"; 3 | 4 | const Header = ({ title, subtitle }) => { 5 | 6 | const theme = useTheme(); 7 | const colors = tokens(theme.palette.mode); 8 | 9 | return ( 10 | 11 | 12 | 18 | {title} 19 | 20 | 21 | 22 | {subtitle} 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default Header; -------------------------------------------------------------------------------- /src/components/LineChart.jsx: -------------------------------------------------------------------------------- 1 | import { mockLineData as data } from "../constants/mockData"; 2 | import { ResponsiveLine } from "@nivo/line"; 3 | import { useTheme } from "@mui/material"; 4 | import { tokens } from "../styles/theme"; 5 | 6 | const LineChart = ({ isCustomLineColors = false, isDashboard = false }) => { 7 | 8 | const theme = useTheme(); 9 | const colors = tokens(theme.palette.mode); 10 | 11 | return ( 12 | 115 | ); 116 | }; 117 | 118 | export default LineChart; -------------------------------------------------------------------------------- /src/components/PieChart.jsx: -------------------------------------------------------------------------------- 1 | import { mockPieData as data } from "../constants/mockData"; 2 | import { ResponsivePie } from "@nivo/pie"; 3 | import { tokens } from "../styles/theme"; 4 | import { useTheme } from "@mui/material"; 5 | 6 | const PieChart = () => { 7 | 8 | const theme = useTheme(); 9 | const colors = tokens(theme.palette.mode); 10 | 11 | return ( 12 | 108 | ); 109 | }; 110 | 111 | export default PieChart; -------------------------------------------------------------------------------- /src/components/ProgressCircle.jsx: -------------------------------------------------------------------------------- 1 | import { Box, useTheme } from "@mui/material"; 2 | import { tokens } from "../styles/theme"; 3 | 4 | const ProgressCircle = ({ progress = "0.75", size = "40" }) => { 5 | 6 | const theme = useTheme(); 7 | const colors = tokens(theme.palette.mode); 8 | const angle = progress * 360; 9 | 10 | return ( 11 | 21 | ); 22 | }; 23 | 24 | export default ProgressCircle; -------------------------------------------------------------------------------- /src/components/StatBox.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Typography, useTheme } from "@mui/material"; 2 | import { tokens } from "../styles/theme"; 3 | import ProgressCircle from "./ProgressCircle"; 4 | 5 | const StatBox = ({ title, subtitle, icon, progress, increase }) => { 6 | 7 | const theme = useTheme(); 8 | const colors = tokens(theme.palette.mode); 9 | 10 | return ( 11 | 12 | 13 | 14 | 15 | {icon} 16 | 21 | {title} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | {subtitle} 32 | 33 | 38 | {increase} 39 | 40 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default StatBox; -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as GeographyChart } from './GeographyChart'; 2 | export { default as ProgressCircle } from './ProgressCircle'; 3 | export { default as LineChart } from './LineChart'; 4 | export { default as PieChart } from './PieChart'; 5 | export { default as BarChart } from './BarChart'; 6 | export { default as StatBox } from './StatBox'; 7 | export { default as Header } from './Header'; -------------------------------------------------------------------------------- /src/constants/contactsColumns.js: -------------------------------------------------------------------------------- 1 | const contactsColumns = [ 2 | { field: "id", headerName: "ID", flex: 0.5 }, 3 | { field: "registrarId", headerName: "Registrar ID" }, 4 | { 5 | field: "name", 6 | headerName: "Name", 7 | flex: 1, 8 | cellClassName: "name-column--cell", 9 | }, 10 | { 11 | field: "age", 12 | headerName: "Age", 13 | type: "number", 14 | headerAlign: "left", 15 | align: "left", 16 | }, 17 | { 18 | field: "phone", 19 | headerName: "Phone Number", 20 | flex: 1, 21 | }, 22 | { 23 | field: "email", 24 | headerName: "Email", 25 | flex: 1, 26 | }, 27 | { 28 | field: "address", 29 | headerName: "Address", 30 | flex: 1, 31 | }, 32 | { 33 | field: "city", 34 | headerName: "City", 35 | flex: 1, 36 | }, 37 | { 38 | field: "zipCode", 39 | headerName: "Zip Code", 40 | flex: 1, 41 | }, 42 | ]; 43 | 44 | export default contactsColumns; -------------------------------------------------------------------------------- /src/constants/faq.js: -------------------------------------------------------------------------------- 1 | export const faq = [ 2 | { 3 | id: 1, 4 | question: 'An Important Question', 5 | answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.' 6 | }, 7 | { 8 | id: 2, 9 | question: 'Another Important Question', 10 | answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.' 11 | }, 12 | { 13 | id: 3, 14 | question: 'Your Favorite Question', 15 | answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.' 16 | }, 17 | { 18 | id: 4, 19 | question: 'Some Random Question', 20 | answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.' 21 | }, 22 | { 23 | id: 5, 24 | question: 'The Final Question', 25 | answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.' 26 | }, 27 | ] -------------------------------------------------------------------------------- /src/constants/inputFormFields.js: -------------------------------------------------------------------------------- 1 | export const inputFormFields = [ 2 | { 3 | name: 'firstName', 4 | label: 'First Name', 5 | type: "text" 6 | }, 7 | { 8 | name: 'lastName', 9 | label: 'Last Name', 10 | type: "text" 11 | }, 12 | { 13 | name: 'email', 14 | label: 'Email', 15 | type: "email" 16 | }, 17 | { 18 | name: 'contact', 19 | label: 'Contact Number', 20 | type: "tel" 21 | }, 22 | { 23 | name: 'address1', 24 | label: 'Address 1', 25 | type: "text" 26 | }, 27 | { 28 | name: 'address2', 29 | label: 'Address 2', 30 | type: "text" 31 | }, 32 | ] -------------------------------------------------------------------------------- /src/constants/inputFormValues.js: -------------------------------------------------------------------------------- 1 | import * as yup from "yup"; 2 | 3 | // initial input fields 4 | export const initialValues = { 5 | firstName: "", 6 | lastName: "", 7 | email: "", 8 | contact: "", 9 | address1: "", 10 | address2: "", 11 | }; 12 | 13 | // phone number input validation checking from string by regex pattern... 14 | const phoneRegExp = /^((\+[1-9]{1,4}[ -]?)|(\([0-9]{2,3}\)[ -]?)|([0-9]{2,4})[ -]?)*?[0-9]{3,4}[ -]?[0-9]{3,4}$/; 15 | 16 | 17 | // user input validation logic for each input field 18 | export const checkoutSchema = yup.object().shape({ 19 | firstName: yup.string().required("Required"), 20 | lastName: yup.string().required("Required"), 21 | email: yup.string().email("Invalid Email").required("Required"), 22 | contact: yup 23 | .string() 24 | .matches(phoneRegExp, "Phone number is not valid") 25 | .required("Required"), 26 | address1: yup.string().required("Required"), 27 | address2: yup.string().required("Required"), 28 | }); -------------------------------------------------------------------------------- /src/constants/invoicesColumns.js: -------------------------------------------------------------------------------- 1 | import { Typography } from "@mui/material"; 2 | 3 | const invoicesColumns = (colors) => { 4 | 5 | return [ 6 | { field: "id", headerName: "ID" }, 7 | { 8 | field: "name", 9 | headerName: "Name", 10 | flex: 1, 11 | cellClassName: "name-column--cell", 12 | }, 13 | { 14 | field: "phone", 15 | headerName: "Phone Number", 16 | flex: 1, 17 | }, 18 | { 19 | field: "email", 20 | headerName: "Email", 21 | flex: 1, 22 | }, 23 | { 24 | field: "cost", 25 | headerName: "Cost", 26 | flex: 1, 27 | renderCell: ({ row: { cost } }) => ( 28 | 29 | ${cost} 30 | 31 | ), 32 | }, 33 | { 34 | field: "date", 35 | headerName: "Date", 36 | flex: 1, 37 | }, 38 | ]; 39 | } 40 | 41 | export default invoicesColumns; -------------------------------------------------------------------------------- /src/constants/mockData.js: -------------------------------------------------------------------------------- 1 | import { tokens } from "../styles/theme"; 2 | 3 | export const mockDataTeam = [ 4 | { 5 | id: 1, 6 | name: "Jon Snow", 7 | email: "jonsnow@gmail.com", 8 | age: 35, 9 | phone: "(665)121-5454", 10 | access: "admin", 11 | }, 12 | { 13 | id: 2, 14 | name: "Cersei Lannister", 15 | email: "cerseilannister@gmail.com", 16 | age: 42, 17 | phone: "(421)314-2288", 18 | access: "manager", 19 | }, 20 | { 21 | id: 3, 22 | name: "Jaime Lannister", 23 | email: "jaimelannister@gmail.com", 24 | age: 45, 25 | phone: "(422)982-6739", 26 | access: "user", 27 | }, 28 | { 29 | id: 4, 30 | name: "Anya Stark", 31 | email: "anyastark@gmail.com", 32 | age: 16, 33 | phone: "(921)425-6742", 34 | access: "admin", 35 | }, 36 | { 37 | id: 5, 38 | name: "Daenerys Targaryen", 39 | email: "daenerystargaryen@gmail.com", 40 | age: 31, 41 | phone: "(421)445-1189", 42 | access: "user", 43 | }, 44 | { 45 | id: 6, 46 | name: "Ever Melisandre", 47 | email: "evermelisandre@gmail.com", 48 | age: 150, 49 | phone: "(232)545-6483", 50 | access: "manager", 51 | }, 52 | { 53 | id: 7, 54 | name: "Ferrara Clifford", 55 | email: "ferraraclifford@gmail.com", 56 | age: 44, 57 | phone: "(543)124-0123", 58 | access: "user", 59 | }, 60 | { 61 | id: 8, 62 | name: "Rossini Frances", 63 | email: "rossinifrances@gmail.com", 64 | age: 36, 65 | phone: "(222)444-5555", 66 | access: "user", 67 | }, 68 | { 69 | id: 9, 70 | name: "Harvey Roxie", 71 | email: "harveyroxie@gmail.com", 72 | age: 65, 73 | phone: "(444)555-6239", 74 | access: "admin", 75 | }, 76 | ]; 77 | 78 | export const mockDataContacts = [ 79 | { 80 | id: 1, 81 | name: "Jon Snow", 82 | email: "jonsnow@gmail.com", 83 | age: 35, 84 | phone: "(665)121-5454", 85 | address: "0912 Won Street, Alabama, SY 10001", 86 | city: "New York", 87 | zipCode: "10001", 88 | registrarId: 123512, 89 | }, 90 | { 91 | id: 2, 92 | name: "Cersei Lannister", 93 | email: "cerseilannister@gmail.com", 94 | age: 42, 95 | phone: "(421)314-2288", 96 | address: "1234 Main Street, New York, NY 10001", 97 | city: "New York", 98 | zipCode: "13151", 99 | registrarId: 123512, 100 | }, 101 | { 102 | id: 3, 103 | name: "Jaime Lannister", 104 | email: "jaimelannister@gmail.com", 105 | age: 45, 106 | phone: "(422)982-6739", 107 | address: "3333 Want Blvd, Estanza, NAY 42125", 108 | city: "New York", 109 | zipCode: "87281", 110 | registrarId: 4132513, 111 | }, 112 | { 113 | id: 4, 114 | name: "Anya Stark", 115 | email: "anyastark@gmail.com", 116 | age: 16, 117 | phone: "(921)425-6742", 118 | address: "1514 Main Street, New York, NY 22298", 119 | city: "New York", 120 | zipCode: "15551", 121 | registrarId: 123512, 122 | }, 123 | { 124 | id: 5, 125 | name: "Daenerys Targaryen", 126 | email: "daenerystargaryen@gmail.com", 127 | age: 31, 128 | phone: "(421)445-1189", 129 | address: "11122 Welping Ave, Tenting, CD 21321", 130 | city: "Tenting", 131 | zipCode: "14215", 132 | registrarId: 123512, 133 | }, 134 | { 135 | id: 6, 136 | name: "Ever Melisandre", 137 | email: "evermelisandre@gmail.com", 138 | age: 150, 139 | phone: "(232)545-6483", 140 | address: "1234 Canvile Street, Esvazark, NY 10001", 141 | city: "Esvazark", 142 | zipCode: "10001", 143 | registrarId: 123512, 144 | }, 145 | { 146 | id: 7, 147 | name: "Ferrara Clifford", 148 | email: "ferraraclifford@gmail.com", 149 | age: 44, 150 | phone: "(543)124-0123", 151 | address: "22215 Super Street, Everting, ZO 515234", 152 | city: "Evertin", 153 | zipCode: "51523", 154 | registrarId: 123512, 155 | }, 156 | { 157 | id: 8, 158 | name: "Rossini Frances", 159 | email: "rossinifrances@gmail.com", 160 | age: 36, 161 | phone: "(222)444-5555", 162 | address: "4123 Ever Blvd, Wentington, AD 142213", 163 | city: "Esteras", 164 | zipCode: "44215", 165 | registrarId: 512315, 166 | }, 167 | { 168 | id: 9, 169 | name: "Harvey Roxie", 170 | email: "harveyroxie@gmail.com", 171 | age: 65, 172 | phone: "(444)555-6239", 173 | address: "51234 Avery Street, Cantory, ND 212412", 174 | city: "Colunza", 175 | zipCode: "111234", 176 | registrarId: 928397, 177 | }, 178 | { 179 | id: 10, 180 | name: "Enteri Redack", 181 | email: "enteriredack@gmail.com", 182 | age: 42, 183 | phone: "(222)444-5555", 184 | address: "4123 Easer Blvd, Wentington, AD 142213", 185 | city: "Esteras", 186 | zipCode: "44215", 187 | registrarId: 533215, 188 | }, 189 | { 190 | id: 11, 191 | name: "Steve Goodman", 192 | email: "stevegoodmane@gmail.com", 193 | age: 11, 194 | phone: "(444)555-6239", 195 | address: "51234 Fiveton Street, CunFory, ND 212412", 196 | city: "Colunza", 197 | zipCode: "1234", 198 | registrarId: 92197, 199 | }, 200 | ]; 201 | 202 | export const mockDataInvoices = [ 203 | { 204 | id: 1, 205 | name: "Jon Snow", 206 | email: "jonsnow@gmail.com", 207 | cost: "21.24", 208 | phone: "(665)121-5454", 209 | date: "03/12/2022", 210 | }, 211 | { 212 | id: 2, 213 | name: "Cersei Lannister", 214 | email: "cerseilannister@gmail.com", 215 | cost: "1.24", 216 | phone: "(421)314-2288", 217 | date: "06/15/2021", 218 | }, 219 | { 220 | id: 3, 221 | name: "Jaime Lannister", 222 | email: "jaimelannister@gmail.com", 223 | cost: "11.24", 224 | phone: "(422)982-6739", 225 | date: "05/02/2022", 226 | }, 227 | { 228 | id: 4, 229 | name: "Anya Stark", 230 | email: "anyastark@gmail.com", 231 | cost: "80.55", 232 | phone: "(921)425-6742", 233 | date: "03/21/2022", 234 | }, 235 | { 236 | id: 5, 237 | name: "Daenerys Targaryen", 238 | email: "daenerystargaryen@gmail.com", 239 | cost: "1.24", 240 | phone: "(421)445-1189", 241 | date: "01/12/2021", 242 | }, 243 | { 244 | id: 6, 245 | name: "Ever Melisandre", 246 | email: "evermelisandre@gmail.com", 247 | cost: "63.12", 248 | phone: "(232)545-6483", 249 | date: "11/02/2022", 250 | }, 251 | { 252 | id: 7, 253 | name: "Ferrara Clifford", 254 | email: "ferraraclifford@gmail.com", 255 | cost: "52.42", 256 | phone: "(543)124-0123", 257 | date: "02/11/2022", 258 | }, 259 | { 260 | id: 8, 261 | name: "Rossini Frances", 262 | email: "rossinifrances@gmail.com", 263 | cost: "21.24", 264 | phone: "(222)444-5555", 265 | date: "05/02/2021", 266 | }, 267 | ]; 268 | 269 | export const mockTransactions = [ 270 | { 271 | txId: "01e4dsa", 272 | user: "johndoe", 273 | date: "2021-09-01", 274 | cost: "43.95", 275 | }, 276 | { 277 | txId: "0315dsaa", 278 | user: "jackdower", 279 | date: "2022-04-01", 280 | cost: "133.45", 281 | }, 282 | { 283 | txId: "01e4dsa", 284 | user: "aberdohnny", 285 | date: "2021-09-01", 286 | cost: "43.95", 287 | }, 288 | { 289 | txId: "51034szv", 290 | user: "goodmanave", 291 | date: "2022-11-05", 292 | cost: "200.95", 293 | }, 294 | { 295 | txId: "0a123sb", 296 | user: "stevebower", 297 | date: "2022-11-02", 298 | cost: "13.55", 299 | }, 300 | { 301 | txId: "01e4dsa", 302 | user: "aberdohnny", 303 | date: "2021-09-01", 304 | cost: "43.95", 305 | }, 306 | { 307 | txId: "120s51a", 308 | user: "wootzifer", 309 | date: "2019-04-15", 310 | cost: "24.20", 311 | }, 312 | { 313 | txId: "0315dsaa", 314 | user: "jackdower", 315 | date: "2022-04-01", 316 | cost: "133.45", 317 | }, 318 | ]; 319 | 320 | export const mockBarData = [ 321 | { 322 | country: "AD", 323 | "hot dog": 137, 324 | "hot dogColor": "hsl(229, 70%, 50%)", 325 | burger: 96, 326 | burgerColor: "hsl(296, 70%, 50%)", 327 | kebab: 72, 328 | kebabColor: "hsl(97, 70%, 50%)", 329 | donut: 140, 330 | donutColor: "hsl(340, 70%, 50%)", 331 | }, 332 | { 333 | country: "AE", 334 | "hot dog": 55, 335 | "hot dogColor": "hsl(307, 70%, 50%)", 336 | burger: 28, 337 | burgerColor: "hsl(111, 70%, 50%)", 338 | kebab: 58, 339 | kebabColor: "hsl(273, 70%, 50%)", 340 | donut: 29, 341 | donutColor: "hsl(275, 70%, 50%)", 342 | }, 343 | { 344 | country: "AF", 345 | "hot dog": 109, 346 | "hot dogColor": "hsl(72, 70%, 50%)", 347 | burger: 23, 348 | burgerColor: "hsl(96, 70%, 50%)", 349 | kebab: 34, 350 | kebabColor: "hsl(106, 70%, 50%)", 351 | donut: 152, 352 | donutColor: "hsl(256, 70%, 50%)", 353 | }, 354 | { 355 | country: "AG", 356 | "hot dog": 133, 357 | "hot dogColor": "hsl(257, 70%, 50%)", 358 | burger: 52, 359 | burgerColor: "hsl(326, 70%, 50%)", 360 | kebab: 43, 361 | kebabColor: "hsl(110, 70%, 50%)", 362 | donut: 83, 363 | donutColor: "hsl(9, 70%, 50%)", 364 | }, 365 | { 366 | country: "AI", 367 | "hot dog": 81, 368 | "hot dogColor": "hsl(190, 70%, 50%)", 369 | burger: 80, 370 | burgerColor: "hsl(325, 70%, 50%)", 371 | kebab: 112, 372 | kebabColor: "hsl(54, 70%, 50%)", 373 | donut: 35, 374 | donutColor: "hsl(285, 70%, 50%)", 375 | }, 376 | { 377 | country: "AL", 378 | "hot dog": 66, 379 | "hot dogColor": "hsl(208, 70%, 50%)", 380 | burger: 111, 381 | burgerColor: "hsl(334, 70%, 50%)", 382 | kebab: 167, 383 | kebabColor: "hsl(182, 70%, 50%)", 384 | donut: 18, 385 | donutColor: "hsl(76, 70%, 50%)", 386 | }, 387 | { 388 | country: "AM", 389 | "hot dog": 80, 390 | "hot dogColor": "hsl(87, 70%, 50%)", 391 | burger: 47, 392 | burgerColor: "hsl(141, 70%, 50%)", 393 | kebab: 158, 394 | kebabColor: "hsl(224, 70%, 50%)", 395 | donut: 49, 396 | donutColor: "hsl(274, 70%, 50%)", 397 | }, 398 | ]; 399 | 400 | export const mockPieData = [ 401 | { 402 | id: "hack", 403 | label: "hack", 404 | value: 239, 405 | color: "hsl(104, 70%, 50%)", 406 | }, 407 | { 408 | id: "make", 409 | label: "make", 410 | value: 170, 411 | color: "hsl(162, 70%, 50%)", 412 | }, 413 | { 414 | id: "go", 415 | label: "go", 416 | value: 322, 417 | color: "hsl(291, 70%, 50%)", 418 | }, 419 | { 420 | id: "lisp", 421 | label: "lisp", 422 | value: 503, 423 | color: "hsl(229, 70%, 50%)", 424 | }, 425 | { 426 | id: "scala", 427 | label: "scala", 428 | value: 584, 429 | color: "hsl(344, 70%, 50%)", 430 | }, 431 | ]; 432 | 433 | export const mockLineData = [ 434 | { 435 | id: "japan", 436 | color: tokens("dark").greenAccent[500], 437 | data: [ 438 | { 439 | x: "plane", 440 | y: 101, 441 | }, 442 | { 443 | x: "helicopter", 444 | y: 75, 445 | }, 446 | { 447 | x: "boat", 448 | y: 36, 449 | }, 450 | { 451 | x: "train", 452 | y: 216, 453 | }, 454 | { 455 | x: "subway", 456 | y: 35, 457 | }, 458 | { 459 | x: "bus", 460 | y: 236, 461 | }, 462 | { 463 | x: "car", 464 | y: 88, 465 | }, 466 | { 467 | x: "moto", 468 | y: 232, 469 | }, 470 | { 471 | x: "bicycle", 472 | y: 281, 473 | }, 474 | { 475 | x: "horse", 476 | y: 1, 477 | }, 478 | { 479 | x: "skateboard", 480 | y: 35, 481 | }, 482 | { 483 | x: "others", 484 | y: 14, 485 | }, 486 | ], 487 | }, 488 | { 489 | id: "france", 490 | color: tokens("dark").blueAccent[300], 491 | data: [ 492 | { 493 | x: "plane", 494 | y: 212, 495 | }, 496 | { 497 | x: "helicopter", 498 | y: 190, 499 | }, 500 | { 501 | x: "boat", 502 | y: 270, 503 | }, 504 | { 505 | x: "train", 506 | y: 9, 507 | }, 508 | { 509 | x: "subway", 510 | y: 75, 511 | }, 512 | { 513 | x: "bus", 514 | y: 175, 515 | }, 516 | { 517 | x: "car", 518 | y: 33, 519 | }, 520 | { 521 | x: "moto", 522 | y: 189, 523 | }, 524 | { 525 | x: "bicycle", 526 | y: 97, 527 | }, 528 | { 529 | x: "horse", 530 | y: 87, 531 | }, 532 | { 533 | x: "skateboard", 534 | y: 299, 535 | }, 536 | { 537 | x: "others", 538 | y: 251, 539 | }, 540 | ], 541 | }, 542 | { 543 | id: "us", 544 | color: tokens("dark").redAccent[200], 545 | data: [ 546 | { 547 | x: "plane", 548 | y: 191, 549 | }, 550 | { 551 | x: "helicopter", 552 | y: 136, 553 | }, 554 | { 555 | x: "boat", 556 | y: 91, 557 | }, 558 | { 559 | x: "train", 560 | y: 190, 561 | }, 562 | { 563 | x: "subway", 564 | y: 211, 565 | }, 566 | { 567 | x: "bus", 568 | y: 152, 569 | }, 570 | { 571 | x: "car", 572 | y: 189, 573 | }, 574 | { 575 | x: "moto", 576 | y: 152, 577 | }, 578 | { 579 | x: "bicycle", 580 | y: 8, 581 | }, 582 | { 583 | x: "horse", 584 | y: 197, 585 | }, 586 | { 587 | x: "skateboard", 588 | y: 107, 589 | }, 590 | { 591 | x: "others", 592 | y: 170, 593 | }, 594 | ], 595 | }, 596 | ]; 597 | 598 | export const mockGeographyData = [ 599 | { 600 | id: "AFG", 601 | value: 520600, 602 | }, 603 | { 604 | id: "AGO", 605 | value: 949905, 606 | }, 607 | { 608 | id: "ALB", 609 | value: 329910, 610 | }, 611 | { 612 | id: "ARE", 613 | value: 675484, 614 | }, 615 | { 616 | id: "ARG", 617 | value: 432239, 618 | }, 619 | { 620 | id: "ARM", 621 | value: 288305, 622 | }, 623 | { 624 | id: "ATA", 625 | value: 415648, 626 | }, 627 | { 628 | id: "ATF", 629 | value: 665159, 630 | }, 631 | { 632 | id: "AUT", 633 | value: 798526, 634 | }, 635 | { 636 | id: "AZE", 637 | value: 481678, 638 | }, 639 | { 640 | id: "BDI", 641 | value: 496457, 642 | }, 643 | { 644 | id: "BEL", 645 | value: 252276, 646 | }, 647 | { 648 | id: "BEN", 649 | value: 440315, 650 | }, 651 | { 652 | id: "BFA", 653 | value: 343752, 654 | }, 655 | { 656 | id: "BGD", 657 | value: 920203, 658 | }, 659 | { 660 | id: "BGR", 661 | value: 261196, 662 | }, 663 | { 664 | id: "BHS", 665 | value: 421551, 666 | }, 667 | { 668 | id: "BIH", 669 | value: 974745, 670 | }, 671 | { 672 | id: "BLR", 673 | value: 349288, 674 | }, 675 | { 676 | id: "BLZ", 677 | value: 305983, 678 | }, 679 | { 680 | id: "BOL", 681 | value: 430840, 682 | }, 683 | { 684 | id: "BRN", 685 | value: 345666, 686 | }, 687 | { 688 | id: "BTN", 689 | value: 649678, 690 | }, 691 | { 692 | id: "BWA", 693 | value: 319392, 694 | }, 695 | { 696 | id: "CAF", 697 | value: 722549, 698 | }, 699 | { 700 | id: "CAN", 701 | value: 332843, 702 | }, 703 | { 704 | id: "CHE", 705 | value: 122159, 706 | }, 707 | { 708 | id: "CHL", 709 | value: 811736, 710 | }, 711 | { 712 | id: "CHN", 713 | value: 593604, 714 | }, 715 | { 716 | id: "CIV", 717 | value: 143219, 718 | }, 719 | { 720 | id: "CMR", 721 | value: 630627, 722 | }, 723 | { 724 | id: "COG", 725 | value: 498556, 726 | }, 727 | { 728 | id: "COL", 729 | value: 660527, 730 | }, 731 | { 732 | id: "CRI", 733 | value: 60262, 734 | }, 735 | { 736 | id: "CUB", 737 | value: 177870, 738 | }, 739 | { 740 | id: "-99", 741 | value: 463208, 742 | }, 743 | { 744 | id: "CYP", 745 | value: 945909, 746 | }, 747 | { 748 | id: "CZE", 749 | value: 500109, 750 | }, 751 | { 752 | id: "DEU", 753 | value: 63345, 754 | }, 755 | { 756 | id: "DJI", 757 | value: 634523, 758 | }, 759 | { 760 | id: "DNK", 761 | value: 731068, 762 | }, 763 | { 764 | id: "DOM", 765 | value: 262538, 766 | }, 767 | { 768 | id: "DZA", 769 | value: 760695, 770 | }, 771 | { 772 | id: "ECU", 773 | value: 301263, 774 | }, 775 | { 776 | id: "EGY", 777 | value: 148475, 778 | }, 779 | { 780 | id: "ERI", 781 | value: 939504, 782 | }, 783 | { 784 | id: "ESP", 785 | value: 706050, 786 | }, 787 | { 788 | id: "EST", 789 | value: 977015, 790 | }, 791 | { 792 | id: "ETH", 793 | value: 461734, 794 | }, 795 | { 796 | id: "FIN", 797 | value: 22800, 798 | }, 799 | { 800 | id: "FJI", 801 | value: 18985, 802 | }, 803 | { 804 | id: "FLK", 805 | value: 64986, 806 | }, 807 | { 808 | id: "FRA", 809 | value: 447457, 810 | }, 811 | { 812 | id: "GAB", 813 | value: 669675, 814 | }, 815 | { 816 | id: "GBR", 817 | value: 757120, 818 | }, 819 | { 820 | id: "GEO", 821 | value: 158702, 822 | }, 823 | { 824 | id: "GHA", 825 | value: 893180, 826 | }, 827 | { 828 | id: "GIN", 829 | value: 877288, 830 | }, 831 | { 832 | id: "GMB", 833 | value: 724530, 834 | }, 835 | { 836 | id: "GNB", 837 | value: 387753, 838 | }, 839 | { 840 | id: "GNQ", 841 | value: 706118, 842 | }, 843 | { 844 | id: "GRC", 845 | value: 377796, 846 | }, 847 | { 848 | id: "GTM", 849 | value: 66890, 850 | }, 851 | { 852 | id: "GUY", 853 | value: 719300, 854 | }, 855 | { 856 | id: "HND", 857 | value: 739590, 858 | }, 859 | { 860 | id: "HRV", 861 | value: 929467, 862 | }, 863 | { 864 | id: "HTI", 865 | value: 538961, 866 | }, 867 | { 868 | id: "HUN", 869 | value: 146095, 870 | }, 871 | { 872 | id: "IDN", 873 | value: 490681, 874 | }, 875 | { 876 | id: "IND", 877 | value: 549818, 878 | }, 879 | { 880 | id: "IRL", 881 | value: 630163, 882 | }, 883 | { 884 | id: "IRN", 885 | value: 596921, 886 | }, 887 | { 888 | id: "IRQ", 889 | value: 767023, 890 | }, 891 | { 892 | id: "ISL", 893 | value: 478682, 894 | }, 895 | { 896 | id: "ISR", 897 | value: 963688, 898 | }, 899 | { 900 | id: "ITA", 901 | value: 393089, 902 | }, 903 | { 904 | id: "JAM", 905 | value: 83173, 906 | }, 907 | { 908 | id: "JOR", 909 | value: 52005, 910 | }, 911 | { 912 | id: "JPN", 913 | value: 199174, 914 | }, 915 | { 916 | id: "KAZ", 917 | value: 181424, 918 | }, 919 | { 920 | id: "KEN", 921 | value: 60946, 922 | }, 923 | { 924 | id: "KGZ", 925 | value: 432478, 926 | }, 927 | { 928 | id: "KHM", 929 | value: 254461, 930 | }, 931 | { 932 | id: "OSA", 933 | value: 942447, 934 | }, 935 | { 936 | id: "KWT", 937 | value: 414413, 938 | }, 939 | { 940 | id: "LAO", 941 | value: 448339, 942 | }, 943 | { 944 | id: "LBN", 945 | value: 620090, 946 | }, 947 | { 948 | id: "LBR", 949 | value: 435950, 950 | }, 951 | { 952 | id: "LBY", 953 | value: 75091, 954 | }, 955 | { 956 | id: "LKA", 957 | value: 595124, 958 | }, 959 | { 960 | id: "LSO", 961 | value: 483524, 962 | }, 963 | { 964 | id: "LTU", 965 | value: 867357, 966 | }, 967 | { 968 | id: "LUX", 969 | value: 689172, 970 | }, 971 | { 972 | id: "LVA", 973 | value: 742980, 974 | }, 975 | { 976 | id: "MAR", 977 | value: 236538, 978 | }, 979 | { 980 | id: "MDA", 981 | value: 926836, 982 | }, 983 | { 984 | id: "MDG", 985 | value: 840840, 986 | }, 987 | { 988 | id: "MEX", 989 | value: 353910, 990 | }, 991 | { 992 | id: "MKD", 993 | value: 505842, 994 | }, 995 | { 996 | id: "MLI", 997 | value: 286082, 998 | }, 999 | { 1000 | id: "MMR", 1001 | value: 915544, 1002 | }, 1003 | { 1004 | id: "MNE", 1005 | value: 609500, 1006 | }, 1007 | { 1008 | id: "MNG", 1009 | value: 410428, 1010 | }, 1011 | { 1012 | id: "MOZ", 1013 | value: 32868, 1014 | }, 1015 | { 1016 | id: "MRT", 1017 | value: 375671, 1018 | }, 1019 | { 1020 | id: "MWI", 1021 | value: 591935, 1022 | }, 1023 | { 1024 | id: "MYS", 1025 | value: 991644, 1026 | }, 1027 | { 1028 | id: "NAM", 1029 | value: 701897, 1030 | }, 1031 | { 1032 | id: "NCL", 1033 | value: 144098, 1034 | }, 1035 | { 1036 | id: "NER", 1037 | value: 312944, 1038 | }, 1039 | { 1040 | id: "NGA", 1041 | value: 862877, 1042 | }, 1043 | { 1044 | id: "NIC", 1045 | value: 90831, 1046 | }, 1047 | { 1048 | id: "NLD", 1049 | value: 281879, 1050 | }, 1051 | { 1052 | id: "NOR", 1053 | value: 224537, 1054 | }, 1055 | { 1056 | id: "NPL", 1057 | value: 322331, 1058 | }, 1059 | { 1060 | id: "NZL", 1061 | value: 86615, 1062 | }, 1063 | { 1064 | id: "OMN", 1065 | value: 707881, 1066 | }, 1067 | { 1068 | id: "PAK", 1069 | value: 158577, 1070 | }, 1071 | { 1072 | id: "PAN", 1073 | value: 738579, 1074 | }, 1075 | { 1076 | id: "PER", 1077 | value: 248751, 1078 | }, 1079 | { 1080 | id: "PHL", 1081 | value: 557292, 1082 | }, 1083 | { 1084 | id: "PNG", 1085 | value: 516874, 1086 | }, 1087 | { 1088 | id: "POL", 1089 | value: 682137, 1090 | }, 1091 | { 1092 | id: "PRI", 1093 | value: 957399, 1094 | }, 1095 | { 1096 | id: "PRT", 1097 | value: 846430, 1098 | }, 1099 | { 1100 | id: "PRY", 1101 | value: 720555, 1102 | }, 1103 | { 1104 | id: "QAT", 1105 | value: 478726, 1106 | }, 1107 | { 1108 | id: "ROU", 1109 | value: 259318, 1110 | }, 1111 | { 1112 | id: "RUS", 1113 | value: 268735, 1114 | }, 1115 | { 1116 | id: "RWA", 1117 | value: 136781, 1118 | }, 1119 | { 1120 | id: "ESH", 1121 | value: 151957, 1122 | }, 1123 | { 1124 | id: "SAU", 1125 | value: 111821, 1126 | }, 1127 | { 1128 | id: "SDN", 1129 | value: 927112, 1130 | }, 1131 | { 1132 | id: "SDS", 1133 | value: 966473, 1134 | }, 1135 | { 1136 | id: "SEN", 1137 | value: 158085, 1138 | }, 1139 | { 1140 | id: "SLB", 1141 | value: 178389, 1142 | }, 1143 | { 1144 | id: "SLE", 1145 | value: 528433, 1146 | }, 1147 | { 1148 | id: "SLV", 1149 | value: 353467, 1150 | }, 1151 | { 1152 | id: "ABV", 1153 | value: 251, 1154 | }, 1155 | { 1156 | id: "SOM", 1157 | value: 445243, 1158 | }, 1159 | { 1160 | id: "SRB", 1161 | value: 202402, 1162 | }, 1163 | { 1164 | id: "SUR", 1165 | value: 972121, 1166 | }, 1167 | { 1168 | id: "SVK", 1169 | value: 319923, 1170 | }, 1171 | { 1172 | id: "SVN", 1173 | value: 728766, 1174 | }, 1175 | { 1176 | id: "SWZ", 1177 | value: 379669, 1178 | }, 1179 | { 1180 | id: "SYR", 1181 | value: 16221, 1182 | }, 1183 | { 1184 | id: "TCD", 1185 | value: 101273, 1186 | }, 1187 | { 1188 | id: "TGO", 1189 | value: 498411, 1190 | }, 1191 | { 1192 | id: "THA", 1193 | value: 506906, 1194 | }, 1195 | { 1196 | id: "TJK", 1197 | value: 613093, 1198 | }, 1199 | { 1200 | id: "TKM", 1201 | value: 327016, 1202 | }, 1203 | { 1204 | id: "TLS", 1205 | value: 607972, 1206 | }, 1207 | { 1208 | id: "TTO", 1209 | value: 936365, 1210 | }, 1211 | { 1212 | id: "TUN", 1213 | value: 898416, 1214 | }, 1215 | { 1216 | id: "TUR", 1217 | value: 237783, 1218 | }, 1219 | { 1220 | id: "TWN", 1221 | value: 878213, 1222 | }, 1223 | { 1224 | id: "TZA", 1225 | value: 442174, 1226 | }, 1227 | { 1228 | id: "UGA", 1229 | value: 720710, 1230 | }, 1231 | { 1232 | id: "UKR", 1233 | value: 74172, 1234 | }, 1235 | { 1236 | id: "URY", 1237 | value: 753177, 1238 | }, 1239 | { 1240 | id: "USA", 1241 | value: 658725, 1242 | }, 1243 | { 1244 | id: "UZB", 1245 | value: 550313, 1246 | }, 1247 | { 1248 | id: "VEN", 1249 | value: 707492, 1250 | }, 1251 | { 1252 | id: "VNM", 1253 | value: 538907, 1254 | }, 1255 | { 1256 | id: "VUT", 1257 | value: 650646, 1258 | }, 1259 | { 1260 | id: "PSE", 1261 | value: 476078, 1262 | }, 1263 | { 1264 | id: "YEM", 1265 | value: 957751, 1266 | }, 1267 | { 1268 | id: "ZAF", 1269 | value: 836949, 1270 | }, 1271 | { 1272 | id: "ZMB", 1273 | value: 714503, 1274 | }, 1275 | { 1276 | id: "ZWE", 1277 | value: 405217, 1278 | }, 1279 | { 1280 | id: "KOR", 1281 | value: 171135, 1282 | }, 1283 | ]; -------------------------------------------------------------------------------- /src/constants/sidebarMenu.js: -------------------------------------------------------------------------------- 1 | import PieChartOutlineOutlinedIcon from "@mui/icons-material/PieChartOutlineOutlined"; 2 | import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined"; 3 | import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined"; 4 | import BarChartOutlinedIcon from "@mui/icons-material/BarChartOutlined"; 5 | import TimelineOutlinedIcon from "@mui/icons-material/TimelineOutlined"; 6 | import ContactsOutlinedIcon from "@mui/icons-material/ContactsOutlined"; 7 | import ReceiptOutlinedIcon from "@mui/icons-material/ReceiptOutlined"; 8 | import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined"; 9 | import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined"; 10 | import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined"; 11 | import MapOutlinedIcon from "@mui/icons-material/MapOutlined"; 12 | 13 | export const sidebarMenu = [ 14 | { 15 | title: 'Dashboard', 16 | icon: HomeOutlinedIcon, 17 | path: '/', 18 | }, 19 | { 20 | title: 'Info', 21 | tag: 'divider' 22 | }, 23 | { 24 | title: 'Manage Team', 25 | icon: PeopleOutlinedIcon, 26 | path: '/team', 27 | }, 28 | { 29 | title: 'Contacts Information', 30 | icon: ContactsOutlinedIcon, 31 | path: '/contacts', 32 | }, 33 | { 34 | title: 'Invoices Balances', 35 | icon: ReceiptOutlinedIcon, 36 | path: '/invoices', 37 | }, 38 | { 39 | title: 'Inputs', 40 | tag: 'divider' 41 | }, 42 | { 43 | title: 'Profile Form', 44 | icon: PersonOutlinedIcon, 45 | path: '/form', 46 | }, 47 | { 48 | title: 'Calendar', 49 | icon: CalendarTodayOutlinedIcon, 50 | path: '/calendar', 51 | }, 52 | { 53 | title: 'FAQ Page', 54 | icon: HelpOutlineOutlinedIcon, 55 | path: '/faq', 56 | }, 57 | { 58 | title: 'Charts', 59 | tag: 'divider' 60 | }, 61 | { 62 | title: 'Bar Chart', 63 | icon: BarChartOutlinedIcon, 64 | path: '/bar', 65 | }, 66 | { 67 | title: 'Pie Chart', 68 | icon: PieChartOutlineOutlinedIcon, 69 | path: '/pie', 70 | }, 71 | { 72 | title: 'Line Chart', 73 | icon: TimelineOutlinedIcon, 74 | path: '/line', 75 | }, 76 | { 77 | title: 'Geography Chart', 78 | icon: MapOutlinedIcon, 79 | path: '/geography', 80 | }, 81 | ] -------------------------------------------------------------------------------- /src/constants/teamColumns.js: -------------------------------------------------------------------------------- 1 | import AdminPanelSettingsOutlinedIcon from "@mui/icons-material/AdminPanelSettingsOutlined"; 2 | import LockOpenOutlinedIcon from "@mui/icons-material/LockOpenOutlined"; 3 | import SecurityOutlinedIcon from "@mui/icons-material/SecurityOutlined"; 4 | import { Box, Typography } from "@mui/material"; 5 | 6 | const teamColumns = (colors) => { 7 | 8 | return [ 9 | { field: "id", headerName: "ID" }, 10 | { 11 | field: "name", 12 | headerName: "Name", 13 | flex: 1, 14 | cellClassName: "name-column--cell", 15 | }, 16 | { 17 | field: "age", 18 | headerName: "Age", 19 | type: "number", 20 | headerAlign: "left", 21 | align: "left", 22 | }, 23 | { 24 | field: "phone", 25 | headerName: "Phone Number", 26 | flex: 1, 27 | }, 28 | { 29 | field: "email", 30 | headerName: "Email", 31 | flex: 1, 32 | }, 33 | { 34 | field: "accessLevel", 35 | headerName: "Access Level", 36 | flex: 1, 37 | renderCell: ({ row: { access } }) => { 38 | return ( 39 | 54 | {access === "admin" && } 55 | {access === "manager" && } 56 | {access === "user" && } 57 | 58 | {access} 59 | 60 | 61 | ); 62 | }, 63 | }, 64 | ]; 65 | } 66 | 67 | export default teamColumns; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client' 2 | import React from 'react' 3 | import App from './App' 4 | import './styles/index.css' 5 | 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); -------------------------------------------------------------------------------- /src/pages/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import { Header, GeographyChart, ProgressCircle, LineChart, BarChart, StatBox } from "../components"; 2 | import { Box, Button, IconButton, Typography, useTheme } from "@mui/material"; 3 | import { mockTransactions } from "../constants/mockData"; 4 | import { tokens } from "../styles/theme"; 5 | import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined"; 6 | import PointOfSaleIcon from "@mui/icons-material/PointOfSale"; 7 | import PersonAddIcon from "@mui/icons-material/PersonAdd"; 8 | import TrafficIcon from "@mui/icons-material/Traffic"; 9 | import EmailIcon from "@mui/icons-material/Email"; 10 | 11 | 12 | const Dashboard = () => { 13 | 14 | const theme = useTheme(); 15 | const colors = tokens(theme.palette.mode); 16 | 17 | return ( 18 | 19 | 20 | {/* HEADER */} 21 | 22 | 23 |
24 | 25 | 26 | 38 | 39 | 40 | 41 | 42 | {/* GRID & CHARTS */} 43 | 49 | {/* 🟨🟨🟨🟨🟨🟨 ROW 1 🟨🟨🟨🟨🟨🟨 */} 50 | 57 | 66 | } 67 | /> 68 | 69 | 70 | 77 | 86 | } 87 | /> 88 | 89 | 90 | 97 | 106 | } 107 | /> 108 | 109 | 110 | 117 | 126 | } 127 | /> 128 | 129 | 130 | {/* 🟨🟨🟨🟨🟨🟨 ROW 2 🟨🟨🟨🟨🟨🟨 */} 131 | 136 | 143 | 144 | 149 | Revenue Generated 150 | 151 | 156 | $59,342.32 157 | 158 | 159 | 160 | 161 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 178 | 186 | 187 | Recent Transactions 188 | 189 | 190 | {mockTransactions.map((transaction, i) => ( 191 | 199 | 200 | 205 | {transaction.txId} 206 | 207 | 208 | {transaction.user} 209 | 210 | 211 | {transaction.date} 212 | 217 | ${transaction.cost} 218 | 219 | 220 | ))} 221 | 222 | 223 | {/* 🟨🟨🟨🟨🟨🟨 ROW 3 🟨🟨🟨🟨🟨🟨 */} 224 | 230 | 231 | Campaign 232 | 233 | 239 | 240 | 245 | $48,352 revenue generated 246 | 247 | Includes extra misc expenditures and costs 248 | 249 | 250 | 251 | 256 | 261 | Sales Quantity 262 | 263 | 264 | 265 | 266 | 267 | 268 | 274 | 279 | Geography Based Traffic 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | ); 289 | }; 290 | 291 | export default Dashboard; -------------------------------------------------------------------------------- /src/pages/charts/Bar.jsx: -------------------------------------------------------------------------------- 1 | import { BarChart, Header } from "../../components"; 2 | import { Box } from "@mui/material"; 3 | 4 | 5 | const Bar = () => { 6 | 7 | return ( 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default Bar; -------------------------------------------------------------------------------- /src/pages/charts/Geography.jsx: -------------------------------------------------------------------------------- 1 | import { GeographyChart, Header } from "../../components"; 2 | import { Box, useTheme } from "@mui/material"; 3 | import { tokens } from "../../styles/theme"; 4 | 5 | const Geography = () => { 6 | 7 | const theme = useTheme(); 8 | const colors = tokens(theme.palette.mode); 9 | 10 | return ( 11 | 12 | 13 |
14 | 15 | 20 | 21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | export default Geography; -------------------------------------------------------------------------------- /src/pages/charts/Line.jsx: -------------------------------------------------------------------------------- 1 | import { LineChart, Header } from "../../components"; 2 | import { Box } from "@mui/material"; 3 | 4 | const Line = () => { 5 | 6 | return ( 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default Line; -------------------------------------------------------------------------------- /src/pages/charts/Pie.jsx: -------------------------------------------------------------------------------- 1 | import { PieChart, Header } from "../../components"; 2 | import { Box } from "@mui/material"; 3 | 4 | 5 | const Pie = () => { 6 | 7 | return ( 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default Pie; -------------------------------------------------------------------------------- /src/pages/global/SidebarMenu.jsx: -------------------------------------------------------------------------------- 1 | import { Box, IconButton, Typography, useTheme } from "@mui/material"; 2 | import { ProSidebar, Menu, MenuItem } from "react-pro-sidebar"; 3 | import { sidebarMenu } from '../../constants/sidebarMenu'; 4 | import { useLocation } from "react-router-dom"; 5 | import { tokens } from "../../styles/theme"; 6 | import { useState } from "react"; 7 | import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined"; 8 | import SidebarMenuItem from "./SidebarMenuItem"; 9 | import "react-pro-sidebar/dist/css/styles.css"; 10 | 11 | 12 | const SidebarMenu = () => { 13 | 14 | const location = useLocation(); 15 | const urlPathName = location.pathname; 16 | 17 | const theme = useTheme(); 18 | const colors = tokens(theme.palette.mode); 19 | const [selected, setSelected] = useState(urlPathName); 20 | const [isCollapsed, setIsCollapsed] = useState(false); 21 | 22 | return ( 23 | 42 | 43 | 44 | 45 | 46 | {/* LOGO AND MENU ICON */} 47 | {/* 🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧 */} 48 | setIsCollapsed(!isCollapsed)} 50 | icon={isCollapsed ? : undefined} 51 | style={{ 52 | margin: "10px 0 20px 0", 53 | color: colors.grey[100], 54 | }} 55 | > 56 | { 57 | !isCollapsed && ( 58 | 64 | 65 | ADMIN 66 | 67 | setIsCollapsed(!isCollapsed)}> 68 | 69 | 70 | 71 | ) 72 | } 73 | 74 | 75 | {/* 🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧 */} 76 | { 77 | !isCollapsed && ( 78 | 79 | 80 | 81 | profile-user 88 | 89 | 90 | 91 | 97 | Alex 98 | 99 | 100 | Main Admin 101 | 102 | 103 | 104 | 105 | ) 106 | } 107 | 108 | {/* 🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧 */} 109 | 110 | { 111 | sidebarMenu.map(menu => 112 | menu.tag === 'divider' 113 | ? 114 | 120 | {menu.title} 121 | 122 | : 123 | 129 | ) 130 | } 131 | 132 | 133 | 134 | 135 | 136 | 137 | ); 138 | }; 139 | 140 | export default SidebarMenu; -------------------------------------------------------------------------------- /src/pages/global/SidebarMenuItem.jsx: -------------------------------------------------------------------------------- 1 | import { Typography, useTheme } from "@mui/material"; 2 | import { MenuItem } from "react-pro-sidebar"; 3 | import { tokens } from "../../styles/theme"; 4 | import { Link } from "react-router-dom"; 5 | 6 | 7 | const SidebarMenuItem = ({ menu, selected, setSelected }) => { 8 | 9 | const themes = useTheme(); 10 | const color = tokens(themes.palette.mode); 11 | 12 | return ( 13 | } 15 | active={selected === menu.path} 16 | onClick={() => setSelected(menu.path)} 17 | style={{ color: color.primary[100] }} 18 | > 19 | {menu.title} 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default SidebarMenuItem -------------------------------------------------------------------------------- /src/pages/global/Topbar.jsx: -------------------------------------------------------------------------------- 1 | import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined"; 2 | import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined"; 3 | import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined"; 4 | import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; 5 | import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined"; 6 | import SearchIcon from "@mui/icons-material/Search"; 7 | import InputBase from "@mui/material/InputBase"; 8 | import { ColorModeContext, tokens } from "../../styles/theme"; 9 | import { Box, IconButton, useTheme } from "@mui/material"; 10 | import { useContext } from "react"; 11 | 12 | 13 | const Topbar = () => { 14 | 15 | const theme = useTheme(); 16 | const colors = tokens(theme.palette.mode); 17 | const colorMode = useContext(ColorModeContext); 18 | 19 | return ( 20 | 21 | 22 | {/* 🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧 SEARCH BAR 🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧 */} 23 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | {/* 🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧 ICONS 🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧 */} 37 | 38 | 39 | 40 | { 41 | // by user click toggle UI theme color... 42 | theme.palette.mode === "dark" ? ( 43 | 44 | ) : ( 45 | 46 | ) 47 | } 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | ) 66 | } 67 | 68 | export default Topbar -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | export { default as SidebarMenu } from './global/SidebarMenu'; 2 | export { default as Topbar } from './global/Topbar'; 3 | 4 | export { default as Invoices } from './info/Invoices'; 5 | export { default as Contacts } from './info/Contacts'; 6 | export { default as Team } from './info/Team'; 7 | 8 | export { default as InputForm } from './inputs/InputForm'; 9 | export { default as Calendars } from './inputs/Calendars'; 10 | export { default as FAQ } from './inputs/FAQ'; 11 | 12 | export { default as Geography } from './charts/Geography'; 13 | export { default as Line } from './charts/Line'; 14 | export { default as Bar } from './charts/Bar'; 15 | export { default as Pie } from './charts/Pie'; 16 | 17 | export { default as Dashboard } from './Dashboard'; -------------------------------------------------------------------------------- /src/pages/info/Contacts.jsx: -------------------------------------------------------------------------------- 1 | import { DataGrid, GridToolbar } from "@mui/x-data-grid"; 2 | import { mockDataContacts } from "../../constants/mockData"; 3 | import { useTheme } from "@mui/material"; 4 | import { tokens } from "../../styles/theme"; 5 | import { Header } from "../../components"; 6 | import { Box } from "@mui/material"; 7 | import contactsColumns from "../../constants/contactsColumns"; 8 | 9 | 10 | const Contacts = () => { 11 | 12 | const theme = useTheme(); 13 | const colors = tokens(theme.palette.mode); 14 | 15 | 16 | // row - columns --> data display... 17 | return ( 18 | 19 | 20 |
21 | 22 | 56 | 57 | 62 | 63 | 64 | 65 | ); 66 | }; 67 | 68 | export default Contacts; -------------------------------------------------------------------------------- /src/pages/info/Invoices.jsx: -------------------------------------------------------------------------------- 1 | import { mockDataInvoices } from "../../constants/mockData"; 2 | import { Box, useTheme } from "@mui/material"; 3 | import { DataGrid } from "@mui/x-data-grid"; 4 | import { tokens } from "../../styles/theme"; 5 | import { Header } from "../../components"; 6 | import invoicesColumns from "../../constants/invoicesColumns"; 7 | 8 | 9 | const Invoices = () => { 10 | 11 | const theme = useTheme(); 12 | const colors = tokens(theme.palette.mode); 13 | 14 | 15 | // row - columns --> data display... 16 | return ( 17 | 18 | 19 |
20 | 21 | 51 | 52 | 57 | 58 | 59 | 60 | ); 61 | }; 62 | 63 | export default Invoices; -------------------------------------------------------------------------------- /src/pages/info/Team.jsx: -------------------------------------------------------------------------------- 1 | import { mockDataTeam } from "../../constants/mockData"; 2 | import { Box, useTheme } from "@mui/material"; 3 | import { DataGrid } from "@mui/x-data-grid"; 4 | import { tokens } from "../../styles/theme"; 5 | import { Header } from "../../components"; 6 | import teamColumns from "../../constants/teamColumns"; 7 | 8 | 9 | const Team = () => { 10 | 11 | const theme = useTheme(); 12 | const colors = tokens(theme.palette.mode); 13 | 14 | 15 | // row - columns --> data display... 16 | return ( 17 | 18 | 19 |
20 | 21 | 51 | 52 | 57 | 58 | 59 | 60 | ); 61 | }; 62 | 63 | export default Team; -------------------------------------------------------------------------------- /src/pages/inputs/Calendars.jsx: -------------------------------------------------------------------------------- 1 | import FullCalendar, { formatDate } from '@fullcalendar/react'; // calender component 2 | import dayGridPlugin from '@fullcalendar/daygrid'; // plugins... 3 | import timeGridPlugin from '@fullcalendar/timegrid'; // plugins... 4 | import interactionPlugin from '@fullcalendar/interaction'; // plugins... 5 | import listPlugin from "@fullcalendar/list"; // plugins... 6 | import { Box, List, ListItem, ListItemText, Typography, useTheme } from "@mui/material"; 7 | import { tokens } from "../../styles/theme"; 8 | import { Header } from "../../components"; 9 | import { useState } from "react"; 10 | 11 | 12 | const Calendars = () => { 13 | 14 | const theme = useTheme(); 15 | const colors = tokens(theme.palette.mode); 16 | const [currentEvents, setCurrentEvents] = useState([]); 17 | 18 | 19 | const handleDateClick = (selected) => { 20 | const title = prompt("Please enter a new title for your event"); 21 | const calendarApi = selected.view.calendar; 22 | calendarApi.unselect(); 23 | 24 | if (title) { 25 | calendarApi.addEvent({ 26 | id: `${selected.dateStr}-${title}`, 27 | title, 28 | start: selected.startStr, 29 | end: selected.endStr, 30 | allDay: selected.allDay, 31 | }); 32 | } 33 | }; 34 | 35 | const handleEventClick = (selected) => { 36 | if ( 37 | window.confirm( 38 | `Are you sure you want to delete the event '${selected.event.title}'` 39 | ) 40 | ) { 41 | selected.event.remove(); 42 | } 43 | }; 44 | 45 | return ( 46 | 47 | 48 |
49 | 50 | 51 | 52 | {/* CALENDAR SIDEBAR */} 53 | 59 | Events 60 | 61 | 62 | { 63 | currentEvents.map((event) => ( 64 | 72 | 76 | {formatDate(event.start, { 77 | year: "numeric", 78 | month: "short", 79 | day: "numeric", 80 | })} 81 | 82 | } 83 | /> 84 | 85 | )) 86 | } 87 | 88 | 89 | 90 | 91 | {/* 📆📅📆📅📆📅📆📅📆📅📆📅 CALENDAR 📆📅📆📅📆📅📆📅📆📅📆📅 */} 92 | 93 | 94 | setCurrentEvents(events)} 104 | plugins={[ 105 | dayGridPlugin, 106 | timeGridPlugin, 107 | interactionPlugin, 108 | listPlugin, 109 | ]} 110 | initialEvents={[ 111 | { 112 | id: "12315", 113 | title: "All-day event", 114 | date: "2022-09-14", 115 | }, 116 | { 117 | id: "5123", 118 | title: "Timed event", 119 | date: "2022-09-28", 120 | }, 121 | ]} 122 | headerToolbar={{ 123 | left: "prev,next today", 124 | center: "title", 125 | right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth", 126 | }} 127 | /> 128 | 129 | 130 | 131 | 132 | 133 | ); 134 | }; 135 | 136 | export default Calendars; -------------------------------------------------------------------------------- /src/pages/inputs/FAQ.jsx: -------------------------------------------------------------------------------- 1 | import AccordionSummary from "@mui/material/AccordionSummary"; 2 | import AccordionDetails from "@mui/material/AccordionDetails"; 3 | import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; 4 | import Typography from "@mui/material/Typography"; 5 | import Accordion from "@mui/material/Accordion"; 6 | import { Box, useTheme } from "@mui/material"; 7 | import { tokens } from "../../styles/theme"; 8 | import { faq } from '../../constants/faq'; 9 | import { Header } from "../../components"; 10 | 11 | 12 | const FAQ = () => { 13 | 14 | const theme = useTheme(); 15 | const colors = tokens(theme.palette.mode); 16 | 17 | return ( 18 | 19 |
20 | 21 | { 22 | faq.map(({ id, question, answer }) => 23 | 24 | id === 1 // by default 1st Accordion open... 25 | ? ( 26 | 27 | 28 | }> 29 | {question} 30 | 31 | 32 | 33 | {answer} 34 | 35 | 36 | 37 | ) : ( 38 | 39 | 40 | }> 41 | {question} 42 | 43 | 44 | 45 | {answer} 46 | 47 | 48 | 49 | ) 50 | ) 51 | } 52 | 53 | ); 54 | }; 55 | 56 | export default FAQ; -------------------------------------------------------------------------------- /src/pages/inputs/InputForm.jsx: -------------------------------------------------------------------------------- 1 | import { checkoutSchema, initialValues } from "../../constants/inputFormValues"; 2 | import { inputFormFields } from '../../constants/inputFormFields'; 3 | import useMediaQuery from "@mui/material/useMediaQuery"; 4 | import { Box, Button, TextField } from "@mui/material"; 5 | import { Header } from "../../components"; 6 | import { Formik } from "formik"; 7 | 8 | 9 | 10 | const InputForm = () => { 11 | 12 | const isNonMobile = useMediaQuery("(min-width:600px)"); 13 | 14 | // user click | data send to server OR do some action... 15 | const handleFormSubmit = (values, onSubmitProps) => { 16 | 17 | // 🧹🧹🧹 Form Fields are Reset by Formik lib... 18 | onSubmitProps.resetForm() 19 | 20 | alert( 21 | Object.keys(values).map(key => 22 | `\n${key.charAt().toUpperCase() + key.slice(1)} : ${values[key]}` 23 | ) 24 | ) 25 | } 26 | 27 | 28 | return ( 29 | 30 | 31 |
32 | 33 | 38 | { 39 | ({ 40 | values, 41 | errors, 42 | touched, 43 | handleBlur, 44 | handleChange, 45 | handleSubmit, 46 | }) => ( 47 |
48 | div": { gridColumn: isNonMobile ? undefined : "span 4" }, 54 | }} 55 | > 56 | { 57 | inputFormFields.map(({ label, name, type }) => 58 | 75 | ) 76 | } 77 | 78 | 79 | 80 | 83 | 84 | 85 |
86 | ) 87 | } 88 | 89 | 90 | ); 91 | }; 92 | 93 | export default InputForm; -------------------------------------------------------------------------------- /src/styles/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'); 2 | 3 | 4 | html, 5 | body, 6 | #root, 7 | .app, 8 | .content { 9 | height : 100%; 10 | width : 100%; 11 | font-family: 'Source Sans Pro', sans-serif; 12 | } 13 | 14 | .app { 15 | display : flex; 16 | position: relative; 17 | } 18 | 19 | 20 | /* For Scrollbar */ 21 | ::-webkit-scrollbar { 22 | width: 10px; 23 | } 24 | 25 | /* For Scrollbar Track */ 26 | ::-webkit-scrollbar-track { 27 | background: #e0e0e0; 28 | } 29 | 30 | /* For Scrollbar Handle */ 31 | ::-webkit-scrollbar-thumb { 32 | background: #888; 33 | } 34 | 35 | /* For Scrollbar Handle on Hover */ 36 | ::-webkit-scrollbar-thumb:hover { 37 | background: #555; 38 | } -------------------------------------------------------------------------------- /src/styles/theme.js: -------------------------------------------------------------------------------- 1 | import { createContext, useState, useMemo } from "react"; 2 | import { createTheme } from "@mui/material/styles"; 3 | 4 | // 🟡🟡🟡 Color + Typography of Website... 5 | 6 | 7 | // color design tokens export 8 | export const tokens = (mode) => ({ 9 | ...(mode === "dark" 10 | ? { 11 | grey: { 12 | 100: "#e0e0e0", 13 | 200: "#c2c2c2", 14 | 300: "#a3a3a3", 15 | 400: "#858585", 16 | 500: "#666666", 17 | 600: "#525252", 18 | 700: "#3d3d3d", 19 | 800: "#292929", 20 | 900: "#141414", 21 | }, 22 | primary: { 23 | 100: "#d0d1d5", 24 | 200: "#a1a4ab", 25 | 300: "#727681", 26 | 400: "#1F2A40", 27 | 500: "#141b2d", 28 | 600: "#101624", 29 | 700: "#0c101b", 30 | 800: "#080b12", 31 | 900: "#040509", 32 | }, 33 | greenAccent: { 34 | 100: "#dbf5ee", 35 | 200: "#b7ebde", 36 | 300: "#94e2cd", 37 | 400: "#70d8bd", 38 | 500: "#4cceac", 39 | 600: "#3da58a", 40 | 700: "#2e7c67", 41 | 800: "#1e5245", 42 | 900: "#0f2922", 43 | }, 44 | redAccent: { 45 | 100: "#f8dcdb", 46 | 200: "#f1b9b7", 47 | 300: "#e99592", 48 | 400: "#e2726e", 49 | 500: "#db4f4a", 50 | 600: "#af3f3b", 51 | 700: "#832f2c", 52 | 800: "#58201e", 53 | 900: "#2c100f", 54 | }, 55 | blueAccent: { 56 | 100: "#e1e2fe", 57 | 200: "#c3c6fd", 58 | 300: "#a4a9fc", 59 | 400: "#868dfb", 60 | 500: "#6870fa", 61 | 600: "#535ac8", 62 | 700: "#3e4396", 63 | 800: "#2a2d64", 64 | 900: "#151632", 65 | }, 66 | } 67 | : { 68 | grey: { 69 | 100: "#141414", 70 | 200: "#292929", 71 | 300: "#3d3d3d", 72 | 400: "#525252", 73 | 500: "#666666", 74 | 600: "#858585", 75 | 700: "#a3a3a3", 76 | 800: "#c2c2c2", 77 | 900: "#e0e0e0", 78 | }, 79 | primary: { 80 | 100: "#040509", 81 | 200: "#080b12", 82 | 300: "#0c101b", 83 | 400: "#f2f0f0", // manually changed 84 | 500: "#141b2d", 85 | 600: "#1F2A40", 86 | 700: "#727681", 87 | 800: "#a1a4ab", 88 | 900: "#d0d1d5", 89 | }, 90 | greenAccent: { 91 | 100: "#0f2922", 92 | 200: "#1e5245", 93 | 300: "#2e7c67", 94 | 400: "#3da58a", 95 | 500: "#4cceac", 96 | 600: "#70d8bd", 97 | 700: "#94e2cd", 98 | 800: "#b7ebde", 99 | 900: "#dbf5ee", 100 | }, 101 | redAccent: { 102 | 100: "#2c100f", 103 | 200: "#58201e", 104 | 300: "#832f2c", 105 | 400: "#af3f3b", 106 | 500: "#db4f4a", 107 | 600: "#e2726e", 108 | 700: "#e99592", 109 | 800: "#f1b9b7", 110 | 900: "#f8dcdb", 111 | }, 112 | blueAccent: { 113 | 100: "#151632", 114 | 200: "#2a2d64", 115 | 300: "#3e4396", 116 | 400: "#535ac8", 117 | 500: "#6870fa", 118 | 600: "#868dfb", 119 | 700: "#a4a9fc", 120 | 800: "#c3c6fd", 121 | 900: "#e1e2fe", 122 | }, 123 | }), 124 | }); 125 | 126 | 127 | // mui theme settings 128 | export const themeSettings = (mode) => { 129 | 130 | const colors = tokens(mode); 131 | 132 | return { 133 | palette: { 134 | mode: mode, 135 | ...(mode === "dark" 136 | ? { 137 | // palette values for dark mode 138 | primary: { 139 | main: colors.primary[500], 140 | }, 141 | secondary: { 142 | main: colors.greenAccent[500], 143 | }, 144 | neutral: { 145 | dark: colors.grey[700], 146 | main: colors.grey[500], 147 | light: colors.grey[100], 148 | }, 149 | background: { 150 | default: colors.primary[500], 151 | }, 152 | } 153 | : { 154 | // palette values for light mode 155 | primary: { 156 | main: colors.primary[100], 157 | }, 158 | secondary: { 159 | main: colors.greenAccent[500], 160 | }, 161 | neutral: { 162 | dark: colors.grey[700], 163 | main: colors.grey[500], 164 | light: colors.grey[100], 165 | }, 166 | background: { 167 | default: "#fcfcfc", 168 | }, 169 | } 170 | ), 171 | }, 172 | typography: { 173 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 174 | fontSize: 12, 175 | h1: { 176 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 177 | fontSize: 40, 178 | }, 179 | h2: { 180 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 181 | fontSize: 32, 182 | }, 183 | h3: { 184 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 185 | fontSize: 24, 186 | }, 187 | h4: { 188 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 189 | fontSize: 20, 190 | }, 191 | h5: { 192 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 193 | fontSize: 16, 194 | }, 195 | h6: { 196 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 197 | fontSize: 14, 198 | }, 199 | }, 200 | }; 201 | }; 202 | 203 | 204 | // context for color mode 205 | export const ColorModeContext = createContext({ 206 | // this function allow us to change the color of app globally 207 | toggleColorMode: () => { }, 208 | }); 209 | 210 | 211 | export const useMode = () => { 212 | 213 | const [mode, setMode] = useState("dark"); 214 | 215 | const colorMode = useMemo( 216 | () => ({ 217 | toggleColorMode: () => 218 | setMode((prev) => (prev === "light" ? "dark" : "light")), 219 | }), 220 | [] 221 | ); 222 | 223 | const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]); 224 | return [theme, colorMode]; 225 | }; --------------------------------------------------------------------------------