From dc7f9319dfd9703b455b03d709bca87249d2ca3e Mon Sep 17 00:00:00 2001 From: Basith P Date: Thu, 20 Apr 2023 15:04:49 +0530 Subject: [PATCH 1/4] Set up dashboard routes --- src/App.tsx | 46 +++++++++++-------- .../DashboardView/components/Sidebar.tsx | 33 +++++++++++++ src/views/DashboardView/exports.tsx | 6 +++ .../layouts/DashboardRootLayout.tsx | 27 +++++++++++ src/views/DashboardView/pages/Dashboard.tsx | 5 ++ .../DashboardView/pages/LearningCircles.tsx | 5 ++ .../DashboardView/pages/MuLearnAdmin.tsx | 5 ++ 7 files changed, 109 insertions(+), 18 deletions(-) create mode 100644 src/views/DashboardView/components/Sidebar.tsx create mode 100644 src/views/DashboardView/exports.tsx create mode 100644 src/views/DashboardView/layouts/DashboardRootLayout.tsx create mode 100644 src/views/DashboardView/pages/Dashboard.tsx create mode 100644 src/views/DashboardView/pages/LearningCircles.tsx create mode 100644 src/views/DashboardView/pages/MuLearnAdmin.tsx diff --git a/src/App.tsx b/src/App.tsx index 3918fa4..8c5a05e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,30 +1,40 @@ -import { useState } from "react" -import reactLogo from "./assets/react.svg" -import "./App.css" -import { Route, Routes } from "react-router-dom" -import Validate from "./Pages/Portal/User/Validate/Validate" -import Onboarding from "./Pages/Portal/User/Onboarding/Onboarding" -import Profile from "./Pages/Portal/User/Profile/Profile" -import Success from "./Pages/Portal/User/Onboarding/Success" -import Login from "./Pages/Portal/User/Authentication/Login" -import ForgotPassword from "./Pages/Portal/User/Authentication/ForgotPassword" -import ResetPassword from "./Pages/Portal/User/Authentication/ResetPassword" +import { useState } from "react"; +import reactLogo from "./assets/react.svg"; +import "./App.css"; +import { Route, Routes } from "react-router-dom"; +import Validate from "./Pages/Portal/User/Validate/Validate"; +import Onboarding from "./Pages/Portal/User/Onboarding/Onboarding"; +import Profile from "./Pages/Portal/User/Profile/Profile"; +import Success from "./Pages/Portal/User/Onboarding/Success"; +import Login from "./Pages/Portal/User/Authentication/Login"; +import ForgotPassword from "./Pages/Portal/User/Authentication/ForgotPassword"; +import ResetPassword from "./Pages/Portal/User/Authentication/ResetPassword"; -function App() { +import { + DashboardRootLayout, + Dashboard, + LearningCircles, + MuLearnAdmin, +} from "./views/DashboardView/exports"; +function App() { return ( } /> - } - /> + } /> } /> } /> } /> } /> + + {/* Dashboard */} + }> + } /> + } /> + } /> + - ) + ); } -export default App +export default App; diff --git a/src/views/DashboardView/components/Sidebar.tsx b/src/views/DashboardView/components/Sidebar.tsx new file mode 100644 index 0000000..2840131 --- /dev/null +++ b/src/views/DashboardView/components/Sidebar.tsx @@ -0,0 +1,33 @@ +import { List, ListItem, ListIcon } from "@chakra-ui/react"; +import { NavLink } from "react-router-dom"; + +export default function Sidebar() { + return ( + + {[ + { + name: "Dashboard", + // icon: CalendarIcon, + path: "", + }, + { + name: "Learning Circles", + // icon: EditIcon, + path: "learning-circles", + }, + { + name: "MuLearn Admin", + // icon: AtSignIcon, + path: "admin", + }, + ].map((item, index) => ( + + + {/* */} + {item.name} + + + ))} + + ); +} diff --git a/src/views/DashboardView/exports.tsx b/src/views/DashboardView/exports.tsx new file mode 100644 index 0000000..edf7540 --- /dev/null +++ b/src/views/DashboardView/exports.tsx @@ -0,0 +1,6 @@ +import DashboardRootLayout from "./layouts/DashboardRootLayout"; +import Dashboard from "./pages/Dashboard"; +import LearningCircles from "./pages/LearningCircles"; +import MuLearnAdmin from "./pages/MuLearnAdmin"; + +export { DashboardRootLayout, Dashboard, LearningCircles, MuLearnAdmin }; diff --git a/src/views/DashboardView/layouts/DashboardRootLayout.tsx b/src/views/DashboardView/layouts/DashboardRootLayout.tsx new file mode 100644 index 0000000..4ac25e3 --- /dev/null +++ b/src/views/DashboardView/layouts/DashboardRootLayout.tsx @@ -0,0 +1,27 @@ +import { Grid, GridItem, Text } from "@chakra-ui/react"; +import { Outlet } from "react-router-dom"; +import Sidebar from "../components/Sidebar"; + +const DashboardRootLayout = () => { + return ( + + {/* sidebar */} + + + + + {/* main content & navbar */} + + {/* */} + + + + ); +}; + +export default DashboardRootLayout; diff --git a/src/views/DashboardView/pages/Dashboard.tsx b/src/views/DashboardView/pages/Dashboard.tsx new file mode 100644 index 0000000..87ff770 --- /dev/null +++ b/src/views/DashboardView/pages/Dashboard.tsx @@ -0,0 +1,5 @@ +const Dashboard = () => { + return
Dashboard
; +}; + +export default Dashboard; diff --git a/src/views/DashboardView/pages/LearningCircles.tsx b/src/views/DashboardView/pages/LearningCircles.tsx new file mode 100644 index 0000000..0f06614 --- /dev/null +++ b/src/views/DashboardView/pages/LearningCircles.tsx @@ -0,0 +1,5 @@ +const LearningCircles = () => { + return
LearningCircles
; +}; + +export default LearningCircles; diff --git a/src/views/DashboardView/pages/MuLearnAdmin.tsx b/src/views/DashboardView/pages/MuLearnAdmin.tsx new file mode 100644 index 0000000..f726d98 --- /dev/null +++ b/src/views/DashboardView/pages/MuLearnAdmin.tsx @@ -0,0 +1,5 @@ +const MuLearnAdmin = () => { + return
MuLearnAdmin
; +}; + +export default MuLearnAdmin; From 13e4440ac3e9395e05793a9aa5fc8ec129c8bc7d Mon Sep 17 00:00:00 2001 From: Basith P Date: Thu, 20 Apr 2023 15:54:16 +0530 Subject: [PATCH 2/4] develop: dashboard sidebar --- package-lock.json | 15 +++ package.json | 1 + src/index.css | 3 + .../DashboardView/components/Sidebar.tsx | 102 +++++++++++++----- .../layouts/DashboardRootLayout.tsx | 17 +-- 5 files changed, 103 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 39810f3..da12513 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "lottie-react": "^2.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.8.0", "react-router-dom": "^6.9.0", "react-select": "^5.7.2" }, @@ -2983,6 +2984,14 @@ } } }, + "node_modules/react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -5553,6 +5562,12 @@ "use-sidecar": "^1.1.2" } }, + "react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 2681c13..c9e4f11 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "lottie-react": "^2.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.8.0", "react-router-dom": "^6.9.0", "react-select": "^5.7.2" }, diff --git a/src/index.css b/src/index.css index e69de29..1236d8e 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} diff --git a/src/views/DashboardView/components/Sidebar.tsx b/src/views/DashboardView/components/Sidebar.tsx index 2840131..a7d1c33 100644 --- a/src/views/DashboardView/components/Sidebar.tsx +++ b/src/views/DashboardView/components/Sidebar.tsx @@ -1,33 +1,81 @@ -import { List, ListItem, ListIcon } from "@chakra-ui/react"; +import { useState } from "react"; + import { NavLink } from "react-router-dom"; +import { + List, + ListItem, + ListIcon, + Text, + Box, + Image, + Flex, +} from "@chakra-ui/react"; +import { BsGrid, BsGridFill } from "react-icons/bs"; +import { + AiOutlinePieChart, + AiFillPieChart, + AiOutlineUser, +} from "react-icons/ai"; export default function Sidebar() { + const [currentIndex, setCurrentIndex] = useState(0); + return ( - - {[ - { - name: "Dashboard", - // icon: CalendarIcon, - path: "", - }, - { - name: "Learning Circles", - // icon: EditIcon, - path: "learning-circles", - }, - { - name: "MuLearn Admin", - // icon: AtSignIcon, - path: "admin", - }, - ].map((item, index) => ( - - - {/* */} - {item.name} - - - ))} - + + MuLearn Logo + + {[ + { + name: "Dashboard", + icon: BsGrid, + activeIcon: BsGridFill, + path: "", + }, + { + name: "Learning Circles", + icon: AiOutlinePieChart, + activeIcon: AiFillPieChart, + path: "learning-circles", + }, + { + name: "MuLearn Admin", + icon: AiOutlineUser, + activeIcon: AiOutlineUser, + path: "admin", + }, + ].map((item, index) => ( + + setCurrentIndex(index)}> + + {item.name} + + + ))} + + ); } diff --git a/src/views/DashboardView/layouts/DashboardRootLayout.tsx b/src/views/DashboardView/layouts/DashboardRootLayout.tsx index 4ac25e3..ace6ed9 100644 --- a/src/views/DashboardView/layouts/DashboardRootLayout.tsx +++ b/src/views/DashboardView/layouts/DashboardRootLayout.tsx @@ -4,19 +4,20 @@ import Sidebar from "../components/Sidebar"; const DashboardRootLayout = () => { return ( - + {/* sidebar */} - + {/* main content & navbar */} - + {/* */} From 4f1b117b97fc193277d7aba0afa6546606ec7bfe Mon Sep 17 00:00:00 2001 From: Basith P Date: Fri, 21 Apr 2023 18:23:20 +0530 Subject: [PATCH 3/4] add: dashboard top bar --- .../components/DashboardTopBar.tsx | 44 +++++++++++++++++++ .../DashboardView/components/Sidebar.tsx | 16 ++++++- .../layouts/DashboardRootLayout.tsx | 10 +++-- 3 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 src/views/DashboardView/components/DashboardTopBar.tsx diff --git a/src/views/DashboardView/components/DashboardTopBar.tsx b/src/views/DashboardView/components/DashboardTopBar.tsx new file mode 100644 index 0000000..e3fc35f --- /dev/null +++ b/src/views/DashboardView/components/DashboardTopBar.tsx @@ -0,0 +1,44 @@ +import { + Avatar, + Box, + Button, + Flex, + Heading, + HStack, + VStack, +} from "@chakra-ui/react"; + +interface DashboardTopBarProps { + title: string; +} + +const DashboardTopBar: React.FC = ({ title }) => { + return ( + + + {title} + + + + + John Doe + + + + + + + ); +}; + +export default DashboardTopBar; diff --git a/src/views/DashboardView/components/Sidebar.tsx b/src/views/DashboardView/components/Sidebar.tsx index a7d1c33..b30d7e6 100644 --- a/src/views/DashboardView/components/Sidebar.tsx +++ b/src/views/DashboardView/components/Sidebar.tsx @@ -17,9 +17,18 @@ import { AiOutlineUser, } from "react-icons/ai"; -export default function Sidebar() { +interface SidebarProps { + setTitle: (title: string) => void; +} + +export default function Sidebar({ setTitle }: SidebarProps) { const [currentIndex, setCurrentIndex] = useState(0); + const handleItemClick = (index: number, title: string) => { + setCurrentIndex(index); + setTitle(title); // Call setTitle to update title + }; + return ( - setCurrentIndex(index)}> + handleItemClick(index, item.name)} + > { + const [title, setTitle] = useState("Dashboard"); + return ( { gap={6} minHeight={{ lg: "100vh" }} > - {/* sidebar */} - + - {/* main content & navbar */} - {/* */} + From e6d68e8c311fdba2b4226bbada4ed1542f00b124 Mon Sep 17 00:00:00 2001 From: Basith P Date: Wed, 26 Apr 2023 18:42:44 +0530 Subject: [PATCH 4/4] add: table ui in dashboard --- src/Components/CustomBtn.tsx | 24 ++++ src/views/DashboardView/pages/Dashboard.tsx | 135 +++++++++++++++++++- 2 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 src/Components/CustomBtn.tsx diff --git a/src/Components/CustomBtn.tsx b/src/Components/CustomBtn.tsx new file mode 100644 index 0000000..8738703 --- /dev/null +++ b/src/Components/CustomBtn.tsx @@ -0,0 +1,24 @@ +import { Box, Button, Text } from "@chakra-ui/react"; +import { IconContext } from "react-icons/lib"; + +interface CustomBtnProps { + name: string; + icon: any; + handleClick: () => void; +} + +const CustomBtn = ({ name, icon, handleClick }: CustomBtnProps) => { + return ( + + ); +}; + +export default CustomBtn; diff --git a/src/views/DashboardView/pages/Dashboard.tsx b/src/views/DashboardView/pages/Dashboard.tsx index 87ff770..1fec9d1 100644 --- a/src/views/DashboardView/pages/Dashboard.tsx +++ b/src/views/DashboardView/pages/Dashboard.tsx @@ -1,5 +1,138 @@ +import { + Flex, + Input, + Table, + Thead, + Tbody, + Tr, + Th, + Td, + TableContainer, + InputRightElement, + InputGroup, +} from "@chakra-ui/react"; +import { BsFillPencilFill, BsFilterLeft, BsSearch } from "react-icons/bs"; + +import CustomBtn from "../../../Components/CustomBtn"; + const Dashboard = () => { - return
Dashboard
; + return ( + <> + + } + handleClick={() => {}} + /> + + + } + /> + + } + handleClick={() => {}} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePhone NumberEmailRole
JohnDoe1234567890 + abc@ef.com + Admin
JohnDoe1234567890 + abc@ef.com + Admin
JohnDoe1234567890 + abc@ef.com + Admin
JohnDoe1234567890 + abc@ef.com + Admin
JohnDoe1234567890 + abc@ef.com + Admin
JohnDoe1234567890 + abc@ef.com + Admin
JohnDoe1234567890 + abc@ef.com + Admin
JohnDoe1234567890 + abc@ef.com + Admin
+ + + ); }; export default Dashboard;