diff --git a/package-lock.json b/package-lock.json index a4171a0..e08d7d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-filterable-table": "^0.3.439", + "react-icons": "^4.4.0", "react-router-dom": "^6.3.0" }, "devDependencies": { @@ -3640,6 +3641,7 @@ }, "node_modules/npm/node_modules/lodash._baseindexof": { "version": "3.1.0", + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -3654,16 +3656,19 @@ }, "node_modules/npm/node_modules/lodash._bindcallback": { "version": "3.0.1", + "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._cacheindexof": { "version": "3.0.2", + "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._createcache": { "version": "3.1.2", + "extraneous": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -3677,6 +3682,7 @@ }, "node_modules/npm/node_modules/lodash._getnative": { "version": "3.9.1", + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -3692,6 +3698,7 @@ }, "node_modules/npm/node_modules/lodash.restparam": { "version": "3.6.1", + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -5764,6 +5771,14 @@ "react-dom": "^15.0.0 || ^16.0.0" } }, + "node_modules/react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -5854,7 +5869,8 @@ "node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true }, "node_modules/sass": { "version": "1.54.8", @@ -5885,6 +5901,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, "bin": { "semver": "bin/semver.js" } @@ -8559,7 +8576,8 @@ }, "lodash._baseindexof": { "version": "3.1.0", - "bundled": true + "bundled": true, + "extraneous": true }, "lodash._baseuniq": { "version": "4.6.0", @@ -8571,15 +8589,18 @@ }, "lodash._bindcallback": { "version": "3.0.1", - "bundled": true + "bundled": true, + "extraneous": true }, "lodash._cacheindexof": { "version": "3.0.2", - "bundled": true + "bundled": true, + "extraneous": true }, "lodash._createcache": { "version": "3.1.2", "bundled": true, + "extraneous": true, "requires": { "lodash._getnative": "^3.0.0" } @@ -8590,7 +8611,8 @@ }, "lodash._getnative": { "version": "3.9.1", - "bundled": true + "bundled": true, + "extraneous": true }, "lodash._root": { "version": "3.0.1", @@ -8602,7 +8624,8 @@ }, "lodash.restparam": { "version": "3.6.1", - "bundled": true + "bundled": true, + "extraneous": true }, "lodash.union": { "version": "4.6.0", @@ -10146,6 +10169,12 @@ } } }, + "react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -10211,7 +10240,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true }, "sass": { "version": "1.54.8", @@ -10235,7 +10265,8 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true }, "source-map-js": { "version": "1.0.2", diff --git a/package.json b/package.json index da7646a..51d886d 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-filterable-table": "^0.3.439", + "react-icons": "^4.4.0", "react-router-dom": "^6.3.0" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 3add27c..831eb31 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import "./assets/styles/style.scss"; // Pages import Login from "./pages/Login"; import Main from "./pages/Main"; +import Dashboard from "./pages/Dashboard"; const App = () => { const [user, setUser] = useState({ @@ -31,6 +32,7 @@ const App = () => {
} /> + } />} /> } />
diff --git a/src/assets/icons/burger.svg b/src/assets/icons/burger.svg deleted file mode 100644 index 1a92159..0000000 --- a/src/assets/icons/burger.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/icons/grid-outline.svg b/src/assets/icons/grid-outline.svg deleted file mode 100644 index 6a4c94d..0000000 --- a/src/assets/icons/grid-outline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/icons/profile.svg b/src/assets/icons/profile.svg deleted file mode 100644 index 9f88d04..0000000 --- a/src/assets/icons/profile.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/styles/_aside.scss b/src/assets/styles/_aside.scss index 3728c58..2ee0922 100644 --- a/src/assets/styles/_aside.scss +++ b/src/assets/styles/_aside.scss @@ -2,12 +2,15 @@ @include transition-std; overflow: hidden; max-width: 0; - min-width: 0rem; width: 100%; + &__img { + width: 3rem; + height: 3rem; + } + &.active { - max-width: 100%; - min-width: 20rem; + max-width: 25rem; @include transition-std; } @@ -20,11 +23,15 @@ &__element { @include transition-std; background: transparent; + display: flex; + gap: 0.6rem; + align-items: center; font-size: 1.6rem; cursor: pointer; - a { + a, + div { display: flex; align-items: center; justify-content: flex-start; @@ -50,6 +57,10 @@ } &--title { + &:not(:first-child) { + padding-top: 1rem; + margin-top: 1rem; + } cursor: default !important; background: transparent !important; font-size: 1.4rem; diff --git a/src/assets/styles/_dashboard.scss b/src/assets/styles/_dashboard.scss new file mode 100644 index 0000000..60df1c7 --- /dev/null +++ b/src/assets/styles/_dashboard.scss @@ -0,0 +1,58 @@ +.dashboard { + &__head { + display: flex; + align-items: center; + gap: 1rem; + + h1 { + font-size: 3.2rem; + } + } + + &__img { + width: 4rem; + height: 4rem; + } + + &__content { + &__stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + } + + &.inner { + display: flex; + flex-direction: column; + gap: 4rem; + } +} + +.statcard { + cursor: default; + @include transition-std; + transform: translateY(0); + border-radius: 0.5rem; + color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + padding: 2rem; + + &:hover { + @include transition-std; + transform: translateY(-1rem); + } + + &.yellow { + background: #c69500; + } + + span { + font-size: 2.4rem; + } + + p { + font-size: 1.6rem; + } +} diff --git a/src/assets/styles/_general.scss b/src/assets/styles/_general.scss index 2b62071..d2a66ff 100644 --- a/src/assets/styles/_general.scss +++ b/src/assets/styles/_general.scss @@ -1,7 +1,7 @@ -@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); * { - font-family: "Montserrat", sans-serif; + font-family: "Poppins", sans-serif; margin: 0; padding: 0; box-sizing: border-box; diff --git a/src/assets/styles/_nav.scss b/src/assets/styles/_nav.scss index d7ba8e5..f0166ee 100644 --- a/src/assets/styles/_nav.scss +++ b/src/assets/styles/_nav.scss @@ -13,7 +13,7 @@ border: 0.1rem solid #c8c8c8; &.active { - height: 15rem; + height: 16.3rem; opacity: 1; @include transition-std; } diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss index 01efd6e..ec48b34 100644 --- a/src/assets/styles/style.scss +++ b/src/assets/styles/style.scss @@ -3,3 +3,4 @@ @import "./nav"; @import "./main"; @import "./aside"; +@import "./dashboard"; diff --git a/src/components/Aside.tsx b/src/components/Aside.tsx index ac9c401..17417b4 100644 --- a/src/components/Aside.tsx +++ b/src/components/Aside.tsx @@ -1,31 +1,60 @@ // Modules import React from "react"; +import { useContext } from "react"; import { Link } from "react-router-dom"; +import { UserContext } from "../context/UserContext"; // Icons -import Grid from "../assets/icons/grid-outline.svg"; +import { BsFillFileEarmarkPostFill } from "react-icons/bs"; +import { AiOutlineBlock } from "react-icons/ai"; +import { MdOutlineManageAccounts } from "react-icons/md"; +import { CgDetailsLess } from "react-icons/cg"; +import { BiLogOut } from "react-icons/bi"; // Types +import { userContextType } from "../types/user"; interface Props { aside: boolean; setAside: React.Dispatch; } const Aside = ({ aside, setAside }: Props) => { + const { setUser }: userContextType = useContext(UserContext); return ( ); diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 30014ad..ebf29f9 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -1,14 +1,16 @@ // Modules import { useContext, useState } from "react"; import { UserContext } from "../context/UserContext"; +import { Link } from "react-router-dom"; // Icons import Orient from "../assets/icons/logo_orient.svg"; -import Burger from "../assets/icons/burger.svg"; -import Profile from "../assets/icons/profile.svg"; +import { GiHamburgerMenu } from "react-icons/gi"; +import { AiOutlineUser } from "react-icons/ai"; // Types import { userContextType } from "../types/user"; + interface Props { aside: boolean; setAside: React.Dispatch; @@ -22,16 +24,14 @@ const Nav = ({ aside, setAside }: Props) => {
-
+ orient -
- + />
{ setDropdown(!dropdown); }} > -
- -
+ Profile
{ + return ( +
+ {topNumber} +

{text}

+
+ ); +}; + +export default StatCard; diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx new file mode 100644 index 0000000..610db91 --- /dev/null +++ b/src/pages/Dashboard.tsx @@ -0,0 +1,31 @@ +// Modules + +// Icons +import { AiOutlineDashboard } from "react-icons/ai"; + +// Components +import StatCard from "../components/StatCard"; + +const Dashboard = () => { + return ( +
+
+
+
+ +

Dashboard

+
+
+ +
+
+
+
+ ); +}; + +export default Dashboard; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 94aa6ff..94f94af 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,6 +1,9 @@ // Modules import { useState, useContext, useEffect } from "react"; -import { useNavigate } from "react-router-dom"; +import { + useNavigate, + // useLocation +} from "react-router-dom"; import { UserContext } from "../context/UserContext"; // Components @@ -12,9 +15,14 @@ import { userContextType } from "../types/user"; const Main = ({ child }: any) => { const navigate = useNavigate(); + // const location = useLocation(); const { user, setUser }: userContextType = useContext(UserContext); const [aside, setAside] = useState(true); + // useEffect(() => { + // if(location.pathname.includes('dashboard')) + // }, []) + useEffect(() => { if (!user.username) { navigate("/login");