refactor: use import type instead of import

client/src/components/DataListView/DataListView.tsx

@@ -1,11 +1,11 @@
 import { Typography, Chip } from '@mui/material';
-import { CollectionFullObject } from '@server/types';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material';
 import { formatFieldType } from '@/utils';
 import DataView from '@/components/DataView/DataView';
 import { DYNAMIC_FIELD } from '@/consts';
 import CopyButton from '@/components/advancedSearch/CopyButton';
+import type { CollectionFullObject } from '@server/types';
 
 interface DataListViewProps {
   collection: CollectionFullObject;

client/src/components/advancedSearch/Condition.tsx

@@ -2,11 +2,11 @@ import React, { useState, useEffect, FC, useMemo } from 'react';
 import { Theme, IconButton, TextField, SelectChangeEvent } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import CloseIcon from '@mui/icons-material/Close';
-import { ConditionProps } from './Types';
 import CustomSelector from '../customSelector/CustomSelector';
 import { LOGICAL_OPERATORS, DataTypeStringEnum } from '@/consts';
 import { formatValue, checkValue } from './utils';
-import { FieldObject } from '@server/types';
+import type { ConditionProps } from './Types';
+import type { FieldObject } from '@server/types';
 
 const Condition: FC<ConditionProps> = props => {
   const {
@@ -161,7 +161,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     minWidth: '466px',
     minHeight: '62px',
-    background:  theme.palette.background.paper,
+    background: theme.palette.background.paper,
     padding: theme.spacing(1.5, 2),
     display: 'flex',
     flexDirection: 'row',

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -6,7 +6,7 @@ import { ToggleButton, ToggleButtonGroup } from '@mui/lab';
 import ConditionItem from './Condition';
 import icons from '../icons/Icons';
 import CustomButton from '../customButton/CustomButton';
-import {
+import type {
   ConditionGroupProps,
   BinaryLogicalOpProps,
   AddConditionProps,
@@ -219,11 +219,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
     '& button.Mui-selected': {
       backgroundColor: theme.palette.background.default,
-      color:  theme.palette.text.primary
+      color: theme.palette.text.primary,
     },
     '& button.Mui-selected:hover': {
       backgroundColor: theme.palette.background.default,
-      color:  theme.palette.text.primary
+      color: theme.palette.text.primary,
     },
   },
 }));

client/src/components/advancedSearch/CopyButton.tsx

@@ -1,10 +1,10 @@
 import React, { useState, FC } from 'react';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
-import { CopyButtonProps } from './Types';
 import icons from '../icons/Icons';
 import CustomIconButton from '../customButton/CustomIconButton';
 import { useTranslation } from 'react-i18next';
+import type { CopyButtonProps } from './Types';
 
 const CopyIcon = icons.copyExpression;
 

client/src/components/advancedSearch/Dialog.tsx

@@ -15,7 +15,7 @@ import ConditionGroup from './ConditionGroup';
 import icons from '../icons/Icons';
 import CopyBtn from './CopyButton';
 // import DialogTemplate from '../customDialog/DialogTemplate';
-import { DialogProps } from './Types';
+import type { DialogProps } from './Types';
 
 const AdvancedDialog = (props: DialogProps) => {
   // i18n

client/src/components/advancedSearch/Filter.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import icons from '@/components/icons/Icons';
 import { generateIdByHash } from '@/utils/Common';
 import AdvancedDialog from './Dialog';
-import { FilterProps, ConditionData } from './Types';
 import CustomButton from '../customButton/CustomButton';
+import type { FilterProps, ConditionData } from './Types';
 
 const Filter = forwardRef((props: FilterProps, ref) => {
   const {

client/src/components/advancedSearch/Types.ts

@@ -1,4 +1,4 @@
-import { FieldObject } from '@server/types';
+import type { FieldObject } from '@server/types';
 
 export interface ConditionProps {
   others?: object;

client/src/components/cards/EmptyCard.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Theme, Typography, CardContent } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
-import { EmptyCardProps } from './Types';
+import type { EmptyCardProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/code/CodeBlock.tsx

@@ -4,8 +4,8 @@ import CopyButton from '../advancedSearch/CopyButton';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { vs2015, github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { FC } from 'react';
-import { CodeBlockProps } from './Types';
 import { makeStyles } from '@mui/styles';
+import type { CodeBlockProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/code/CodeView.tsx

@@ -2,10 +2,10 @@ import { Theme, Typography } from '@mui/material';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomTabList from '../customTabList/CustomTabList';
-import { ITab } from '../customTabList/Types';
 import CodeBlock from './CodeBlock';
 import { CodeViewProps } from './Types';
 import { makeStyles } from '@mui/styles';
+import type { ITab } from '../customTabList/Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/customDialog/CustomDialog.tsx

@@ -6,11 +6,11 @@ import {
   Theme,
   Typography,
 } from '@mui/material';
-import { CustomDialogType } from './Types';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '../customButton/CustomButton';
 import CustomDialogTitle from './CustomDialogTitle';
 import { makeStyles } from '@mui/styles';
+import type { CustomDialogType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   paper: {

client/src/components/customDialog/DialogTemplate.tsx

@@ -6,11 +6,11 @@ import {
   Theme,
   CircularProgress,
 } from '@mui/material';
-import { DialogContainerProps } from './Types';
 import CustomDialogTitle from './CustomDialogTitle';
 import CustomButton from '../customButton/CustomButton';
 import CodeView from '../code/CodeView';
 import { makeStyles } from '@mui/styles';
+import type { DialogContainerProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/customDrawer/CustomDrawer.tsx

@@ -1,6 +1,5 @@
-// CustomDrawer.tsx
-import React, { useContext } from 'react';
-import { Drawer, Box, Typography, Button } from '@mui/material';
+import { useContext } from 'react';
+import { Drawer, Box, Button } from '@mui/material';
 import { rootContext } from '@/context';
 
 const CustomDrawer = () => {

client/src/components/customInput/CustomInput.tsx

@@ -14,7 +14,7 @@ import {
 import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
 import { ReactElement } from 'react';
-import {
+import type {
   IAdornmentConfig,
   IIconConfig,
   ITextfieldConfig,

client/src/components/customInput/SearchInput.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@mui/styles';
 import { useRef, FC, useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icons from '../icons/Icons';
-import { SearchType } from './Types';
+import type { SearchType } from './Types';
 
 const useSearchStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/customSelector/CustomGroupedSelect.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { FC } from 'react';
-import { GroupOption, ICustomGroupSelect } from './Types';
+import type { GroupOption, ICustomGroupSelect } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/customSelector/CustomMultiSelector.tsx

@@ -7,8 +7,8 @@ import {
   Checkbox,
 } from '@mui/material';
 import { withStyles } from '@mui/styles';
-import { CustomMultiSelectorType } from './Types';
 import { generateId } from '../../utils/Common';
+import type { CustomMultiSelectorType } from './Types';
 
 const CustomMenuItem = withStyles({
   root: {

client/src/components/customSelector/CustomSelector.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
-import { CustomSelectorType } from './Types';
 import { generateId } from '../../utils/Common';
+import type { CustomSelectorType } from './Types';
 
 const CustomSelector: FC<CustomSelectorType> = props => {
   const {

client/src/components/customSnackBar/CustomSnackBar.tsx

@@ -1,9 +1,9 @@
 import { forwardRef, FC } from 'react';
-import { CustomSnackBarType } from './Types';
 import MuiAlert from '@mui/material/Alert';
 import { Snackbar, Theme, AlertProps } from '@mui/material';
 import Slide, { SlideProps } from '@mui/material/Slide';
 import { makeStyles } from '@mui/styles';
+import type { CustomSnackBarType } from './Types';
 
 // if we need to use slide component
 // snackbar content must use forwardRef to wrapper it

client/src/components/customSwitch/CustomSwitch.tsx

@@ -1,8 +1,8 @@
 import { FormControlLabel, Switch, Theme } from '@mui/material';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CustomSwitchProps } from './Types';
 import { makeStyles } from '@mui/styles';
+import type { CustomSwitchProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   label: {

client/src/components/customTabList/CustomTabList.tsx

@@ -1,7 +1,7 @@
 import { Box, Tab, Tabs } from '@mui/material';
 import { FC, useState } from 'react';
-import { ITabListProps, ITabPanel } from './Types';
 import { useStyles } from './style';
+import type { ITabListProps, ITabPanel } from './Types';
 
 const TabPanel = (props: ITabPanel) => {
   const { children, value, index, className = '', ...other } = props;

client/src/components/customTabList/RouteTabList.tsx

@@ -1,8 +1,8 @@
 import { Box, Tab, Tabs } from '@mui/material';
 import { FC } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { ITabListProps, ITabPanel } from './Types';
 import { useStyles } from './style';
+import type { ITabListProps, ITabPanel } from './Types';
 
 const TabPanel = (props: ITabPanel) => {
   const { children, value, index, className = '', ...other } = props;

client/src/components/customToolTip/CustomToolTip.tsx

@@ -1,8 +1,8 @@
 import Tooltip from '@mui/material/Tooltip';
-import { CustomToolTipType } from './Types';
 import { FC } from 'react';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import type { CustomToolTipType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   tooltip: {},

client/src/components/grid/ActionBar.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { IconButton, Theme, Button, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
-import { ActionBarType } from './Types';
+import type { ActionBarType } from './Types';
 import CustomToolTip from '../customToolTip/CustomToolTip';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/grid/Grid.tsx

@@ -1,4 +1,5 @@
 import { FC, MouseEvent, useRef, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography';
 import { Theme } from '@mui/material/styles/createTheme';
 import Grid from '@mui/material/Grid';
@@ -7,9 +8,8 @@ import TablePagination from '@mui/material/TablePagination';
 import { makeStyles } from '@mui/styles';
 import CustomToolbar from './ToolBar';
 import Table from './Table';
-import { AttuGridType } from './Types';
-import { useTranslation } from 'react-i18next';
 import TablePaginationActions from './TablePaginationActions';
+import type { AttuGridType } from './Types';
 
 const userStyle = makeStyles((theme: Theme) => ({
   loading: {

client/src/components/grid/Table.tsx

@@ -6,7 +6,7 @@ import TableContainer from '@mui/material/TableContainer';
 import TableRow from '@mui/material/TableRow';
 import Checkbox from '@mui/material/Checkbox';
 import { makeStyles } from '@mui/styles';
-import { TableType } from './Types';
+import type { TableType } from './Types';
 import { Box, Button, Typography, Theme } from '@mui/material';
 import EnhancedTableHead from './TableHead';
 import EditableTableHead from './TableEditableHead';

client/src/components/grid/TableEditableHead.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { TableEditableHeadType } from './Types';
 import { TableHead, TableRow, TableCell, Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import type { TableEditableHeadType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   tableCell: {

client/src/components/grid/TableHead.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import React from 'react';
-import { TableHeadType } from './Types';
 import {
   TableHead,
   TableRow,
@@ -11,6 +10,7 @@ import {
   Theme,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import type { TableHeadType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   visuallyHidden: {

client/src/components/grid/TablePaginationActions.tsx

@@ -3,8 +3,8 @@ import CustomButton from '../customButton/CustomButton';
 import icons from '../icons/Icons';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { TablePaginationActionsProps } from './Types';
 import { makeStyles } from '@mui/styles';
+import type { TablePaginationActionsProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/grid/TableSwitch.tsx

@@ -1,8 +1,8 @@
 import { Theme } from '@mui/material';
 import { FC, useState } from 'react';
 import Icons from '../icons/Icons';
-import { TableSwitchType } from './Types';
 import { makeStyles } from '@mui/styles';
+import type { TableSwitchType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/grid/ToolBar.tsx

@@ -2,12 +2,12 @@ import { FC, useMemo } from 'react';
 import { Grid, Typography, Theme, IconButton } from '@mui/material';
 import CustomButton from '../customButton/CustomButton';
 import Icons from '../icons/Icons';
-import { ToolBarConfig, ToolBarType } from './Types';
 import SearchInput from '../customInput/SearchInput';
 import TableSwitch from './TableSwitch';
 import { throwErrorForDev } from '../../utils/Common';
 import CustomIconButton from '../customButton/CustomIconButton';
 import { makeStyles } from '@mui/styles';
+import type { ToolBarConfig, ToolBarType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   countLabel: {

client/src/components/icons/Icons.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { IconsType } from './Types';
 import { SvgIcon } from '@mui/material';
 import AppsIcon from '@mui/icons-material/Apps';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ConsoleIcon from '@/assets/icons/console.svg?react';
 import KeyIcon from '@/assets/icons/key.svg?react';
 import SearchEmptyIcon from '@/assets/icons/search.svg?react';
 import Compact from '@/assets/icons/compact.svg?react';
+import type { IconsType } from './Types';
 
 const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   search: (props = {}) => (

client/src/components/menu/NavMenu.tsx

@@ -5,10 +5,10 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { NavMenuItem, NavMenuType } from './Types';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
 import icons from '@/components/icons/Icons';
+import type { NavMenuItem, NavMenuType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/menu/SimpleMenu.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { generateId } from '../../utils/Common';
-import { SimpleMenuType } from './Types';
 import CustomButton from '../customButton/CustomButton';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import type { SimpleMenuType } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   menuPaper: {

client/src/components/status/Types.ts

@@ -1,6 +1,5 @@
 import { LOADING_STATE } from '@/consts';
-import { CollectionObject } from '@server/types';
-import React from 'react';
+import type { CollectionObject } from '@server/types';
 
 export type StatusActionType = {
   status: LOADING_STATE;