PNSPS-frontend-MaterialUI/src/pages/pnspsSettingPage/index.js

// material-ui
import {
    Button,
    CardContent, Divider,
    Grid, InputAdornment, TextField
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form";
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import {useState} from "react";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const SettingPage = () => {

    const [notificationType, setNotificationType] = useState(null);

    const { reset, register, handleSubmit } = useForm()
    const onSubmit = (data) => {
        console.log(data);
        console.log(notificationType);
    };

    function resetForm(){
        setNotificationType(null);
        reset();
    }
    return (
        <Grid container rowSpacing={4.5} columnSpacing={2.75} justifyContent="center">
            <Grid item xs={12} md={11} lg={10} >
                <MainCard xs={12} md={12} lg={12}
                          border={false}
                          content={false}>

                    <form onSubmit={handleSubmit(onSubmit)}>
                        {/*Title*/}
                        <CardContent sx={{ px: 2.5, pt: 3 }}>
                            <Grid item justifyContent="space-between" alignItems="center">
                                System Configuration
                            </Grid>
                        </CardContent>

                        <Grid container alignItems={"center"} justifyContent="center">
                            {/*row 1*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex'}}>
                                        Notification Frequency
                                    </Grid>

                                    <FormControl>
                                        <RadioGroup
                                            aria-labelledby="notification-group-label"
                                            defaultValue="None"
                                            value={notificationType === null ? null : notificationType}
                                            onChange={(event, newValue) => {
                                                setNotificationType(newValue);
                                            }}
                                            name="radio-buttons-group"
                                        >
                                            <FormControlLabel value="Weekly" control={
                                                <Radio
                                                    checked={notificationType === null ? false : notificationType === "Weekly"}
                                                />
                                            } label="Weekly" />
                                            <FormControlLabel value="Monthly" control={
                                                <Radio
                                                    checked={notificationType === null ? false : notificationType === "Monthly"}
                                                />
                                            } label="Monthly" />
                                            <FormControlLabel value="Bi-Monthly" control={
                                                <Radio
                                                    checked={notificationType === null ? false : notificationType === "Bi-Monthly"}
                                                />
                                            } label="Bi-Monthly" />
                                            <FormControlLabel value="None" control={
                                                <Radio
                                                    checked={notificationType === null ? false : notificationType === "None"}
                                                />
                                            } label="None" />
                                        </RadioGroup>
                                    </FormControl>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 2*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', alignItems: 'center'}}>
                                        Number of days to keep the Government Directory Sync Indicator
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5} justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("syncDateCount")}
                                            id='syncDateCount'
                                            InputProps={{
                                                endAdornment: <InputAdornment position="end">days</InputAdornment>,
                                            }}
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 3*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', alignItems: 'center'}}>
                                        Idle Logout Time
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5} justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("idleLogoutTime")}
                                            id="idleLogoutTime"
                                            InputProps={{
                                                endAdornment: <InputAdornment position="start">minutes</InputAdornment>,
                                            }}
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 4*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}} alignItems={"center"} justifyContent="center">
                                <Grid container maxWidth justifyContent="flex-end">
                                    <Grid item sx={{ml:3, mr:3}}>
                                        <Button
                                            size="large"
                                            variant="contained"
                                            onClick={resetForm}
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end'
                                            }}>
                                            Clear
                                        </Button>
                                    </Grid>

                                    <Grid item sx={{ml:3, mr:3}}>
                                        <Button
                                            size="large"
                                            variant="contained"
                                            type="submit"
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end'
                                            }}>
                                            Save Change
                                        </Button>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>


                    </form>
                </MainCard>
            </Grid>

        </Grid>

    );
};

export default SettingPage;