## 🎯 ПОЛНЫЙ ПРОМТ ДЛЯ РАЗРАБОТКИ ИНТЕРНЕТ-МАГАЗИНА "БРАЕР-КОЛОР"

### 📋 ТЕХНИЧЕСКОЕ ЗАДАНИЕ

**ВАЖНО:** `debug` является глобально объявленной переменной во всем приложении. НЕ используйте `debug = require 'debug'` в компонентах.

### 🎯 КОНТЕКСТ ПРОЕКТА
**Название:** Интернет-магазин лакокрасочной продукции "Браер-Колор"  
**Тип:** SPA (Single Page Application) с современным минималистичным дизайном  
**Аналоги:** Функциональность m-kraski.ru с дизайном https://braer-color.ru/  
**Архитектура:** Мультидоменная, мультиязычная PWA с офлайн-режимом
**GIT репозитарий:** https://gogs.osvoj.ru/oleg/s5l.ru-crm
**Текущая версия промта** https://gogs.osvoj.ru/oleg/s5l.ru-crm/raw/master/README.md

## 🛠 ТЕХНИЧЕСКИЙ СТЕК
- **Шаблонизатор:** Pug с Vue компонентами
- **Стилизация:** Stylus + CSS переменные + BEM методология
- **Логика:** CoffeeScript + Vue.js 3 (runtime)
- **Важно** Vuejs в runtime режиме, не использовать template, шаблоны СТРОГО через "render: (new Function '_ctx', '_cache', renderFns['app/index.pug'])()" во всех компанентах
- **Маршрутизация:** Vue Router
- **База данных:** PouchDB (клиент) + CouchDB (сервер)
- **Анимации:** CSS transitions/transforms + Vue transitions


## 📁 СТРУКТУРА ПРОЕКТА

### 🏗️ АРХИТЕКТУРА ФАЙЛОВ
```
app/
├── index.pug                 # Главный layout
├── index.coffee              # Инициализация Vue и роутера
├── index.styl                # Глобальные стили и CSS переменные
├── config.coffee             # Конфигурация приложения
├── types/                    # Интерфейсы данных
│   ├── data.coffee
│   ├── events.coffee
│   └── api.coffee
├── services/                 # Бизнес-логика
│   ├── DomainService.coffee
│   ├── ProductService.coffee
│   ├── ImportService.coffee
│   └── CategoryService.coffee
├── utils/                    # Утилиты
│   └── pouch.coffee          # PouchDB сервис
├── design/                   # Дизайн-документы CouchDB
│   ├── admin.coffee
│   └── site.coffee
├── components/               # Переиспользуемые компоненты
│   ├── UI/
│   │   ├── Button/
│   │   ├── Modal/
│   │   └── Notification/
│   ├── Domain/
│   │   ├── ProductCard/
│   │   ├── CategoryMenu/
│   │   └── CartWidget/
│   └── Admin/
│       ├── DataTable/
│       └── FileUpload/
└── pages/                    # Страницы приложения
    ├── Home/                 # Главная страница
    │   ├── index.pug
    │   ├── index.coffee
    │   └── index.styl
    ├── Catalog/              # Каталог товаров
    │   ├── index.pug
    │   ├── index.coffee
    │   └── index.styl
    ├── Product/              # Страница товара
    │   ├── index.pug
    │   ├── index.coffee
    │   └── index.styl
    ├── Cart/                 # Корзина
    │   ├── index.pug
    │   ├── index.coffee
    │   └── index.styl
    ├── Blog/                 # Блог
    │   ├── index.pug
    │   ├── index.coffee
    │   └── index.styl
    ├── Article/              # Статья блога
    │   ├── index.pug
    │   ├── index.coffee
    │   └── index.styl
    └── Admin/                # Админ-панель
        ├── index.pug
        ├── index.coffee
        ├── index.styl
        ├── Dashboard/        # Дашборд
        ├── Products/         # Управление товарами
        │   ├── index.pug
        │   ├── index.coffee
        │   ├── index.styl
        │   └── Import/       # Импорт товаров
        │       ├── index.pug
        │       ├── index.coffee
        │       └── index.styl
        ├── Categories/       # Управление категориями
        ├── Blog/             # Управление блогом
        ├── Slider/           # Управление слайдами
        ├── Clients/          # Управление клиентами
        ├── Orders/           # Управление заказами
        ├── Routes/           # Управление маршрутами
        └── Settings/         # Настройки системы
```
## 💻 ПРИМЕРЫ КОДА

### 🎨 СИСТЕМА СТИЛЕЙ

**app/index.styl**
здесь храняться базовые стили темы. которые используются во всех остальных стилевых файлах.
отдельно его подключать в них не нужно, он глобально доступен.

```stylus
// CSS переменные вместо rgba функций
:root
  // Основные цвета
  --color-primary: #2c5aa0
  --color-secondary: #6c757d
  --color-success: #28a745
  --color-danger: #dc3545
  --color-warning: #ffc107
  --color-light: #f8f9fa
  --color-dark: #343a40
  
  // Прозрачные варианты
  --color-primary-10: #2c5aa01a
  --color-primary-20: #2c5aa033
  --color-primary-50: #2c5aa080
  --color-dark-10: #343a401a
  --color-dark-50: #343a4080
  --color-light-10: #f8f9fa1a
  --color-light-50: #f8f9fa80
  
  // Тени
  --shadow-sm: 0 1px 2px var(--color-dark-10)
  --shadow-md: 0 4px 6px var(--color-dark-10)
  --shadow-lg: 0 10px 15px var(--color-dark-10)
  
  // Прочие переменные
  --border-radius: 8px
  --transition: all 0.3s ease

// Базовые стили
.app
  min-height: 100vh
  transition: var(--transition)
  background: var(--color-light)
  color: var(--color-dark)

  &.theme-dark
    background: var(--color-dark)
    color: var(--color-light)

.header
  display: flex
  align-items: center
  padding: 1rem 2rem
  background: var(--color-light)
  box-shadow: var(--shadow-sm)
  border-bottom: 1px solid var(--color-primary-10)
  
  .theme-dark &
    background: var(--color-dark)
    box-shadow: var(--shadow-md)

// Адаптивность
@media (max-width: 768px)
  .header
    padding: 1rem
    flex-direction: column
    gap: 1rem
```

**app/index.pug**
```pug
div(class="app" :class="{'theme-dark': theme === 'dark'}")
  header(class="header")
    nav(class="header-nav")
      div(class="header-nav-block")
        div(class="header-nav--name") {{ currentDomainSettings?.companyName || companyName }}
        div(class="header-nav--menu")
          multilevelmenu(:domains="availableDomains" :current-domain="currentDomain")
          themetoggle(:theme="theme" @theme-changed="toggleTheme")
          languagetoggle(:languages="languages" :current-language="currentLanguage" @language-changed="setLanguage")
          cartwidget(:items="cartItems" @update-cart="updateCart")
  
  main(class="main-content")
    router-view(v-slot="{ Component, route }")
      transition(name="page-slide" mode="out-in")
        component(
          :is="Component"
          :key="route.fullPath"
          :domain-settings="currentDomainSettings"
          :language="currentLanguage"
        )
  
  notification-container(:notifications="notifications")
```

**app/index.coffee**
```coffee
# Глобальная инициализация debug
globalThis.log = debug.log

# Главный файл приложения
log '🚀 Инициализация приложения Браер-Колор'

# Загрузка конфигурации
config = require 'app/config'
DataTypes = require 'app/types/data'
EventTypes = require 'app/types/events'

# Инициализация глобальных переменных
globalThis.renderFns = require 'pug.json'
globalThis.stylFns = require 'styl.json'



# Сервисы (пока заглушки)
PouchDBService = 
  init: -> Promise.resolve()
  getDocument: -> Promise.resolve(null)
  saveToRemote: -> Promise.resolve()

DomainService = 
  init: -> Promise.resolve()
  loadDomainSettings: -> Promise.resolve(null)
  getAvailableDomains: -> []

# Мета-теги
document.head.insertAdjacentHTML 'beforeend', '<meta charset="UTF-8">'
document.head.insertAdjacentHTML 'beforeend', '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
document.head.insertAdjacentHTML 'beforeend', '<title>Браер-Колор - Интернет-магазин лакокрасочной продукции</title>'

# Добавление глобальных стилей
if stylFns['app/index.styl']
  styleElement = document.createElement('style')
  styleElement.type = 'text/css'
  styleElement.textContent = stylFns['app/index.styl']
  document.head.appendChild(styleElement)
else
  log '⚠️ Глобальные стили не найдены'

# Создание Vue приложения
app = Vue.createApp({
  data: ->
    {
      theme: localStorage.getItem('theme') or config.defaultTheme
      companyName: config.companyName
      loading: false
      currentDomain: window.location.hostname
      currentDomainSettings: null
      availableDomains: []
      languages: config.languages
      currentLanguage: localStorage.getItem('language') or config.defaultLanguage
      user: null
      cartItems: []
      notifications: []
    }
  
  computed:
    isAdmin: -> 
      @user?.role == 'admin'
    
    domainConfig: -> 
      DomainService.getDomainConfig?(@currentDomain) or {}
  
  methods:
    # Управление темой
    toggleTheme: ->
      @theme = if @theme == 'light' then 'dark' else 'light'
      localStorage.setItem 'theme', @theme
      document.documentElement.classList.toggle 'dark'
      @$emit EventTypes.THEME_CHANGED, @theme
      log '🎨 Тема изменена:', @theme
    
    # Управление языком
    setLanguage: (lang) ->
      if @languages.includes lang
        @currentLanguage = lang
        localStorage.setItem 'language', @currentLanguage
        @$emit EventTypes.LANGUAGE_CHANGED, lang
        log '🌐 Язык изменен:', lang
      else
        log '⚠️ Язык не поддерживается:', lang
    
    # Смена домена
    changeDomain: (domain) ->
      log '🌐 Смена домена на:', domain
      @currentDomain = domain
      @loadDomainData()
    
    # Переход в корзину
    goToCart: ->
      @$router.push '/cart'
      log '🛒 Переход в корзину'
    
    # Загрузка настроек домена
    loadDomainData: ->
      log '📡 Загрузка настроек домена:', @currentDomain
      
      DomainService.loadDomainSettings(@currentDomain)
        .then (settings) =>
          @currentDomainSettings = settings
          document.title = settings?.companyName or @companyName
          log '✅ Настройки домена загружены', settings
        .catch (error) =>
          log '⚠️ Настройки домена не найдены, используются значения по умолчанию'
          @currentDomainSettings = new DataTypes.DomainSettings()
          @currentDomainSettings.companyName = @companyName
    
    # Управление корзиной
    updateCart: (items) ->
      @cartItems = items
      localStorage.setItem 'cart', JSON.stringify(items)
      @$emit EventTypes.CART_UPDATE, items
      log '🛒 Корзина обновлена:', items.length, 'товаров'
    
    # Уведомления
    showNotification: (message, type = 'info') ->
      notification = { 
        id: Date.now(), 
        message, 
        type, 
        visible: true,
        timestamp: new Date()
      }
      
      @notifications.push notification
      log '📢 Показано уведомление:', message
      
      setTimeout (=>
        notification.visible = false
        setTimeout (=>
          @notifications = @notifications.filter (n) -> n.id != notification.id
        ), 300
      ), 5000
    
    # Закрытие уведомления
    closeNotification: (id) ->
      @notifications = @notifications.filter (notification) -> notification.id != id
      log '📢 Уведомление закрыто:', id
    
    # Загрузка пользователя
    loadUserData: ->
      userData = localStorage.getItem 'user'
      if userData
        try
          @user = JSON.parse userData
          log '👤 Пользователь загружен:', @user.username
        catch error
          log '❌ Ошибка загрузки пользователя:', error
          @user = null
      else
        @user = null
    
    # Загрузка корзины
    loadCartData: ->
      cartData = localStorage.getItem 'cart'
      if cartData
        try
          @cartItems = JSON.parse cartData
          log '🛒 Корзина загружена:', @cartItems.length, 'товаров'
        catch error
          log '❌ Ошибка загрузки корзины:', error
          @cartItems = []
      else
        @cartItems = []
    
    # Инициализация приложения
    initializeApp: ->
      log '🔧 Начало инициализации приложения'
      @loading = true
      
      # Инициализация темы
      if @theme == 'dark'
        document.documentElement.classList.add 'dark'
        log '🌙 Темная тема активирована'
      else
        log '☀️ Светлая тема активирована'
      
      # Последовательная инициализация сервисов
      Promise.resolve()
        .then =>
          log '📦 Инициализация PouchDB...'
          PouchDBService.init()
        .then =>
          log '🌐 Инициализация DomainService...'
          DomainService.init()
        .then =>
          log '📡 Получение доступных доменов...'
          @availableDomains = DomainService.getAvailableDomains()
        .then =>
          @loadDomainData()
        .then =>
          @loadUserData()
        .then =>
          @loadCartData()
        .then =>
          log '✅ Приложение успешно инициализировано'
          @showNotification('Приложение готово к работе', 'success')
        .catch (error) =>
          log '❌ Ошибка инициализации приложения:', error
          @showNotification('Ошибка загрузки приложения', 'error')
        .finally =>
          @loading = false
  
  async mounted: ->
    await @initializeApp()
  
  # Рендер функция из Pug
  render: (new Function '_ctx', '_cache', globalThis.renderFns['app/index.pug'])()
})


Router = require 'app/router/index.coffee'
# Регистрация глобальных компонентов
app.component('ui-button', require 'app/components/UI/Button/index.coffee')
app.component('notification-container', require 'app/components/UI/Notification/index.coffee')
app.component('app-loader', require 'app/components/UI/AppLoader/index.coffee')
app.component('multilevel-menu', require 'app/components/Domain/MultilevelMenu/index.coffee')
app.component('theme-toggle', require 'app/components/UI/ThemeToggle/index.coffee')
app.component('language-toggle', require 'app/components/UI/LanguageToggle/index.coffee')
app.component('cart-widget', require 'app/components/Domain/CartWidget/index.coffee')

# Подключение роутера
app.use Router

# Глобальная обработка ошибок Vue
app.config.errorHandler = (err, vm, info) ->
  log '💥 Vue ошибка:', err, info
  console.error('Vue ошибка:', err, info)

# Глобальная обработка предупреждений
app.config.warnHandler = (msg, vm, trace) ->
  log '⚠️ Vue предупреждение:', msg, trace

# Монтирование приложения
try
  app.mount('body')
  log '✅ Приложение успешно смонтировано'
catch error
  log '❌ Ошибка монтирования приложения:', error
  console.error('Ошибка монтирования:', error)

```

Пример файла компонента, или страницы.Пиши стилевые файлы к элементам
**Важно** не нужно делать Vue = require 'vue' или require 'VueRouter' они уже подключены глобально доступны

** app/pages/Home/index.coffee**
```
# app/pages/Home/index.coffee

# Добавление стилей страницы
if globalThis.stylFns and globalThis.stylFns['app/pages/Home/index.styl']
  styleElement = document.createElement('style')
  styleElement.type = 'text/css'
  styleElement.textContent = globalThis.stylFns['app/pages/Home/index.styl']
  document.head.appendChild(styleElement)
else
  log '⚠️ Стили главной страницы не найдены'

module.exports = {
  # Импорт компонентов 
  components: {
    'product-grid': require 'app/components/Domain/ProductGrid/index.coffee'
  }

  props:
    domainSettings:
      type: Object
      default: -> {}
    language:
      type: String
      default: 'ru'

  data: ->
    {
      welcomeText: 'Добро пожаловать в Браер-Колор'
      loading: false
      productsLoading: false
      featuredProducts: []
      features: [
        {
          title: 'Качественные материалы'
          description: 'Широкий ассортимент красок, грунтовок и лакокрасочных материалов от проверенных производителей'
        }
        {
          title: 'Доставка по России'
          description: 'Быстрая и надежная доставка в любой регион страны. Работаем с ведущими транспортными компаниями'
        }
        {
          title: 'Профессиональные консультации'
          description: 'Наши специалисты помогут подобрать оптимальные материалы для ваших задач и бюджета'
        }
      ]
    }

  methods:
    goToCatalog: ->
      @$router.push '/catalog'

    contactSupport: ->
      @$emit 'show-notification', 'Форма обратной связи будет добавлена позже', 'info'

    viewProduct: (productId) ->
      @$router.push "/product/#{productId}"

    loadFeaturedProducts: ->
      @productsLoading = true
      # Заглушка для загрузки товаров
      setTimeout (=>
        @featuredProducts = [
          { id: 1, name: 'Грунтовка глубокого проникновения', price: 528, image: '' },
          { id: 2, name: 'Краска акриловая белая', price: 890, image: '' },
          { id: 3, name: 'Эмаль для металла', price: 670, image: '' }
        ]
        @productsLoading = false
      ), 1000

  mounted: ->
    log 'Главная страница загружена'
    @loadFeaturedProducts()

  render: (new Function '_ctx', '_cache', globalThis.renderFns['app/pages/Home/index.pug'])()
}

```

``` 
# app/components/UI/Button/index.coffee

# Добавление стилей компонента
if globalThis.stylFns and globalThis.stylFns['app/components/UI/Button/index.styl']
  styleElement = document.createElement('style')
  styleElement.type = 'text/css'
  styleElement.textContent = globalThis.stylFns['app/components/UI/Button/index.styl']
  document.head.appendChild(styleElement)
else
  log '⚠️ Стили кнопки не найдены'

module.exports = 
  name: 'ui-button'
  props:
    type:
      type: String
      default: 'primary'
      validator: (value) ->
        ['primary', 'secondary', 'success', 'danger', 'outline'].includes(value)
    size:
      type: String  
      default: 'medium'
      validator: (value) ->
        ['small', 'medium', 'large'].includes(value)
    disabled:
      type: Boolean
      default: false
    loading:
      type: Boolean
      default: false

  methods:
    handleClick: (event) ->
      if not @disabled and not @loading
        @$emit 'click', event

  render: (new Function '_ctx', '_cache', globalThis.renderFns['app/components/UI/Button/index.pug'])()


```





**app/router/index.coffee** пример, VueRouter определён глобально вызывать отдельно не нужно
```coffee
# app/router/index.coffee
config = require 'app/config'


# Middleware для проверки прав доступа
authGuard = (to, from, next) ->
  log 'Проверка прав доступа для route:', to.path
  # Здесь будет логика проверки пользователя из глобального состояния
  if to.matched.some (record) -> record.meta.requiresAuth
    # Проверка авторизации
    next() # Временная заглушка - всегда разрешаем доступ
  else
    next()

domainMiddleware = (to, from, next) ->
  log 'Обработка динамического домена для route'
  # Логика обработки домена будет интегрирована позже
  next()

router = VueRouter.createRouter({
  history: VueRouter.createWebHistory()
  routes: [
    {
      path: '/'
      name: 'Home'
      component: require 'app/pages/Home/index.coffee'
      beforeEnter: [domainMiddleware]
    }
    {
      path: '/catalog'
      name: 'Catalog'
      component: require 'app/pages/Catalog/index.coffee'
      beforeEnter: [domainMiddleware]
    }
    {
      path: '/catalog/:category?'
      name: 'CatalogCategory'
      component: require 'app/pages/Catalog/index.coffee'
      beforeEnter: [domainMiddleware]
    }
    {
      path: '/product/:id'
      name: 'Product'
      component: require 'app/pages/Product/index.coffee'
      beforeEnter: [domainMiddleware]
    }
    {
      path: '/cart'
      name: 'Cart'
      component: require 'app/pages/Cart/index.coffee'
      beforeEnter: [domainMiddleware]
    }
    {
      path: '/admin'
      name: 'Admin'
      component: require 'app/pages/Admin/index.coffee'
      meta: { requiresAuth: true }
      beforeEnter: [domainMiddleware, authGuard]
    }
    {
      path: '/:pathMatch(.*)*'
      name: 'NotFound'
      component: require 'app/pages/NotFound/index.coffee'
      beforeEnter: [domainMiddleware]
    }
  ]
})

# Глобальные обработчики роутера
router.beforeEach (to, from, next) ->
  log "Переход с "+ from.path +" на "+to.path+""
  next()

router.afterEach (to, from) ->
  log "Навигация завершена на "+to.path+""

module.exports = router





## 🚨 КРИТИЧЕСКИЕ ПРАВИЛА РАЗРАБОТКИ

### ❌ **ЗАПРЕЩЕНО:**

1. **Использование rgba() функций в стилях**
   ```stylus
   // ❌ НЕПРАВИЛЬНО
   background: rgba(44, 90, 160, 0.1)
   
   // ✅ ПРАВИЛЬНО  
   background: var(--color-primary-10)
   ```

2. **Прямое использование console.log**
   ```coffee
   # ❌ НЕПРАВИЛЬНО
   console.log 'Ошибка'
   
   # ✅ ПРАВИЛЬНО
   log 'Ошибка'
   ```

3. **Многострочные атрибуты в Pug**
   ```pug
   // ❌ НЕПРАВИЛЬНО
   div(
     class="class"
     data-attr="value"
   )
   
   // ✅ ПРАВИЛЬНО
   div(class="class" data-attr="value")
   ```

4. **@import в стилях компонентов**
   ```stylus
   // ❌ НЕПРАВИЛЬНО
   @import '../../index.styl'
   
   // ✅ ПРАВИЛЬНО
   .my-component
     background: var(--color-primary-10)
   ```

5. **JavaScript операторы в CoffeeScript**
   ```coffee
   # ❌ НЕПРАВИЛЬНО
   if user && user.role
   condition ? 'yes' : 'no'
   
   # ✅ ПРАВИЛЬНО
   if user and user.role
   if condition then 'yes' else 'no'
   ```

6. **HTML/HEAD/BODY теги в компонентах**
   ```pug
   // ❌ НЕПРАВИЛЬНО
   html
     body
       div.app
   
   // ✅ ПРАВИЛЬНО
   div(class="app")
   ```

7. **Объявление debug в компонентах**
   ```coffee
   # ❌ НЕПРАВИЛЬНО
   debug = require 'debug'
   log = debug.log
   
   # ✅ ПРАВИЛЬНО - debug глобальный
   log 'Сообщение'
   ```

### ✅ **ОБЯЗАТЕЛЬНО:**

1. **Полные листинги файлов** - всегда приводи все три файла компонента
2. **Адаптивная верстка** - mobile-first для всех компонентов
3. **BEM методология** - `block__element--modifier`
4. **CSS переменные** - только через var(--variable-name)
5. **Обработка ошибок** - try/catch для всех асинхронных операций
6. **Валидация данных** - проверка обязательных полей
7. **Прогресс операций** - индикаторы для длительных процессов
8. **Мультиязычность** - все тексты из настроек домена
9. **Использование глобального debug** - только `log 'сообщение'`

## 🗂️ СТРУКТУРА ДАННЫХ

### 📊 ТИПЫ ДОКУМЕНТОВ

**app/types/data.coffee**
```coffee
class DomainEntity
  constructor: ->
    @_id = ''
    @type = ''
    @domains = []
    @createdAt = new Date().toISOString()
    @updatedAt = new Date().toISOString()
    @active = true

class Product extends DomainEntity
  constructor: ->
    super()
    @type = 'product'
    @name = ''
    @sku = ''
    @price = 0
    @oldPrice = null
    @category = ''
    @brand = ''
    @description = ''
    @attributes = {}
    @images = []
    @richContent = null
    @inStock = true
    @weight = 0
    @volume = 0

class Category extends DomainEntity
  constructor: ->
    super()
    @type = 'category'
    @name = ''
    @slug = ''
    @parent = null
    @order = 0
    @image = ''
    @description = ''

class HeroSlide extends DomainEntity
  constructor: ->
    super()
    @type = 'hero_slide'
    @title = ''
    @subtitle = ''
    @image = ''
    @buttonText = 'В каталог'
    @buttonLink = '/catalog'
    @order = 0

class DomainSettings extends DomainEntity
  constructor: ->
    super()
    @type = 'domain_settings'
    @domain = ''
    @companyName = ''
    @languages = ['ru']
    @theme = 'light'
    @contacts = {}
    @seo = {}
    @social = {}

module.exports = {Product, Category, HeroSlide, DomainSettings, DomainEntity}
```

## 🔧 СЕРВИСЫ И УТИЛИТЫ

### 🗃️ POUCHDB СЕРВИС

**app/utils/pouch.coffee**
```coffee
class PouchDBService
  constructor: (options = {}) ->
    {@localDbName, @remoteDbUrl, @userFilter, @appVersion} = options
    @localDb = null
    @remoteDb = null
    @initialized = false

  init: ->
    return Promise.resolve() if @initialized
    
    try
      @localDb = new PouchDB(@localDbName or 'braer_color_cache')
      await @ensureRemoteDatabase()
      await @loadDesignDocs()
      await @ensureDesignDocs()
      
      # Настройка селективной синхронизации
      PouchDB.sync(@remoteDb, @localDb, {
        live: true,
        retry: true,
        filter: (doc) => @shouldSyncDocument(doc)
      })
      
      @initialized = true
      return Promise.resolve()
    catch error
      log 'Ошибка инициализации PouchDB:', error
      return Promise.reject(error)

  getDocument: (docId) ->
    @ensureInit()
    
    try
      return await @localDb.get(docId)
    catch localError
      if localError.status == 404
        try
          doc = await @remoteDb.get(docId)
          await @localDb.put(doc)
          return doc
        catch remoteError
          throw remoteError
      else
        throw localError

  saveToRemote: (doc) ->
    @ensureInit()
    
    try
      existingDoc = await @remoteDb.get(doc._id)
      doc._rev = existingDoc._rev
      return await @remoteDb.put(doc)
    catch error
      if error.status == 404
        return await @remoteDb.put(doc)
      else
        throw error

  shouldSyncDocument: (doc) ->
    if doc.type in ['product', 'category', 'settings', 'hero_slide', 'blog_article', 'route']
      return true
    if doc.type in ['order', 'user_data', 'cart']
      return doc.userId == @userFilter?.userId
    return false

module.exports = new PouchDBService({
  localDbName: 'braer_color_cache'
  remoteDbUrl: 'http://localhost:5984/braer_color_shop'
  userFilter: { userId: 'current_user_id' }
  appVersion: '1.0.0'
})
```

### 📦 СЕРВИС ИМПОРТА ТОВАРОВ


Важно: при полной реализации используй пример csv файла, При этом учти что количество полей в документе может меняться. выдели из них основные, остальные загружай по факту как свойства товара.
Индивидуальное сохранение товаров
Каждый товар сохраняется как отдельный документ в PouchDB
Используется стабильный _id на основе артикула: product:#{sku}
Автоматическое обновление существующих товаров при повторном импорте
Улучшенная обработка изображений
Загрузка основного и дополнительных изображений как attachments
Формат ссылок: /d/braer_color_shop/{doc_id}/{filename}
Все фото из csv должны быть загружены как attachment в документ товара
Объеденяй товары в группы по полю из csv файла, в списке товаров выводи главное изображение.
в редакторе нужно иметь возможность управлять всеми данными товара. некоторые атрибуты иметь возможность отметить как скрытые, по из названи. (нужно упаравление атрибутами в категории)
Прогресс импорта
Визуальный индикатор прогресса обработки
Отслеживание количества обработанных товаров
Детальная статистика по завершении импорта
Обработка Rich-контента
Преобразование JSON в Markdown для описаний товаров
Сохранение оригинальной структуры для возможного редактирования
Создать редактор товаров

Создание объектов катигорий при появлении новых значений в поле "Тип*", сделать редактор категорий, с возможностью загрузки фото
При обработке csv загружай изображения в базу данных как attachment, также сохраняй ричконтент преобразовывая в markdown, и выводи его в качестве описания товара при его наличии.
формат ссылок на attachment файлы "/d/[ИМЯ БД]/[id doc]/[имя файла]"
Важно: каждый товар должен быть привязан к домену/доменам (может одновременно быть доступен на разных доменах), тоже касается статей блога.



**app/services/ImportService.coffee**
```coffee
{ Product, Category } = require 'app/types/data'

class ImportService
  constructor: ->
    @batchSize = 50
    @maxImages = 5
  
  transformProductData: (csvRow, index, domain) ->
    product = new Product()
    
    product._id = "product:#{csvRow['Артикул*']}"
    product.name = csvRow['Название товара']
    product.sku = csvRow['Артикул*']
    product.price = parseFloat(csvRow['Цена, руб.*'].replace(',', '.')) or 0
    product.oldPrice = if csvRow['Цена до скидки, руб.'] then parseFloat(csvRow['Цена до скидки, руб.'].replace(',', '.')) else null
    product.brand = csvRow['Бренд*']
    product.category = csvRow['Тип*']
    product.domains = [domain]
    
    product.images = @processImages(csvRow, product._id)
    
    if csvRow['Rich-контент JSON']
      try
        product.richContent = @jsonToMarkdown(JSON.parse(csvRow['Rich-контент JSON']))
      catch error
        log 'Ошибка парсинга rich-контента:', error
    
    product.attributes = @extractAttributes(csvRow)
    
    return product
  
  processImages: (csvRow, docId) ->
    images = []
    
    if csvRow['Ссылка на главное фото*']
      images.push {
        url: csvRow['Ссылка на главное фото*']
        type: 'main'
        order: 0
      }
    
    if csvRow['Ссылки на дополнительные фото']
      additionalImages = csvRow['Ссылки на дополнительные фото'].split('\n').slice(0, @maxImages)
      additionalImages.forEach (imgUrl, index) ->
        if imgUrl.trim()
          images.push {
            url: imgUrl.trim()
            type: 'additional'
            order: index + 1
          }
    
    return images
  
  jsonToMarkdown: (richContent) ->
    markdown = ''
    
    if richContent?.content
      richContent.content.forEach (block) ->
        if block.widgetName == 'raTextBlock' and block.text?.items
          block.text.items.forEach (item) ->
            if item.type == 'text' and item.content
              markdown += item.content + '\n\n'
            else if item.type == 'br'
              markdown += '\n'
    
    return markdown.trim()
  
  extractAttributes: (csvRow) ->
    attributes = {}
    
    technicalFields = [
      'Вес в упаковке, г*', 'Ширина упаковки, мм*', 'Высота упаковки, мм*', 
      'Длина упаковки, мм*', 'Объем, л', 'Время высыхания, часов', 'Расход, л/м2',
      'Макс. температура эксплуатации, С°', 'Количество компонентов'
    ]
    
    technicalFields.forEach (field) ->
      if csvRow[field]
        attributes[field] = csvRow[field]
    
    categoryFields = [
      'Вид краски', 'Назначение грунтовки', 'Материал основания', 'Основа краски',
      'Способ нанесения', 'Назначение', 'Тип помещения', 'Возможность колеровки'
    ]
    
    categoryFields.forEach (field) ->
      if csvRow[field]
        attributes[field] = csvRow[field]
    
    return attributes
  
  importFromCSV: (file, domain, onProgress) ->
    return new Promise (resolve, reject) =>
      reader = new FileReader()
      
      reader.onload = (e) =>
        try
          results = Papa.parse(e.target.result, {
            header: true
            delimiter: ';'
            skipEmptyLines: true
            encoding: 'UTF-8'
          })
          
          validProducts = results.data.filter (row) => 
            row and row['Артикул*'] and row['Название товара'] and row['Цена, руб.*']
          
          this.processProductsInBatches(validProducts, domain, onProgress)
            .then(resolve)
            .catch(reject)
          
        catch error
          reject(new Error("Ошибка парсинга CSV: #{error.message}"))
      
      reader.onerror = -> reject(new Error('Ошибка чтения файла'))
      reader.readAsText(file, 'UTF-8')
  
  processProductsInBatches: (products, domain, onProgress) ->
    batches = []
    for i in [0...products.length] by @batchSize
      batches.push(products.slice(i, i + @batchSize))
    
    processed = 0
    total = products.length
    
    processBatch = (batch) =>
      transformedProducts = batch.map (product, index) =>
        @transformProductData(product, processed + index, domain)
      
      return PouchDBService.bulkDocs(transformedProducts)
        .then (results) =>
          processed += batch.length
          if onProgress
            onProgress({
              processed: processed
              total: total
              percentage: Math.round((processed / total) * 100)
            })
          return results
    
    return batches.reduce (promise, batch) =>
      promise.then -> processBatch(batch)
    , Promise.resolve()

module.exports = new ImportService()
```

## 📊 ОБРАЗЕЦ CSV ФАЙЛА ДЛЯ ИМПОРТА

### 📝 СПЕЦИФИКАЦИЯ CSV
**Разделитель:** `;` (точка с запятой)  
**Кодировка:** UTF-8  
**Обязательные поля:** `Артикул*`, `Название товара`, `Цена, руб.*`

### 🎯 ПРИМЕР CSV СТРОКИ
```csv
№;Артикул*;Название товара;Цена, руб.*;Цена до скидки, руб.;НДС, %*;Рассрочка;Баллы за отзывы;SKU;Штрихкод (Серийный номер / EAN);Вес в упаковке, г*;Ширина упаковки, мм*;Высота упаковки, мм*;Длина упаковки, мм*;Ссылка на главное фото*;Ссылки на дополнительные фото;Ссылки на фото 360;Артикул фото;Бренд*;Название модели (для объединения в одну карточку)*;Единиц в одном товаре;Цвет товара;Название цвета;Тип*;Класс опасности товара*;Степень блеска покрытия;Работы;Вес товара, г;Количество товара в УЕИ;#Хештеги;Аннотация;Rich-контент JSON;Название группы;Образец цвета;Партномер;Гарантия;Страна-изготовитель;Комплектация;ТН ВЭД коды ЕАЭС;Срок годности в днях;Количество заводских упаковок;Вид краски;Объем, л;Время высыхания, часов;Вес, кг;Расход, л/м2;Назначение грунтовки;Рекомендуемое количество слоев;Расход, кг/м2;Область применения состава;Количество компонентов;Особенности ЛКМ;Макс. температура эксплуатации, С°;Материал основания;Основа краски;Основа грунтовки;Способ нанесения;Форма выпуска средства;Назначение;Тип помещения;Возможность колеровки;Вид выпуска товара;Тип растворителя;Эффект краски;Марка эмали;Можно мыть;Базис;Аэрозоль;Помещение;Название модели для шаблона наименования;Ошибка;Предупреждение
1;4673764201943;Грунтовка глубокого проникновения для стен под обои и покраску ЭкоКрас 1кг;528,00;1 056,00;20;Да;Нет;;4673764201943;1000;100;55;250;https://cdn1.ozone.ru/s3/multimedia-1-o/7663357104.jpg;"https://cdn1.ozone.ru/s3/multimedia-1-8/7663357124.jpg
https://cdn1.ozone.ru/s3/multimedia-1-w/7663352504.jpg
https://cdn1.ozone.ru/s3/multimedia-1-r/7663357179.jpg
https://cdn1.ozone.ru/s3/multimedia-1-b/7663352483.jpg
https://cdn1.ozone.ru/s3/multimedia-1-c/7663352556.jpg
https://cdn1.ozone.ru/s3/multimedia-1-t/7663352537.jpg
https://cdn1.ozone.ru/s3/multimedia-1-o/7663352496.jpg
https://cdn1.ozone.ru/s3/multimedia-1-k/7663352492.jpg
https://cdn1.ozone.ru/s3/multimedia-1-y/7663365970.jpg
https://cdn1.ozone.ru/s3/multimedia-1-m/7663365922.jpg
https://cdn1.ozone.ru/s3/multimedia-1-1/7663365937.jpg
https://cdn1.ozone.ru/s3/multimedia-1-p/7663352533.jpg";;;ЭкоКрас;4673764201943;1;прозрачный;;Грунтовка;Не опасен;;"Внутренние;Наружные";;;#Грунтовка #ГрунтДляСтен #АкриловаяГрунтовка #СтроительныеМатериалы #ГлубокогоПроникновения #УниверсальнаяГрунтовка #АдгезионнаяГрунтовка #АнтисептическаяГрунтовка #ДляВнутреннихРабот #ДляНаружныхРабот #ДляБетона #ДляГипсокартона #ДляДерева #Быстросохнущая #Водостойкая #Укрепляющая #Противогрибковая #БелаяГрунтовка #ПодОбои #ПодШтукатурку #ПодПокраску #ПодПлитку #ДляРовныхСтен #РемонтДома #ОтделкаПомещений #СтроительныеРаботы #КачественныйРемонт #СтроительныеТовары #профессиональная_грунтовка #грунтовка_концентрат_премиум;"Премиум грунтовка глубокого проникновения для подготовки поверхностей перед финишной отделкой...";"{""content"": [{""widgetName"": ""raTextBlock"", ""title"": {""items"": [{""type"": ""text"", ""content"": ""Грунтовка глубокого проникновения PRIMER 1:4 концентрат ImPasto 1кг""}], ""size"": ""size5"", ""color"": ""color1""}, ""theme"": ""primary"", ""padding"": ""type2"", ""gapSize"": ""m"", ""text"": {""size"": ""size2"", ""align"": ""left"", ""color"": ""color1"", ""items"": [{""type"": ""text"", ""content"": ""Премиум грунтовка глубокого проникновения для подготовки поверхностей перед финишной отделкой...""}]}}], ""version"": 0.3}";экокрас;https://cdn1.ozone.ru/s3/multimedia-1-q/7218190898.jpg;;2 года;Россия;Грунтовка глубокого проникновения ЭкоКрас 1кг- 1шт;;990;1;;1;24;1;0,05;"Глубокого проникновения;Обеспыливающая;Пропиточная;Укрепляющая;Универсальная";;;"По бетону;Для фасадов;Для хобби и творчества;Для швов;По кирпичу;По штукатурке;Универсальная";;;;"Бетон;Газобетон;Кирпич;Пенобетон;Штукатурка";;Акриловая;"Валик;Кисть;Краскопульт;Пистолет";Готовый раствор;;"С повышенной влажностью;С умеренной влажностью;Сухое";;;;;;;;;;;;
```

### 🔧 ОБРАБОТКА НЕОБЯЗАТЕЛЬНЫХ ПОЛЕЙ

**ВАЖНО:** Система должна обрабатывать ЛЮБЫЕ необязательные поля, даже с неизвестными именами. Все дополнительные поля сохраняются в атрибуты товара.

```coffee
# Пример обработки произвольных полей
extractAllAttributes: (csvRow) ->
  attributes = {}
  
  # Обязательные технические поля
  requiredFields = [
    'Вес в упаковке, г*', 'Ширина упаковки, мм*', 'Высота упаковки, мм*', 
    'Длина упаковки, мм*', 'Объем, л', 'Время высыхания, часов'
  ]
  
  # Обрабатываем все поля CSV
  for key, value of csvRow
    if value and value.toString().trim() != ''
      # Сохраняем все поля, кроме системных
      if not key in ['№', 'Артикул*', 'Название товара', 'Цена, руб.*', 'Ссылка на главное фото*', 'Ссылки на дополнительные фото']
        attributes[key] = value.toString().trim()
  
  log "Извлечено атрибутов: #{Object.keys(attributes).length}"
  return attributes
```

## 🎯 ПОДРОБНОЕ ЛОГГИРОВАНИЕ

### 📝 ТРЕБОВАНИЯ К ЛОГГИРОВАНИЮ

**Обязательно логировать:**
- Начало и завершение всех основных операций
- Ошибки с полным стектрейсом
- Прогресс длительных операций (импорт, синхронизация)
- Пользовательские действия (добавление в корзину, авторизация)
- Изменения состояния приложения
- Запросы к базе данных

**Пример детального логгирования:**
```coffee
importFromCSV: (file, domain, onProgress) ->
  log "🚀 Начало импорта CSV файла: #{file.name}"
  log "📊 Домен для импорта: #{domain}"
  log "📁 Размер файла: #{file.size} байт"
  
  return new Promise (resolve, reject) =>
    reader = new FileReader()
    
    reader.onload = (e) =>
      try
        log "✅ Файл успешно прочитан, начало парсинга CSV"
        results = Papa.parse(e.target.result, {
          header: true
          delimiter: ';'
          skipEmptyLines: true
          encoding: 'UTF-8'
        })
        
        log "📈 CSV распарсен: #{results.data.length} строк найдено"
        
        validProducts = results.data.filter (row) => 
          isValid = row and row['Артикул*'] and row['Название товара'] and row['Цена, руб.*']
          if not isValid
            log "⚠️ Пропущена строка из-за отсутствия обязательных полей: #{JSON.stringify(row)}"
          return isValid
        
        log "✅ Валидных товаров для импорта: #{validProducts.length}"
        
        this.processProductsInBatches(validProducts, domain, onProgress)
          .then (results) =>
            log "🎉 Импорт успешно завершен: #{results.length} товаров обработано"
            resolve(results)
          .catch (error) =>
            log "❌ Ошибка в процессе импорта: #{error.message}"
            reject(error)
        
      catch error
        log "💥 Критическая ошибка парсинга CSV: #{error.message}"
        log "🔍 Stack trace:", error.stack
        reject(new Error("Ошибка парсинга CSV: #{error.message}"))
    
    reader.onerror = (error) ->
      log "❌ Ошибка чтения файла: #{error}"
      reject(new Error('Ошибка чтения файла'))
    
    reader.readAsText(file, 'UTF-8')
```


## 🚨 КРИТИЧЕСКИЕ ПРАВИЛА РАЗРАБОТКИ

### ❌ **ЗАПРЕЩЕНО:**
1. Использование rgba() функций в стилях
2. Прямое использование console.log (только глобальный log)
3. Многострочные атрибуты в Pug
4. @import в стилях компонентов
5. JavaScript операторы в CoffeeScript
6. Объявление debug в компонентах

### ✅ **ОБЯЗАТЕЛЬНО:**
1. Полные листинги файлов компонентов
2. Адаптивная верстка (mobile-first)
3. BEM методология именования классов
4. CSS переменные для цветов и прозрачностей
5. Подробное логгирование всех операций
6. Обработка всех необязательных полей CSV



## 📅 ПОЭТАПНЫЙ ПЛАН РАЗРАБОТКИ

### 🎯 ЭТАП 1: БАЗОВАЯ АРХИТЕКТУРА ✅
- [ ] Настройка сборки и конфигурации
- [ ] Базовая структура Vue приложения
- [ ] PouchDB сервис и дизайн-документы
- [ ] Главный layout и система стилей
- [ ] Система типов и интерфейсов

### 🎯 ЭТАП 2: АДМИН-ПАНЕЛЬ ⚠️ В РАБОТЕ
- [ ] Layout админ-панели
- [ ] Компонент управления товарами
- [ ] **ТЕКУЩАЯ ЗАДАЧА: Система импорта товаров**
- [ ] Редактор категорий с загрузкой изображений
- [ ] Управление слайдами главной страницы
- [ ] Управление статьями блога
- [ ] Настройки доменов и мультиязычности

### 🎯 ЭТАП 3: КЛИЕНТСКАЯ ЧАСТЬ
- [ ] Главная страница с адаптивным дизайном
- [ ] Каталог товаров с фильтрацией
- [ ] Страница товара с галереей
- [ ] Корзина и оформление заказа
- [ ] Блог и система статей

### 🎯 ЭТАП 4: ДОПОЛНИТЕЛЬНЫЕ ФУНКЦИИ
- [ ] Поиск по товарам
- [ ] Система отзывов и рейтингов
- [ ] Личный кабинет пользователя
- [ ] Система скидок и промокодов
- [ ] Интеграция с платежными системами

### 🎯 ЭТАП 5: ОПТИМИЗАЦИЯ И ТЕСТИРОВАНИЕ
- [ ] PWA функциональность (офлайн-режим)
- [ ] Оптимизация производительности
- [ ] Тестирование на разных устройствах
- [ ] Деплой и настройка продакшн-окружения

## 📊 ТЕКУЩОЕ СОСТОЯНИЕ ПРОЕКТА

### ✅ ВЫПОЛНЕНО
1. **Базовая архитектура** 
   - Напиши базовые файлы системы
   - Система роутинга
   - Глобальная конфигурация
Добавлено подключение компонентов во все объекты где они используются:

Главное приложение подключает все UI и Domain компоненты

Страницы подключают используемые компоненты через components

Роутер подключает все страницы приложения

Создана полная структура компонентов:

UI компоненты: Button, Notification, AppLoader, ThemeToggle, LanguageToggle

Domain компоненты: MultilevelMenu, CartWidget, ProductGrid, ProductCard

Страницы: Home, Catalog, Product, Cart, Admin, NotFound

Настроена правильная иерархия зависимостей:

Каждый компонент самостоятельно подключает свои стили

Родительские компоненты регистрируют дочерние через components

Главное приложение регистрирует глобальные компоненты

Созданы все необходимые заглушки для полнофункционального приложения
Полноценный PouchDB сервис:

Подключение к CouchDB с системой аутентификации

Двусторонняя синхронизация с фильтрацией по доменам

Обработка ошибок и автоматические повторы

Локальное кэширование и офлайн-работа

Дизайн-документы CouchDB:

Views для товаров, категорий, заказов с индексацией

Validate_doc_update функции для валидации данных 

Система поисковых индексов для быстрого поиска

Сервисы данных:

ProductService: работа с товарами, поиск, фильтрация

CategoryService: управление категориями, иерархия

DomainService: мультидоменность, настройки доменов

Интеграция в приложение:

Правильная инициализация всех сервисов

Обработка состояний загрузки и ошибок

Подробное логгирование всех операций
Layout администратора с навигацией:

Боковая панель с навигационным меню

Хедер с хлебными крошками и информацией пользователя

Адаптивный дизайн для мобильных устройств

Компонент DataTable:

Сортировка по колонкам

Поиск и фильтрация данных

Пагинация

Выбор элементов

Слоты для кастомных действий

Компонент загрузки файлов:

Drag & drop интерфейс

Валидация типов и размера файлов

Индикатор прогресса загрузки

Поддержка множественного выбора
### 🎯 БЛИЖАЙШИЕ ЗАДАЧИ

2. **Работа с данными**
   - PouchDB сервис с синхронизацией
   - Дизайн-документы для CouchDB
   - Система типов данных

3. **Базовые компоненты**
   - Главный layout приложения
   - Layout админ-панели
   - Система уведомлений

4. **Стили и дизайн**
   - CSS переменные и дизайн-система
   - Адаптивная верстка
   - Темная/светлая темы


5. **Система импорта товаров**
   - Компонент загрузки CSV файлов
   - Парсинг и валидация данных
   - Пакетная обработка товаров
   - Создание категорий на лету
   
    5.1. Завершить компонент импорта товаров
    5.2. Реализовать редактор категорий
    5.3. Создать компонент управления слайдами
    5.4. Разработать главную страницу магазина


6. **Админ-панель**
   - Управление товарами
   - Система прогресса операций
   - Обработка ошибок импорта




### 🔄 В РАБОТЕ СЕЙЧАС

отвечай на русском Анализировать реализованный код, по git репозитарию https://gogs.osvoj.ru/oleg/s5l.ru-crm Проверяй промт и изменения в нём по адресу https://gogs.osvoj.ru/oleg/s5l.ru-crm/raw/master/README.md
  после выполнения задачи, напиши
   - что сделано.
   - Напиши следующую задачу на выполнение (после завершения отладки, созданных файлов)
напиши файлы реализующие следующую задачу.
 ⚠️ ПРИОРИТЕТ

ЭТАП 1.6: РЕАЛИЗАЦИЯ СИСТЕМЫ ИМПОРТА И МЕДИА-МЕНЕДЖЕРА

Страница импорта товаров:

Интеграция компонента FileUpload

Парсинг CSV файлов с валидацией

Преобразование данных в структуру PouchDB

Пакетная обработка и прогресс-бар

Редактор категорий:

Древовидная структура категорий

Загрузка изображений для категорий

Drag & drop для изменения иерархии

Редактирование метаданных

Медиа-менеджер:

Загрузка изображений товаров

Прикрепление файлов к документам CouchDB

Система кэширования и оптимизации

Управление версиями файлов

Приоритет: Критический 🚨 (необходимо для наполнения магазина товарами и контентом)

Приоритет: Высокий ⚠️ (необходимо для наполнения магазина товарами)