// ** React Component and Library Imports
import { useEffect, useState } from 'react'
import Box, { BoxProps } from '@mui/material/Box'
import Button from '@mui/material/Button'
import Drawer from '@mui/material/Drawer'
import FormControl from '@mui/material/FormControl'
import FormHelperText from '@mui/material/FormHelperText'
import IconButton from '@mui/material/IconButton'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import { styled } from '@mui/material/styles'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'

// ** Third Party Imports
import { yupResolver } from '@hookform/resolvers/yup'
import { Controller, useForm } from 'react-hook-form'
import * as yup from 'yup'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Store and Actions Imports
import { useDispatch, useSelector } from 'react-redux'
import { addUser } from 'src/store/apps/user'
import { AppDispatch, RootState } from 'src/store'
import { fetchDesignation } from 'src/store/apps/designation'
import { fetchRole } from 'src/store/apps/role'

interface SidebarAddUserType {
    open: boolean
    toggle: () => void
}

interface UserData {
    firstName: string
    middleName: string
    lastName: string
    loginId: string
    emailId: string
    mobileNumber: string
}

const showErrors = (field: string, valueLen: number, min: number) => {
    if (valueLen === 0) {
        return `${field} field is required`
    } else if (valueLen > 0 && valueLen < min) {
        return `${field} must be at least ${min} characters`
    } else {
        return ''
    }
}

const Header = styled(Box)<BoxProps>(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(3, 4),
    justifyContent: 'space-between',
    backgroundColor: theme.palette.background.default
}))

const schema = yup.object().shape({
    emailId: yup.string().email().required(),
    mobileNumber: yup
        .string()
        .typeError('Mobile Number field is required')
        .required(),
    firstName: yup
        .string()
        .required(),
    middleName: yup.string(),
    lastName: yup
        .string()
        .required(),
    loginId: yup
        .string()
        .required(),
})

const defaultValues = {
    firstName: '',
    middleName: '',
    lastName: '',
    loginId: '',
    emailId: '',
    mobileNumber: ''
}

const SidebarAddUser = (props: SidebarAddUserType) => {
    const { open, toggle } = props

    // ** State
    const [plan, setPlan] = useState<string>('basic')
    const [roleId, setRoleId] = useState<string>('')
    const [reportsTo, setReporterTo] = useState<string>('')
    const [departmentId, setDepartmentId] = useState<string>('')
    const [designationId, setDesignationId] = useState<string>('')

    const dispatch = useDispatch<AppDispatch>()
    const store = useSelector((state: RootState) => state.role)
    const designations = useSelector((state: RootState) => state.designation)

    useEffect(() => {
        dispatch(fetchRole({}))
        dispatch(fetchDesignation({}))
    }, [])

    const { reset, control, handleSubmit, formState: { errors } } = useForm({
        defaultValues,
        mode: 'onChange',
        resolver: yupResolver(schema)
    })

    const onSubmit = (data: UserData) => {
        console.log({ ...data, roleId, reportsTo, departmentId, designationId })
        dispatch(addUser({ ...data, roleId, reportsTo, departmentId, designationId }))
        toggle()
        reset()
    }

    const handleClose = () => {
        setPlan('basic')
        toggle()
        reset()
    }

    return (
        <Drawer
          open={open}
          anchor='right'
          variant='temporary'
          onClose={handleClose}
          ModalProps={{ keepMounted: true }}
          sx={{ '& .MuiDrawer-paper': { width: { xs: 600, sm: 450 } } }}
        >
            <Header>
                <Typography variant='h6'>Add User</Typography>
                <IconButton size='small' onClick={handleClose} sx={{ color: 'text.primary' }}>
                    <Icon icon='mdi:close' fontSize={20} />
                </IconButton>
            </Header>
            <Box sx={{ p: 5 }}>
                <form onSubmit={handleSubmit(onSubmit)}>
                  {/* Form Fields */}
                </form>
            </Box>
        </Drawer>
    )
}

export default SidebarAddUser

The "id" and "role name" in red lines are dynamic values fetched from an API. You would specify the interface for this API result data at the point of setting the corresponding state variables.

For instance, in the `fetchRole` function from 'src/store/apps/role', you can see how the API response sets the `state.role` and `state.allRole` values. This is where you would define the structure of the returned data.

In your case, since `state.role` is being set to `action.payload.data`, ensure that the shape of `action.payload.data` matches the expected format of roles data with properties like "id", "roleName", etc.

Additionally, make sure you have defined the RootState type correctly in the file where it is used by importing it from `'src/store'`:

export type RootState = ReturnType<typeof store.getState>

With these implementations, you can properly handle and define the interfaces for the dynamic data coming from the API within your components and redux actions.