From f9778966479f62ad8169fd631fdcbc218f76c018 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 3 Apr 2026 12:17:05 +0700
Subject: [PATCH] feat(catalog): unify home with catalog and add clear qty
 controls

---
 .../catalog/CatalogConfigurator.vue           | 490 ++++++++++++++++++
 app/components/ui/AppHeader.vue               |   5 +-
 app/middleware/auth.global.ts                 |   2 +-
 app/pages/index.vue                           | 159 +-----
 app/pages/login.vue                           |   2 +-
 app/pages/products.vue                        | 443 +---------------
 6 files changed, 500 insertions(+), 601 deletions(-)
 create mode 100644 app/components/catalog/CatalogConfigurator.vue

diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue
new file mode 100644
index 0000000..2fb4406
--- /dev/null
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -0,0 +1,490 @@
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import { ClientProductsDocument, type ClientProductsQuery } from '~/composables/graphql/generated';
+import { useClientCart } from '~/composables/useClientCart';
+
+type ProductNode = ClientProductsQuery['clientProducts'][number];
+type ParamFieldKey = 'widthMm' | 'lengthM' | 'thicknessMicron' | 'sleeveBrand' | 'quantityPerBox';
+type ParamValue = number | string;
+
+type ParsedProduct = ProductNode & {
+  productTypeLabel: string;
+  widthMm: number | null;
+  lengthM: number | null;
+  thicknessMicron: number | null;
+  sleeveBrand: string | null;
+  quantityPerBox: string | null;
+};
+
+type ProductGroup = {
+  key: string;
+  typeLabel: string;
+  products: ParsedProduct[];
+};
+
+type GroupState = {
+  widthMm: number | null;
+  lengthM: number | null;
+  thicknessMicron: number | null;
+  sleeveBrand: string | null;
+  quantityPerBox: string | null;
+  isExpanded: boolean;
+};
+
+const PARAM_KEYS: ParamFieldKey[] = ['widthMm', 'lengthM', 'thicknessMicron', 'sleeveBrand', 'quantityPerBox'];
+const parameterFields: Array<{ key: ParamFieldKey; label: string }> = [
+  { key: 'widthMm', label: 'Ширина, мм' },
+  { key: 'lengthM', label: 'Длина, м' },
+  { key: 'thicknessMicron', label: 'Толщина, мкм' },
+  { key: 'sleeveBrand', label: 'Бренд втулки' },
+  { key: 'quantityPerBox', label: 'Количество в коробе' },
+];
+
+const coverPresets = [
+  ['#d9f5e6', '#9ce8c1', '#6fd09d'],
+  ['#eaf9ef', '#b3e8cb', '#76c89f'],
+  ['#e8f5ec', '#b2e0c6', '#7dd0a9'],
+];
+
+const { result, loading, error } = useQuery(ClientProductsDocument);
+const search = ref('');
+const groupStates = reactive<Record<string, GroupState>>({});
+const { addProduct, getQuantity, incrementQuantity, decrementQuantity } = useClientCart();
+
+function normalizeText(value: string) {
+  return value.replaceAll(/\s+/g, ' ').trim();
+}
+
+function createProductCover(name: string, sku: string) {
+  const seed = `${name}${sku}`.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const [start, middle, finish] = coverPresets[seed % coverPresets.length];
+  const firstLetter = name.trim().charAt(0).toUpperCase() || 'P';
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 220">
+      <defs>
+        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stop-color="${start}" />
+          <stop offset="55%" stop-color="${middle}" />
+          <stop offset="100%" stop-color="${finish}" />
+        </linearGradient>
+      </defs>
+      <rect width="320" height="220" fill="url(#g)" rx="22" />
+      <g opacity="0.15">
+        <circle cx="266" cy="45" r="55" fill="#0f7a49" />
+        <circle cx="42" cy="198" r="55" fill="#0f7a49" />
+      </g>
+      <text x="50%" y="56%" text-anchor="middle" fill="#11412c" font-family="Manrope, sans-serif" font-size="84" font-weight="700">${firstLetter}</text>
+    </svg>
+  `.trim();
+
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+
+function parseProductMeta(product: ProductNode) {
+  const normalizedName = normalizeText(product.name);
+  const [typeLabelRaw] = normalizedName.split(',');
+  const typeLabel = typeLabelRaw?.trim() || 'Без типа';
+
+  const sizeMatch = normalizedName.match(/(\d+)\s*[xх*]\s*(\d+)\s*м/i);
+  const thicknessMatch = normalizedName.match(/(\d+)\s*мкм/i);
+  const sleeveMatch = normalizedName.match(/втулка\s+([^,]+)/i);
+  const quantityMatch = normalizedName.match(/короб\s+([^,]+)/i);
+
+  return {
+    productTypeLabel: typeLabel,
+    widthMm: sizeMatch ? Number.parseInt(sizeMatch[1] ?? '', 10) : null,
+    lengthM: sizeMatch ? Number.parseInt(sizeMatch[2] ?? '', 10) : null,
+    thicknessMicron: thicknessMatch ? Number.parseInt(thicknessMatch[1] ?? '', 10) : null,
+    sleeveBrand: sleeveMatch?.[1]?.trim() ?? null,
+    quantityPerBox: quantityMatch?.[1]?.trim() ?? null,
+  };
+}
+
+function productSortValue(value: number | null) {
+  return value ?? Number.MAX_SAFE_INTEGER;
+}
+
+function compareProducts(a: ParsedProduct, b: ParsedProduct) {
+  const byWidth = productSortValue(a.widthMm) - productSortValue(b.widthMm);
+  if (byWidth !== 0) {
+    return byWidth;
+  }
+
+  const byLength = productSortValue(a.lengthM) - productSortValue(b.lengthM);
+  if (byLength !== 0) {
+    return byLength;
+  }
+
+  const byThickness = productSortValue(a.thicknessMicron) - productSortValue(b.thicknessMicron);
+  if (byThickness !== 0) {
+    return byThickness;
+  }
+
+  const bySleeve = (a.sleeveBrand ?? '').localeCompare(b.sleeveBrand ?? '', 'ru');
+  if (bySleeve !== 0) {
+    return bySleeve;
+  }
+
+  return a.sku.localeCompare(b.sku, 'ru');
+}
+
+const parsedProducts = computed<ParsedProduct[]>(() => {
+  const list = result.value?.clientProducts ?? [];
+  const query = search.value.trim().toLowerCase();
+
+  return list
+    .map((product) => ({ ...product, ...parseProductMeta(product) }))
+    .filter((product) => {
+      if (!query) {
+        return true;
+      }
+      return [product.name, product.sku, product.productTypeLabel, product.sleeveBrand ?? '']
+        .some((part) => part.toLowerCase().includes(query));
+    })
+    .sort(compareProducts);
+});
+
+const productGroups = computed<ProductGroup[]>(() => {
+  const map = new Map<string, ParsedProduct[]>();
+
+  for (const product of parsedProducts.value) {
+    const key = product.productTypeLabel;
+    const existing = map.get(key);
+    if (existing) {
+      existing.push(product);
+    } else {
+      map.set(key, [product]);
+    }
+  }
+
+  return [...map.entries()]
+    .sort((a, b) => a[0].localeCompare(b[0], 'ru'))
+    .map(([typeLabel, products]) => ({
+      key: typeLabel.toLowerCase().replaceAll(/\s+/g, '-'),
+      typeLabel,
+      products: [...products].sort(compareProducts),
+    }));
+});
+
+function matchesState(product: ParsedProduct, state: GroupState, skipField?: ParamFieldKey) {
+  for (const key of PARAM_KEYS) {
+    if (key === skipField) {
+      continue;
+    }
+
+    const selectedValue = state[key];
+    if (selectedValue === null) {
+      continue;
+    }
+
+    if (product[key] !== selectedValue) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function sortParamValues(values: ParamValue[]) {
+  return [...values].sort((a, b) => {
+    if (typeof a === 'number' && typeof b === 'number') {
+      return a - b;
+    }
+    return String(a).localeCompare(String(b), 'ru');
+  });
+}
+
+function getFieldOptions(group: ProductGroup, state: GroupState, field: ParamFieldKey) {
+  const values = new Set<ParamValue>();
+
+  for (const product of group.products) {
+    if (!matchesState(product, state, field)) {
+      continue;
+    }
+
+    const value = product[field];
+    if (value !== null) {
+      values.add(value);
+    }
+  }
+
+  return sortParamValues([...values]);
+}
+
+function createGroupState(group: ProductGroup): GroupState {
+  const state: GroupState = {
+    widthMm: null,
+    lengthM: null,
+    thicknessMicron: null,
+    sleeveBrand: null,
+    quantityPerBox: null,
+    isExpanded: false,
+  };
+
+  for (const key of PARAM_KEYS) {
+    const options = getFieldOptions(group, state, key);
+    state[key] = (options[0] as GroupState[typeof key] | undefined) ?? null;
+  }
+
+  return state;
+}
+
+function normalizeState(group: ProductGroup, state: GroupState) {
+  for (const key of PARAM_KEYS) {
+    const options = getFieldOptions(group, state, key);
+    if (options.length === 0) {
+      state[key] = null;
+      continue;
+    }
+
+    const current = state[key];
+    if (current === null || !options.some((option) => option === current)) {
+      state[key] = (options[0] as GroupState[typeof key] | undefined) ?? null;
+    }
+  }
+}
+
+watch(
+  productGroups,
+  (groups) => {
+    const keys = new Set(groups.map((group) => group.key));
+
+    for (const key of Object.keys(groupStates)) {
+      if (!keys.has(key)) {
+        delete groupStates[key];
+      }
+    }
+
+    for (const group of groups) {
+      if (!groupStates[group.key]) {
+        groupStates[group.key] = createGroupState(group);
+      }
+      normalizeState(group, groupStates[group.key]);
+    }
+  },
+  { immediate: true },
+);
+
+function getGroupState(group: ProductGroup) {
+  return groupStates[group.key];
+}
+
+function updateField(group: ProductGroup, field: ParamFieldKey, value: ParamValue) {
+  const state = getGroupState(group);
+  state[field] = value as GroupState[typeof field];
+  normalizeState(group, state);
+}
+
+function selectedProduct(group: ProductGroup) {
+  const state = getGroupState(group);
+  return group.products.find((product) => matchesState(product, state)) ?? null;
+}
+
+function matchingCount(group: ProductGroup) {
+  const state = getGroupState(group);
+  return group.products.filter((product) => matchesState(product, state)).length;
+}
+
+function toggleExpanded(group: ProductGroup) {
+  const state = getGroupState(group);
+  state.isExpanded = !state.isExpanded;
+}
+
+function formatOptionLabel(field: ParamFieldKey, value: ParamValue) {
+  if (field === 'widthMm' || field === 'lengthM') {
+    return `${value} мм`;
+  }
+  if (field === 'thicknessMicron') {
+    return `${value} мкм`;
+  }
+  return String(value);
+}
+
+function incrementProduct(product: ProductNode) {
+  if (getQuantity(product.id) === 0) {
+    addProduct({
+      id: product.id,
+      name: product.name,
+      sku: product.sku,
+      isCustomizable: product.isCustomizable,
+    });
+    return;
+  }
+
+  incrementQuantity(product.id);
+}
+
+function decrementProduct(productId: string) {
+  decrementQuantity(productId);
+}
+
+function selectedQty(group: ProductGroup) {
+  const product = selectedProduct(group);
+  if (!product) {
+    return 0;
+  }
+  return getQuantity(product.id);
+}
+
+function incrementSelected(group: ProductGroup) {
+  const product = selectedProduct(group);
+  if (!product) {
+    return;
+  }
+  incrementProduct(product);
+}
+
+function decrementSelected(group: ProductGroup) {
+  const product = selectedProduct(group);
+  if (!product) {
+    return;
+  }
+  decrementProduct(product.id);
+}
+</script>
+
+<template>
+  <section class="space-y-5">
+    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
+
+    <div class="surface-card rounded-3xl p-4 md:p-5">
+      <label class="form-control">
+        <span class="label-text">Поиск</span>
+        <input
+          v-model="search"
+          type="text"
+          class="input input-bordered w-full"
+          placeholder="Тип товара, SKU или параметр"
+        >
+      </label>
+    </div>
+
+    <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
+    <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
+
+    <div v-else-if="productGroups.length" class="space-y-4">
+      <article
+        v-for="group in productGroups"
+        :key="group.key"
+        class="surface-card rounded-3xl p-4 md:p-5"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div class="flex items-center gap-3">
+            <h2 class="text-xl font-bold text-[#133826]">{{ group.typeLabel }}</h2>
+            <span class="badge badge-outline">{{ group.products.length }} вариантов</span>
+          </div>
+          <button class="btn btn-ghost btn-sm" @click="toggleExpanded(group)">
+            {{ getGroupState(group).isExpanded ? 'Свернуть таблицу' : 'Показать все варианты' }}
+          </button>
+        </div>
+
+        <div class="mt-4 grid gap-4 xl:grid-cols-[1fr_340px]">
+          <div class="space-y-4">
+            <div class="grid gap-3 md:grid-cols-2 2xl:grid-cols-3">
+              <div
+                v-for="field in parameterFields"
+                :key="`${group.key}-${field.key}`"
+                class="rounded-2xl bg-base-100 p-3"
+              >
+                <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">{{ field.label }}</p>
+                <div class="mt-2 flex flex-wrap gap-2">
+                  <button
+                    v-for="option in getFieldOptions(group, getGroupState(group), field.key)"
+                    :key="`${group.key}-${field.key}-${option}`"
+                    class="btn btn-sm"
+                    :class="getGroupState(group)[field.key] === option ? 'btn-neutral' : 'btn-outline'"
+                    @click="updateField(group, field.key, option)"
+                  >
+                    {{ formatOptionLabel(field.key, option) }}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <p class="text-sm text-base-content/70">Совпадающих вариантов: {{ matchingCount(group) }}</p>
+          </div>
+
+          <aside class="rounded-2xl bg-base-100 p-4">
+            <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">Выбранная позиция</p>
+
+            <template v-if="selectedProduct(group)">
+              <div class="mt-2 flex items-start gap-3">
+                <img
+                  :src="createProductCover(selectedProduct(group)!.name, selectedProduct(group)!.sku)"
+                  :alt="`Превью ${selectedProduct(group)!.sku}`"
+                  class="h-16 w-16 rounded-xl object-cover"
+                  loading="lazy"
+                >
+                <div class="min-w-0">
+                  <p class="text-sm font-semibold text-[#133826]">{{ selectedProduct(group)?.name }}</p>
+                  <p class="mt-1 text-xs text-base-content/65">SKU: {{ selectedProduct(group)?.sku }}</p>
+                </div>
+              </div>
+
+              <div class="mt-4 flex items-center justify-between rounded-2xl border border-base-300 bg-base-100 px-2 py-1">
+                <button
+                  class="btn btn-square btn-sm"
+                  :disabled="selectedQty(group) === 0"
+                  @click="decrementSelected(group)"
+                >
+                  -
+                </button>
+                <span class="min-w-10 text-center font-semibold">{{ selectedQty(group) }}</span>
+                <button class="btn btn-square btn-sm" @click="incrementSelected(group)">+</button>
+              </div>
+            </template>
+
+            <p v-else class="mt-2 text-sm text-base-content/70">
+              Нет точного совпадения. Измените параметры или раскройте полный список вариантов.
+            </p>
+          </aside>
+        </div>
+
+        <div v-if="getGroupState(group).isExpanded" class="mt-4 overflow-x-auto rounded-2xl bg-base-100 p-2">
+          <table class="table table-zebra">
+            <thead>
+              <tr>
+                <th>Фото</th>
+                <th>SKU</th>
+                <th>Ширина</th>
+                <th>Длина</th>
+                <th>Толщина</th>
+                <th>Втулка</th>
+                <th>Короб</th>
+                <th class="text-right">Действие</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="product in group.products" :key="`${group.key}-${product.id}`">
+                <td>
+                  <img
+                    :src="createProductCover(product.name, product.sku)"
+                    :alt="`Превью ${product.sku}`"
+                    class="h-12 w-12 rounded-lg object-cover"
+                    loading="lazy"
+                  >
+                </td>
+                <td>{{ product.sku }}</td>
+                <td>{{ product.widthMm ?? '—' }}</td>
+                <td>{{ product.lengthM ?? '—' }}</td>
+                <td>{{ product.thicknessMicron ?? '—' }}</td>
+                <td>{{ product.sleeveBrand ?? '—' }}</td>
+                <td>{{ product.quantityPerBox ?? '—' }}</td>
+                <td class="text-right">
+                  <div class="ml-auto flex w-28 items-center justify-between rounded-xl border border-base-300 px-1 py-1">
+                    <button class="btn btn-xs btn-square" :disabled="getQuantity(product.id) === 0" @click="decrementProduct(product.id)">-</button>
+                    <span class="text-sm font-semibold">{{ getQuantity(product.id) }}</span>
+                    <button class="btn btn-xs btn-square" @click="incrementProduct(product)">+</button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </article>
+    </div>
+
+    <div v-else class="alert surface-card border-0">По текущему запросу товары не найдены.</div>
+  </section>
+</template>
diff --git a/app/components/ui/AppHeader.vue b/app/components/ui/AppHeader.vue
index 7bb5f5d..00693bb 100644
--- a/app/components/ui/AppHeader.vue
+++ b/app/components/ui/AppHeader.vue
@@ -8,7 +8,7 @@ const route = useRoute();
 const { totalItems } = useClientCart();
 
 const centerCapsule: NavItem[] = [
-  { to: '/products', label: 'Каталог' },
+  { to: '/', label: 'Каталог' },
   { to: '/orders', label: 'Мои заказы' },
 ];
 
@@ -18,6 +18,9 @@ const rightCapsule: NavItem[] = [
 ];
 
 function isActive(path: string) {
+  if (path === '/') {
+    return route.path === '/' || route.path.startsWith('/products');
+  }
   if (path === '/orders') {
     return route.path === '/orders' || route.path.startsWith('/orders/');
   }
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index 7ee9f25..6c18fd2 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -9,6 +9,6 @@ export default defineNuxtRouteMiddleware((to) => {
   }
 
   if (authToken.value && isLoginPage) {
-    return navigateTo('/products');
+    return navigateTo('/');
   }
 });
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e8bcdbd..2fca92b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,162 +1,7 @@
 <script setup lang="ts">
-import { useQuery } from '@vue/apollo-composable';
-import { ClientProductsDocument, type ClientProductsQuery } from '~/composables/graphql/generated';
-import { useClientCart } from '~/composables/useClientCart';
-
-const { result, loading, error } = useQuery(ClientProductsDocument);
-const search = ref('');
-const stockFilter = ref<'ALL' | 'CUSTOM' | 'STANDARD'>('ALL');
-const { addProduct, getQuantity, incrementQuantity, decrementQuantity } = useClientCart();
-
-const coverPresets = [
-  ['#e9fbe5', '#acfcd5', '#7be9aa'],
-  ['#f5fff7', '#d9f5e6', '#8bd8b0'],
-  ['#fef4ed', '#ffe5d8', '#ffd1b8'],
-];
-
-function createProductCover(name: string, sku: string) {
-  const seed = `${name}${sku}`.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  const [start, middle, finish] = coverPresets[seed % coverPresets.length];
-  const firstLetter = name.trim().charAt(0).toUpperCase() || 'P';
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
-      <defs>
-        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0%" stop-color="${start}" />
-          <stop offset="56%" stop-color="${middle}" />
-          <stop offset="100%" stop-color="${finish}" />
-        </linearGradient>
-      </defs>
-      <rect width="640" height="480" fill="url(#g)" rx="38" />
-      <g opacity="0.18">
-        <circle cx="520" cy="66" r="100" fill="#0d854a" />
-        <circle cx="80" cy="440" r="100" fill="#0d854a" />
-      </g>
-      <text x="50%" y="53%" text-anchor="middle" fill="#0f2f20" font-family="Manrope, sans-serif" font-size="186" font-weight="700">${firstLetter}</text>
-    </svg>
-  `.trim();
-
-  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-}
-
-const filteredProducts = computed(() => {
-  const list = result.value?.clientProducts ?? [];
-  const normalizedSearch = search.value.trim().toLowerCase();
-
-  return list.filter((product) => {
-    const matchSearch = !normalizedSearch
-      || product.name.toLowerCase().includes(normalizedSearch)
-      || product.sku.toLowerCase().includes(normalizedSearch);
-
-    const matchType = stockFilter.value === 'ALL'
-      || (stockFilter.value === 'CUSTOM' && product.isCustomizable)
-      || (stockFilter.value === 'STANDARD' && !product.isCustomizable);
-
-    return matchSearch && matchType;
-  });
-});
-
-function addProductToCart(product: ClientProductsQuery['clientProducts'][number]) {
-  addProduct({
-    id: product.id,
-    name: product.name,
-    sku: product.sku,
-    isCustomizable: product.isCustomizable,
-  });
-}
-
-function incrementProduct(productId: string) {
-  incrementQuantity(productId);
-}
-
-function decrementProduct(productId: string) {
-  decrementQuantity(productId);
-}
+import CatalogConfigurator from '~/components/catalog/CatalogConfigurator.vue';
 </script>
 
 <template>
-  <section class="space-y-5">
-    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
-
-    <div class="surface-card rounded-3xl p-4 md:p-5">
-      <div class="grid gap-3 md:grid-cols-[1fr_auto]">
-        <label class="form-control">
-          <span class="label-text">Поиск</span>
-          <input
-            v-model="search"
-            type="text"
-            class="input input-bordered w-full"
-            placeholder="Название или SKU"
-          >
-        </label>
-
-        <label class="form-control md:min-w-56">
-          <span class="label-text">Фильтр</span>
-          <select v-model="stockFilter" class="select select-bordered w-full">
-            <option value="ALL">Все товары</option>
-            <option value="CUSTOM">Только кастомные</option>
-            <option value="STANDARD">Только стандартные</option>
-          </select>
-        </label>
-      </div>
-    </div>
-
-    <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
-    <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
-
-    <div v-else-if="filteredProducts.length > 0" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-      <article class="surface-card overflow-hidden rounded-3xl p-4">
-        <div class="flex h-full flex-col justify-between gap-4">
-          <div>
-            <div class="badge badge-outline">Кастом</div>
-            <h2 class="mt-3 text-lg font-bold text-[#133826]">Конструктор скотча</h2>
-            <p class="mt-1 text-sm text-base-content/75">
-              Отдельная карточка под индивидуальную конфигурацию. Параметры добавим следующим шагом.
-            </p>
-          </div>
-          <button class="btn btn-disabled w-full">Скоро</button>
-        </div>
-      </article>
-
-      <article
-        v-for="(product, index) in filteredProducts"
-        :key="product.id"
-        class="surface-card product-card-anim overflow-hidden rounded-3xl p-3"
-        :style="{ animationDelay: `${index * 55}ms` }"
-      >
-        <figure class="overflow-hidden rounded-2xl">
-          <img
-            :src="createProductCover(product.name, product.sku)"
-            :alt="`Изображение товара ${product.name}`"
-            class="h-48 w-full object-cover transition duration-300 hover:scale-105"
-            loading="lazy"
-          >
-        </figure>
-        <div class="px-1 pb-2 pt-3">
-          <h2 class="text-lg font-bold text-[#133826]">{{ product.name }}</h2>
-          <p class="text-xs text-base-content/65">SKU: {{ product.sku }}</p>
-          <div class="mt-3">
-            <button
-              v-if="getQuantity(product.id) === 0"
-              class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-              @click="addProductToCart(product)"
-            >
-              В корзину
-            </button>
-
-            <div v-else class="flex items-center justify-between rounded-2xl border border-base-300 bg-base-100 px-2 py-1">
-              <button class="btn btn-square btn-sm" @click="decrementProduct(product.id)">-</button>
-              <span class="min-w-8 text-center font-semibold">{{ getQuantity(product.id) }}</span>
-              <button class="btn btn-square btn-sm" @click="incrementProduct(product.id)">+</button>
-            </div>
-          </div>
-        </div>
-      </article>
-    </div>
-
-    <div v-else class="alert surface-card border-0">
-      Ничего не найдено по текущим параметрам.
-    </div>
-  </section>
+  <CatalogConfigurator />
 </template>
diff --git a/app/pages/login.vue b/app/pages/login.vue
index ea9be48..2f4d8b2 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -53,7 +53,7 @@ async function navigateAfterLogin(user: { company?: { id: string } | null }) {
     return;
   }
 
-  await navigateTo('/products');
+  await navigateTo('/');
 }
 
 function clearAutoRequestTimer() {
diff --git a/app/pages/products.vue b/app/pages/products.vue
index 224ba22..2fca92b 100644
--- a/app/pages/products.vue
+++ b/app/pages/products.vue
@@ -1,446 +1,7 @@
 <script setup lang="ts">
-import { useQuery } from '@vue/apollo-composable';
-import { ClientProductsDocument, type ClientProductsQuery } from '~/composables/graphql/generated';
-import { useClientCart } from '~/composables/useClientCart';
-
-type ProductNode = ClientProductsQuery['clientProducts'][number];
-type ParamFieldKey = 'widthMm' | 'lengthM' | 'thicknessMicron' | 'sleeveBrand' | 'quantityPerBox';
-type ParamValue = number | string;
-
-type ParsedProduct = ProductNode & {
-  productTypeLabel: string;
-  widthMm: number | null;
-  lengthM: number | null;
-  thicknessMicron: number | null;
-  sleeveBrand: string | null;
-  quantityPerBox: string | null;
-};
-
-type ProductGroup = {
-  key: string;
-  typeLabel: string;
-  products: ParsedProduct[];
-};
-
-type GroupState = {
-  widthMm: number | null;
-  lengthM: number | null;
-  thicknessMicron: number | null;
-  sleeveBrand: string | null;
-  quantityPerBox: string | null;
-  isExpanded: boolean;
-};
-
-const PARAM_KEYS: ParamFieldKey[] = ['widthMm', 'lengthM', 'thicknessMicron', 'sleeveBrand', 'quantityPerBox'];
-
-const parameterFields: Array<{ key: ParamFieldKey; label: string }> = [
-  { key: 'widthMm', label: 'Ширина, мм' },
-  { key: 'lengthM', label: 'Длина, м' },
-  { key: 'thicknessMicron', label: 'Толщина, мкм' },
-  { key: 'sleeveBrand', label: 'Бренд втулки' },
-  { key: 'quantityPerBox', label: 'Количество в коробе' },
-];
-
-const { result, loading, error } = useQuery(ClientProductsDocument);
-const search = ref('');
-const groupStates = reactive<Record<string, GroupState>>({});
-const { addProduct, getQuantity, incrementQuantity, decrementQuantity } = useClientCart();
-
-function normalizeText(value: string) {
-  return value.replaceAll(/\s+/g, ' ').trim();
-}
-
-function parseProductMeta(product: ProductNode) {
-  const normalizedName = normalizeText(product.name);
-  const [typeLabelRaw] = normalizedName.split(',');
-  const typeLabel = typeLabelRaw?.trim() || 'Без типа';
-
-  const sizeMatch = normalizedName.match(/(\d+)\s*[xх*]\s*(\d+)\s*м/i);
-  const thicknessMatch = normalizedName.match(/(\d+)\s*мкм/i);
-  const sleeveMatch = normalizedName.match(/втулка\s+([^,]+)/i);
-  const quantityMatch = normalizedName.match(/короб\s+([^,]+)/i);
-
-  return {
-    productTypeLabel: typeLabel,
-    widthMm: sizeMatch ? Number.parseInt(sizeMatch[1] ?? '', 10) : null,
-    lengthM: sizeMatch ? Number.parseInt(sizeMatch[2] ?? '', 10) : null,
-    thicknessMicron: thicknessMatch ? Number.parseInt(thicknessMatch[1] ?? '', 10) : null,
-    sleeveBrand: sleeveMatch?.[1]?.trim() ?? null,
-    quantityPerBox: quantityMatch?.[1]?.trim() ?? null,
-  };
-}
-
-function productSortValue(value: number | null) {
-  return value ?? Number.MAX_SAFE_INTEGER;
-}
-
-function compareProducts(a: ParsedProduct, b: ParsedProduct) {
-  const byWidth = productSortValue(a.widthMm) - productSortValue(b.widthMm);
-  if (byWidth !== 0) {
-    return byWidth;
-  }
-
-  const byLength = productSortValue(a.lengthM) - productSortValue(b.lengthM);
-  if (byLength !== 0) {
-    return byLength;
-  }
-
-  const byThickness = productSortValue(a.thicknessMicron) - productSortValue(b.thicknessMicron);
-  if (byThickness !== 0) {
-    return byThickness;
-  }
-
-  const bySleeve = (a.sleeveBrand ?? '').localeCompare(b.sleeveBrand ?? '', 'ru');
-  if (bySleeve !== 0) {
-    return bySleeve;
-  }
-
-  return a.sku.localeCompare(b.sku, 'ru');
-}
-
-const parsedProducts = computed<ParsedProduct[]>(() => {
-  const list = result.value?.clientProducts ?? [];
-  const query = search.value.trim().toLowerCase();
-
-  return list
-    .map((product) => {
-      const parsedMeta = parseProductMeta(product);
-      return {
-        ...product,
-        ...parsedMeta,
-      };
-    })
-    .filter((product) => {
-      if (!query) {
-        return true;
-      }
-
-      return [
-        product.name,
-        product.sku,
-        product.productTypeLabel,
-        product.sleeveBrand ?? '',
-      ].some((part) => part.toLowerCase().includes(query));
-    })
-    .sort(compareProducts);
-});
-
-const productGroups = computed<ProductGroup[]>(() => {
-  const map = new Map<string, ParsedProduct[]>();
-
-  for (const product of parsedProducts.value) {
-    const key = product.productTypeLabel;
-    const existing = map.get(key);
-    if (existing) {
-      existing.push(product);
-      continue;
-    }
-
-    map.set(key, [product]);
-  }
-
-  return [...map.entries()]
-    .sort((a, b) => a[0].localeCompare(b[0], 'ru'))
-    .map(([typeLabel, products]) => ({
-      key: typeLabel.toLowerCase().replaceAll(/\s+/g, '-'),
-      typeLabel,
-      products: [...products].sort(compareProducts),
-    }));
-});
-
-function matchesState(product: ParsedProduct, state: GroupState, skipField?: ParamFieldKey) {
-  for (const key of PARAM_KEYS) {
-    if (key === skipField) {
-      continue;
-    }
-
-    const selectedValue = state[key];
-    if (selectedValue === null) {
-      continue;
-    }
-
-    if (product[key] !== selectedValue) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-function sortParamValues(values: ParamValue[]) {
-  return [...values].sort((a, b) => {
-    if (typeof a === 'number' && typeof b === 'number') {
-      return a - b;
-    }
-    return String(a).localeCompare(String(b), 'ru');
-  });
-}
-
-function getFieldOptions(group: ProductGroup, state: GroupState, field: ParamFieldKey) {
-  const values = new Set<ParamValue>();
-
-  for (const product of group.products) {
-    if (!matchesState(product, state, field)) {
-      continue;
-    }
-
-    const value = product[field];
-    if (value !== null) {
-      values.add(value);
-    }
-  }
-
-  return sortParamValues([...values]);
-}
-
-function createGroupState(group: ProductGroup): GroupState {
-  const state: GroupState = {
-    widthMm: null,
-    lengthM: null,
-    thicknessMicron: null,
-    sleeveBrand: null,
-    quantityPerBox: null,
-    isExpanded: false,
-  };
-
-  for (const key of PARAM_KEYS) {
-    const options = getFieldOptions(group, state, key);
-    state[key] = (options[0] as GroupState[typeof key] | undefined) ?? null;
-  }
-
-  return state;
-}
-
-function normalizeState(group: ProductGroup, state: GroupState) {
-  for (const key of PARAM_KEYS) {
-    const options = getFieldOptions(group, state, key);
-    if (options.length === 0) {
-      state[key] = null;
-      continue;
-    }
-
-    const current = state[key];
-    if (current === null || !options.some((option) => option === current)) {
-      state[key] = (options[0] as GroupState[typeof key] | undefined) ?? null;
-    }
-  }
-}
-
-watch(
-  productGroups,
-  (groups) => {
-    const currentKeys = new Set(groups.map((group) => group.key));
-
-    for (const key of Object.keys(groupStates)) {
-      if (!currentKeys.has(key)) {
-        delete groupStates[key];
-      }
-    }
-
-    for (const group of groups) {
-      if (!groupStates[group.key]) {
-        groupStates[group.key] = createGroupState(group);
-      }
-      normalizeState(group, groupStates[group.key]);
-    }
-  },
-  { immediate: true },
-);
-
-function getGroupState(group: ProductGroup) {
-  return groupStates[group.key];
-}
-
-function updateField(group: ProductGroup, field: ParamFieldKey, value: ParamValue) {
-  const state = getGroupState(group);
-  state[field] = value as GroupState[typeof field];
-  normalizeState(group, state);
-}
-
-function selectedProduct(group: ProductGroup) {
-  const state = getGroupState(group);
-  return group.products.find((product) => matchesState(product, state)) ?? null;
-}
-
-function matchingCount(group: ProductGroup) {
-  const state = getGroupState(group);
-  return group.products.filter((product) => matchesState(product, state)).length;
-}
-
-function toggleExpanded(group: ProductGroup) {
-  const state = getGroupState(group);
-  state.isExpanded = !state.isExpanded;
-}
-
-function formatOptionLabel(field: ParamFieldKey, value: ParamValue) {
-  if (field === 'widthMm' || field === 'lengthM') {
-    return `${value} мм`;
-  }
-  if (field === 'thicknessMicron') {
-    return `${value} мкм`;
-  }
-  return String(value);
-}
-
-function addProductToCart(product: ProductNode) {
-  addProduct({
-    id: product.id,
-    name: product.name,
-    sku: product.sku,
-    isCustomizable: product.isCustomizable,
-  });
-}
-
-function incrementProduct(productId: string) {
-  incrementQuantity(productId);
-}
-
-function decrementProduct(productId: string) {
-  decrementQuantity(productId);
-}
+import CatalogConfigurator from '~/components/catalog/CatalogConfigurator.vue';
 </script>
 
 <template>
-  <section class="space-y-5">
-    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
-
-    <div class="surface-card rounded-3xl p-4 md:p-5">
-      <label class="form-control">
-        <span class="label-text">Поиск</span>
-        <input
-          v-model="search"
-          type="text"
-          class="input input-bordered w-full"
-          placeholder="Тип товара, SKU или параметр"
-        >
-      </label>
-    </div>
-
-    <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
-    <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
-
-    <div v-else-if="productGroups.length" class="space-y-4">
-      <article
-        v-for="group in productGroups"
-        :key="group.key"
-        class="surface-card rounded-3xl p-4 md:p-5"
-      >
-        <div class="flex flex-wrap items-center justify-between gap-3">
-          <div class="flex items-center gap-3">
-            <h2 class="text-xl font-bold text-[#133826]">{{ group.typeLabel }}</h2>
-            <span class="badge badge-outline">{{ group.products.length }} вариантов</span>
-          </div>
-          <button class="btn btn-ghost btn-sm" @click="toggleExpanded(group)">
-            {{ getGroupState(group).isExpanded ? 'Свернуть таблицу' : 'Показать все варианты' }}
-          </button>
-        </div>
-
-        <div class="mt-4 grid gap-4 xl:grid-cols-[1fr_320px]">
-          <div class="space-y-4">
-            <div class="grid gap-3 md:grid-cols-2 2xl:grid-cols-3">
-              <div
-                v-for="field in parameterFields"
-                :key="`${group.key}-${field.key}`"
-                class="rounded-2xl bg-base-100 p-3"
-              >
-                <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">{{ field.label }}</p>
-                <div class="mt-2 flex flex-wrap gap-2">
-                  <button
-                    v-for="option in getFieldOptions(group, getGroupState(group), field.key)"
-                    :key="`${group.key}-${field.key}-${option}`"
-                    class="btn btn-sm"
-                    :class="getGroupState(group)[field.key] === option ? 'btn-neutral' : 'btn-outline'"
-                    @click="updateField(group, field.key, option)"
-                  >
-                    {{ formatOptionLabel(field.key, option) }}
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <p class="text-sm text-base-content/70">
-              Совпадающих вариантов: {{ matchingCount(group) }}
-            </p>
-          </div>
-
-          <aside class="rounded-2xl bg-base-100 p-4">
-            <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">Выбранная позиция</p>
-
-            <template v-if="selectedProduct(group)">
-              <p class="mt-2 text-sm font-semibold text-[#133826]">{{ selectedProduct(group)?.name }}</p>
-              <p class="mt-1 text-xs text-base-content/65">SKU: {{ selectedProduct(group)?.sku }}</p>
-
-              <div class="mt-4">
-                <button
-                  v-if="selectedProduct(group) && getQuantity(selectedProduct(group)!.id) === 0"
-                  class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-                  @click="selectedProduct(group) && addProductToCart(selectedProduct(group)!)"
-                >
-                  Добавить в корзину
-                </button>
-
-                <div
-                  v-else-if="selectedProduct(group)"
-                  class="flex items-center justify-between rounded-2xl border border-base-300 bg-base-100 px-2 py-1"
-                >
-                  <button class="btn btn-square btn-sm" @click="decrementProduct(selectedProduct(group)!.id)">-</button>
-                  <span class="min-w-8 text-center font-semibold">{{ getQuantity(selectedProduct(group)!.id) }}</span>
-                  <button class="btn btn-square btn-sm" @click="incrementProduct(selectedProduct(group)!.id)">+</button>
-                </div>
-              </div>
-            </template>
-
-            <p v-else class="mt-2 text-sm text-base-content/70">
-              Нет точного совпадения. Измените параметры или раскройте полный список вариантов.
-            </p>
-          </aside>
-        </div>
-
-        <div v-if="getGroupState(group).isExpanded" class="mt-4 overflow-x-auto rounded-2xl bg-base-100 p-2">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>SKU</th>
-                <th>Ширина</th>
-                <th>Длина</th>
-                <th>Толщина</th>
-                <th>Втулка</th>
-                <th>Короб</th>
-                <th class="text-right">Действие</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="product in group.products" :key="`${group.key}-${product.id}`">
-                <td>{{ product.sku }}</td>
-                <td>{{ product.widthMm ?? '—' }}</td>
-                <td>{{ product.lengthM ?? '—' }}</td>
-                <td>{{ product.thicknessMicron ?? '—' }}</td>
-                <td>{{ product.sleeveBrand ?? '—' }}</td>
-                <td>{{ product.quantityPerBox ?? '—' }}</td>
-                <td class="text-right">
-                  <button
-                    v-if="getQuantity(product.id) === 0"
-                    class="btn btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-                    @click="addProductToCart(product)"
-                  >
-                    В корзину
-                  </button>
-
-                  <div v-else class="ml-auto flex w-28 items-center justify-between rounded-xl border border-base-300 px-1 py-1">
-                    <button class="btn btn-xs btn-square" @click="decrementProduct(product.id)">-</button>
-                    <span class="text-sm font-semibold">{{ getQuantity(product.id) }}</span>
-                    <button class="btn btn-xs btn-square" @click="incrementProduct(product.id)">+</button>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </article>
-    </div>
-
-    <div v-else class="alert surface-card border-0">
-      По текущему запросу товары не найдены.
-    </div>
-  </section>
+  <CatalogConfigurator />
 </template>