React App

├── .gitignore ├── package-lock.json ├── public ├── assets │ └── user.png ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png └── manifest.json └── src ├── App.js ├── components ├── BarChart.jsx ├── GeographyChart.jsx ├── Header.jsx ├── LineChart.jsx ├── PieChart.jsx ├── ProgressCircle.jsx └── StatBox.jsx ├── data ├── mockData.js └── mockGeoFeatures.js ├── index.css ├── index.js ├── scenes ├── bar │ └── index.jsx ├── calendar │ └── calendar.jsx ├── contacts │ └── index.jsx ├── dashboard │ └── index.jsx ├── faq │ └── index.jsx ├── form │ └── index.jsx ├── geography │ └── index.jsx ├── global │ ├── Sidebar.jsx │ └── Topbar.jsx ├── invoices │ └── index.jsx ├── line │ └── index.jsx ├── pie │ └── index.jsx └── team │ └── index.jsx └── theme.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /public/assets/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklawson-dev/react-admin-dashboard/fd28ed0e79003a6cd3ba2644cf746db98a667a10/public/assets/user.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklawson-dev/react-admin-dashboard/fd28ed0e79003a6cd3ba2644cf746db98a667a10/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklawson-dev/react-admin-dashboard/fd28ed0e79003a6cd3ba2644cf746db98a667a10/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklawson-dev/react-admin-dashboard/fd28ed0e79003a6cd3ba2644cf746db98a667a10/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Routes, Route } from "react-router-dom"; 3 | import Topbar from "./scenes/global/Topbar"; 4 | import Sidebar from "./scenes/global/Sidebar"; 5 | import Dashboard from "./scenes/dashboard"; 6 | import Team from "./scenes/team"; 7 | import Invoices from "./scenes/invoices"; 8 | import Contacts from "./scenes/contacts"; 9 | import Bar from "./scenes/bar"; 10 | import Form from "./scenes/form"; 11 | import Line from "./scenes/line"; 12 | import Pie from "./scenes/pie"; 13 | import FAQ from "./scenes/faq"; 14 | import Geography from "./scenes/geography"; 15 | import { CssBaseline, ThemeProvider } from "@mui/material"; 16 | import { ColorModeContext, useMode } from "./theme"; 17 | import Calendar from "./scenes/calendar/calendar"; 18 | 19 | function App() { 20 | const [theme, colorMode] = useMode(); 21 | const [isSidebar, setIsSidebar] = useState(true); 22 | 23 | return ( 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; 52 | -------------------------------------------------------------------------------- /src/components/BarChart.jsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from "@mui/material"; 2 | import { ResponsiveBar } from "@nivo/bar"; 3 | import { tokens } from "../theme"; 4 | import { mockBarData as data } from "../data/mockData"; 5 | 6 | const BarChart = ({ isDashboard = false }) => { 7 | const theme = useTheme(); 8 | const colors = tokens(theme.palette.mode); 9 | 10 | return ( 11 | 127 | ); 128 | }; 129 | 130 | export default BarChart; 131 | -------------------------------------------------------------------------------- /src/components/GeographyChart.jsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from "@mui/material"; 2 | import { ResponsiveChoropleth } from "@nivo/geo"; 3 | import { geoFeatures } from "../data/mockGeoFeatures"; 4 | import { tokens } from "../theme"; 5 | import { mockGeographyData as data } from "../data/mockData"; 6 | 7 | const GeographyChart = ({ isDashboard = false }) => { 8 | const theme = useTheme(); 9 | const colors = tokens(theme.palette.mode); 10 | return ( 11 | 82 | ); 83 | }; 84 | 85 | export default GeographyChart; 86 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { Typography, Box, useTheme } from "@mui/material"; 2 | import { tokens } from "../theme"; 3 | 4 | const Header = ({ title, subtitle }) => { 5 | const theme = useTheme(); 6 | const colors = tokens(theme.palette.mode); 7 | return ( 8 | 9 | 15 | {title} 16 | 17 | 18 | {subtitle} 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Header; 25 | -------------------------------------------------------------------------------- /src/components/LineChart.jsx: -------------------------------------------------------------------------------- 1 | import { ResponsiveLine } from "@nivo/line"; 2 | import { useTheme } from "@mui/material"; 3 | import { tokens } from "../theme"; 4 | import { mockLineData as data } from "../data/mockData"; 5 | 6 | const LineChart = ({ isCustomLineColors = false, isDashboard = false }) => { 7 | const theme = useTheme(); 8 | const colors = tokens(theme.palette.mode); 9 | 10 | return ( 11 | 114 | ); 115 | }; 116 | 117 | export default LineChart; 118 | -------------------------------------------------------------------------------- /src/components/PieChart.jsx: -------------------------------------------------------------------------------- 1 | import { ResponsivePie } from "@nivo/pie"; 2 | import { tokens } from "../theme"; 3 | import { useTheme } from "@mui/material"; 4 | import { mockPieData as data } from "../data/mockData"; 5 | 6 | const PieChart = () => { 7 | const theme = useTheme(); 8 | const colors = tokens(theme.palette.mode); 9 | return ( 10 | 106 | ); 107 | }; 108 | 109 | export default PieChart; 110 | -------------------------------------------------------------------------------- /src/components/ProgressCircle.jsx: -------------------------------------------------------------------------------- 1 | import { Box, useTheme } from "@mui/material"; 2 | import { tokens } from "../theme"; 3 | 4 | const ProgressCircle = ({ progress = "0.75", size = "40" }) => { 5 | const theme = useTheme(); 6 | const colors = tokens(theme.palette.mode); 7 | const angle = progress * 360; 8 | return ( 9 | 19 | ); 20 | }; 21 | 22 | export default ProgressCircle; 23 | -------------------------------------------------------------------------------- /src/components/StatBox.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Typography, useTheme } from "@mui/material"; 2 | import { tokens } from "../theme"; 3 | import ProgressCircle from "./ProgressCircle"; 4 | 5 | const StatBox = ({ title, subtitle, icon, progress, increase }) => { 6 | const theme = useTheme(); 7 | const colors = tokens(theme.palette.mode); 8 | 9 | return ( 10 | 11 | 12 | 13 | {icon} 14 | 19 | {title} 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | {subtitle} 29 | 30 | 35 | {increase} 36 | 37 | 38 | 39 | ); 40 | }; 41 | 42 | export default StatBox; 43 | -------------------------------------------------------------------------------- /src/data/mockData.js: -------------------------------------------------------------------------------- 1 | import { tokens } from "../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 | ]; 1284 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"); 2 | 3 | html, 4 | body, 5 | #root, 6 | .app, 7 | .content { 8 | height: 100%; 9 | width: 100%; 10 | font-family: "Source Sans Pro", sans-serif; 11 | } 12 | 13 | .app { 14 | display: flex; 15 | position: relative; 16 | } 17 | 18 | ::-webkit-scrollbar { 19 | width: 10px; 20 | } 21 | 22 | /* Track */ 23 | ::-webkit-scrollbar-track { 24 | background: #e0e0e0; 25 | } 26 | 27 | /* Handle */ 28 | ::-webkit-scrollbar-thumb { 29 | background: #888; 30 | } 31 | 32 | /* Handle on hover */ 33 | ::-webkit-scrollbar-thumb:hover { 34 | background: #555; 35 | } 36 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import { BrowserRouter } from "react-router-dom"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /src/scenes/bar/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box } from "@mui/material"; 2 | import Header from "../../components/Header"; 3 | import BarChart from "../../components/BarChart"; 4 | 5 | const Bar = () => { 6 | return ( 7 | 8 |

9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default Bar; 17 | -------------------------------------------------------------------------------- /src/scenes/calendar/calendar.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import FullCalendar, { formatDate } from "@fullcalendar/react"; 3 | import dayGridPlugin from "@fullcalendar/daygrid"; 4 | import timeGridPlugin from "@fullcalendar/timegrid"; 5 | import interactionPlugin from "@fullcalendar/interaction"; 6 | import listPlugin from "@fullcalendar/list"; 7 | import { 8 | Box, 9 | List, 10 | ListItem, 11 | ListItemText, 12 | Typography, 13 | useTheme, 14 | } from "@mui/material"; 15 | import Header from "../../components/Header"; 16 | import { tokens } from "../../theme"; 17 | 18 | const Calendar = () => { 19 | const theme = useTheme(); 20 | const colors = tokens(theme.palette.mode); 21 | const [currentEvents, setCurrentEvents] = useState([]); 22 | 23 | const handleDateClick = (selected) => { 24 | const title = prompt("Please enter a new title for your event"); 25 | const calendarApi = selected.view.calendar; 26 | calendarApi.unselect(); 27 | 28 | if (title) { 29 | calendarApi.addEvent({ 30 | id: `${selected.dateStr}-${title}`, 31 | title, 32 | start: selected.startStr, 33 | end: selected.endStr, 34 | allDay: selected.allDay, 35 | }); 36 | } 37 | }; 38 | 39 | const handleEventClick = (selected) => { 40 | if ( 41 | window.confirm( 42 | `Are you sure you want to delete the event '${selected.event.title}'` 43 | ) 44 | ) { 45 | selected.event.remove(); 46 | } 47 | }; 48 | 49 | return ( 50 | 51 |

52 | 53 | 54 | {/* CALENDAR SIDEBAR */} 55 | 61 | Events 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 | {/* CALENDAR */} 90 | 91 | setCurrentEvents(events)} 112 | initialEvents={[ 113 | { 114 | id: "12315", 115 | title: "All-day event", 116 | date: "2022-09-14", 117 | }, 118 | { 119 | id: "5123", 120 | title: "Timed event", 121 | date: "2022-09-28", 122 | }, 123 | ]} 124 | /> 125 | 126 | 127 | 128 | ); 129 | }; 130 | 131 | export default Calendar; 132 | -------------------------------------------------------------------------------- /src/scenes/contacts/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box } from "@mui/material"; 2 | import { DataGrid, GridToolbar } from "@mui/x-data-grid"; 3 | import { tokens } from "../../theme"; 4 | import { mockDataContacts } from "../../data/mockData"; 5 | import Header from "../../components/Header"; 6 | import { useTheme } from "@mui/material"; 7 | 8 | const Contacts = () => { 9 | const theme = useTheme(); 10 | const colors = tokens(theme.palette.mode); 11 | 12 | const columns = [ 13 | { field: "id", headerName: "ID", flex: 0.5 }, 14 | { field: "registrarId", headerName: "Registrar ID" }, 15 | { 16 | field: "name", 17 | headerName: "Name", 18 | flex: 1, 19 | cellClassName: "name-column--cell", 20 | }, 21 | { 22 | field: "age", 23 | headerName: "Age", 24 | type: "number", 25 | headerAlign: "left", 26 | align: "left", 27 | }, 28 | { 29 | field: "phone", 30 | headerName: "Phone Number", 31 | flex: 1, 32 | }, 33 | { 34 | field: "email", 35 | headerName: "Email", 36 | flex: 1, 37 | }, 38 | { 39 | field: "address", 40 | headerName: "Address", 41 | flex: 1, 42 | }, 43 | { 44 | field: "city", 45 | headerName: "City", 46 | flex: 1, 47 | }, 48 | { 49 | field: "zipCode", 50 | headerName: "Zip Code", 51 | flex: 1, 52 | }, 53 | ]; 54 | 55 | return ( 56 | 57 |

61 | 93 | 98 | 99 | 100 | ); 101 | }; 102 | 103 | export default Contacts; 104 | -------------------------------------------------------------------------------- /src/scenes/dashboard/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, IconButton, Typography, useTheme } from "@mui/material"; 2 | import { tokens } from "../../theme"; 3 | import { mockTransactions } from "../../data/mockData"; 4 | import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined"; 5 | import EmailIcon from "@mui/icons-material/Email"; 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 Header from "../../components/Header"; 10 | import LineChart from "../../components/LineChart"; 11 | import GeographyChart from "../../components/GeographyChart"; 12 | import BarChart from "../../components/BarChart"; 13 | import StatBox from "../../components/StatBox"; 14 | import ProgressCircle from "../../components/ProgressCircle"; 15 | 16 | const Dashboard = () => { 17 | const theme = useTheme(); 18 | const colors = tokens(theme.palette.mode); 19 | 20 | return ( 21 | 22 | {/* HEADER */} 23 | 24 |

25 | 26 | 27 | 39 | 40 | 41 | 42 | {/* GRID & CHARTS */} 43 | 49 | {/* ROW 1 */} 50 | 57 | 66 | } 67 | /> 68 | 69 | 76 | 85 | } 86 | /> 87 | 88 | 95 | 104 | } 105 | /> 106 | 107 | 114 | 123 | } 124 | /> 125 | 126 | 127 | {/* ROW 2 */} 128 | 133 | 140 | 141 | 146 | Revenue Generated 147 | 148 | 153 | $59,342.32 154 | 155 | 156 | 157 | 158 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 174 | 182 | 183 | Recent Transactions 184 | 185 | 186 | {mockTransactions.map((transaction, i) => ( 187 | 195 | 196 | 201 | {transaction.txId} 202 | 203 | 204 | {transaction.user} 205 | 206 | 207 | {transaction.date} 208 | 213 | ${transaction.cost} 214 | 215 | 216 | ))} 217 | 218 | 219 | {/* ROW 3 */} 220 | 226 | 227 | Campaign 228 | 229 | 235 | 236 | 241 | $48,352 revenue generated 242 | 243 | Includes extra misc expenditures and costs 244 | 245 | 246 | 251 | 256 | Sales Quantity 257 | 258 | 259 | 260 | 261 | 262 | 268 | 273 | Geography Based Traffic 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | ); 282 | }; 283 | 284 | export default Dashboard; 285 | -------------------------------------------------------------------------------- /src/scenes/faq/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box, useTheme } from "@mui/material"; 2 | import Header from "../../components/Header"; 3 | import Accordion from "@mui/material/Accordion"; 4 | import AccordionSummary from "@mui/material/AccordionSummary"; 5 | import AccordionDetails from "@mui/material/AccordionDetails"; 6 | import Typography from "@mui/material/Typography"; 7 | import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; 8 | import { tokens } from "../../theme"; 9 | 10 | const FAQ = () => { 11 | const theme = useTheme(); 12 | const colors = tokens(theme.palette.mode); 13 | return ( 14 | 15 |

16 | 17 | 18 | }> 19 | 20 | An Important Question 21 | 22 | 23 | 24 | 25 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 26 | malesuada lacus ex, sit amet blandit leo lobortis eget. 27 | 28 | 29 | 30 | 31 | }> 32 | 33 | Another Important Question 34 | 35 | 36 | 37 | 38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 39 | malesuada lacus ex, sit amet blandit leo lobortis eget. 40 | 41 | 42 | 43 | 44 | }> 45 | 46 | Your Favorite Question 47 | 48 | 49 | 50 | 51 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 52 | malesuada lacus ex, sit amet blandit leo lobortis eget. 53 | 54 | 55 | 56 | 57 | }> 58 | 59 | Some Random Question 60 | 61 | 62 | 63 | 64 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 65 | malesuada lacus ex, sit amet blandit leo lobortis eget. 66 | 67 | 68 | 69 | 70 | }> 71 | 72 | The Final Question 73 | 74 | 75 | 76 | 77 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 78 | malesuada lacus ex, sit amet blandit leo lobortis eget. 79 | 80 | 81 | 82 | 83 | ); 84 | }; 85 | 86 | export default FAQ; 87 | -------------------------------------------------------------------------------- /src/scenes/form/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, TextField } from "@mui/material"; 2 | import { Formik } from "formik"; 3 | import * as yup from "yup"; 4 | import useMediaQuery from "@mui/material/useMediaQuery"; 5 | import Header from "../../components/Header"; 6 | 7 | const Form = () => { 8 | const isNonMobile = useMediaQuery("(min-width:600px)"); 9 | 10 | const handleFormSubmit = (values) => { 11 | console.log(values); 12 | }; 13 | 14 | return ( 15 | 16 |

17 | 18 | 23 | {({ 24 | values, 25 | errors, 26 | touched, 27 | handleBlur, 28 | handleChange, 29 | handleSubmit, 30 | }) => ( 31 | 125 | )} 126 | 127 | 128 | ); 129 | }; 130 | 131 | const phoneRegExp = 132 | /^((\+[1-9]{1,4}[ -]?)|($[0-9]{2,3}$[ -]?)|([0-9]{2,4})[ -]?)*?[0-9]{3,4}[ -]?[0-9]{3,4}$/; 133 | 134 | const checkoutSchema = yup.object().shape({ 135 | firstName: yup.string().required("required"), 136 | lastName: yup.string().required("required"), 137 | email: yup.string().email("invalid email").required("required"), 138 | contact: yup 139 | .string() 140 | .matches(phoneRegExp, "Phone number is not valid") 141 | .required("required"), 142 | address1: yup.string().required("required"), 143 | address2: yup.string().required("required"), 144 | }); 145 | const initialValues = { 146 | firstName: "", 147 | lastName: "", 148 | email: "", 149 | contact: "", 150 | address1: "", 151 | address2: "", 152 | }; 153 | 154 | export default Form; 155 | -------------------------------------------------------------------------------- /src/scenes/geography/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box, useTheme } from "@mui/material"; 2 | import GeographyChart from "../../components/GeographyChart"; 3 | import Header from "../../components/Header"; 4 | import { tokens } from "../../theme"; 5 | 6 | const Geography = () => { 7 | const theme = useTheme(); 8 | const colors = tokens(theme.palette.mode); 9 | return ( 10 | 11 |

12 | 13 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Geography; 25 | -------------------------------------------------------------------------------- /src/scenes/global/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { ProSidebar, Menu, MenuItem } from "react-pro-sidebar"; 3 | import { Box, IconButton, Typography, useTheme } from "@mui/material"; 4 | import { Link } from "react-router-dom"; 5 | import "react-pro-sidebar/dist/css/styles.css"; 6 | import { tokens } from "../../theme"; 7 | import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined"; 8 | import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined"; 9 | import ContactsOutlinedIcon from "@mui/icons-material/ContactsOutlined"; 10 | import ReceiptOutlinedIcon from "@mui/icons-material/ReceiptOutlined"; 11 | import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined"; 12 | import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined"; 13 | import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined"; 14 | import BarChartOutlinedIcon from "@mui/icons-material/BarChartOutlined"; 15 | import PieChartOutlineOutlinedIcon from "@mui/icons-material/PieChartOutlineOutlined"; 16 | import TimelineOutlinedIcon from "@mui/icons-material/TimelineOutlined"; 17 | import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined"; 18 | import MapOutlinedIcon from "@mui/icons-material/MapOutlined"; 19 | 20 | const Item = ({ title, to, icon, selected, setSelected }) => { 21 | const theme = useTheme(); 22 | const colors = tokens(theme.palette.mode); 23 | return ( 24 | setSelected(title)} 30 | icon={icon} 31 | > 32 | {title} 33 | 34 | 35 | ); 36 | }; 37 | 38 | const Sidebar = () => { 39 | const theme = useTheme(); 40 | const colors = tokens(theme.palette.mode); 41 | const [isCollapsed, setIsCollapsed] = useState(false); 42 | const [selected, setSelected] = useState("Dashboard"); 43 | 44 | return ( 45 | 64 | 65 | 66 | {/* LOGO AND MENU ICON */} 67 | setIsCollapsed(!isCollapsed)} 69 | icon={isCollapsed ? : undefined} 70 | style={{ 71 | margin: "10px 0 20px 0", 72 | color: colors.grey[100], 73 | }} 74 | > 75 | {!isCollapsed && ( 76 | 82 | 83 | ADMINIS 84 | 85 | setIsCollapsed(!isCollapsed)}> 86 | 87 | 88 | 89 | )} 90 | 91 | 92 | {!isCollapsed && ( 93 | 94 | 95 | profile-user

102 | 103 | 104 | 110 | Ed Roh 111 | 112 | 113 | VP Fancy Admin 114 | 115 | 116 | 117 | )} 118 | 119 | 120 | } 124 | selected={selected} 125 | setSelected={setSelected} 126 | /> 127 | 128 | 133 | Data 134 | 135 | } 139 | selected={selected} 140 | setSelected={setSelected} 141 | /> 142 | } 146 | selected={selected} 147 | setSelected={setSelected} 148 | /> 149 | } 153 | selected={selected} 154 | setSelected={setSelected} 155 | /> 156 | 157 | 162 | Pages 163 | 164 | } 168 | selected={selected} 169 | setSelected={setSelected} 170 | /> 171 | } 175 | selected={selected} 176 | setSelected={setSelected} 177 | /> 178 | } 182 | selected={selected} 183 | setSelected={setSelected} 184 | /> 185 | 186 | 191 | Charts 192 | 193 | } 197 | selected={selected} 198 | setSelected={setSelected} 199 | /> 200 | } 204 | selected={selected} 205 | setSelected={setSelected} 206 | /> 207 | } 211 | selected={selected} 212 | setSelected={setSelected} 213 | /> 214 | } 218 | selected={selected} 219 | setSelected={setSelected} 220 | /> 221 | 222 | 223 | 224 | 225 | ); 226 | }; 227 | 228 | export default Sidebar; 229 | -------------------------------------------------------------------------------- /src/scenes/global/Topbar.jsx: -------------------------------------------------------------------------------- 1 | import { Box, IconButton, useTheme } from "@mui/material"; 2 | import { useContext } from "react"; 3 | import { ColorModeContext, tokens } from "../../theme"; 4 | import InputBase from "@mui/material/InputBase"; 5 | import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined"; 6 | import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined"; 7 | import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined"; 8 | import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; 9 | import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined"; 10 | import SearchIcon from "@mui/icons-material/Search"; 11 | 12 | const Topbar = () => { 13 | const theme = useTheme(); 14 | const colors = tokens(theme.palette.mode); 15 | const colorMode = useContext(ColorModeContext); 16 | 17 | return ( 18 | 19 | {/* SEARCH BAR */} 20 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | {/* ICONS */} 32 | 33 | 34 | {theme.palette.mode === "dark" ? ( 35 | 36 | ) : ( 37 | 38 | )} 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ); 52 | }; 53 | 54 | export default Topbar; 55 | -------------------------------------------------------------------------------- /src/scenes/invoices/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Typography, useTheme } from "@mui/material"; 2 | import { DataGrid } from "@mui/x-data-grid"; 3 | import { tokens } from "../../theme"; 4 | import { mockDataInvoices } from "../../data/mockData"; 5 | import Header from "../../components/Header"; 6 | 7 | const Invoices = () => { 8 | const theme = useTheme(); 9 | const colors = tokens(theme.palette.mode); 10 | const columns = [ 11 | { field: "id", headerName: "ID" }, 12 | { 13 | field: "name", 14 | headerName: "Name", 15 | flex: 1, 16 | cellClassName: "name-column--cell", 17 | }, 18 | { 19 | field: "phone", 20 | headerName: "Phone Number", 21 | flex: 1, 22 | }, 23 | { 24 | field: "email", 25 | headerName: "Email", 26 | flex: 1, 27 | }, 28 | { 29 | field: "cost", 30 | headerName: "Cost", 31 | flex: 1, 32 | renderCell: (params) => ( 33 | 34 | ${params.row.cost} 35 | 36 | ), 37 | }, 38 | { 39 | field: "date", 40 | headerName: "Date", 41 | flex: 1, 42 | }, 43 | ]; 44 | 45 | return ( 46 | 47 |

48 | 77 | 78 | 79 | 80 | ); 81 | }; 82 | 83 | export default Invoices; 84 | -------------------------------------------------------------------------------- /src/scenes/line/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box } from "@mui/material"; 2 | import Header from "../../components/Header"; 3 | import LineChart from "../../components/LineChart"; 4 | 5 | const Line = () => { 6 | return ( 7 | 8 |

9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default Line; 17 | -------------------------------------------------------------------------------- /src/scenes/pie/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box } from "@mui/material"; 2 | import Header from "../../components/Header"; 3 | import PieChart from "../../components/PieChart"; 4 | 5 | const Pie = () => { 6 | return ( 7 | 8 |

9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default Pie; 17 | -------------------------------------------------------------------------------- /src/scenes/team/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Typography, useTheme } from "@mui/material"; 2 | import { DataGrid } from "@mui/x-data-grid"; 3 | import { tokens } from "../../theme"; 4 | import { mockDataTeam } from "../../data/mockData"; 5 | import AdminPanelSettingsOutlinedIcon from "@mui/icons-material/AdminPanelSettingsOutlined"; 6 | import LockOpenOutlinedIcon from "@mui/icons-material/LockOpenOutlined"; 7 | import SecurityOutlinedIcon from "@mui/icons-material/SecurityOutlined"; 8 | import Header from "../../components/Header"; 9 | 10 | const Team = () => { 11 | const theme = useTheme(); 12 | const colors = tokens(theme.palette.mode); 13 | const columns = [ 14 | { field: "id", headerName: "ID" }, 15 | { 16 | field: "name", 17 | headerName: "Name", 18 | flex: 1, 19 | cellClassName: "name-column--cell", 20 | }, 21 | { 22 | field: "age", 23 | headerName: "Age", 24 | type: "number", 25 | headerAlign: "left", 26 | align: "left", 27 | }, 28 | { 29 | field: "phone", 30 | headerName: "Phone Number", 31 | flex: 1, 32 | }, 33 | { 34 | field: "email", 35 | headerName: "Email", 36 | flex: 1, 37 | }, 38 | { 39 | field: "accessLevel", 40 | headerName: "Access Level", 41 | flex: 1, 42 | renderCell: ({ row: { access } }) => { 43 | return ( 44 | 59 | {access === "admin" && } 60 | {access === "manager" && } 61 | {access === "user" && } 62 | 63 | {access} 64 | 65 | 66 | ); 67 | }, 68 | }, 69 | ]; 70 | 71 | return ( 72 | 73 |

74 | 103 | 104 | 105 | 106 | ); 107 | }; 108 | 109 | export default Team; 110 | -------------------------------------------------------------------------------- /src/theme.js: -------------------------------------------------------------------------------- 1 | import { createContext, useState, useMemo } from "react"; 2 | import { createTheme } from "@mui/material/styles"; 3 | 4 | // color design tokens export 5 | export const tokens = (mode) => ({ 6 | ...(mode === "dark" 7 | ? { 8 | grey: { 9 | 100: "#e0e0e0", 10 | 200: "#c2c2c2", 11 | 300: "#a3a3a3", 12 | 400: "#858585", 13 | 500: "#666666", 14 | 600: "#525252", 15 | 700: "#3d3d3d", 16 | 800: "#292929", 17 | 900: "#141414", 18 | }, 19 | primary: { 20 | 100: "#d0d1d5", 21 | 200: "#a1a4ab", 22 | 300: "#727681", 23 | 400: "#1F2A40", 24 | 500: "#141b2d", 25 | 600: "#101624", 26 | 700: "#0c101b", 27 | 800: "#080b12", 28 | 900: "#040509", 29 | }, 30 | greenAccent: { 31 | 100: "#dbf5ee", 32 | 200: "#b7ebde", 33 | 300: "#94e2cd", 34 | 400: "#70d8bd", 35 | 500: "#4cceac", 36 | 600: "#3da58a", 37 | 700: "#2e7c67", 38 | 800: "#1e5245", 39 | 900: "#0f2922", 40 | }, 41 | redAccent: { 42 | 100: "#f8dcdb", 43 | 200: "#f1b9b7", 44 | 300: "#e99592", 45 | 400: "#e2726e", 46 | 500: "#db4f4a", 47 | 600: "#af3f3b", 48 | 700: "#832f2c", 49 | 800: "#58201e", 50 | 900: "#2c100f", 51 | }, 52 | blueAccent: { 53 | 100: "#e1e2fe", 54 | 200: "#c3c6fd", 55 | 300: "#a4a9fc", 56 | 400: "#868dfb", 57 | 500: "#6870fa", 58 | 600: "#535ac8", 59 | 700: "#3e4396", 60 | 800: "#2a2d64", 61 | 900: "#151632", 62 | }, 63 | } 64 | : { 65 | grey: { 66 | 100: "#141414", 67 | 200: "#292929", 68 | 300: "#3d3d3d", 69 | 400: "#525252", 70 | 500: "#666666", 71 | 600: "#858585", 72 | 700: "#a3a3a3", 73 | 800: "#c2c2c2", 74 | 900: "#e0e0e0", 75 | }, 76 | primary: { 77 | 100: "#040509", 78 | 200: "#080b12", 79 | 300: "#0c101b", 80 | 400: "#f2f0f0", // manually changed 81 | 500: "#141b2d", 82 | 600: "#1F2A40", 83 | 700: "#727681", 84 | 800: "#a1a4ab", 85 | 900: "#d0d1d5", 86 | }, 87 | greenAccent: { 88 | 100: "#0f2922", 89 | 200: "#1e5245", 90 | 300: "#2e7c67", 91 | 400: "#3da58a", 92 | 500: "#4cceac", 93 | 600: "#70d8bd", 94 | 700: "#94e2cd", 95 | 800: "#b7ebde", 96 | 900: "#dbf5ee", 97 | }, 98 | redAccent: { 99 | 100: "#2c100f", 100 | 200: "#58201e", 101 | 300: "#832f2c", 102 | 400: "#af3f3b", 103 | 500: "#db4f4a", 104 | 600: "#e2726e", 105 | 700: "#e99592", 106 | 800: "#f1b9b7", 107 | 900: "#f8dcdb", 108 | }, 109 | blueAccent: { 110 | 100: "#151632", 111 | 200: "#2a2d64", 112 | 300: "#3e4396", 113 | 400: "#535ac8", 114 | 500: "#6870fa", 115 | 600: "#868dfb", 116 | 700: "#a4a9fc", 117 | 800: "#c3c6fd", 118 | 900: "#e1e2fe", 119 | }, 120 | }), 121 | }); 122 | 123 | // mui theme settings 124 | export const themeSettings = (mode) => { 125 | const colors = tokens(mode); 126 | return { 127 | palette: { 128 | mode: mode, 129 | ...(mode === "dark" 130 | ? { 131 | // palette values for dark mode 132 | primary: { 133 | main: colors.primary[500], 134 | }, 135 | secondary: { 136 | main: colors.greenAccent[500], 137 | }, 138 | neutral: { 139 | dark: colors.grey[700], 140 | main: colors.grey[500], 141 | light: colors.grey[100], 142 | }, 143 | background: { 144 | default: colors.primary[500], 145 | }, 146 | } 147 | : { 148 | // palette values for light mode 149 | primary: { 150 | main: colors.primary[100], 151 | }, 152 | secondary: { 153 | main: colors.greenAccent[500], 154 | }, 155 | neutral: { 156 | dark: colors.grey[700], 157 | main: colors.grey[500], 158 | light: colors.grey[100], 159 | }, 160 | background: { 161 | default: "#fcfcfc", 162 | }, 163 | }), 164 | }, 165 | typography: { 166 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 167 | fontSize: 12, 168 | h1: { 169 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 170 | fontSize: 40, 171 | }, 172 | h2: { 173 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 174 | fontSize: 32, 175 | }, 176 | h3: { 177 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 178 | fontSize: 24, 179 | }, 180 | h4: { 181 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 182 | fontSize: 20, 183 | }, 184 | h5: { 185 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 186 | fontSize: 16, 187 | }, 188 | h6: { 189 | fontFamily: ["Source Sans Pro", "sans-serif"].join(","), 190 | fontSize: 14, 191 | }, 192 | }, 193 | }; 194 | }; 195 | 196 | // context for color mode 197 | export const ColorModeContext = createContext({ 198 | toggleColorMode: () => {}, 199 | }); 200 | 201 | export const useMode = () => { 202 | const [mode, setMode] = useState("dark"); 203 | 204 | const colorMode = useMemo( 205 | () => ({ 206 | toggleColorMode: () => 207 | setMode((prev) => (prev === "light" ? "dark" : "light")), 208 | }), 209 | [] 210 | ); 211 | 212 | const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]); 213 | return [theme, colorMode]; 214 | }; 215 | --------------------------------------------------------------------------------