|  |  | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { useNavigate } from 'react-router-dom'; | 
 |  |  | import { | 
 |  |  |     Edit, | 
 |  |  |     SimpleForm, | 
 |  |  |     FormDataConsumer, | 
 |  |  |     useTranslate, | 
 |  |  |     TextInput, | 
 |  |  |     NumberInput, | 
 |  |  |     BooleanInput, | 
 |  |  |     SaveButton, | 
 |  |  |     SelectInput, | 
 |  |  |     Toolbar, | 
 |  |  |     Labeled, | 
 |  |  |     NumberField, | 
 |  |  |     required, | 
 |  |  |     useRecordContext, | 
 |  |  |     useTheme, | 
 |  |  |     useAuthProvider, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { useWatch, useFormContext } from "react-hook-form"; | 
 |  |  | import { Stack, Grid, Box, Typography, Card, CardContent, Tabs, Tab } from '@mui/material'; | 
 |  |  | import { Stack, Grid, Box, Typography, Card, CardContent, Tabs, Tab, useTheme } from '@mui/material'; | 
 |  |  | import * as Common from '@/utils/common'; | 
 |  |  | import BaseSettings from "./BaseSettings"; | 
 |  |  | import SecuritySettings from "./SecuritySettings" | 
 |  |  | import { queryUserInfo } from '@/api/auth'; | 
 |  |  |  | 
 |  |  | const Index = () => { | 
 |  |  | 
 |  |  |                             flexGrow: 1, | 
 |  |  |                             bgcolor: 'background.paper', | 
 |  |  |                             display: 'flex', | 
 |  |  |                             // height: 224, | 
 |  |  |                             border: `1px solid #${theme[0] === 'light' ? 'ddd' : '333'}`, | 
 |  |  |                             borderRadius: 2 | 
 |  |  |                             border: `1px solid #${theme.palette.mode === 'light' ? 'ddd' : '333'}`, | 
 |  |  |                             borderRadius: 2, | 
 |  |  |                             pt: 1, | 
 |  |  |                             pb: 1, | 
 |  |  |                         }} | 
 |  |  |                     > | 
 |  |  |                         <Tabs | 
 |  |  | 
 |  |  |                             onChange={(event, newValue) => { | 
 |  |  |                                 setValue(newValue); | 
 |  |  |                             }} | 
 |  |  |                             indicatorColor="secondary" | 
 |  |  |                             indicatorColor="primary" | 
 |  |  |                             textColor="inherit" | 
 |  |  |                             TabIndicatorProps={{ | 
 |  |  |                                 style: { | 
 |  |  |                                     left: 0, | 
 |  |  |                                     right: 'auto', | 
 |  |  |                                     width: '5px', | 
 |  |  |                                     borderRadius: '2px', | 
 |  |  |                                     opacity: .8, | 
 |  |  |                                 } | 
 |  |  |                             }} | 
 |  |  |                             sx={{ | 
 |  |  |                                 borderRight: 1, | 
 |  |  |                                 borderColor: 'divider', | 
 |  |  | 
 |  |  |                                 aria-controls='vertical-tabpanel-1' | 
 |  |  |                             /> | 
 |  |  |                         </Tabs> | 
 |  |  |                         <BaseSettings | 
 |  |  |                             value={value} | 
 |  |  |                             userInfo={userInfo} | 
 |  |  |                         /> | 
 |  |  |                         <SecuritySettings | 
 |  |  |                             value={value} | 
 |  |  |                         /> | 
 |  |  |  | 
 |  |  |                         {value === 0 && ( | 
 |  |  |                             <BaseSettings | 
 |  |  |                                 value={value} | 
 |  |  |                                 userInfo={userInfo} | 
 |  |  |                             /> | 
 |  |  |                         )} | 
 |  |  |                         {value === 1 && ( | 
 |  |  |                             <SecuritySettings | 
 |  |  |                                 value={value} | 
 |  |  |                                 userInfo={userInfo} | 
 |  |  |                             /> | 
 |  |  |                         )} | 
 |  |  |  | 
 |  |  |                     </Box> | 
 |  |  |                 </CardContent> | 
 |  |  |             </Card> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const SecuritySettings = (props) => { | 
 |  |  |     const { children, value, ...other } = props; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box | 
 |  |  |             hidden={value !== 1} | 
 |  |  |             sx={{ p: 3 }} | 
 |  |  |             {...other} | 
 |  |  |         > | 
 |  |  |             <Typography> | 
 |  |  |                 Security Settings | 
 |  |  |             </Typography> | 
 |  |  |         </Box> | 
 |  |  |  | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  |