feat: static team settings page

src/App.tsx

@@ -21,8 +21,8 @@ import Service from 'pages/Service'
 import Services from 'pages/Services'
 import Setting from 'pages/Setting'
 import SettingsOverview from 'pages/SettingsOverview'
-import Team from 'pages/Team'
-import Teams from 'pages/Teams'
+import Team from 'pages/teams/create-edit'
+import Teams from 'pages/teams/overview'
 import Policies from 'pages/Policies'
 import SessionProvider from 'providers/Session'
 import ThemeProvider from 'theme'

src/components/AdvancedSettings.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { styled } from '@mui/material/styles'
+import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material'
+import { KeyboardArrowRight } from '@mui/icons-material'
+import { Typography } from './Typography'
+
+const StyledTitle = styled(Typography)(({ theme }) => ({
+  marginTop: 0,
+  color: theme.palette.cl.text.title,
+}))
+
+const StyledDescription = styled(Typography)(({ theme }) => ({
+  color: theme.palette.cl.text.subTitle,
+}))
+
+const StyledAccordion = styled(Accordion)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  boxShadow: 'none !important',
+  margin: '0px !important',
+  '&:before': {
+    display: 'none', // Remove the default border above the accordion
+  },
+}))
+
+const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  boxShadow: 'none',
+  marginTop: '0px',
+  padding: 0,
+  '&:before': {
+    display: 'none', // Remove the default border above the accordion
+  },
+}))
+
+const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+  padding: '0',
+  '.MuiAccordionSummary-content': {
+    margin: '0', // Remove margin between text and icon
+  },
+  marginTop: '0px !important',
+  display: 'inline-flex',
+}))
+
+interface Props {
+  description?: string
+  title?: string
+  children?: React.ReactNode
+  noPaddingTop?: boolean
+}
+
+export default function AdvancedSettings(props: Props) {
+  const { title = 'Advanced Settings', description, children, noPaddingTop } = props
+  const [expanded, setExpanded] = useState(true)
+
+  const handleAccordionChange = () => {
+    setExpanded((prev) => !prev)
+  }
+
+  return (
+    <StyledAccordion disableGutters expanded={expanded} onChange={handleAccordionChange}>
+      <StyledAccordionSummary
+        expandIcon={<KeyboardArrowRight />}
+        sx={{
+          '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+            transform: 'rotate(90deg)',
+          },
+        }}
+      >
+        <div>
+          {title && <StyledTitle variant='subtitle1'>{title}</StyledTitle>}
+          {description && <StyledDescription>{description}</StyledDescription>}
+        </div>
+      </StyledAccordionSummary>
+      <StyledAccordionDetails>{children}</StyledAccordionDetails>
+    </StyledAccordion>
+  )
+}

src/components/ControlledBox.tsx

@@ -0,0 +1,16 @@
+import Box, { BoxProps } from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+
+interface ControlledBoxProps extends BoxProps {
+  disabled?: boolean
+}
+
+const ControlledBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'disabled',
+})<ControlledBoxProps>(({ disabled }) => ({
+  opacity: disabled ? 0.5 : 1,
+  pointerEvents: disabled ? 'none' : 'auto',
+  cursor: disabled ? 'default' : 'text',
+}))
+
+export default ControlledBox

src/components/Dashboard.tsx

@@ -1,7 +1,6 @@
 import { Box, Card, Grid, Typography, useTheme } from '@mui/material'
 import { useSession } from 'providers/Session'
 import * as React from 'react'
-import { GetTeamApiResponse } from 'redux/otomiApi'
 import { makeStyles } from 'tss-react/mui'
 import { getDomain } from 'layouts/Shell'
 import useSettings from 'hooks/useSettings'
@@ -92,7 +91,7 @@ const useStyles = makeStyles()((theme) => ({
 
 // types -----------------------------------------------------------
 interface Props {
-  team?: GetTeamApiResponse
+  team?: any
   inventory: any
 }
 

src/components/DeleteButton.tsx

@@ -2,8 +2,20 @@ import DeleteIcon from '@mui/icons-material/Delete'
 import { LoadingButton } from '@mui/lab'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { darken, styled } from '@mui/material'
 import DeleteDialog from './DeleteDialog'
 
+const StyledDeleteButton = styled(LoadingButton)(({ theme }) => ({
+  float: 'right',
+  textTransform: 'capitalize',
+  marginLeft: theme.spacing(2),
+  color: 'white',
+  backgroundColor: theme.palette.cm.red,
+  '&:hover': {
+    backgroundColor: darken(theme.palette.cm.red as string, 0.2),
+  },
+}))
+
 interface DeleteButtonProps {
   disabled?: boolean
   loading?: boolean
@@ -28,7 +40,7 @@ export default function ({ loading, disabled, sx, ...other }: DeleteButtonProps)
   return (
     <>
       {dialogOpen && <DeleteDialog onCancel={onDialogCancel} loading={loading} {...other} />}
-      <LoadingButton
+      <StyledDeleteButton
         disabled={disabled}
         startIcon={<DeleteIcon />}
         onClick={onButtonClick}
@@ -37,7 +49,7 @@ export default function ({ loading, disabled, sx, ...other }: DeleteButtonProps)
         sx={{ ...sx }}
       >
         {t('delete')}
-      </LoadingButton>
+      </StyledDeleteButton>
     </>
   )
 }

src/components/ImgButtonGroup.tsx

@@ -30,14 +30,15 @@ const StyledTypography = styled(Typography)<{ selected: boolean }>(({ theme, sel
 
 interface ImgButtonGroupProps {
   title: string
+  description?: string
   name: string
   control: any
   value: string
   options: { value: string; label: string; imgSrc: string }[]
   onChange?: (value: string) => void
 }
 
-function ImgButtonGroup({ title, name, control, value, options, onChange }: ImgButtonGroupProps) {
+function ImgButtonGroup({ title, description, name, control, value, options, onChange }: ImgButtonGroupProps) {
   return (
     <Controller
       name={name}
@@ -49,6 +50,7 @@ function ImgButtonGroup({ title, name, control, value, options, onChange }: ImgB
             <Typography variant='h6' sx={{ fontSize: 16, fontWeight: 400 }}>
               {title}
             </Typography>
+            {description && <Typography>{description}</Typography>}
           </Box>
           <Box sx={{ display: 'flex', gap: 1 }}>
             {options.map((option) => (

src/components/InformationBanner.tsx

@@ -2,24 +2,26 @@ import { Box, Typography, styled, useTheme } from '@mui/material'
 import React from 'react'
 import Iconify from './Iconify'
 
-const StyledInfoBanner = styled(Box)({
+const StyledInfoBanner = styled(Box)<{ small?: boolean }>(({ theme, small }) => ({
   backgroundColor: '#f2f2894d',
-  padding: '10px',
+  padding: small ? '5px' : '10px',
   border: '1px solid #d4d402',
   borderRadius: '8px',
   display: 'flex',
   alignItems: 'center',
-})
+  maxWidth: small ? '800px' : 'inherit',
+}))
 
 interface Props {
-  message: string
+  message: string | React.ReactNode
+  small?: boolean
   children?: React.ReactNode
 }
 
-export default function InformationBanner({ message, children }: Props) {
+export default function InformationBanner({ message, children, small }: Props) {
   const theme = useTheme()
   return (
-    <StyledInfoBanner>
+    <StyledInfoBanner small={small}>
       <Iconify icon='material-symbols:info' width={40} height={28} color='#c7d030d9' />
       <Typography sx={{ color: theme.palette.text.primary }}>{message}</Typography>
       {children}