Управление данными о звонках

Посмотреть сайт можно справа, под разделом 'About'.

👩‍💻 Общее описание

Данный проект представляет собой веб-приложение, разработанное с использованием фреймворка React и библиотеки Redux Toolkit для управления состоянием. Приложение предназначено для управления данными о звонках, а также предоставляет интерфейс для просмотра и фильтрации списка звонков.

📌 Основные задачи

1. Загрузка данных о меню и звонках: В приложении реализована загрузка данных о меню и звонках с помощью асинхронных действий (thunks) с использованием библиотеки Redux Toolkit.

2. Навигационная панель (Nav.jsx): Реализован компонент навигационной панели, который отображает пункты меню на основе данных из Redux-состояния.

3. Главный экран (Main.jsx): Разработан главный экран, на котором располагаются различные элементы фильтрации, такие как текстовое поле для поиска, фильтры по датам, типам звонков и другим параметрам. Также на этом экране отображается список звонков в соответствии с примененными фильтрами.

4. Пользовательская панель (UserPanel.jsx): Реализована панель пользователя, которая выводит статистику по звонкам, дату, поиск и информацию о пользователе. Статистика включает информацию о новых звонках, качестве разговоров и конверсии в заказы.

5. Отображение основной информации о звонках: Приложение позволяет пользователям просматривать данные о звонках, такие как дата, тип звонка, оценка, источник и другие параметры.

6. Фильтрация данных: Пользователь может применять фильтры для отображения конкретных звонков. Есть возможность фильтровать по типу звонка, исполнителю, источнику и оценке звонка, датам.

7. Статистика звонков и активности: Приложение предоставляет статистическую информацию, такую как количество новых звонков, качество разговоров и конверсию в заказы. Эта статистика отображается в верхней панели.

🚀 Основные возможности

1. Отображение списка звонков Вы сможете легко просматривать список звонков с подробной информацией, такой как источник, дата, длительность, оценка и другие важные параметры.

2. Фильтрация по различным критериям Наш сервис предоставляет гибкую систему фильтрации. Вы можете фильтровать звонки по дате, типу звонка, сотруднику, оценке и другим параметрам, чтобы быстро находить нужные записи.

3. Удобный поиск Если вы ищете конкретные звонки, наш поиск поможет вам. Просто введите имя сотрудника, источник или номер телефона, и мы покажем вам соответствующие результаты.

4. Статистика и анализ Сервис предоставляет статистику по звонкам, включая количество новых звонков, качество разговоров и конверсию в заказы. Графические диаграммы помогут вам наглядно представить эту информацию.

📋 Технические детали

1. Redux и Redux Toolkit: Для управления состоянием приложения используется библиотека Redux и ее расширение Redux Toolkit. Для каждой сущности (меню, звонки) создан отдельный слайс (reducer) с асинхронными действиями для загрузки данных.

2. Компоненты и стили: Используется модульный подход к стилям с помощью CSS-модулей, что позволяет изолировать стили компонентов. Каждый компонент оформлен в отдельном файле и импортируется при необходимости.

3. Фильтрация данных: Реализован механизм фильтрации данных по различным параметрам, таким как даты, типы звонков, исполнители и т.д. Фильтры применяются к списку звонков, отображая только подходящие под критерии записи.

4. Запросы к API: Для получения данных о звонках и меню используются асинхронные действия (thunks) с использованием библиотеки @reduxjs/toolkit. Данные загружаются из внешнего API.

5. Компоненты React: Приложение разделено на множество компонентов React, что способствует легкости разработки, тестирования и поддержки кода.

6. Статистика и аналитика: Для отображения статистики используются компоненты, такие как CallsStatisticsBar, которые принимают данные и отображают информацию в виде столбчатых графиков.

7. Календарь и выбор дат: Для выбора дат используется библиотека react-datepicker, интегрированная в компонент FilterCalendar.

Основные компоненты

1. CallListRenderer.jsx Компонент CallListRenderer отвечает за отображение списка звонков с учетом примененных фильтров. Он принимает ряд параметров, таких как значения фильтров, и на основе них фильтрует данные о звонках и группирует их по датам. Затем он отображает звонки для каждой даты с деталями, такими как иконка направления звонка, время, аватар сотрудника и другие.

2. CallDetails.jsx Компонент CallDetails отображает детали конкретного звонка. Он принимает параметры, такие как источник, время, аватар, номер телефона, длительность звонка, статус и направление. В зависимости от направления звонка (входящий или исходящий), он отображает соответствующую иконку направления.

3. FilterCallSearch.jsx Компонент FilterCallSearch предоставляет поле ввода для поиска звонков. Он принимает параметры, такие как текст-плейсхолдер, текущее значение и обработчик изменения значения. Пользователь может вводить текст в поле для фильтрации звонков по имени, источнику или номеру телефона.

4. FilterDropdown.jsx Компонент FilterDropdown создает выпадающий список с опциями для фильтрования данных. Он принимает параметры, такие как список опций, выбранное значение и обработчик выбора значения. При клике на заголовок выпадающего списка отображаются опции, из которых пользователь может выбрать нужное значение для фильтрации данных.

5. FilterEmployeesList.jsx Данный компонент позволяет пользователям фильтровать данные по имени сотрудника. В выпадающем списке можно выбрать сотрудника, а также предоставляется опция "Все сотрудники". Выбранное имя сотрудника отображается вместе с фамилией рядом с активным элементом фильтра. Таким образом, пользователи могут легко выбирать конкретных сотрудников для фильтрации звонков.

6. FilterRatingsDropdown.jsx Этот компонент обеспечивает фильтрацию по оценкам звонков. В выпадающем списке отображаются доступные оценки, а также опция "Все оценки". Выбранная оценка отображается в активном элементе фильтра, вместе с соответствующим значком и текстовым описанием. Пользователи могут выбирать конкретные оценки для фильтрации данных.

Заключение

Данный проект успешно реализует основные задачи по управлению данными о звонках и предоставляет удобный интерфейс для их фильтрации и просмотра. Проект основан на современных технологиях разработки веб-приложений и следует лучшим практикам организации кода и управления состоянием.

Макет в Figma