Верстка личного кабинета пользователя

Нужна верстка ПК и мобильной версии личного кабинета.
Всего будет 3 страницы.

Полный дизайн тут: https://drive.google.com/open?id=1UplWap7z5DqkwGoAPgxVWKZR7ZgEDqYs

Общее
Левое меню стационарно, но сворачивается при нажатии на графический элемент. В тоже время оставшаяся часть раскрывается на освободившееся место.
https://drive.google.com/file/d/1V8PvZB7OT13_nFlx0b-OjiqyBn6ifTJV/view?usp=sharing
https://drive.google.com/file/d/1YUAA9uoFKTUDOD5xPf7c_imAgyqS0tqx/view?usp=sharing



При нажатии на логотип - переход на вкладку "Дашборд".
Страница 1 "Мой профиль": https://drive.google.com/open?id=1Gfr9n4N22c6yXh-VDi8N-JE5oUOWfzYx
Версия страницы 1, если профиль принадлежит тому, кто авторизован в кабинете.

Поля с данными редактируются при нажатии на кнопку "редактировать".
Изменения сохраняются при нажатии на соответствующую кнопку. Кнопки "сохранить" и "отмена" появляются только при активации режима редактирования.
Можно заменить фото при нажатии соответствующей кнопки. При нажатии открывается

Версия страницы 2, если заходит на страницу не владелец.

Появляется кнопка "Выгрузить". При нажатии на нее формируется CSV-файл с основными контактными данными человека.
Функции редактирования не активны.

Страница 2 "структура":
https://drive.google.com/open?id=1vVMdZWgTg29ryTjJxQ-8jjV82Cjdth7R

Строка "Поиск" - при вводе данных в нее и нажатии "Enter" - активирует поиск по базе данных и выводит нужную информацию.

Столбик с перечнем информаций.
1) по умолчанию открыт только верхний пункт.
2) если есть вложения в базе, то отображается возле соответствующего пункта иконка "+".
3) при нажатии на иконку "+", ее значение меняется на "-" и ниже раскрывается список вложений.
4) при выполнении критерия - во вложении есть человек со статусом "degrade" - цвет значка "+", меняется на красный.
5) при выполнении определенных условий, возле названия строки меняется иконка.
Серая – без закупки,
Наполовину Синяя – ЛО до 1000 ББ
Полностью синяя – ЛО 1000-2999 ББ
Желтая – ЛО 3000 ББ
Зеленая – ЛО 9000 ББ.
Красная - последний месяц до degrade.
Оранжевая - выполненная впервые квалификация.

6) при выполнении условия “Новичок” - появляется иконка “New” в строке возле имени.


7) при выполнении условия “День рождения” - появляется иконка “подарок”.


Поле “i”

При наведении курсора на букву- появляется окошко с информацией.
При убирании курсора блок исчезает.
При клике на букву “i” окно с информацией фиксируется, до тех пор пока не будет совершен клик в любом другом месте экрана.
https://drive.google.com/file/d/1qtewjsCcO2o54dt3bRUFK7ADYcyypnho/view?usp=sharing


Правое поле с информацией.
При нажатии на какую-либо строку в списке - меняется информация в правом поле на соответствующие значения из базы данных.
При нажатии на блок “контактная информация” - сворачивается содержимое ранее открытого блока и раскрывается содержимое блока “контактная информация”.
https://drive.google.com/file/d/1YUAA9uoFKTUDOD5xPf7c_imAgyqS0tqx/view?usp=sharing


При нажатии на блок “дополнительная информация” - сворачивается содержимое ранее открытого блока и раскрывается содержимое блока “дополнительная информация”.
https://drive.google.com/file/d/1UZvZtj4mLTCBAtJZl7Is0nKN6sdgOtod/view?usp=sharing



Правое поле с таблицами:
https://drive.google.com/file/d/1YUAA9uoFKTUDOD5xPf7c_imAgyqS0tqx/view?usp=sharing

1) При переходе из вкладки во вкладку - меняется содержимое таблицы.
2) Содержимое таблицы берется из базы данных. По умолчанию используем шаблон, основная база будет привязываться на этапе программирования.
3) Во вкладке “Динамика”, помимо таблицы, под ней отображается еще 2 графика.
Значения в эти графики подтягиваются из базы данных.
https://drive.google.com/file/d/1Qx-1hcFCHDLVKz65EAFX05oI7A_zUcPf/view?usp=sharing

Страница 3 "Дашборд"

https://drive.google.com/open?id=1XDuNiqGtZvxlGDPAPsDhjOlUBZiJrLIr

Баннера сделаны, как слайдер.

График меняется, беря данные из базы данных.
Полоски в полях "личный объем", "групповой объем" -меняются в зависимости от пропорции. Полная закраска 100% от величины Х, отсутствие цвета - 0% от величины Х.
При нажатии на календарь - http://prntscr.com/nytkbm всплывает окно с календарем соответственно.

Технологии:
фронт: HTML/CSS/JS/jQuery/SmartAdmin
Селекты: Select2