import rhf and reusable components from his v3

frontend/dashboard/src/components/hook-form/v2/RHFRadioGroup.tsx

@@ -0,0 +1,61 @@
+// form
+import { useFormContext, Controller } from 'react-hook-form';
+// @mui
+import {
+  Radio,
+  RadioGroup,
+  FormHelperText,
+  RadioGroupProps,
+  FormControlLabel,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface IProps {
+  name: string;
+  options: string[];
+  getOptionLabel?: string[];
+  fullWidth?: boolean;
+  disabled?: boolean;
+}
+
+export default function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  fullWidth,
+  disabled,
+  ...other
+}: IProps & RadioGroupProps) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <div>
+          <RadioGroup {...field} row {...other}>
+            {options.map((option, index) => (
+              <FormControlLabel 
+                style={{width: (fullWidth)?'100%':''}}
+                key={option}
+                value={option}
+                control={<Radio />}
+                label={getOptionLabel?.length ? getOptionLabel[index] : option}
+                disabled={disabled}
+              />
+
+            ))}
+          </RadioGroup>
+
+          {!!error && (
+            <FormHelperText error sx={{ px: 2 }}>
+              {error.message}
+            </FormHelperText>
+          )}
+        </div>
+      )}
+    />
+  );
+}