feat: Added new features to the sidebar (#445)

* added new features in taskbar

* added coming soon page

apps/web-admin/src/components/ComingSoon.jsx

@@ -0,0 +1,39 @@
+import { Heading } from '@chakra-ui/react';
+import { Highlight } from '@chakra-ui/react';
+import { color } from 'framer-motion';
+import React from 'react';
+
+const ComingSoon = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        gap: '2rem',
+        height: '75%',
+      }}
+    >
+      <Heading as="h1" size="4xl">
+        <Highlight
+          query="Coming Soon !"
+          styles={{
+            px: '6',
+            py: '1',
+            rounded: 'full',
+            bg: '#319795',
+            color: 'whiteAlpha.900',
+          }}
+        >
+          Coming Soon !
+        </Highlight>
+      </Heading>
+      <Heading as="h3" size="lg">
+        Check back soon for updates.
+      </Heading>
+    </div>
+  );
+};
+
+export default ComingSoon;

apps/web-admin/src/components/EventsDisplay.jsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react';
+import { useFetch } from '@/hooks/useFetch';
+import { useAlert } from '@/hooks/useAlert';
+import {
+  Box,
+  UnorderedList,
+  ListItem,
+  Link,
+  Text,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  SkeletonText,
+} from '@chakra-ui/react';
+
+import NextLink from 'next/link';
+import { MdOutlineEvent } from 'react-icons/md';
+import { useRouter } from 'next/router';
+
+const EventsDisplay = () => {
+  const [events, setEvents] = useState([]);
+
+  const router = useRouter();
+  const { orgId } = router.query;
+
+  const showAlert = useAlert();
+  const { loading, get } = useFetch();
+
+  useEffect(() => {
+    if (orgId) {
+      const fetchEvents = async () => {
+        const { data, status } = await get(`/core/organizations/${orgId}/events`);
+        if (status === 200) {
+          setEvents(data.events || []);
+        } else {
+          showAlert({
+            title: 'Error',
+            description: data.error,
+            status: 'error',
+          });
+        }
+      };
+      fetchEvents();
+    }
+  }, [orgId]);
+
+  if (!orgId || loading) {
+    return (
+      <div>
+        <SkeletonText m={[4, 2, 4, 2]} noOfLines={2} spacing="4" skeletonHeight="2" />
+      </div>
+    );
+  }
+
+  if (events.length === 0) {
+    return <div>No events found for this organization.</div>;
+  }
+
+  return (
+    <Accordion allowToggle>
+      <AccordionItem border="none">
+        <AccordionButton
+          _hover={{ color: 'black.400', backgroundColor: 'gray.100', cursor: 'pointer' }}
+          transition="outline 0.2s"
+          borderRadius="md"
+          padding="2"
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+        >
+          <Box mr={2}>
+            <MdOutlineEvent />
+          </Box>
+          <Text fontSize="lg">Events</Text>
+          <AccordionIcon />
+        </AccordionButton>
+        <AccordionPanel pb={4}>
+          <UnorderedList>
+            {events.map((event) => (
+              <ListItem key={event.id}>
+                <Link as={NextLink} href={`/${orgId}/events/${event.id}`} passHref>
+                  {event.name}
+                </Link>
+              </ListItem>
+            ))}
+          </UnorderedList>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default EventsDisplay;

apps/web-admin/src/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import {
   Box,
@@ -14,13 +14,22 @@ import {
   useMediaQuery,
 } from '@chakra-ui/react';
 import Link from 'next/link';
+import { MdOutlineEvent } from 'react-icons/md';
+import { PiCertificate } from 'react-icons/pi';
+import { MdOutlineEmail } from 'react-icons/md';
+import { MdOutlineSettings } from 'react-icons/md';
 import { Router, useRouter } from 'next/router';
+import EventsDisplay from './EventsDisplay';
+import { account } from '../contexts/MyContext';
 
 const Sidebar = ({ isOpen, onClose }) => {
   const [loading, setLoading] = useState(false);
   const { logout } = useAuth0();
   const [isMobile] = useMediaQuery('(max-width: 768px)');
 
+  const router = useRouter();
+  const { orgId } = router.query;
+
   const handleLogout = (e) => {
     e.preventDefault();
     setLoading(true);
@@ -34,14 +43,33 @@ const Sidebar = ({ isOpen, onClose }) => {
   return (
     <>
       {!isMobile ? (
-        <Box padding={4} height="100%" minWidth={50} width={80}>
+        <Box
+          padding={4}
+          height="100%"
+          minWidth={50}
+          width={80}
+          display="flex"
+          flexDirection="column"
+        >
           <Box paddingY={4}>
             <Text fontSize="4xl" fontWeight="bold">
               Event Sync
             </Text>
           </Box>
+
+          <EventsDisplay />
           <SidebarContents />
 
+          <Box flex="1"></Box>
+          <Button
+            onClick={() => {
+              router.push(`/${orgId}/settings`);
+            }}
+            isLoading={loading}
+            width="100%"
+          >
+            Organization Settings
+          </Button>
           <Box paddingY={4}>
             <Button
               onClick={handleLogout}
@@ -65,8 +93,19 @@ const Sidebar = ({ isOpen, onClose }) => {
                   </Text>
                 </DrawerHeader>
                 <DrawerBody>
+                  <EventsDisplay />
                   <SidebarContents />
 
+                  <Box flex="1"></Box>
+                  <Button
+                    onClick={() => {
+                      router.push(`/${orgId}/settings`);
+                    }}
+                    isLoading={loading}
+                    width="100%"
+                  >
+                    Organization Settings
+                  </Button>
                   <Box paddingY={4}>
                     <Button
                       onClick={handleLogout}
@@ -88,15 +127,22 @@ const Sidebar = ({ isOpen, onClose }) => {
 };
 
 const SidebarContents = () => {
+  const router = useRouter();
+  const { orgId } = router.query;
+
+  const { accountDetails } = useContext(account);
+  const isUser = accountDetails.role === 'USER';
+
   const sidebarItems = [
-    { label: 'Organizations', path: '/organizations' },
-    { label: 'Settings', path: '/settings' },
+    // { label: 'Events', path: `/${orgId}/events`, icon: <MdOutlineEvent /> },
+    { label: 'My Certificates', path: `/${orgId}/mycertificates`, icon: <PiCertificate /> },
+    { label: 'Email Settings', path: `/${orgId}/emailsettings`, icon: <MdOutlineEmail /> },
+    ...(isUser ? [{ label: 'Settings', path: `/settings`, icon: <MdOutlineSettings /> }] : []),
   ];
-  const router = useRouter();
 
   return (
     <>
-      <Box paddingY={4}>
+      <Box>
         {/* Map over the sidebarItems array to generate sidebar items */}
         {sidebarItems.map((item, index) => (
           <Box
@@ -108,7 +154,11 @@ const SidebarContents = () => {
             transition="outline 0.2s"
             borderRadius="md"
             padding="2"
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
           >
+            <Box mr={2}>{item.icon}</Box>
             <Text fontSize="lg">{item.label}</Text>
           </Box>
         ))}

apps/web-admin/src/pages/[orgId]/emailsettings/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import DashboardLayout from '@/layouts/DashboardLayout';
+import ComingSoon from '@/components/ComingSoon';
+
+const EmailSettings = () => {
+  const router = useRouter();
+  const { orgId } = router.query;
+  return (
+    <DashboardLayout pageTitle="Email Settings" previousPage={`${orgId}`}>
+      <ComingSoon />
+    </DashboardLayout>
+  );
+};
+
+export default EmailSettings;

apps/web-admin/src/pages/[orgId]/index.jsx

@@ -56,18 +56,6 @@ export default function OrganizationById() {
     <DashboardLayout
       pageTitle={accountDetails?.name}
       currentPage={`${accountDetails?.orgId}`}
-      headerButton={
-        <>
-          <Button
-            onClick={() => {
-              router.push(`/${orgId}/settings`);
-            }}
-            isLoading={loading}
-          >
-            Organization Settings
-          </Button>
-        </>
-      }
       debugInfo={accountDetails}
     >
       <Flex gap={4}>

apps/web-admin/src/pages/[orgId]/mycertificates/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import DashboardLayout from '@/layouts/DashboardLayout';
+import ComingSoon from '@/components/ComingSoon';
+
+const MyCertificates = () => {
+  const router = useRouter();
+  const { orgId } = router.query;
+  return (
+    <DashboardLayout pageTitle="My Certificates" previousPage={`${orgId}`}>
+      <ComingSoon />
+    </DashboardLayout>
+  );
+};
+
+export default MyCertificates;