Личный кабинет сотрудника

О проекте

Этот проект представляет собой личный кабинет сотрудника, состоящий из трех основных вкладок: "Основная информация", " Отпуска" и "Оборудование". Вкладка "Основная информация" позволяет пользователю просматривать и редактировать личные данные, загружать страны из открытого API и отображать адаптивные элементы, зависящие от введенных значений. Вкладка " Отпуска" предоставляет информацию о взятых отпусках в виде графиков и таблиц, а также позволяет загружать полные данные по запросу. Вкладка "Оборудование" предназначена для управления и учета оборудования, выданного сотруднику. Проект построен с использованием архитектуры FSD и современных технологий, таких как React, Next.js и Zustand.

Запуск проекта

Качаем зависимости

npm i

Запускаем в дев режиме

npm run dev

Стек технологий

• @siberiacancode/reactuse - хуки
• clsx - для удобного вз-ия с классами
• next - некст
• react-hook-form - для работы с формами
• recharts - для графика
• zustand - для управления состоянием
• eslint - правила для кода
• prettier - код стайл
• tailwindcss - стили
• typescript - тс

Архитектура

При построении приложения ориентирвоался на FSD. Однако в целях экономия времени некоторые моменты игнорировал.

Использовал только 4 слоя

1. app
2. entities
3. shared
4. widgets

Каждый слой состоит из слайсов. Например

entities ( слой )
    └ user ( слайс )
        └ ui
          └ ... юай компоненты
        └ types.ts - типы для сущности
        └ store.ts - стор для сущности
        └ index.ts (паблик апи для слайса)

shared

Cлой кода общего использования

shared/assets - место, куда складывались все изображения\svg

shared/utils - сторонние функции, в рамках проекта там хранится функция для создания селекторов для сторов

shared/ui - общие юай компоненты для всего приложения

Что реализовано?

Вкладка "ОСНОВНАЯ ИНФОРМАЦИЯ" профиля

• 😎 Страница сделана как в макете
• 📑 Все формы сделаны (react-hook-form), сделаны под них модалки
• 🌐 Подгрузка стран через открытое API сделано, подставляется в селект через zustand-стор (в идеале было сделать асинхронную подгрузку при открытии селекта + виртуализацию для селекта, но не успел)
• 📊 Элементы, которые зависят от значений (цвет % загрузки пользователя меняется в зависимости от процента)
• 📱 Адаптив
• 🌍 Не сделал подгрузку городов по странам, не дождался доступа к API (открытого, без ключа, не нашел)
• 📝 Не сделал реакт-маски для инпутов

Вкладка "ОТПУСКА" профиля

• 😎 Страница сделана как в макете (почти)
• 📊 Сделал отображение информации с бекенда в виде графика
• 📋 Таблица сделана через колонки, как указано в макете
• 📈 В таблице показываются первые 3 строки с бека, при открытии модалки показываются все, что пришло с бека (в идеале было сделать, что при открытии модалки идет запрос на получение всех отпусков юзера, но было мало времени)
• 🎨 Не очень красиво сделал ховер эффекты в статистике

Вкладка "ОБОРУДОВАНИЕ" профиля

• 😎 Страница сделана как в макете

Общее

• Реализованы следующие компоненты: avatar, avatar-group, box, button, input, modal, page, portal, select (единственный компонент, при создании которого использовался headless компонент), table, tabs, tooltip, typography
• Приложение сделано по архитектуре FSD