Merge pull request #125 from CheesecakeLabs/feat_superuser_front

Feat superuser frontend
CheesecakeLabs · Feb 26, 2024 · fd21856 · fd21856
2 parents 31ca1d6 + 9f4d10e
commit fd21856
Show file tree

Hide file tree

Showing 33 changed files with 477 additions and 102 deletions.
diff --git a/frontend/src/app/core/pages/asset-home/index.tsx b/frontend/src/app/core/pages/asset-home/index.tsx
@@ -35,7 +35,13 @@ export const AssetHome: React.FC = () => {
   const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
   const [isSmallerThanMd] = useMediaQuery('(max-width: 768px)')
 
-  const { loadingAsset, getAssetById, updateImage } = useAssets()
+  const {
+    loadingAsset,
+    updatingAsset,
+    getAssetById,
+    updateImage,
+    updateAsset,
+  } = useAssets()
   const { loadingUserPermissions, userPermissions, getUserPermissions } =
     useAuth()
   const { getPaymentsByAssetId, loadingChart } = useDashboards()
@@ -90,6 +96,34 @@ export const AssetHome: React.FC = () => {
     return false
   }
 
+  const handleUpdateAsset = async (
+    name: string,
+    code: string
+  ): Promise<boolean> => {
+    try {
+      if (!asset?.id) {
+        throw new Error('Invalid asset')
+      }
+      const isSuccess = await updateAsset(asset.id, { name: name, code: code })
+
+      if (isSuccess) {
+        if (id) {
+          getAssetById(id).then(asset => setAsset(asset))
+        }
+        return true
+      }
+
+      toastError(MessagesError.errorOccurred)
+    } catch (error) {
+      let message
+      if (error instanceof Error) message = error.message
+      else message = String(error)
+      toastError(message)
+    }
+
+    return false
+  }
+
   const toastError = (message: string): void => {
     toast({
       title: 'Update logo error!',
@@ -135,6 +169,8 @@ export const AssetHome: React.FC = () => {
                 setSelectedFile={setSelectedFile}
                 setChartPeriod={setChartPeriod}
                 handleUploadImage={handleUploadImage}
+                updatingAsset={updatingAsset}
+                handleUpdateAsset={handleUpdateAsset}
               />
             )}
           </Flex>

diff --git a/frontend/src/app/core/pages/cost-center/index.tsx b/frontend/src/app/core/pages/cost-center/index.tsx
@@ -26,7 +26,8 @@ export interface IHorizonData {
 }
 
 export const CostCenter: React.FC = () => {
-  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
+  const [isLargerThanLg] = useMediaQuery('(min-width: 992px)')
+
   const [sponsorAccount, setSponsorAccount] = useState<string | undefined>()
   const [transactions, setTransactions] =
     useState<Hooks.UseHorizonTypes.ITransactions>()
@@ -279,7 +280,7 @@ export const CostCenter: React.FC = () => {
     <Flex>
       <Sidebar highlightMenu={PathRoute.SETTINGS}>
         <Flex
-          flexDir={isLargerThanMd ? 'row' : 'column'}
+          flexDir={isLargerThanLg ? 'row' : 'column'}
           w="full"
           justifyContent="center"
           gap="1.5rem"
@@ -301,7 +302,7 @@ export const CostCenter: React.FC = () => {
               getTransactionData={getTransactionData}
             />
           </Flex>
-          {isLargerThanMd && (
+          {isLargerThanLg && (
             <VStack>
               <MenuSettings option={SettingsOptions.COST_CENTER} />
               <ActionHelper title={'About Operating Expenses'}>
@@ -319,7 +320,7 @@ export const CostCenter: React.FC = () => {
               </ActionHelper>
             </VStack>
           )}
-          {!isLargerThanMd && (
+          {!isLargerThanLg && (
             <ActionHelper title={'About Operating Expenses'}>
               <Text color="gray.900" lineHeight="22px" fontSize="sm">
                 {operatingExpensesHelperP1}

diff --git a/frontend/src/app/core/pages/role-permissions/index.tsx b/frontend/src/app/core/pages/role-permissions/index.tsx
@@ -18,7 +18,7 @@ export interface IChange {
 }
 
 export const RolePermissions: React.FC = () => {
-  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
+  const [isLargerThanLg] = useMediaQuery('(min-width: 992px)')
   const [changes, setChanges] = useState<IChange[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -97,7 +97,7 @@ export const RolePermissions: React.FC = () => {
     <Flex>
       <Sidebar highlightMenu={PathRoute.SETTINGS}>
         <Flex
-          flexDir={isLargerThanMd ? 'row' : 'column'}
+          flexDir={isLargerThanLg ? 'row' : 'column'}
           w="full"
           justifyContent="center"
           gap="1.5rem"
@@ -116,7 +116,7 @@ export const RolePermissions: React.FC = () => {
               setChanges={setChanges}
             />
           </Flex>
-          {isLargerThanMd && (
+          {isLargerThanLg && (
             <VStack>
               <MenuSettings option={SettingsOptions.ROLE_PERMISSIONS} />
             </VStack>

diff --git a/frontend/src/app/core/pages/roles-manage/index.tsx b/frontend/src/app/core/pages/roles-manage/index.tsx
@@ -12,19 +12,21 @@ import { Sidebar } from 'components/organisms/sidebar'
 import { RolesManageTemplate } from 'components/templates/roles-manage-template'
 
 export const RolesManage: React.FC = () => {
-  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
+  const [isLargerThanLg] = useMediaQuery('(min-width: 992px)')
 
   const {
     getRoles,
     createRole,
     updateRole,
     deleteRole,
     getProfile,
+    getUserPermissions,
     creatingRole,
     updatingRole,
     roles,
     loadingRoles,
     deletingRole,
+    userPermissions
   } = useAuth()
 
   const toast = useToast()
@@ -33,6 +35,10 @@ export const RolesManage: React.FC = () => {
     getRoles()
   }, [getRoles])
 
+  useEffect(() => {
+    getUserPermissions()
+  }, [getUserPermissions])
+
   const handleRole = async (name: string, id?: number): Promise<boolean> => {
     try {
       const profile = await getProfile()
@@ -112,7 +118,7 @@ export const RolesManage: React.FC = () => {
     <Flex>
       <Sidebar highlightMenu={PathRoute.SETTINGS}>
         <Flex
-          flexDir={isLargerThanMd ? 'row' : 'column'}
+          flexDir={isLargerThanLg ? 'row' : 'column'}
           w="full"
           justifyContent="center"
           gap="1.5rem"
@@ -124,11 +130,12 @@ export const RolesManage: React.FC = () => {
               updatingRole={updatingRole}
               deletingRole={deletingRole}
               loadingRoles={loadingRoles}
+              userPermissions={userPermissions}
               handleDeleteRole={handleDeleteRole}
               handleRole={handleRole}
             />
           </Flex>
-          {isLargerThanMd && (
+          {isLargerThanLg && (
             <VStack>
               <MenuSettings option={SettingsOptions.ROLES_MANAGE} />
             </VStack>

diff --git a/frontend/src/app/core/pages/team-members/index.tsx b/frontend/src/app/core/pages/team-members/index.tsx
@@ -11,11 +11,12 @@ import { Sidebar } from 'components/organisms/sidebar'
 import { TeamMembersTemplate } from 'components/templates/team-members'
 
 export const TeamMembers: React.FC = () => {
-  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
+  const [isLargerThanLg] = useMediaQuery('(min-width: 992px)')
 
   const {
     getAllUsers,
     editUsersRole,
+    updateUsername,
     getRoles,
     getUserPermissions,
     users,
@@ -24,6 +25,7 @@ export const TeamMembers: React.FC = () => {
     loadingRoles,
     userPermissions,
     loadingUserPermissions,
+    updatingUsername,
   } = useAuth()
 
   useEffect(() => {
@@ -42,6 +44,19 @@ export const TeamMembers: React.FC = () => {
     return false
   }
 
+  const handleUpdateUsername = async (
+    id: number,
+    name: string
+  ): Promise<boolean> => {
+    const isSuccess = await updateUsername(id, name)
+
+    if (isSuccess) {
+      getAllUsers()
+      return true
+    }
+    return false
+  }
+
   useEffect(() => {
     getAllUsers()
     getRoles()
@@ -52,7 +67,7 @@ export const TeamMembers: React.FC = () => {
     <Flex>
       <Sidebar highlightMenu={PathRoute.SETTINGS}>
         <Flex
-          flexDir={isLargerThanMd ? 'row' : 'column'}
+          flexDir={isLargerThanLg ? 'row' : 'column'}
           w="full"
           justifyContent="center"
           gap="1.5rem"
@@ -61,13 +76,15 @@ export const TeamMembers: React.FC = () => {
             <TeamMembersTemplate
               users={users}
               loading={loading || loadingUserPermissions}
-              handleEditRole={handleEditRole}
               roles={roles}
               loadingRoles={loadingRoles}
               permissions={userPermissions}
+              updatingUsername={updatingUsername}
+              handleUpdateUsername={handleUpdateUsername}
+              handleEditRole={handleEditRole}
             />
           </Flex>
-          {isLargerThanMd && (
+          {isLargerThanLg && (
             <VStack>
               <MenuSettings option={SettingsOptions.TEAM_MEMBERS} />
             </VStack>

diff --git a/frontend/src/components/atoms/mob-nav-item/index.tsx b/frontend/src/components/atoms/mob-nav-item/index.tsx
@@ -13,7 +13,7 @@ export const MobileNav: React.FC<IMobileProps> = ({ onOpen }: IMobileProps) => {
       onClick={onOpen}
       aria-label="open menu"
       me={4}
-      display={{ base: 'flex', md: 'none' }}
+      display={{ base: 'flex', lg: 'none' }}
       fill="black"
       _dark={{ fill: 'white' }}
       icon={<MenuLineIcon width="1rem" />}

diff --git a/frontend/src/components/molecules/header/index.tsx b/frontend/src/components/molecules/header/index.tsx
@@ -65,7 +65,7 @@ export const Header: React.FC<IHeader> = ({ onOpen }) => {
       h="4.5rem"
       w="full"
       align="center"
-      ps={{ base: 2, md: 12 }}
+      ps={{ base: 2, lg: 12 }}
       pe={6}
       pos="fixed"
       zIndex={99}

diff --git a/frontend/src/components/molecules/sidebar-content/index.tsx b/frontend/src/components/molecules/sidebar-content/index.tsx
@@ -31,18 +31,18 @@ export const SidebarContent: React.FC<ISidebarProps> = ({
   onClose,
   ...rest
 }: ISidebarProps) => {
-  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
+  const [isLargerThanLg] = useMediaQuery('(min-width: 992px)')
 
   return (
     <Box
-      w={{ base: 'full', md: 60 }}
+      w={{ base: 'full', lg: 60 }}
       minW="282px"
       pos="fixed"
-      h={{ base: '100vh', md: 'calc(100vh - 5rem)' }}
+      h={{ base: '100vh', lg: 'calc(100vh - 5rem)' }}
       borderRight="1px solid"
       borderColor={'gray.600'}
       pb="2rem"
-      bg={{ sm: 'white', md: 'none' }}
+      bg={{ sm: 'white', lg: 'none' }}
       _dark={{ bg: { base: 'black.600' }, borderColor: 'black.800' }}
       {...rest}
       overflowY="auto"
@@ -52,7 +52,7 @@ export const SidebarContent: React.FC<ISidebarProps> = ({
           h={14}
           justifyContent="space-between"
           alignItems="center"
-          display={{ base: 'flex', md: 'none' }}
+          display={{ base: 'flex', lg: 'none' }}
           w="full"
           pl="2rem"
           mb="1rem"
@@ -93,7 +93,7 @@ export const SidebarContent: React.FC<ISidebarProps> = ({
             </NavItem>
           </Box>
         ))}
-        {isLargerThanMd && <Spacer />}
+        {isLargerThanLg && <Spacer />}
         <NavItem
           key={'Profile'}
           icon={<ProfileIcon />}
@@ -110,7 +110,7 @@ export const SidebarContent: React.FC<ISidebarProps> = ({
         >
           Administration
         </NavItem>
-        {!isLargerThanMd && <Spacer />}
+        {!isLargerThanLg && <Spacer />}
         <Flex mt="1rem" alignItems="center">
           <Flex
             fill="black"

diff --git a/frontend/src/components/organisms/menu-actions-asset/index.tsx b/frontend/src/components/organisms/menu-actions-asset/index.tsx
@@ -21,7 +21,7 @@ import {
 
 interface IMenuActionsAsset {
   action: AssetActions
-  permissions: Hooks.UseAuthTypes.IUserPermission[] | undefined
+  permissions: Hooks.UseAuthTypes.IUserPermission | undefined
 }
 
 export const MenuActionsAsset: React.FC<IMenuActionsAsset> = ({

diff --git a/frontend/src/components/organisms/menu-admin-mobile/index.tsx b/frontend/src/components/organisms/menu-admin-mobile/index.tsx
@@ -65,7 +65,7 @@ export const MenuAdminMobile: React.FC<IMenuAdminMobile> = ({ selected }) => {
 
         <ItemActionAssetMobile
           isSelected={isSelected('COST_CENTER')}
-          title={'perating Expenses'}
+          title={'Operating Expenses'}
           icon={<CoinsIcon width="16px" height="16px" />}
           path={`${PathRoute.COST_CENTER}`}
         />

diff --git a/frontend/src/components/organisms/sidebar/index.tsx b/frontend/src/components/organisms/sidebar/index.tsx
@@ -74,7 +74,7 @@ export const Sidebar: React.FC<IProps> = ({ children, highlightMenu }) => {
         <SidebarContent
           items={linkItems}
           onClose={(): void => onClose()}
-          display={{ base: 'none', md: 'block' }}
+          display={{ base: 'none', lg: 'block' }}
           highlightMenu={highlightMenu}
         />
         <Drawer
@@ -94,7 +94,7 @@ export const Sidebar: React.FC<IProps> = ({ children, highlightMenu }) => {
             />
           </DrawerContent>
         </Drawer>
-        <Box ml={{ base: 0, md: '282px' }} p="4" w="full">
+        <Box ml={{ base: 0, lg: '282px' }} p="4" w="full">
           {children}
         </Box>
       </Flex>