возможность выбрать и корректно отправить пол

src/api/auditory.ts

@@ -7,14 +7,19 @@ const API_URL = `${process.env.REACT_APP_DOMAIN}/squiz`;
 export interface AuditoryItem {
   id: number;
   quiz_id: number;
-  sex: boolean;
+  sex: number; // 0 - женский, 1 - мужской, 2 - оба
   age: string;
   deleted: boolean;
   created_at: number;
 }
 
 export interface AuditoryResponse {
-  data: AuditoryItem[];
+  ID: number;
+  quiz_id: number;
+  sex: number;
+  age: string;
+  deleted: boolean;
+  created_at: number;
 }
 
 // Request Types
@@ -27,7 +32,7 @@ export interface AuditoryDeleteRequest {
 }
 
 export interface AuditoryAddRequest {
-  sex: boolean;
+  sex: number;
   age: string;
 }
 

src/pages/PersonalizationAI/AuditoryLink.tsx

@@ -75,7 +75,7 @@ export const AuditoryLink = ({ utmParams, item, index, onDelete }: AuditoryLinkP
                         }} />
                     </IconButton>
                     <IconButton edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}>
-                        <TooltipClickInfo title={`Пол: ${item.sex ? "мужской" : "женский"} \n Возраст: ${item.age}`} />
+                        <TooltipClickInfo title={`Пол: ${item.sex === 0 ? "женский" : item.sex === 1 ? "мужской" : "оба"} \n Возраст: ${item.age}`} />
                     </IconButton>
                     <IconButton
                         edge="end"

src/pages/PersonalizationAI/GenderAndAgeSelector.tsx

@@ -1,6 +1,7 @@
-import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, useTheme, Button, useMediaQuery } from "@mui/material";
+import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, Button, useMediaQuery } from "@mui/material";
 import CheckboxIcon from "@icons/Checkbox";
 import AgeInputWithSelect from "./AgeInputWithSelect";
+import { useState } from "react";
 
 interface GenderAndAgeSelectorProps {
   gender: string;
@@ -23,6 +24,33 @@ export default function GenderAndAgeSelector({
 }: GenderAndAgeSelectorProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(845));
+  const [maleChecked, setMaleChecked] = useState(false);
+  const [femaleChecked, setFemaleChecked] = useState(false);
+
+  const handleGenderChange = (type: 'male' | 'female', checked: boolean) => {
+    if (type === 'male') {
+      setMaleChecked(checked);
+    } else {
+      setFemaleChecked(checked);
+    }
+
+    // Обновляем значение gender в родительском компоненте
+    if (type === 'male' && checked && !femaleChecked) {
+      onGenderChange('1'); // Только мужской
+    } else if (type === 'female' && checked && !maleChecked) {
+      onGenderChange('0'); // Только женский
+    } else if (type === 'male' && checked && femaleChecked) {
+      onGenderChange('2'); // Оба пола
+    } else if (type === 'female' && checked && maleChecked) {
+      onGenderChange('2'); // Оба пола
+    } else if (type === 'male' && !checked && femaleChecked) {
+      onGenderChange('0'); // Только женский
+    } else if (type === 'female' && !checked && maleChecked) {
+      onGenderChange('1'); // Только мужской
+    } else {
+      onGenderChange(''); // Ничего не выбрано
+    }
+  };
 
   return (
     <Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
@@ -43,18 +71,15 @@ export default function GenderAndAgeSelector({
               }}
               component="legend">Пол</FormLabel>
           </Box>
-          <RadioGroup
+          <Box
             sx={{
               width: "155px",
               justifyContent: "space-between",
               mt: "20px",
-              ml: "-9px"
+              ml: "-9px",
+              display: 'flex',
+              gap: '10px'
             }}
-            row
-            aria-label="gender"
-            name="row-radio-buttons-group"
-            value={gender}
-            onChange={(e) => onGenderChange(e.target.value)}
           >
             <FormControlLabel
               sx={{
@@ -81,8 +106,14 @@ export default function GenderAndAgeSelector({
                 },
                 m: 0,
               }}
-              value="male"
+              control={
-              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
+                <Checkbox 
+                  icon={<CheckboxIcon />} 
+                  checkedIcon={<CheckboxIcon checked />}
+                  checked={maleChecked}
+                  onChange={(e) => handleGenderChange('male', e.target.checked)}
+                />
+              }
               label="М"
             />
             <FormControlLabel
@@ -109,11 +140,17 @@ export default function GenderAndAgeSelector({
                 },
                 m: 0,
               }}
-              value="female"
+              control={
-              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
+                <Checkbox 
+                  icon={<CheckboxIcon />} 
+                  checkedIcon={<CheckboxIcon checked />}
+                  checked={femaleChecked}
+                  onChange={(e) => handleGenderChange('female', e.target.checked)}
+                />
+              }
               label="Ж"
             />
-          </RadioGroup>
+          </Box>
         </FormControl>
 
         <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px", minWidth: "265px" }} variant="filled">

src/pages/PersonalizationAI/PersonalizationAI.tsx

@@ -25,6 +25,8 @@ export default function PersonalizationAI() {
 
   const [isStartCreate, setStartCreate] = useState(false);
   const [gender, setGender] = useState<string>('');
+  console.log("gender")
+  console.log(gender)
   const [age, setAge] = useState<string>('');
   const [ageError, setAgeError] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -58,7 +60,7 @@ export default function PersonalizationAI() {
       const [result, error] = await auditoryAdd({
         quizId: quiz.backendId,
         body: {
-          sex: gender === "male",
+          sex: parseInt(gender),
           age
         }
       });
@@ -72,9 +74,10 @@ export default function PersonalizationAI() {
         handleAdd({
           id: result.ID,
           quiz_id: quiz.backendId,
-          sex: gender === "male",
+          sex: parseInt(gender),
           age,
           deleted: false,
+          created_at: Date.now()
         });
         enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' });
         resetForm();