diff --git a/src/components/Tables/TablesTableRow.js b/src/components/Tables/TablesTableRow.js index c440bf4..4eba9cc 100644 --- a/src/components/Tables/TablesTableRow.js +++ b/src/components/Tables/TablesTableRow.js @@ -102,7 +102,7 @@ function TablesTableRow(props) { setAllData={setAllData} userStatus={userStatus} setUserStatus={setUserStatus} - /> + /> ) : ( <PopUp email={email} diff --git a/src/constants/GraduationYear.js b/src/constants/GraduationYear.js new file mode 100644 index 0000000..6e209c5 --- /dev/null +++ b/src/constants/GraduationYear.js @@ -0,0 +1 @@ +export const graduationYear = ["All Members", "2022", "2023", "2024", "2025", "2026", "2027"]; \ No newline at end of file diff --git a/src/layouts/Admin.js b/src/layouts/Admin.js index e4464a1..4fbb868 100644 --- a/src/layouts/Admin.js +++ b/src/layouts/Admin.js @@ -1,108 +1,117 @@ // Chakra imports -import { ChakraProvider, Portal, useDisclosure } from '@chakra-ui/react'; -import Configurator from 'components/Configurator/Configurator'; -import Footer from 'components/Footer/Footer.js'; +import { ChakraProvider, Portal, useDisclosure } from "@chakra-ui/react"; +import Configurator from "components/Configurator/Configurator"; +import Footer from "components/Footer/Footer.js"; // Layout components -import AdminNavbar from 'components/Navbars/AdminNavbar.js'; -import Sidebar from 'components/Sidebar'; -import React, { useState } from 'react'; -import { Redirect, Route, Switch } from 'react-router-dom'; -import routes from 'routes.js'; -import '@fontsource/roboto/400.css'; -import '@fontsource/roboto/500.css'; -import '@fontsource/roboto/700.css'; +import AdminNavbar from "components/Navbars/AdminNavbar.js"; +import Sidebar from "components/Sidebar"; +import React, { useState } from "react"; +import { Redirect, Route, Switch } from "react-router-dom"; +import routes from "routes.js"; +import "@fontsource/roboto/400.css"; +import "@fontsource/roboto/500.css"; +import "@fontsource/roboto/700.css"; // Custom Chakra theme -import theme from 'theme/theme.js'; -import FixedPlugin from '../components/FixedPlugin/FixedPlugin'; +import theme from "theme/theme.js"; +import FixedPlugin from "../components/FixedPlugin/FixedPlugin"; // Custom components -import MainPanel from '../components/Layout/MainPanel'; -import PanelContainer from '../components/Layout/PanelContainer'; -import PanelContent from '../components/Layout/PanelContent'; +import MainPanel from "../components/Layout/MainPanel"; +import PanelContainer from "../components/Layout/PanelContainer"; +import PanelContent from "../components/Layout/PanelContent"; export default function Dashboard(props) { - const { ...rest } = props; - // states and functions - const [ sidebarVariant, setSidebarVariant ] = useState('transparent'); - const [ fixed, setFixed ] = useState(false); - // functions for changing the states from components - const getRoute = () => { - return window.location.pathname !== '/admin/full-screen-maps'; - }; - const getActiveRoute = (routes) => { - let activeRoute = 'Default Brand Text'; - for (let i = 0; i < routes.length; i++) { - if (routes[i].collapse) { - let collapseActiveRoute = getActiveRoute(routes[i].views); - if (collapseActiveRoute !== activeRoute) { - return collapseActiveRoute; - } - } else if (routes[i].category) { - let categoryActiveRoute = getActiveRoute(routes[i].views); - if (categoryActiveRoute !== activeRoute) { - return categoryActiveRoute; - } - } else { - if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { - return routes[i].name; - } - } - } - return activeRoute; - }; - // This changes navbar state(fixed or not) - const getActiveNavbar = (routes) => { - let activeNavbar = false; - for (let i = 0; i < routes.length; i++) { - if (routes[i].category) { - let categoryActiveNavbar = getActiveNavbar(routes[i].views); - if (categoryActiveNavbar !== activeNavbar) { - return categoryActiveNavbar; - } - } else { - if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { - if (routes[i].secondaryNavbar) { - return routes[i].secondaryNavbar; - } - } - } - } - return activeNavbar; - }; - const getRoutes = (routes) => { - return routes.map((prop, key) => { - if (prop.collapse) { - return getRoutes(prop.views); - } - if (prop.category === 'account') { - return getRoutes(prop.views); - } - if (prop.layout === '/admin') { - return <Route path={prop.layout + prop.path} component={prop.component} key={key} />; - } else { - return null; - } - }); - }; - const { isOpen, onOpen, onClose } = useDisclosure(); - document.documentElement.dir = 'ltr'; - // Chakra Color Mode - return ( - <ChakraProvider theme={theme} resetCss={false}> - <Sidebar - routes={routes} - logoText={'PURITY UI DASHBOARD'} - display='none' - sidebarVariant={sidebarVariant} - {...rest} - /> - <MainPanel - w={{ - base: '100%', - xl: 'calc(100% - 275px)' - }} - - > - <Portal> - {/* <AdminNavbar + const { ...rest } = props; + // states and functions + const [sidebarVariant, setSidebarVariant] = useState("transparent"); + const [fixed, setFixed] = useState(false); + // functions for changing the states from components + const getRoute = () => { + return window.location.pathname !== "/admin/full-screen-maps"; + }; + const getActiveRoute = (routes) => { + let activeRoute = "Default Brand Text"; + for (let i = 0; i < routes.length; i++) { + if (routes[i].collapse) { + let collapseActiveRoute = getActiveRoute(routes[i].views); + if (collapseActiveRoute !== activeRoute) { + return collapseActiveRoute; + } + } else if (routes[i].category) { + let categoryActiveRoute = getActiveRoute(routes[i].views); + if (categoryActiveRoute !== activeRoute) { + return categoryActiveRoute; + } + } else { + if ( + window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1 + ) { + return routes[i].name; + } + } + } + return activeRoute; + }; + // This changes navbar state(fixed or not) + const getActiveNavbar = (routes) => { + let activeNavbar = false; + for (let i = 0; i < routes.length; i++) { + if (routes[i].category) { + let categoryActiveNavbar = getActiveNavbar(routes[i].views); + if (categoryActiveNavbar !== activeNavbar) { + return categoryActiveNavbar; + } + } else { + if ( + window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1 + ) { + if (routes[i].secondaryNavbar) { + return routes[i].secondaryNavbar; + } + } + } + } + return activeNavbar; + }; + const getRoutes = (routes) => { + return routes.map((prop, key) => { + if (prop.collapse) { + return getRoutes(prop.views); + } + if (prop.category === "account") { + return getRoutes(prop.views); + } + if (prop.layout === "/admin") { + return ( + <Route + path={prop.layout + prop.path} + component={prop.component} + key={key} + /> + ); + } else { + return null; + } + }); + }; + const { isOpen, onOpen, onClose } = useDisclosure(); + document.documentElement.dir = "ltr"; + // Chakra Color Mode + return ( + <ChakraProvider theme={theme} resetCss={false}> + <Sidebar + routes={routes} + logoText={"PURITY UI DASHBOARD"} + display="none" + sidebarVariant={sidebarVariant} + {...rest} + /> + <MainPanel + w={{ + base: "100%", + xl: "calc(100% - 275px)", + }} + > + <Portal> + {/* <AdminNavbar onOpen={onOpen} logoText={'PURITY UI DASHBOARD'} @@ -111,33 +120,33 @@ export default function Dashboard(props) { fixed={fixed} {...rest} /> */} - </Portal> - {getRoute() ? ( - <PanelContent> - <PanelContainer> - <Switch> - {getRoutes(routes)} - <Redirect from='/admin' to='/admin/dashboard' /> - </Switch> - </PanelContainer> - </PanelContent> - ) : null} - {/* <Footer /> */} - {/* <Portal> + </Portal> + {getRoute() ? ( + <PanelContent> + <PanelContainer> + <Switch> + {getRoutes(routes)} + <Redirect from="/admin" to="/admin/dashboard" /> + </Switch> + </PanelContainer> + </PanelContent> + ) : null} + {/* <Footer /> */} + {/* <Portal> <FixedPlugin secondary={getActiveNavbar(routes)} fixed={fixed} onOpen={onOpen} /> </Portal> */} - <Configurator - secondary={getActiveNavbar(routes)} - isOpen={isOpen} - onClose={onClose} - isChecked={fixed} - onSwitch={(value) => { - setFixed(value); - }} - onOpaque={() => setSidebarVariant('opaque')} - onTransparent={() => setSidebarVariant('transparent')} - /> - </MainPanel> - </ChakraProvider> - ); + <Configurator + secondary={getActiveNavbar(routes)} + isOpen={isOpen} + onClose={onClose} + isChecked={fixed} + onSwitch={(value) => { + setFixed(value); + }} + onOpaque={() => setSidebarVariant("opaque")} + onTransparent={() => setSidebarVariant("transparent")} + /> + </MainPanel> + </ChakraProvider> + ); } diff --git a/src/utils/firebaseFxns/verification.js b/src/utils/firebaseFxns/verification.js index 64d5ff0..41606b7 100644 --- a/src/utils/firebaseFxns/verification.js +++ b/src/utils/firebaseFxns/verification.js @@ -8,6 +8,7 @@ import { query, where, getDocs, + updateDoc } from "firebase/firestore"; import { ulid } from "ulid"; import { db } from "firebaseConfig"; diff --git a/src/views/Dashboard/Tables/components/Authors.js b/src/views/Dashboard/Tables/components/Authors.js index eedf361..0941ec3 100644 --- a/src/views/Dashboard/Tables/components/Authors.js +++ b/src/views/Dashboard/Tables/components/Authors.js @@ -13,24 +13,68 @@ import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; import CardHeader from "components/Card/CardHeader.js"; import TablesTableRow from "components/Tables/TablesTableRow"; -import React from "react"; +import React, { useState, useEffect } from "react"; +import { graduationYear } from "constants/GraduationYear"; + +const Authors = ({ + title, + captions, + data, + allData, + setAllData, + setUserStatus, + userStatus, +}) => { + const [studentData, setStudentData] = useState(data); + const [filterStudentData, setFilterStudentData] = useState(data); + useEffect(() => { + setStudentData(data); + setFilterStudentData(data); + }, [data]); + + const handleGradYear = (e) => { + if (e.target.value === graduationYear[0]) { + setFilterStudentData(studentData); + } else if (e.target.value !== "All") { + const graduationYear = e.target.value; + const filterData = studentData?.filter((user) => { + return ( + graduationYear?.slice(graduationYear.length - 2) == + user?.graduation?.slice(user.graduation.length - 2) + ); + }); + setFilterStudentData(filterData); + } + }; -const Authors = ({ title, captions, data, allData, setAllData, setUserStatus, userStatus }) => { const textColor = useColorModeValue("gray.700", "white"); return ( <Card overflowX={{ sm: "scroll", xl: "hidden" }}> - <CardHeader p='6px 0px 22px 0px'> - <Text fontSize='xl' color={textColor} fontWeight='bold'> - {title} - </Text> + <CardHeader p="6px 0px 22px 0px"> + <div className="flex flex-col items-start md:flex-row md:gap-3"> + <Text fontSize="xl" color={textColor} fontWeight="bold"> + {title} + </Text> + <div className=""> + <h1 className="font-semibold">Select Year Of Graduation</h1> + <select + className="border-2 border-blue-500 p-1 rounded-md" + onChange={handleGradYear} + > + {graduationYear?.map((gradYear) => { + return <option key={gradYear}>{gradYear}</option>; + })} + </select> + </div> + </div> </CardHeader> <CardBody> - <Table variant='simple' color={textColor}> + <Table variant="simple" color={textColor}> <Thead> - <Tr my='.8rem' pl='0px' color='gray.400'> + <Tr my=".8rem" pl="0px" color="gray.400"> {captions.map((caption, idx) => { return ( - <Th color='gray.400' key={idx} ps={idx === 0 ? "0px" : null}> + <Th color="gray.400" key={idx} ps={idx === 0 ? "0px" : null}> {caption} </Th> ); @@ -38,27 +82,33 @@ const Authors = ({ title, captions, data, allData, setAllData, setUserStatus, us </Tr> </Thead> <Tbody> - {data.map((row, index) => { - return ( - <TablesTableRow - key={`${row.email}-${row.name}`} - name={row.name} - logo={row.profilePic} - email={row.email} - subdomain={row.whatsapp} - domain={row.contact} - status={row.isVerified} - date={row.department} - index={index} - paymentSs={row.transactionPic} - uniqueId={row.id} - allData={allData} - setAllData={setAllData} - userStatus={userStatus} - setUserStatus={setUserStatus} - /> - ); - })} + {studentData?.length == 0 ? ( + <h1 className="text-4xl text-center">Loading.....</h1> + ) : filterStudentData.length == 0 ? ( + <h1 className="text-4xl text-center">No Data Found!!</h1> + ) : ( + filterStudentData?.map((row, index) => { + return ( + <TablesTableRow + key={`${row.email}-${row.name}`} + name={row.name} + logo={row.profilePic} + email={row.email} + subdomain={row.whatsapp} + domain={row.contact} + status={row.isVerified} + date={row.department} + index={index} + paymentSs={row.transactionPic} + uniqueId={row.id} + allData={allData} + setAllData={setAllData} + userStatus={userStatus} + setUserStatus={setUserStatus} + /> + ); + }) + )} </Tbody> </Table> </CardBody>