Промпт для React интерфейса задач фронт

Роль: Frontend-разработчик с опытом работы 2 года.
Задача: Разработать интерактивный и адаптивный веб-интерфейс для нового онлайн-сервиса по управлению задачами, используя React, TypeScript и Styled Components.

Цель: Создать удобный, интуитивно понятный и визуально привлекательный интерфейс, который позволит пользователям легко добавлять, редактировать, удалять и отслеживать свои задачи. Интерфейс должен быть полностью адаптивным и корректно отображаться на различных устройствах, включая компьютеры, планшеты и смартфоны.

Контекст: Компания разрабатывает новый сервис для управления задачами, ориентированный на фрилансеров и небольшие команды. Важным аспектом является простота использования и наличие расширенных функций фильтрации и сортировки задач. Сервис должен интегрироваться с существующим бэкендом, разработанным на Node.js и Express.

Инструкции:
- Разработать компонентную структуру React, обеспечивающую повторное использование кода и модульность.
- Использовать TypeScript для обеспечения строгой типизации и повышения надежности кода.
- Применить Styled Components для стилизации интерфейса, обеспечивая его визуальную привлекательность и соответствие фирменному стилю компании.
- Реализовать функциональность добавления, редактирования, удаления и отметки задач как выполненных.
- Разработать систему фильтрации и сортировки задач по различным критериям, таким как приоритет, срок выполнения и статус.
- Обеспечить адаптивность интерфейса для различных устройств и разрешений экрана.
- Реализовать валидацию данных на стороне клиента, чтобы предотвратить отправку некорректных данных на сервер.
- Написать unit-тесты для основных компонентов интерфейса, чтобы обеспечить их правильную работу.
- Предоставить подробную документацию к разработанному интерфейсу, включая описание компонентной структуры, принципов стилизации и API.
- Учесть принципы доступности (accessibility) при разработке интерфейса, чтобы он был удобен для пользователей с ограниченными возможностями.
- Предусмотреть возможность интеграции с другими сервисами, такими как Google Calendar и Slack.
- Описать процесс разработки, включая используемые инструменты, библиотеки и подходы к решению проблем.
- Оценить время, необходимое для завершения проекта, и предложить план реализации с указанием этапов и сроков.

src/
├── components/
│   ├── common/           # Переиспользуемые компоненты
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Modal/
│   │   ├── Dropdown/
│   │   └── Loader/
│   ├── layout/           # Компоненты разметки
│   │   ├── Header/
│   │   ├── Sidebar/
│   │   └── Container/
│   └── tasks/            # Компоненты задач
│       ├── TaskList/
│       ├── TaskItem/
│       ├── TaskForm/
│       ├── TaskFilters/
│       └── TaskSorter/
├── pages/                # Страницы приложения
│   ├── Dashboard/
│   ├── TaskDetails/
│   └── Settings/
├── hooks/                # Custom hooks
│   ├── useTasks.ts
│   ├── useFilters.ts
│   └── useDebounce.ts
├── services/             # API сервисы
│   ├── api.ts
│   ├── taskService.ts
│   └── integrationService.ts
├── store/                # State management
│   ├── taskStore.ts
│   └── uiStore.ts
├── types/                # TypeScript типы
│   ├── task.types.ts
│   ├── api.types.ts
│   └── filter.types.ts
├── utils/                # Утилиты
│   ├── validators.ts
│   ├── formatters.ts
│   └── helpers.ts
├── styles/               # Глобальные стили
│   ├── GlobalStyles.ts
│   ├── theme.ts
│   └── breakpoints.ts
└── constants/            # Константы
    ├── routes.ts
    └── config.ts

// types/task.types.ts
export enum TaskPriority {
  LOW = 'low',
  MEDIUM = 'medium',
  HIGH = 'high',
  URGENT = 'urgent'
}

export enum TaskStatus {
  TODO = 'todo',
  IN_PROGRESS = 'in_progress',
  COMPLETED = 'completed',
  ARCHIVED = 'archived'
}

export interface Task {
  id: string;
  title: string;
  description: string;
  priority: TaskPriority;
  status: TaskStatus;
  dueDate: Date | null;
  createdAt: Date;
  updatedAt: Date;
  tags: string[];
  assignee?: string;
}

export interface TaskFilters {
  status?: TaskStatus[];
  priority?: TaskPriority[];
  searchQuery?: string;
  dateRange?: {
    start: Date;
    end: Date;
  };
  tags?: string[];
}