# S3 Lists Manager - Frontend

Современный веб-интерфейс для управления списками доменов и AS с использованием Tabler UI.

## 🎨 Особенности

- **Современный UI/UX** - Полностью переработанный интерфейс в стиле Tabler
- **Адаптивный дизайн** - Отлично работает на всех устройствах
- **Иконки Tabler** - Красивые иконки для улучшения пользовательского опыта
- **Интерактивные элементы** - Анимации, hover-эффекты, модальные окна
- **Статистика** - Отображение количества элементов в реальном времени
- **Поиск** - Быстрый поиск по спискам
- **Массовые операции** - Возможность массового обновления шлюзов
- **Подтверждения** - Модальные окна для подтверждения важных действий

## 🚀 Технологии

- **React 19** - Современная библиотека для создания пользовательских интерфейсов
- **Tabler Icons** - Красивые иконки в стиле Tabler
- **CSS Variables** - Современные CSS переменные для легкой кастомизации
- **Responsive Design** - Адаптивный дизайн для всех устройств
- **Vite** - Быстрый сборщик проекта

## 📦 Установка

1. Убедитесь, что у вас установлен Node.js (версия 16 или выше)

2. Перейдите в папку frontend:
```bash
cd frontend
```

3. Установите зависимости:
```bash
npm install
```

4. Запустите проект в режиме разработки:
```bash
npm run dev
```

5. Откройте браузер и перейдите по адресу: `http://localhost:5173`

## 🏗️ Сборка для продакшена

```bash
npm run build
```

Собранные файлы будут находиться в папке `dist/`.

## 🎯 Использование

### Управление доменами

1. **Добавление домена**:
   - Введите имя домена (например: `example.com`)
   - Выберите шлюз (по умолчанию: `SharkFIN`)
   - Нажмите "Добавить"

2. **Редактирование**:
   - Нажмите на иконку редактирования рядом с доменом
   - Измените шлюз
   - Нажмите "Сохранить" или "Отмена"

3. **Удаление**:
   - Нажмите на иконку удаления
   - Подтвердите удаление в модальном окне

### Управление AS

Аналогично управлению доменами, но для AS номеров (например: `AS12345`).

### Массовые операции

1. Введите текущий шлюз в поле "Заменить с"
2. Введите новый шлюз в поле "Заменить на"
3. Нажмите "Выполнить замену"
4. Подтвердите операцию

### Сохранение изменений

После внесения изменений обязательно нажмите "Сохранить в S3" для записи изменений в базу данных.

## 🎨 Кастомизация

### Цветовая схема

Основные цвета можно изменить в CSS переменных в файле `src/App.css`:

```css
:root {
  --tblr-primary: #206bc4;      /* Основной цвет */
  --tblr-success: #2fb344;      /* Цвет успеха */
  --tblr-warning: #f59f00;      /* Цвет предупреждения */
  --tblr-danger: #d63939;       /* Цвет ошибки */
}
```

### Шрифты

Проект использует шрифт Inter. Для изменения шрифта обновите переменную:

```css
--tblr-font-family-sans-serif: "Ваш шрифт", -apple-system, BlinkMacSystemFont, ...;
```

## 📱 Адаптивность

Интерфейс полностью адаптивен и оптимизирован для:

- **Desktop** (1200px+) - Полный интерфейс с боковой панелью
- **Tablet** (768px - 1199px) - Адаптированный интерфейс
- **Mobile** (до 767px) - Мобильная версия с выпадающим меню

## 🔧 Разработка

### Структура проекта

```
src/
├── App.jsx          # Главный компонент приложения
├── App.css          # Стили Tabler
├── DataManager.jsx  # Компонент управления данными
├── main.jsx         # Точка входа
└── index.css        # Базовые стили
```

### Добавление новых функций

1. Создайте новый компонент в папке `src/`
2. Импортируйте необходимые иконки из `@tabler/icons-react`
3. Используйте CSS классы Tabler для стилизации
4. Добавьте адаптивность для мобильных устройств

### Иконки

Все иконки импортируются из `@tabler/icons-react`:

```jsx
import { IconPlus, IconEdit, IconTrash } from '@tabler/icons-react';

// Использование
<IconPlus className="icon" />
```

## 🐛 Отладка

### Консоль разработчика

Откройте консоль разработчика (F12) для просмотра ошибок и логов.

### Проверка API

Убедитесь, что бэкенд запущен и доступен по адресу `/api`.

## 📄 Лицензия

Этот проект использует лицензию MIT.

## 🤝 Вклад в проект

1. Форкните репозиторий
2. Создайте ветку для новой функции
3. Внесите изменения
4. Создайте Pull Request

## 📞 Поддержка

Если у вас есть вопросы или проблемы, создайте Issue в репозитории.

---

**S3 Lists Manager** - Современный интерфейс для управления списками с использованием Tabler UI.