|  |  | 
 |  |  | 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" | 
 |  |  | 
 |  |  |                             flexGrow: 1, | 
 |  |  |                             bgcolor: 'background.paper', | 
 |  |  |                             display: 'flex', | 
 |  |  |                             border: `1px solid #${theme[0] === 'light' ? 'ddd' : '333'}`, | 
 |  |  |                             border: `1px solid #${theme.palette.mode === 'light' ? 'ddd' : '333'}`, | 
 |  |  |                             borderRadius: 2, | 
 |  |  |                             pt: 1, | 
 |  |  |                             pb: 1, | 
 |  |  | 
 |  |  |                             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', |