feat(web-client): Update UI (#311)

* Updated SidePanel,Added BackButton, * Updated UI till[orgId] --------- Co-authored-by: Allen Shibu <[email protected]>
IEDCMEC · Feb 22, 2024 · 5fc93bf · 5fc93bf
1 parent bd2d753
commit 5fc93bf
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 23 deletions.
diff --git a/apps/web-admin/package.json b/apps/web-admin/package.json
@@ -11,11 +11,13 @@
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@auth0/nextjs-auth0": "^3.5.0",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.15.7",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.9",
     "@mui/x-data-grid": "^6.19.3",
     "autoprefixer": "10.4.16",
     "axios": "^1.5.1",
@@ -31,6 +33,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.0",
+    "react-icons": "^5.0.1",
     "react-qr-reader": "3.0.0-beta-1",
     "sass": "^1.69.1"
   }

diff --git a/apps/web-admin/public/ThisIsAnORG.png b/apps/web-admin/public/ThisIsAnORG.png
diff --git a/apps/web-admin/src/components/ItemCard.jsx b/apps/web-admin/src/components/ItemCard.jsx
@@ -0,0 +1,39 @@
+import { Card, CardBody, Image, Text, Box } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+const ItemCard = (props) => {
+  const router = useRouter();
+
+  if (props.logo == '') {
+    var logo = '/ThisIsAnORG.png';
+  } else {
+    var logo = props.logo;
+  }
+  return (
+    <Box
+      boxShadow="base"
+      backgroundColor="D9D9D9"
+      borderRadius="30px"
+      borderColor="gray"
+      height="180px"
+      width="180px"
+      display="flex"
+      flexDir="column"
+      alignItems="center"
+    >
+      <Image
+        src={logo}
+        alt="logo of org"
+        maxH="100px"
+        maxW="150px"
+        borderRadius="30px"
+        p="10px"
+        textAlign="center"
+      />
+      <Text as="b" fontSize="xl" maxW="150px" textAlign="center">
+        {props.name}
+      </Text>
+    </Box>
+  );
+};
+
+export default ItemCard;
diff --git a/apps/web-admin/src/components/Sidebar.jsx b/apps/web-admin/src/components/Sidebar.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+
 import {
   Box,
   Text,
@@ -12,13 +13,24 @@ import {
   DrawerContent,
   DrawerCloseButton,
   useMediaQuery,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
 } from '@chakra-ui/react';
 import Link from 'next/link';
 import { Router, useRouter } from 'next/router';
+
+import LogoutIcon from '@mui/icons-material/Logout';
+import PermIdentityIcon from '@mui/icons-material/PermIdentity';
+import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';
+import { ManageAccountsTwoTone } from '@mui/icons-material';
+
 const Sidebar = ({ isOpen, onClose }) => {
   const [loading, setLoading] = useState(false);
   const { logout } = useAuth0();
   const [isMobile] = useMediaQuery('(max-width: 768px)');
+  const router = useRouter();
 
   const handleLogout = (e) => {
     e.preventDefault();
@@ -34,22 +46,43 @@ const Sidebar = ({ isOpen, onClose }) => {
     <>
       {/* Desktop Sidebar */}
       {!isMobile ? (
-        <Box display={{ base: 'none', md: 'block' }} padding={4} height="100%" width={80}>
+        <Box
+          display={{ base: 'flex', md: 'block' }}
+          padding={4}
+          height="100%"
+          width={80}
+          backgroundColor="#F4F4F4"
+          justifyContent="space-between"
+          flexDirection="row"
+        >
           <Box paddingY={4}>
             <Text fontSize="4xl" fontWeight="bold">
               techno
             </Text>
           </Box>
-          <SidebarContents />
+          <SideBarTree />
+          <Box paddingY={4} width="100%" display="flex" justifyContent="space-evenly">
+            <AccountLoggedIn />
 
-          <Box paddingY={4}>
             <Button
               onClick={handleLogout}
               isLoading={loading}
               loadingText="Please Wait"
-              width="100%"
+              colorScheme="gray"
+              variant="solid"
+            >
+              <LogoutIcon />
+            </Button>
+
+            <Button
+              onClick={() => {
+                router.push('/settings');
+              }}
+              isLoading={loading}
+              loadingText="Please Wait"
+              colorScheme="gray"
             >
-              Logout
+              <ManageAccountsOutlinedIcon />
             </Button>
           </Box>
         </Box>
@@ -72,9 +105,9 @@ const Sidebar = ({ isOpen, onClose }) => {
                       onClick={handleLogout}
                       isLoading={loading}
                       loadingText="Please Wait"
-                      width="100%"
+                      //width="100%"
                     >
-                      Logout
+                      <LogoutIcon />
                     </Button>
                   </Box>
                 </DrawerBody>
@@ -119,4 +152,42 @@ const SidebarContents = () => {
   );
 };
 
+const SideBarTree = () => {
+  const router = useRouter();
+
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          router.push('/organizations');
+        }}
+      >
+        Organizations
+      </Button>
+    </div>
+  );
+};
+
+const AccountLoggedIn = () => {
+  // const [open,setOpen] = useState(false);
+
+  //const handleClick = () =>{
+  //setOpen(!open);
+  //}
+  return (
+    <div>
+      <Popover>
+        <PopoverTrigger>
+          <Button colorScheme="gray">
+            <PermIdentityIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent maxWidth="50%" marginLeft="8px">
+          <PopoverBody> You are logged in as: </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
 export default Sidebar;
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/index.jsx
@@ -4,11 +4,17 @@ import { Box, Button, Flex, Text } from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 
+import { FiArrowLeftCircle } from 'react-icons/fi';
+import ItemCard from '@/components/ItemCard';
 export default function Organization() {
   const router = useRouter();
 
   const { orgId } = router.query;
 
+  const children = [
+    { id: 0, section: 'events', path: '/events', thumb: '' },
+    { id: 1, section: 'members', path: '/members', thumb: '' },
+  ];
   return (
     <DashboardLayout>
       <Flex
@@ -20,11 +26,51 @@ export default function Organization() {
         gap={8}
       >
         <Box width="100%" p={8} display="flex" justifyContent="space-between">
-          <Text fontSize="4xl" fontWeight="bold">
-            {orgId}
-          </Text>
+          <Box width="100%" p={8} paddingTop="100px" display="flex" alignItems="center" gap="10px">
+            <Box
+              borderRadius="2000px"
+              borderColor="black"
+              colorScheme="gray"
+              variant="ghost"
+              height="60px"
+              display="inline"
+              cursor="pointer"
+              onClick={() => {
+                router.back();
+              }}
+            >
+              <FiArrowLeftCircle size={60} />
+            </Box>
+            <Text fontSize="6xl" fontWeight="bold">
+              {orgId}
+            </Text>
+          </Box>
         </Box>
-        <Flex width="100%" height="100%" gap={4}>
+
+        <Box
+          width="100%"
+          height="100%"
+          borderRadius="30px"
+          gap="50px"
+          backgroundColor="#F4F4F4"
+          p="30px"
+          marginLeft="30px"
+        >
+          {children.map((child) => {
+            return (
+              <Box
+                key={child.id}
+                as="button"
+                onClick={() => {
+                  router.push(`/organizations/${orgId}/${child.path}`);
+                }}
+              >
+                <ItemCard name={child.section} logo={child.thumb} />
+              </Box>
+            );
+          })}
+
+          {/* <Box width="100%" height="100%">
           <Button
             onClick={() => {
               router.push(`/organizations/${orgId}/events`);
@@ -39,7 +85,8 @@ export default function Organization() {
           >
             Members
           </Button>
-        </Flex>
+        </Box> */}
+        </Box>
       </Flex>
     </DashboardLayout>
   );

diff --git a/apps/web-admin/src/pages/organizations/index.jsx b/apps/web-admin/src/pages/organizations/index.jsx
@@ -26,11 +26,12 @@ const MuiTheme = createTheme({});
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import { useEffect, useState } from 'react';
-import { purple } from '@mui/material/colors';
+import { FiArrowLeftCircle } from 'react-icons/fi';
+
+import ItemCard from '@/components/ItemCard';
 
 export default function Organizations() {
   const router = useRouter();
-
   const { orgId } = router.query;
 
   const { loading, get } = useFetch();
@@ -74,24 +75,91 @@ export default function Organizations() {
         justifyContent="center"
         gap={8}
       >
-        <Box width="100%" p={8} display="flex" justifyContent="space-between">
-          <Text fontSize="4xl" fontWeight="bold">
+        <Box width="100%" p={8} paddingTop="100px" display="flex" alignItems="center" gap="10px">
+          <Box
+            borderRadius="2000px"
+            borderColor="black"
+            colorScheme="gray"
+            variant="ghost"
+            height="60px"
+            display="inline"
+            cursor="pointer"
+            onClick={() => {
+              router.back();
+            }}
+          >
+            <FiArrowLeftCircle size={60} />
+          </Box>
+          <Text fontSize="6xl" fontWeight="bold">
             Organizations
           </Text>
+        </Box>
+
+        <Box
+          display="block"
+          borderRadius="30px"
+          gap="30px"
+          backgroundColor="#F4F4F4"
+          p="30px"
+          marginLeft="30px"
+        >
           <Button
             padding="4"
             minWidth="-moz-initial"
             bgColor="rgb(128, 90, 213)"
             color="white"
             _hover={{ bgColor: 'rgb(100, 70, 183)' }}
-            onClick={() => {
-              router.push('organizations/new');
-            }}
+            onClick={handleClick}
+            marginBottom="30px"
           >
             Add Organization
           </Button>
-        </Box>
-        <Box width="100%" height="100%">
+          <Box width="100%" height="100%" borderRadius="30px" display="flex" gap="30px">
+            {/* <ThemeProvider theme={MuiTheme}> */}
+            {organizations.map((organization) => {
+              return (
+                <Box
+                  key={organization.id}
+                  as="button"
+                  width="180px"
+                  height=" 180px"
+                  onClick={() => {
+                    router.push(`/organizations/${organization.id}`);
+                  }}
+                >
+                  <ItemCard name={organization.name} logo="" />
+                </Box>
+              );
+            })}
+          </Box>
+
+          {/*<DataGrid
+              rows={organizations}
+              columns={columns}
+              slotProps={{
+                toolbar: {
+                  showQuickFilter: true,
+                  quickFilterProps: { debounceMs: 500 },
+                },
+              }}
+              slots={{
+                toolbar: GridToolbar,
+              }}
+              autoHeight
+              sx={{
+                // disable cell selection style
+                '.MuiDataGrid-cell:focus': {
+                  outline: 'none',
+                },
+                // pointer cursor on ALL rows
+                '& .MuiDataGrid-row:hover': {
+                  cursor: 'pointer',
+                },
+              }}
+              onRowClick={handleRowClick}
+            />*/}
+
+          {/* </ThemeProvider> */}
           {organizations.length === 0 && (
             <Flex height="100%" width="100%" justifyContent="center" alignItems="center">
               <Text fontSize="2xl" fontWeight="semibold">