сделал стилизованный скролл-бар для всего приложения, сделал заготовку для создания выдачи линзы, вынес выбор формата отображения в отдельный компанент

web-app/src/api/lenses/UpdateLens.jsx

@@ -3,7 +3,6 @@ import CONFIG from "../../core/Config.jsx";
 
 
 const updateLens = async (token, lensId, lensData) => {
-    console.log(lensId, lensData);
     try {
         const response = await axios.put(`${CONFIG.BASE_URL}/lenses/${lensId}/`, lensData, {
             headers: {

web-app/src/components/SelectViewMode.jsx

@@ -0,0 +1,40 @@
+import {BuildOutlined, TableOutlined} from "@ant-design/icons";
+import {Select, Tooltip} from "antd";
+import PropTypes from "prop-types";
+
+const {Option} = Select;
+
+const SelectViewMode = ({viewMode, setViewMode, localStorageKey, toolTipText}) => {
+    return (
+        <Tooltip
+            title={toolTipText}
+        >
+            <Select
+                value={viewMode}
+                onChange={value => {
+                    setViewMode(value);
+                    localStorage.setItem(localStorageKey, value);
+                }}
+                style={{width: "100%"}}
+            >
+                <Option value={"tile"}>
+                    <BuildOutlined style={{marginRight: 8}} />
+                    Плитка
+                </Option>
+                <Option value={"table"}>
+                    <TableOutlined style={{marginRight: 8}}/>
+                    Таблица
+                </Option>
+            </Select>
+        </Tooltip>
+
+    )
+};
+
+SelectViewMode.propTypes = {
+    viewMode: PropTypes.string.isRequired,
+    setViewMode: PropTypes.func.isRequired,
+    localStorageKey: PropTypes.string.isRequired,
+};
+
+export default SelectViewMode;

web-app/src/components/lens_issues/LensIssueFormModal.jsx

@@ -0,0 +1,193 @@
+import {useEffect, useState} from "react";
+import {Modal, Form, Input, Select, Collapse, Button, notification, List} from "antd";
+import PropTypes from "prop-types";
+import getAllPatients from "../../api/patients/GetAllPatients.jsx";
+import getAllLenses from "../../api/lenses/GetAllLenses.jsx";
+import {useAuth} from "../../AuthContext.jsx";
+
+const {Option} = Select;
+const {Panel} = Collapse;
+
+const LensIssueFormModal = ({visible, onCancel, onSubmit}) => {
+    const {user} = useAuth();
+
+    const [form] = Form.useForm();
+    const [patients, setPatients] = useState([]);
+    const [lenses, setLenses] = useState([]);
+    const [selectedPatient, setSelectedPatient] = useState(null);
+    const [selectedLens, setSelectedLens] = useState(null);
+
+    const [searchPatientString, setSearchPatientString] = useState("");
+    const [searchLensString, setSearchLensString] = useState("");
+
+    useEffect(() => {
+        if (visible) {
+            fetchPatients();
+            fetchLenses();
+        }
+    }, [visible]);
+
+    const fetchPatients = async () => {
+        try {
+            const data = await getAllPatients(user.token);
+            setPatients(data);
+        } catch (error) {
+            console.log(error);
+            notification.error({
+                message: "Ошибка загрузки пациентов",
+                description: "Проверьте подключение к сети.",
+            });
+        }
+    };
+
+    const fetchLenses = async () => {
+        try {
+            const data = await getAllLenses(user.token);
+            setLenses(data);
+        } catch (error) {
+            console.log(error);
+            notification.error({
+                message: "Ошибка загрузки линз",
+                description: "Проверьте подключение к сети.",
+            });
+        }
+    };
+
+    const handleOk = async () => {
+        try {
+            const values = await form.validateFields();
+            onSubmit({...values, patient: selectedPatient, lens: selectedLens});
+            form.resetFields();
+            setSelectedPatient(null);
+            setSelectedLens(null);
+        } catch (errorInfo) {
+            console.log("Validation Failed:", errorInfo);
+        }
+    };
+
+    const flteredPatients = patients
+        .filter((patient) => {
+            const searchLower = searchPatientString.toLowerCase();
+
+            return Object.values(patient)
+                .filter(value => typeof value === "string")
+                .some(value => value.toLowerCase().includes(searchLower));
+        });
+
+    const filteredLenses = lenses
+        .filter((lens) => {
+            const searchLower = searchLensString.toLowerCase();
+            return lens.side.toLowerCase().includes(searchLower);
+        });
+
+    const items = flteredPatients.map((patient) => (
+        {
+            key: patient.id,
+            label: `${patient.last_name} ${patient.first_name} (${new Date(patient.birthday).toLocaleDateString("ru-RU")})`,
+            children:
+                <div>
+                    <p><b>Пациент:</b> {patient.last_name} {patient.first_name}</p>
+                    <p><b>Дата рождения:</b> {new Date(patient.birthday).toLocaleDateString("ru-RU")}</p>
+                    <p><b>Диагноз:</b> {patient.diagnosis}</p>
+                    <p><b>Email:</b> {patient.email}</p>
+                    <p><b>Телефон:</b> {patient.phone}</p>
+                </div>,
+        }
+    ));
+
+    return (
+        <Modal
+            title="Выдача линзы пациенту"
+            open={visible}
+            onCancel={() => {
+                form.resetFields();
+                setSelectedPatient(null);
+                setSelectedLens(null);
+                onCancel();
+            }}
+            onOk={handleOk}
+            okText="Сохранить"
+            cancelText="Отмена"
+            maskClosable={false}
+            centered
+        >
+            <Form form={form} layout="vertical">
+
+                <Form.Item
+                    label="Пациент"
+                    required
+                    rules={[{required: true, message: "Выберите пациента"}]}
+                >
+                    <Input
+                        placeholder="Поиск пациента"
+                        value={searchPatientString}
+                        onChange={(e) => setSearchPatientString(e.target.value)}
+                        style={{marginBottom: 16}}
+                        allowClear
+                    />
+
+                    <div style={{maxHeight: 300, overflowY: "auto", border: "1px solid #d9d9d9", padding: 8}}>
+                        <Collapse
+                            items={items}
+                        />
+                    </div>
+                </Form.Item>
+
+                <Form.Item name="lens" label="Линза" rules={[{required: true, message: "Выберите линзу"}]}>
+                    <Select placeholder="Выберите линзу"
+                            onChange={(id) => setSelectedLens(lenses.find(l => l.id === id))}>
+                        {lenses.map(lens => (
+                            <Option key={lens.id} value={lens.id}>
+                                {`Диаметр: ${lens.diameter}, Тор: ${lens.tor}, Пресет рефракции: ${lens.preset_refraction}`}
+                            </Option>
+                        ))}
+                    </Select>
+                </Form.Item>
+
+                <Form.Item name="issue_date" label="Дата выдачи"
+                           rules={[{required: true, message: "Укажите дату выдачи"}]}>
+                    <Input placeholder="Введите дату выдачи"/>
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};
+
+LensIssueFormModal.propTypes = {
+    visible: PropTypes.bool.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    lensIssue: PropTypes.shape({
+        issue_date: PropTypes.string,
+        patient: PropTypes.shape({
+            first_name: PropTypes.string,
+            last_name: PropTypes.string,
+            patronymic: PropTypes.string,
+            birthday: PropTypes.string,
+            address: PropTypes.string,
+            email: PropTypes.string,
+            phone: PropTypes.string,
+            diagnosis: PropTypes.string,
+            correction: PropTypes.string,
+        }),
+        doctor: PropTypes.shape({
+            last_name: PropTypes.string,
+            first_name: PropTypes.string,
+            login: PropTypes.string,
+        }),
+        lens: PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            tor: PropTypes.number.isRequired,
+            diameter: PropTypes.number.isRequired,
+            esa: PropTypes.number.isRequired,
+            fvc: PropTypes.number.isRequired,
+            preset_refraction: PropTypes.number.isRequired,
+            periphery_toricity: PropTypes.number.isRequired,
+            side: PropTypes.string.isRequired,
+            issued: PropTypes.bool.isRequired,
+            trial: PropTypes.number.isRequired,
+        }),
+    }),
+};
+
+export default LensIssueFormModal;

web-app/src/pages/IssuesPage.jsx

@@ -1,10 +1,13 @@
-import {notification, Spin, Table, Input, Row, Col, DatePicker, Tooltip, Button, FloatButton} from "antd";
+import {notification, Spin, Table, Input, Row, Col, DatePicker, Tooltip, Button, FloatButton, Typography} from "antd";
 import getAllLensIssues from "../api/lens_issues/GetAllLensIssues.jsx";
 import {useEffect, useState} from "react";
 import {useAuth} from "../AuthContext.jsx";
-import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
+import {DatabaseOutlined, LoadingOutlined, PlusOutlined} from "@ant-design/icons";
 import LensIssueViewModal from "../components/lens_issues/LensIssueViewModal.jsx";
 import dayjs from "dayjs";
+import LensIssueFormModal from "../components/lens_issues/LensIssueFormModal.jsx";
+
+const {Title} = Typography;
 
 const IssuesPage = () => {
     const {user} = useAuth();
@@ -13,6 +16,7 @@ const IssuesPage = () => {
     const [lensIssues, setLensIssues] = useState([]);
     const [searchTerm, setSearchTerm] = useState("");
     const [selectedIssue, setSelectedIssue] = useState(null);
+    const [isModalVisible, setIsModalVisible] = useState(false);
 
     const [currentPage, setCurrentPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
@@ -22,6 +26,7 @@ const IssuesPage = () => {
 
     useEffect(() => {
         fetchLensIssuesWithCache();
+        document.title = "Выдача линз";
     }, []);
 
     useEffect(() => {
@@ -43,13 +48,21 @@ const IssuesPage = () => {
 
     const handleAddIssue = () => {
         setSelectedIssue(null);
-
+        setIsModalVisible(true);
     };
 
     const handleCloseViewModal = () => {
         setSelectedIssue(null);
     };
 
+    const handleCloseFormModal = () => {
+        setIsModalVisible(false);
+    };
+
+    const handleSubmitFormModal = () => {
+
+    };
+
     const fetchLensIssues = async () => {
         try {
             const data = await getAllLensIssues(user.token);
@@ -129,6 +142,7 @@ const IssuesPage = () => {
 
     return (
         <div style={{padding: 20}}>
+            <Title level={1}><DatabaseOutlined/> Выдача линз</Title>
             <Row gutter={[16, 16]} style={{marginBottom: 20}}>
                 <Col xs={24} md={12} sm={24} xl={14}>
                     <Input
@@ -213,6 +227,12 @@ const IssuesPage = () => {
                 tooltip={"Добавить выдачу линзы"}
             />
 
+            <LensIssueFormModal
+                visible={isModalVisible}
+                onCancel={handleCloseFormModal}
+                onSubmit={handleSubmitFormModal}
+            />
+
             <LensIssueViewModal
                 visible={selectedIssue !== null}
                 onCancel={handleCloseViewModal}

web-app/src/pages/LensesPage.jsx

@@ -10,9 +10,16 @@ import {
     Button,
     Form,
     InputNumber,
-    Card, Grid, notification, Table, Popconfirm, Tooltip
+    Card, Grid, notification, Table, Popconfirm, Tooltip, Typography
 } from "antd";
-import {LoadingOutlined, PlusOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
+import {
+    LoadingOutlined,
+    PlusOutlined,
+    DownOutlined,
+    UpOutlined,
+    FolderViewOutlined,
+    BorderlessTableOutlined, TableOutlined
+} from "@ant-design/icons";
 import LensCard from "../components/lenses/LensListCard.jsx";
 import getAllLenses from "../api/lenses/GetAllLenses.jsx";
 import addLens from "../api/lenses/AddLens.jsx";
@@ -20,9 +27,11 @@ import updateLens from "../api/lenses/UpdateLens.jsx";
 import deleteLens from "../api/lenses/DeleteLens.jsx";
 import {useAuth} from "../AuthContext.jsx";
 import LensFormModal from "../components/lenses/LensFormModal.jsx";
+import SelectViewMode from "../components/SelectViewMode.jsx";
 
 const {Option} = Select;
 const {useBreakpoint} = Grid;
+const {Title} = Typography;
 
 const LensesPage = () => {
     const {user} = useAuth();
@@ -53,6 +62,7 @@ const LensesPage = () => {
     useEffect(() => {
         fetchLensWithCache();
         fetchViewModeFromCache();
+        document.title = "Линзы";
     }, []);
 
     useEffect(() => {
@@ -98,11 +108,6 @@ const LensesPage = () => {
         }
     };
 
-    const handleChangeViewMode = (mode) => {
-        setViewMode(mode);
-        localStorage.setItem("viewModeLenses", mode);
-    };
-
     const filteredLenses = lenses.filter((lens) => {
         const textMatch = Object.values(lens).some((value) =>
             value?.toString().toLowerCase().includes(searchText.toLowerCase())
@@ -324,6 +329,7 @@ const LensesPage = () => {
 
     return (
         <div style={{padding: 20}}>
+            <Title level={1}><FolderViewOutlined/> Линзы</Title>
             <Row gutter={[16, 16]} style={{marginBottom: 20}}>
                 <Col xs={24} md={14} sm={10} xl={16}>
                     <Input
@@ -343,18 +349,12 @@ const LensesPage = () => {
                     </Button>
                 </Col>
                 <Col xs={24} md={4} sm={4} xl={4}>
-                    <Tooltip
+                    <SelectViewMode
-                        title={"Формат отображения линз"}
+                        viewMode={viewMode}
-                    >
+                        setViewMode={setViewMode}
-                        <Select
+                        localStorageKey={"viewModeLenses"}
-                            value={viewMode}
+                        toolTipText={"Формат отображения линз"}
-                            onChange={handleChangeViewMode}
+                    />
-                            style={{width: "100%"}}
-                        >
-                            <Option value={"tile"}>Плиткой</Option>
-                            <Option value={"table"}>Таблицей</Option>
-                        </Select>
-                    </Tooltip>
                 </Col>
             </Row>
 

web-app/src/pages/LoginPage.jsx

@@ -16,6 +16,7 @@ const LoginPage = () => {
         if (user) {
             navigate("/");
         }
+        document.title = "Авторизация";
     }, [user, navigate]);
 
     const onFinish = async (values) => {

web-app/src/pages/PatientsPage.jsx

@@ -1,6 +1,26 @@
 import {useEffect, useState} from "react";
-import {Input, Select, List, FloatButton, Row, Col, Spin, notification, Tooltip, Table, Button, Popconfirm} from "antd";
+import {
-import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
+    Input,
+    Select,
+    List,
+    FloatButton,
+    Row,
+    Col,
+    Spin,
+    notification,
+    Tooltip,
+    Table,
+    Button,
+    Popconfirm,
+    Typography
+} from "antd";
+import {
+    LoadingOutlined,
+    PlusOutlined,
+    SortAscendingOutlined,
+    SortDescendingOutlined,
+    TeamOutlined
+} from "@ant-design/icons";
 import {useAuth} from "../AuthContext.jsx";
 import getAllPatients from "../api/patients/GetAllPatients.jsx";
 import PatientListCard from "../components/patients/PatientListCard.jsx";
@@ -8,8 +28,10 @@ import PatientFormModal from "../components/patients/PatientFormModal.jsx";
 import updatePatient from "../api/patients/UpdatePatient.jsx";
 import addPatient from "../api/patients/AddPatient.jsx";
 import deletePatient from "../api/patients/DeletePatient.jsx";
+import SelectViewMode from "../components/SelectViewMode.jsx";
 
 const {Option} = Select;
+const {Title} = Typography
 
 const PatientsPage = () => {
     const {user} = useAuth();
@@ -28,6 +50,7 @@ const PatientsPage = () => {
     useEffect(() => {
         fetchPatientsWithCache();
         fetchViewModeFromCache();
+        document.title = "Пациенты";
     }, []);
 
     useEffect(() => {
@@ -80,11 +103,6 @@ const PatientsPage = () => {
         }
     };
 
-    const handleChangeViewMode = (mode) => {
-        setViewMode(mode);
-        localStorage.setItem("viewModePatients", mode);
-    };
-
     const filteredPatients = patients
         .filter((patient) => {
             const searchLower = searchText.toLowerCase();
@@ -293,8 +311,9 @@ const PatientsPage = () => {
 
     return (
         <div style={{padding: 20}}>
+            <Title level={1}><TeamOutlined/> Пациенты</Title>
             <Row gutter={[16, 16]} style={{marginBottom: 20}}>
-                <Col xs={24} md={14} sm={10} xl={16}>
+                <Col xs={24} md={14} sm={10} xl={18} xxl={19}>
                     <Input
                         placeholder="Поиск пациента"
                         onChange={(e) => setSearchText(e.target.value)}
@@ -302,7 +321,8 @@ const PatientsPage = () => {
                         allowClear
                     />
                 </Col>
-                <Col xs={24} md={5} sm={6} xl={2}>
+                {viewMode === "tile" && (
+                    <Col xs={24} md={5} sm={6} xl={3} xxl={2}>
                         <Tooltip
                             title={"Сортировка пациентов"}
                         >
@@ -311,24 +331,28 @@ const PatientsPage = () => {
                                 onChange={(value) => setSortOrder(value)}
                                 style={{width: "100%"}}
                             >
-                            <Option value="asc">А-Я</Option>
+                                <Option value="asc"><SortAscendingOutlined/> А-Я</Option>
-                            <Option value="desc">Я-А</Option>
+                                <Option value="desc"><SortDescendingOutlined/> Я-А</Option>
                             </Select>
                         </Tooltip>
                     </Col>
-                <Col xs={24} md={5} sm={8} xl={6}>
+                )}
-                    <Tooltip
+
-                        title={"Формат отображения пациентов"}
+                <Col xs={24} md={
-                    >
+                    viewMode === "tile" ? 5 : 10
-                        <Select
+                } sm={
-                            value={viewMode}
+                    viewMode === "tile" ? 8 : 14
-                            onChange={handleChangeViewMode}
+                } xl={
-                            style={{width: "100%"}}
+                    viewMode === "tile" ? 3 : 5
-                        >
+                } xxl={
-                            <Option value={"tile"}>Плиткой</Option>
+                    viewMode === "tile" ? 3 : 4
-                            <Option value={"table"}>Таблицей</Option>
+                }>
-                        </Select>
+                    <SelectViewMode
-                    </Tooltip>
+                        viewMode={viewMode}
+                        setViewMode={setViewMode}
+                        localStorageKey={"viewModePatients"}
+                        toolTipText={"Формат отображения пациентов"}
+                    />
                 </Col>
             </Row>
 

web-app/src/pages/SetLensesPage.jsx

@@ -1,8 +1,8 @@
 import {useAuth} from "../AuthContext.jsx";
 import {useEffect, useState} from "react";
-import {FloatButton, Input, List, notification, Row, Spin} from "antd";
+import {FloatButton, Input, List, notification, Row, Spin, Typography} from "antd";
 import getAllSets from "../api/sets/GetAllSets.jsx";
-import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
+import {LoadingOutlined, PlusOutlined, SwitcherOutlined} from "@ant-design/icons";
 import SetListCard from "../components/sets/SetListCard.jsx";
 import SetFormModal from "../components/sets/SetFormModal.jsx";
 import updateSet from "../api/sets/UpdateSet.jsx";
@@ -13,6 +13,8 @@ import updateSetContent from "../api/set_content/UpdateSetContent.jsx";
 import appendLensesFromSet from "../api/sets/AppendLensesFromSet.jsx";
 
 
+const {Title} = Typography;
+
 const SetLensesPage = () => {
     const {user} = useAuth();
 
@@ -201,6 +203,7 @@ const SetLensesPage = () => {
 
     return (
         <div style={{padding: 20}}>
+            <Title level={1}><SwitcherOutlined/> Наборы линз</Title>
             <Row style={{marginBottom: 20}}>
                 <Input
                     placeholder="Поиск набора"

web-app/src/styles/app.css

@@ -1,3 +1,21 @@
 body {
     margin: 0 !important;
 }
+
+*::-webkit-scrollbar {
+    width: 6px;
+}
+
+*::-webkit-scrollbar-track {
+    background: #ffffff;
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #1677ff;
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: #125bb5;
+}