Перепиши individuals-view по примеру как products-view:
productsview:
```
import React, { useEffect, useState } from "react";
import ProductService from "../../api/services/product-service";
import { Table, Button, Space } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Modal, Form, Input } from "antd";

export const ProductsView = ({
    ...props
}) => {
    /**
     *  локальное состояние компонента
     *  здесь будет храниться список товаров
     */
    const columns = [
        {
            title: 'Код',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: 'Наименование',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: 'Действия',
            key: 'actions',
            render: (text, record) => {
                return (
                    <Space size="middle">
                        <div onClick={() => updateRecordHandler(record)}>
                            <EditOutlined/>
                        </div>
                        
                        <div onClick={() => deleteRecordHandler(record.id)}>
                            <DeleteOutlined/>
                        </div>
                    </Space>
                )
            }
        }
    ];
    // Добавьте код автоматического сохранения/логики отправки под ваши нужды
    const handleOk = async () => {
        try {
            if (currentRecord?.id) {
                // Обновление существующей записи
                await ProductService.updateRecord(currentRecord);
            } else {
                // Создание новой записи
                await ProductService.createRecord(currentRecord);
            }
            // Обновление списка после изменения
            const updatedList = await ProductService.getAllRecords();
            setList(updatedList);
            // Закрытие модального окна
            setVisible(false);
            setCurrentRecord(null);
        } catch (error) {
            console.error('Ошибка при сохранении данных:', error);
        }
    };

const handleCancel = () => {
    setVisible(false);
};
    const createRecordHandler = () => {
        setCurrentRecord(null)
        setVisible(true);
    }

    const updateRecordHandler = (record) => {
        setCurrentRecord(record)
        setVisible(true)
    }

    const deleteRecordHandler = async(recordId) => {
        await ProductService.removeRecord(recordId);
        setList(list.filter(it => it.id !== recordId));
    }

  const [list, setList] = useState([]);
  const [currentRecord, setCurrentRecord] = useState(null);
    const [visible, setVisible] = useState(false);

    /**
     * в момент, когда компонент отрисован,
     * вызывается запрос на получение списка товаров
     */
    useEffect(() => {
        async function fetchData(){
        /**
         * запрос - это асинхронная функция
         */
        const list = await ProductService.getAllRecords();

        /** 
         * после того, как список получен, 
         * устанавливаем его в локальное состояние 
         */
        setList(list);
        /**
         * когда компонент будет демонтирован со страницы,
         * очищаем локальное состояние
         */
        return () => setList([]);
    }
    
    fetchData();
}, [])

return (
    <div style={{ padding: 16 }}>
        <Table dataSource={list} columns={columns} />
        <Button onClick={createRecordHandler}>
            Создать
        </Button>

        <Modal
            title={currentRecord ? "Обновить запись" : "Создать запись"}
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
        >
            <Form>
                <Form.Item label="Название">
                    <Input
                        value={currentRecord ? currentRecord.title : ''}
                        onChange={(e) => setCurrentRecord({ ...currentRecord, title: e.target.value })}
                    />
                </Form.Item>
                {/* Дополнительные поля формы можно добавить здесь */}
            </Form>
        </Modal>
    </div>
);

}

```
IndividualsView
```
import { Space, Table, Button, Modal, Form, Input } from "antd";
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from "react";
import IndividualService from "../../api/services/individuals-service";

export const IndividualsView = ({ ...props }) => {
    const columns = [
        {
            title: 'Код',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: 'Фамилия',
            dataIndex: 'lastName',
        },
        {
            title: 'Имя',
            dataIndex: 'firstName',
        },
        {
            title: 'Отчество',
            dataIndex: 'patronymic',
        },
        {
            title: 'Кем выдан паспорт',
            dataIndex: 'issued',
        },
        {
            title: 'Серия',
            dataIndex: 'series',
        },
        {
            title: 'Номер',
            dataIndex: 'number',
        },
        {
            title: 'Действия',
            key: 'actions',
            render: (text, record) => {
                return (
                    <Space size="middle">
                        <div onClick={() => updateRecordHandler(record)}>
                            <EditOutlined />
                        </div>

                        <div onClick={() => deleteRecordHandler(record.id)}>
                            <DeleteOutlined />
                        </div>
                    </Space>
                );
            }
        },
    ];

    const [list, setList] = useState([]);
    const [currentRecord, setCurrentRecord] = useState(null);
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        async function fetchData() {
            const list = await IndividualService.getAllRecords();
            setList(list);
            return () => setList([]);
        }
        fetchData();
    }, []);

    const createRecordHandler = () => {
        setCurrentRecord(null);
        setVisible(true);
    };

    const updateRecordHandler = (record) => {
        setCurrentRecord(record);
        setVisible(true);
    };

    const deleteRecordHandler = async (recordId) => {
        await IndividualService.removeRecord(recordId);
        setList(list.filter(it => it.id !== recordId));
    };

    return (
        <div style={{ padding: 16 }}>
            <Table dataSource={list} columns={columns} />
            <Button onClick={createRecordHandler}>
                Создать
            </Button>
            <IndividualDialog
                visible={visible}
                onOk={(record) => {
                    currentRecord
                        ? setList(list.map(it => it.id === currentRecord.id
                            ? { ...record }
                            : it))
                        : setList([...list, record]);

                    setCurrentRecord(null);
                    setVisible(false);
                }}
                onCancel={() => setVisible(false)}
                currentRecord={currentRecord}
            />
        </div>
    );
};

const IndividualDialog = ({ visible, onOk, onCancel, currentRecord }) => {
    const [form] = Form.useForm();

    useEffect(() => {
        if (currentRecord) {
            form.setFieldsValue(currentRecord);
        } else {
            form.resetFields();
        }
    }, [currentRecord, form]);

    const handleSubmit = () => {
        form.validateFields().then(values => {
            onOk(values);
        });
    };

    return (
        <Modal
            visible={visible}
            title={currentRecord ? "Редактировать запись" : "Создать запись"}
            onCancel={onCancel}
            onOk={handleSubmit}
        >
            <Form form={form} layout="vertical">
                <Form.Item name="lastName" label="Фамилия" rules={[{ required: false, message: 'Введите фамилию' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="firstName" label="Имя" rules={[{ required: false, message: 'Введите имя' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="patronymic" label="Отчество">
                    <Input />
                </Form.Item>
                <Form.Item name="issued" label="Кем выдан паспорт">
                    <Input />
                </Form.Item>
                <Form.Item name="series" label="Серия">
                    <Input />
                </Form.Item>
                <Form.Item name="number" label="Номер">
                    <Input />
                </Form.Item>
            </Form>
        </Modal>
    );
};
```