добавить итем

src/pages/PersonalizationAI/AuditoryLink.tsx

@@ -2,6 +2,7 @@ import { AuditoryItem } from "@/api/auditory";
 import CopyIcon from "@/assets/icons/CopyIcon";
 import Trash from "@/assets/icons/trash";
 import { InfoPopover } from "@/ui_kit/InfoPopover";
+import TooltipClickInfo from "@/ui_kit/Toolbars/TooltipClickInfo";
 import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
 import { IconButton, ListItem, Typography, useTheme } from "@mui/material";
 
@@ -42,7 +43,7 @@ export const AuditoryLink = ({ item, index, onDelete }: AuditoryLinkProps) => {
                     display: 'flex',
                     alignItems: 'center',
                     gap: '12px',
-                    width: "60px",
+                    width: "70px",
                     justifyContent: "space-between",
                 },
             }}
@@ -61,7 +62,7 @@ export const AuditoryLink = ({ item, index, onDelete }: AuditoryLinkProps) => {
                         }} />
                     </IconButton>
                     <IconButton edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}>
-                        <InfoPopover />
+                        <TooltipClickInfo title={`Пол: ${item.sex ? "мужской" : "женский"} \n Возраст: ${item.age}`} />
                     </IconButton>
                     <IconButton 
                         edge="end" 

src/pages/PersonalizationAI/GenderAndAgeSelector.tsx

@@ -1,188 +1,232 @@
 import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button } from "@mui/material";
 import { InfoPopover } from '@ui_kit/InfoPopover';
 import CheckboxIcon from "@icons/Checkbox";
+import { useState } from "react";
+import { useCurrentQuiz } from "@/stores/quizes/hooks";
+import { auditoryAdd } from "@/api/auditory";
+import { useSnackbar } from "notistack";
 
 interface GenderAndAgeSelectorProps {
-  gender: string;
+  handleAdd: (item: any) => void;
-  setGender: (gender: string) => void;
 }
 
-
+export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelectorProps) {
-export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAgeSelectorProps) {
   const theme = useTheme();
+  const [age, setAge] = useState<string>('');
+  const [gender, setGender] = useState<string>('');
+  const quiz = useCurrentQuiz();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const isFormValid = gender && age;
+
+  const addItem = async () => {
+    if (!quiz?.backendId) {
+      enqueueSnackbar('Ошибка: не выбран квиз', { variant: 'error' });
+      return;
+    }
+
+    try {
+      const [result, error] = await auditoryAdd({
+        quizId: quiz.backendId,
+        body: {
+          sex: gender === "male",
+          age
+        }
+      });
+
+      if (error) {
+        enqueueSnackbar('Не удалось добавить ссылку', { variant: 'error' });
+        return;
+      }
+
+      if (result) {
+        handleAdd({
+          id: result.ID,
+          quiz_id: quiz.backendId,
+          sex: gender === "male",
+          age,
+          deleted: false,
+        });
+        enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' });
+        // Очищаем форму
+        setGender('');
+        setAge('');
+      }
+    } catch (error) {
+      enqueueSnackbar('Произошла ошибка при добавлении', { variant: 'error' });
+    }
+  };
+
   return (
-    <Box sx={{ display: 'flex', gap: 4 }}>
+    <Box sx={{ display: 'flex', gap: 4, alignItems: "center" }}>
+      <Box>
 
-
+        <FormControl component="fieldset" variant="standard">
-
+          <Box sx={{ display: 'flex', alignItems: "center", gap: '4px' }}>
-      <FormControl component="fieldset" variant="standard">
+            <FormLabel
-        <Box sx={{ display: 'flex', alignItems: "center", gap: '4px' }}>
+              sx={{
-          <FormLabel
+                '&.Mui-focused': {
+                  color: '#4D4D4D',
+                },
+                color: '#4D4D4D',
+                fontSize: '18px',
+                fontWeight: 500,
+                lineHeight: 1,
+                letterSpacing: 0,
+                mr: '3px',
+              }}
+              component="legend">Пол</FormLabel>
+            <InfoPopover />
+          </Box>
+          <RadioGroup
             sx={{
+              width: "155px",
+              justifyContent: "space-between",
+              mt: "9px",
+              ml: "-9px"
+            }}
+            row
+            aria-label="gender"
+            name="row-radio-buttons-group"
+            value={gender}
+            onChange={(e) => setGender(e.target.value)}
+          >
+            <FormControlLabel
+              sx={{
+                padding: 0,
+                '& .MuiTouchRipple-root': {
+                  width: '100%',
+                  height: '100%',
+                  overflow: 'visible',
+                },
+                '& .MuiSvgIcon-root': {
+                  position: 'absolute',
+                  left: '50%',
+                  top: '50%',
+                  transform: 'translate(-50%, -50%)',
+                },
+                '& .MuiFormControlLabel-label': {
+                  fontSize: '18px',
+                  fontWeight: 400,
+                  fontFamily: 'Rubik',
+                  lineHeight: 1,
+                  letterSpacing: 0,
+                  color: '#4D4D4D',
+                  ml: "6px"
+                },
+                m: 0,
+              }}
+              value="male"
+              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
+              label="М"
+            />
+            <FormControlLabel
+              sx={{
+                padding: 0,
+                '& .MuiTouchRipple-root': {
+                  width: '100%',
+                  height: '100%',
+                  overflow: 'visible',
+                },
+                '& .MuiSvgIcon-root': {
+                  position: 'absolute',
+                  left: '50%',
+                  top: '50%',
+                  transform: 'translate(-50%, -50%)',
+                },
+                '& .MuiFormControlLabel-label': {
+                  fontSize: '18px',
+                  fontWeight: 400,
+                  fontFamily: 'Rubik',
+                  lineHeight: 1,
+                  letterSpacing: 0,
+                  color: '#4D4D4D',
+                },
+                m: 0,
+              }}
+              value="female"
+              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
+              label="Ж"
+            />
+          </RadioGroup>
+        </FormControl>
+
+        <FormControl sx={{ minWidth: "420px", marginLeft: "15px" }} variant="filled">
+          <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px'
+          }}>
+            <FormLabel sx={{
+              color: '#4D4D4D',
+              fontSize: "18px",
+              fontWeight: 500,
+              lineHeight: "100%",
               '&.Mui-focused': {
                 color: '#4D4D4D',
               },
-              color: '#4D4D4D',
+            }}>Возраст</FormLabel>
-              fontSize: '18px',
+            <InfoPopover />
-              fontWeight: 500,
+          </Box>
-              lineHeight: 1,
+          <Select
-              letterSpacing: 0,
+            value={age}
-              mr: '3px',
+            onChange={(e) => setAge(e.target.value)}
-            }}
+            displayEmpty
-
+            inputProps={{ 'aria-label': 'age', disableUnderline: true }}
-            component="legend" >Пол</FormLabel>
+            disableUnderline
-          <InfoPopover />
-        </Box>
-        <RadioGroup
-          sx={{
-            width: "155px",
-            justifyContent: "space-between",
-            mt: "9px",
-            ml: "-9px"
-          }}
-          row aria-label="gender" name="row-radio-buttons-group" value={gender} onChange={(e) => setGender(e.target.value)}>
-
-          <FormControlLabel
-
             sx={{
-              // 1. Уменьшаем общий размер блока
+              height: "48px",
-              padding: 0,
+              maxWidth: "420px",
-
+              borderRadius: "8px",
-              // 2. Но сохраняем пространство для Ripple
+              border: "1px solid #9A9AAF",
-              '& .MuiTouchRipple-root': {
+              '& .MuiSelect-filled': {
-                width: '100%',
+                height: "100%",
-                height: '100%',
+                width: "100%",
-                overflow: 'visible',
               },
-
+              '& .MuiSelect-select': {
-              // 3. Позиционируем иконку абсолютно
+                height: "100%",
-              '& .MuiSvgIcon-root': {
+                width: "100%",
-                position: 'absolute',
+                p: "10px 20px"
-                left: '50%',
-                top: '50%',
-                transform: 'translate(-50%, -50%)',
               },
-
+              '& .MuiOutlinedInput-notchedOutline': {
-              '& .MuiFormControlLabel-label': {
+                borderColor: '#E0E0E0',
-                fontSize: '18px',
-                fontWeight: 400,
-                fontFamily: 'Rubik',
-                lineHeight: 1,
-                letterSpacing: 0,
-                color: '#4D4D4D',
-                ml: "6px"
               },
-              m: 0,
+              '&:hover .MuiOutlinedInput-notchedOutline': {
+                borderColor: '#B0B0B0',
+              },
+              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                borderColor: '#7E2AEA',
+              },
+              mt: "17px",
             }}
+          >
+            <MenuItem value="">Выберите возраст</MenuItem>
+            <MenuItem value="18-24">18-24</MenuItem>
+            <MenuItem value="25-34">25-34</MenuItem>
+            <MenuItem value="35-44">35-44</MenuItem>
+            <MenuItem value="45-54">45-54</MenuItem>
+            <MenuItem value="55+">55+</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
 
-            value="male" control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />} label="М" />
+      <Button
-          <FormControlLabel
+        onClick={addItem}
-
+        variant="contained"
-            sx={{
+        disabled={!isFormValid}
-              // 1. Уменьшаем общий размер блока
+        sx={{
-              padding: 0,
+          bgcolor: theme.palette.brightPurple.main,
-
+          borderRadius: "8px",
-              // 2. Но сохраняем пространство для Ripple
+          width: "130px",
-              '& .MuiTouchRipple-root': {
+          height: "48px",
-                width: '100%',
+          boxShadow: "none",
-                height: '100%',
+          textTransform: "none",
-                overflow: 'visible',
+          fontSize: "18px",
-              },
+          '&:hover': { bgcolor: theme.palette.brightPurple.main },
-
+        }}
-              // 3. Позиционируем иконку абсолютно
+      >
-              '& .MuiSvgIcon-root': {
+        Ок
-                position: 'absolute',
+      </Button>
-                left: '50%',
-                top: '50%',
-                transform: 'translate(-50%, -50%)',
-              },
-
-              '& .MuiFormControlLabel-label': {
-                fontSize: '18px',
-                fontWeight: 400,
-                fontFamily: 'Rubik',
-                lineHeight: 1,
-                letterSpacing: 0,
-                color: '#4D4D4D',
-              },
-              m: 0,
-            }}
-
-            value="female" control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />} label="Ж" />
-        </RadioGroup>
-      </FormControl>
-
-
-
-      <FormControl sx={{ minWidth: "420px", marginLeft: "15px" }} variant="filled">
-        <Box sx={{
-
-          display: 'flex', alignItems: 'center', gap: '4px'
-        }}>
-          <FormLabel sx={{
-            color: '#4D4D4D',
-            fontSize: "18px",
-            fontWeight: 500,
-            lineHeight: "100%",
-            '&.Mui-focused': {
-              color: '#4D4D4D',
-            },
-          }}>Возраст</FormLabel>
-          <InfoPopover />
-        </Box>
-        <Select
-          value="35-50"
-          displayEmpty
-          inputProps={{ 'aria-label': 'age', disableUnderline: true }}
-          disableUnderline
-          sx={{
-            height: "48px",
-            maxWidth: "420px",
-            borderRadius: "8px",
-            border: "1px solid #9A9AAF",
-            '& .MuiSelect-filled': {
-              height: "100%",
-              width: "100%",
-
-            },
-            '& .MuiSelect-select': {
-              height: "100%",
-              width: "100%",
-              p: "10px 20px"
-            },
-            '& .MuiOutlinedInput-notchedOutline': {
-              borderColor: '#E0E0E0',
-            },
-            '&:hover .MuiOutlinedInput-notchedOutline': {
-              borderColor: '#B0B0B0',
-            },
-            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-              borderColor: '#7E2AEA',
-            },
-            mt: "17px",
-          }}
-        >
-
-          <MenuItem value="">Выберите возраст</MenuItem>
-          <MenuItem value="35-50">35-50</MenuItem>
-
-        </Select>
-      </FormControl>
-            <Button
-              variant="contained"
-              sx={{
-                bgcolor: theme.palette.brightPurple.main,
-                borderRadius: "8px",
-                width: "130px",
-                height: "48px",
-                boxShadow: "none",
-                textTransform: "none",
-                fontSize: "18px",
-                '&:hover': { bgcolor: theme.palette.brightPurple.main },
-              }}
-            >
-              Ок
-            </Button>
     </Box>
   );
 } 

src/pages/PersonalizationAI/PersonalizationAI.tsx

@@ -1,11 +1,8 @@
 import { Box, Container, Typography, TextField, Button, List, ListItem, IconButton, Modal } from "@mui/material";
 import { InfoPopover } from '@ui_kit/InfoPopover';
-import CopyIcon from "@/assets/icons/CopyIcon";
 import GenderAndAgeSelector from "./GenderAndAgeSelector";
 import { useEffect, useState } from "react";
 import CustomTextField from "@ui_kit/CustomTextField";
-import Collapse from '@mui/material/Collapse';
-import { ArrowDownIcon } from "../../assets/icons/questionsPage/ArrowDownIcon";
 import { useTheme } from "@mui/material";
 import { AuditoryItem, auditoryAdd, auditoryDelete, auditoryGet } from "@/api/auditory";
 import { useCurrentQuiz } from "@/stores/quizes/hooks";
@@ -15,7 +12,6 @@ import { useSnackbar } from "notistack";
 
 export default function PersonalizationAI() {
   const theme = useTheme();
-  const [gender, setGender] = useState('');
   const [auditory, setAuditory] = useState<AuditoryItem[]>([]);
   const [deleteModal, setDeleteModal] = useState<number>(0);
   const quiz = useCurrentQuiz();
@@ -75,9 +71,13 @@ export default function PersonalizationAI() {
     }
   }
 
+  const handleAdd = (item:AuditoryItem) => {
+    setAuditory(old => ([...old, item]))
+  }
+
   return (
     <>
-      <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px" }}>
+      <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px", height: " calc(100vh - 80px)", overflow: "auto", pt: "55px"}}>
         <Typography variant="h5" color={theme.palette.grey3.main} fontWeight={700} sx={{ fontSize: 24, letterSpacing: "-0.2px" }}>
           Персонализация вопросов с помощью AI
         </Typography>
@@ -100,7 +100,7 @@ export default function PersonalizationAI() {
           boxShadow: "none",
           maxWidth: "796px"
         }}>
-          <GenderAndAgeSelector gender={gender} setGender={setGender} />
+          <GenderAndAgeSelector handleAdd={handleAdd} />
 
           {/* Ссылка */}
           <Box sx={{ mt: "34px" }}>