diff --git a/package-lock.json b/package-lock.json index 4b83b73..0e853b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@fontsource/roboto": "^5.1.0", "@mui/icons-material": "^6.1.6", "@mui/material": "^6.1.6", + "@mui/x-charts": "^7.22.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -3204,6 +3205,81 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, + "node_modules/@mui/x-charts": { + "version": "7.22.2", + "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.22.2.tgz", + "integrity": "sha512-0Y2du4Ed7gOT53l8vVJ4vKT+Jz4Dh/iHnLy8TtL3+XhbPH9Ndu9Q30WwyyzOn84yt37hSUru/njQ1BWaSvVPHw==", + "dependencies": { + "@babel/runtime": "^7.25.7", + "@mui/utils": "^5.16.6 || ^6.0.0", + "@mui/x-charts-vendor": "7.20.0", + "@mui/x-internals": "7.21.0", + "@react-spring/rafz": "^9.7.5", + "@react-spring/web": "^9.7.5", + "clsx": "^2.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.15.14 || ^6.0.0", + "@mui/system": "^5.15.14 || ^6.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/x-charts-vendor": { + "version": "7.20.0", + "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-7.20.0.tgz", + "integrity": "sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==", + "dependencies": { + "@babel/runtime": "^7.25.7", + "@types/d3-color": "^3.1.3", + "@types/d3-delaunay": "^6.0.4", + "@types/d3-interpolate": "^3.0.4", + "@types/d3-scale": "^4.0.8", + "@types/d3-shape": "^3.1.6", + "@types/d3-time": "^3.0.3", + "d3-color": "^3.1.0", + "d3-delaunay": "^6.0.4", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.2.0", + "d3-time": "^3.1.0", + "delaunator": "^5.0.1", + "robust-predicates": "^3.0.2" + } + }, + "node_modules/@mui/x-internals": { + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.21.0.tgz", + "integrity": "sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==", + "dependencies": { + "@babel/runtime": "^7.25.7", + "@mui/utils": "^5.16.6 || ^6.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -3329,6 +3405,72 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-spring/animated": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz", + "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==", + "dependencies": { + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz", + "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==", + "dependencies": { + "@react-spring/animated": "~9.7.5", + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz", + "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==" + }, + "node_modules/@react-spring/shared": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz", + "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==", + "dependencies": { + "@react-spring/rafz": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz", + "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==" + }, + "node_modules/@react-spring/web": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz", + "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==", + "dependencies": { + "@react-spring/animated": "~9.7.5", + "@react-spring/core": "~9.7.5", + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3863,6 +4005,50 @@ "@types/node": "*" } }, + "node_modules/@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" + }, + "node_modules/@types/d3-delaunay": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz", + "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==" + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==" + }, + "node_modules/@types/d3-scale": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz", + "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-shape": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz", + "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==", + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz", + "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==" + }, "node_modules/@types/eslint": { "version": "8.56.12", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz", @@ -6516,6 +6702,111 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-delaunay": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz", + "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==", + "dependencies": { + "delaunator": "5" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "dependencies": { + "d3-path": "^3.1.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -6703,6 +6994,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delaunator": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz", + "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==", + "dependencies": { + "robust-predicates": "^3.0.2" + } + }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -9206,6 +9505,14 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", @@ -13897,6 +14204,11 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/robust-predicates": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz", + "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==" + }, "node_modules/rollup": { "version": "2.79.2", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", diff --git a/package.json b/package.json index db99807..ae78682 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@fontsource/roboto": "^5.1.0", "@mui/icons-material": "^6.1.6", "@mui/material": "^6.1.6", + "@mui/x-charts": "^7.22.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 00f8dc9..0000000 --- a/src/App.js +++ /dev/null @@ -1,8 +0,0 @@ -import "./App.css"; -import Button from "@mui/material/Button"; - -function App() { - return ; -} - -export default App; diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..844495e --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,15 @@ +import { ThemeProvider } from "@mui/material/styles"; +import theme from "./theme"; +import CssBaseline from "@mui/material/CssBaseline"; +import Layout from "./components/layout/Layout"; + +function App() { + return ( + + + + + ); +} + +export default App; diff --git a/src/assets/icons/Icons.jsx b/src/assets/icons/Icons.jsx new file mode 100644 index 0000000..727c15c --- /dev/null +++ b/src/assets/icons/Icons.jsx @@ -0,0 +1,13 @@ +import MenuIcon from "@mui/icons-material/Menu"; +import SearchIcon from "@mui/icons-material/Search"; +import NotificationsNoneOutlinedIcon from "@mui/icons-material/NotificationsNoneOutlined"; +import GitHubIcon from "@mui/icons-material/GitHub"; + +const Icons = { + MenuIcon, + SearchIcon, + NotificationsNoneOutlinedIcon, + GitHubIcon, +}; + +export default Icons; diff --git a/src/components/common/sidebar/Sidebar.jsx b/src/components/common/sidebar/Sidebar.jsx new file mode 100644 index 0000000..bac1ea6 --- /dev/null +++ b/src/components/common/sidebar/Sidebar.jsx @@ -0,0 +1,51 @@ +import React from "react"; +import Drawer from "@mui/material/Drawer"; +import Typography from "@mui/material/Typography"; +import Toolbar from "@mui/material/Toolbar"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import data from "./data"; +import style from "./style"; + +const Sidebar = () => { + return ( + + + + Mergestack + + + + {data.map((section) => ( + <> + + {section.heading} + + + {section.items.map((item) => ( + + + + {item.icon} + + + + + ))} + + + ))} + + ); +}; + +export default Sidebar; diff --git a/src/components/common/sidebar/data.js b/src/components/common/sidebar/data.js new file mode 100644 index 0000000..b951b91 --- /dev/null +++ b/src/components/common/sidebar/data.js @@ -0,0 +1,39 @@ +import SpeedIcon from "@mui/icons-material/Speed"; +import LoginIcon from "@mui/icons-material/Login"; +import ListAltIcon from "@mui/icons-material/ListAlt"; +import TextFieldsOutlinedIcon from "@mui/icons-material/TextFieldsOutlined"; +import FormatColorFillOutlinedIcon from "@mui/icons-material/FormatColorFillOutlined"; +import VerticalShadesClosedOutlinedIcon from "@mui/icons-material/VerticalShadesClosedOutlined"; +import SportsVolleyballOutlinedIcon from "@mui/icons-material/SportsVolleyballOutlined"; +import QuestionMarkOutlinedIcon from "@mui/icons-material/QuestionMarkOutlined"; + +const data = [ + { + heading: "Navigation", + items: [{ text: "Dashboard", icon: }], + }, + { + heading: "Authentication", + items: [ + { text: "Login", icon: }, + { text: "Register", icon: }, + ], + }, + { + heading: "Utilities", + items: [ + { text: "Typography", icon: }, + { text: "Color", icon: }, + { text: "Shadow", icon: }, + ], + }, + { + heading: "Support", + items: [ + { text: "Sample Page", icon: }, + { text: "Documentation", icon: }, + ], + }, +]; + +export default data; diff --git a/src/components/common/sidebar/style.js b/src/components/common/sidebar/style.js new file mode 100644 index 0000000..60c2402 --- /dev/null +++ b/src/components/common/sidebar/style.js @@ -0,0 +1,18 @@ +export default { + wrapper: { + width: "240px", + "& .MuiDrawer-paper": { + borderRight: "1px solid", + borderColor: "secondary.main", + width: "240px", + boxSizing: "border-box", + backgroundColor: "primary.main", + }, + }, + logo: { + textTransform: "uppercase", + "& span": { + fontSize: "1.5em", + }, + }, +}; diff --git a/src/components/common/topbar/Topbar.jsx b/src/components/common/topbar/Topbar.jsx new file mode 100644 index 0000000..9c6bf00 --- /dev/null +++ b/src/components/common/topbar/Topbar.jsx @@ -0,0 +1,87 @@ +import React from "react"; +import { styled } from "@mui/material/styles"; +import AppBar from "@mui/material/AppBar"; +import Box from "@mui/material/Box"; +import Toolbar from "@mui/material/Toolbar"; +import IconButton from "@mui/material/IconButton"; +import InputBase from "@mui/material/InputBase"; +import Badge from "@mui/material/Badge"; +import Button from "@mui/material/Button"; +import Avatar from "@mui/material/Avatar"; +import style from "./style"; +import Icons from "../../../assets/icons/Icons"; + +const Search = styled("div")(({ theme }) => ({ + position: "relative", + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.secondary.main}`, + backgroundColor: "transparent", + marginRight: theme.spacing(2), + marginLeft: theme.spacing(3), +})); + +const SearchIconWrapper = styled("div")(({ theme }) => ({ + padding: theme.spacing(0, 2), + height: "100%", + position: "absolute", + pointerEvents: "none", + display: "flex", + alignItems: "center", + justifyContent: "center", +})); + +const StyledInputBase = styled(InputBase)(({ theme }) => ({ + color: "inherit", + "& .MuiInputBase-input": { + padding: theme.spacing(1, 1, 1, 0), + paddingLeft: `calc(1em + ${theme.spacing(4)})`, + }, +})); + +const Topbar = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Topbar; diff --git a/src/components/common/topbar/style.js b/src/components/common/topbar/style.js new file mode 100644 index 0000000..fd655ea --- /dev/null +++ b/src/components/common/topbar/style.js @@ -0,0 +1,41 @@ +export default { + wrapper: { + width: `calc(100% - 240px)`, + borderBottom: "1px solid", + borderColor: "secondary.main", + boxShadow: "none", + }, + toggleBtn: { + borderRadius: "0", + backgroundColor: "button.main", + padding: "5px", + "&:hover": { + backgroundColor: "button.light", + }, + }, + actionButtonStyle: { + padding: "10px", + borderRadius: "5px", + backgroundColor: "button.main", + "&:hover": { + backgroundColor: "button.light", + }, + "&:active": { + backgroundColor: "button.dark", + }, + }, + notificationBadge: { + "& .MuiBadge-badge": { + padding: "0 4px", + top: "2px", + right: "3px", + }, + }, + profileBtn: { + padding: "4px 8px", + borderRadius: "5px", + gap: "6px", + backgroundColor: "button.main", + pointerEvents: "none", + }, +}; diff --git a/src/components/incomeOverviewGraph/IncomeOverviewGraph.jsx b/src/components/incomeOverviewGraph/IncomeOverviewGraph.jsx new file mode 100644 index 0000000..867875b --- /dev/null +++ b/src/components/incomeOverviewGraph/IncomeOverviewGraph.jsx @@ -0,0 +1,33 @@ +import React from "react"; +import { BarChart } from "@mui/x-charts/BarChart"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import style from "./style"; + +const IncomeOverviewGraph = () => { + return ( + + + Income Overview + + + + + ); +}; + +export default IncomeOverviewGraph; diff --git a/src/components/incomeOverviewGraph/style.js b/src/components/incomeOverviewGraph/style.js new file mode 100644 index 0000000..ab843da --- /dev/null +++ b/src/components/incomeOverviewGraph/style.js @@ -0,0 +1,4 @@ +export default { + title: { color: "primary.main", marginBottom: "30px" }, + barChartContainer: { backgroundColor: "primary.main", borderRadius: "6px" }, +}; diff --git a/src/components/layout/Layout.jsx b/src/components/layout/Layout.jsx new file mode 100644 index 0000000..18b2d94 --- /dev/null +++ b/src/components/layout/Layout.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import Box from "@mui/material/Box"; +import Sidebar from "../common/sidebar/Sidebar"; +import Topbar from "../common/topbar/Topbar"; +import Dashboard from "../../pages/dashboard/Dashboard"; + +const Layout = () => { + return ( + + + + + + ); +}; + +export default Layout; diff --git a/src/components/statisticsSummary/StatisticsSummary .jsx b/src/components/statisticsSummary/StatisticsSummary .jsx new file mode 100644 index 0000000..958250e --- /dev/null +++ b/src/components/statisticsSummary/StatisticsSummary .jsx @@ -0,0 +1,99 @@ +import React from "react"; +import Box from "@mui/material/Box"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Typography from "@mui/material/Typography"; +import TrendingUpIcon from "@mui/icons-material/TrendingUp"; +import TrendingDownIcon from "@mui/icons-material/TrendingDown"; +import Grid from "@mui/material/Grid2"; +import style from "./style"; + +const StatisticsSummary = () => { + return ( + + + + + Total Page Views + + 4,42,236 + + + 59.3% + + + + You made an extra 35,000 this year + + + + + + + + + Total Users + + 78,250 + + + 70.5% + + + + You made an extra 8,900 this year + + + + + + + + + Total Orders + + 18,800 + + + 27.4% + + + + You made an extra 1,943 this year + + + + + + + + + Total Sales + + $35,078 + + + 27.4% + + + + You made an extra $20,395 this year + + + + + + ); +}; + +export default StatisticsSummary; diff --git a/src/components/statisticsSummary/style.js b/src/components/statisticsSummary/style.js new file mode 100644 index 0000000..b893982 --- /dev/null +++ b/src/components/statisticsSummary/style.js @@ -0,0 +1,24 @@ +export default { + container: { marginBottom: "30px", justifyContent: "center" }, + cardWrapper: { maxWidth: "290px", width: "100%" }, + card: { + borderRadius: "8px", + backgroundColor: "primary.main", + color: "text.primary", + }, + valueBox: { + display: "flex", + alignItems: "center", + gap: "14px", + marginBottom: "24px", + }, + trendBox: { + display: "flex", + alignItems: "center", + backgroundColor: "secondary.main", + padding: "4px 8px", + borderRadius: "5px", + gap: "5px", + color: "primary.main", + }, +}; diff --git a/src/components/uniqueVisitorGraph/UniqueVisitorGraph.jsx b/src/components/uniqueVisitorGraph/UniqueVisitorGraph.jsx new file mode 100644 index 0000000..29e9232 --- /dev/null +++ b/src/components/uniqueVisitorGraph/UniqueVisitorGraph.jsx @@ -0,0 +1,51 @@ +import React from "react"; +import { LineChart, lineElementClasses } from "@mui/x-charts/LineChart"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import ButtonGroup from "@mui/material/ButtonGroup"; +import style from "./style"; + +const UniqueVisitorGraph = () => { + return ( + + + + Unique Visitors + + + + + + + + + ); +}; + +export default UniqueVisitorGraph; diff --git a/src/components/uniqueVisitorGraph/style.js b/src/components/uniqueVisitorGraph/style.js new file mode 100644 index 0000000..d4b267e --- /dev/null +++ b/src/components/uniqueVisitorGraph/style.js @@ -0,0 +1,21 @@ +export default { + graphHeader: { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginBottom: "30px", + gap: "8px", + flexDirection: { xs: "column", sm: "row" }, + }, + graphHeaderBtn: { + borderRadius: "5px", + backgroundColor: "button.dark", + "&:hover": { + backgroundColor: "button.main", + }, + }, + linechartContainer: { + borderRadius: "4px", + backgroundColor: "primary.main", + }, +}; diff --git a/src/index.js b/src/index.jsx similarity index 100% rename from src/index.js rename to src/index.jsx diff --git a/src/pages/dashboard/Dashboard.jsx b/src/pages/dashboard/Dashboard.jsx new file mode 100644 index 0000000..c3bb4bc --- /dev/null +++ b/src/pages/dashboard/Dashboard.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import StatisticsSummary from "../../components/statisticsSummary/StatisticsSummary "; +import UniqueVisitorGraph from "../../components/uniqueVisitorGraph/UniqueVisitorGraph"; +import IncomeOverviewGraph from "../../components/incomeOverviewGraph/IncomeOverviewGraph"; +import style from "./style"; + +const Dashboard = () => { + return ( + + + Dashboard + + + + + + + + ); +}; + +export default Dashboard; diff --git a/src/pages/dashboard/style.js b/src/pages/dashboard/style.js new file mode 100644 index 0000000..be0d794 --- /dev/null +++ b/src/pages/dashboard/style.js @@ -0,0 +1,17 @@ +export default { + wrapper: { + flexGrow: "1", + padding: "22px", + marginTop: "64px", + backgroundColor: "secondary.main", + height: "calc(100vh - 64px)", + overflow: "auto", + }, + heading: { color: "primary.main", marginBottom: "30px" }, + graphsContainer: { + display: "flex", + alignItems: "center", + gap: "25px", + flexDirection: { xs: "column", lg: "row" }, + }, +}; diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000..5b77529 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,33 @@ +import { createTheme } from "@mui/material/styles"; + +const theme = createTheme({ + palette: { + primary: { + main: "#004643", + light: "#026964", + }, + secondary: { + main: "#abd1c6", + }, + text: { + primary: "#fffffe", + }, + button: { + dark: "#fab143", + main: "#f9bc60", + light: "#d9a75b", + text: "#001e1d", + }, + }, + components: { + MuiButton: { + styleOverrides: { + root: { + textTransform: "none", + }, + }, + }, + }, +}); + +export default theme;