From fc7c42861cb1166a10020ecde947f37c3d067be7 Mon Sep 17 00:00:00 2001
From: dosai <dosai@example.com>
Date: Sat, 1 Nov 2025 20:27:36 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20=D0=92=D0=BE=D1=81=D1=81=D1=82=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=80=D0=B8?=
 =?UTF-8?q?=D0=B3=D0=B8=D0=BD=D0=B0=D0=BB=D1=8C=D0=BD=D0=B0=D1=8F=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83=D1=80=D0=B0=20=D1=84=D0=BE?=
 =?UTF-8?q?=D1=80=D0=BC=D1=8B=20=D0=BC=D1=8B=D0=BB=D0=B0=20=D0=B8=20=D0=B8?=
 =?UTF-8?q?=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B0=20chat=5Fid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Восстановлена структура формы мыла с промежуточными стоимостями под каждым блоком
- Добавлен компонент CostBlock для отображения промежуточных стоимостей
- Улучшена обработка chat_id при отправке (проверка URL и sessionStorage)
- Улучшена навигация между калькуляторами с более понятным интерфейсом
- Добавлена подсказка для пользователя о переключении калькуляторов
---
 frontend/components/CalculatorNav.tsx     |  19 +-
 frontend/components/CostBlock.tsx         |  24 ++
 frontend/components/DynamicCalculator.tsx | 284 ++++++++++++++++------
 3 files changed, 250 insertions(+), 77 deletions(-)
 create mode 100644 frontend/components/CostBlock.tsx

diff --git a/frontend/components/CalculatorNav.tsx b/frontend/components/CalculatorNav.tsx
index 003e612..6fb7698 100644
--- a/frontend/components/CalculatorNav.tsx
+++ b/frontend/components/CalculatorNav.tsx
@@ -44,11 +44,11 @@ export default function CalculatorNav() {
   };
 
   return (
-    <div className="mb-6 bg-gray-700 rounded-lg p-4">
-      <h2 className="text-lg font-semibold text-gray-200 mb-3">
-        Выберите калькулятор:
+    <div className="mb-6 bg-gray-700 rounded-lg p-4 border-2 border-gray-600">
+      <h2 className="text-lg font-semibold text-gray-200 mb-3 text-center">
+        🔄 Переключить калькулятор:
       </h2>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-2 gap-3">
         {calculators.map((calc) => {
           const isActive = pathname === `/${calc.id}`;
           
@@ -56,19 +56,24 @@ export default function CalculatorNav() {
             <button
               key={calc.id}
               onClick={() => handleCalculatorChange(calc.id)}
+              type="button"
               className={`
-                px-4 py-2 rounded-md text-center font-medium transition-colors
+                px-4 py-3 rounded-md text-center font-semibold transition-all
                 ${isActive
-                  ? 'bg-sky-500 text-gray-100'
-                  : 'bg-gray-600 text-gray-200 hover:bg-gray-500 active:bg-gray-400'
+                  ? 'bg-sky-500 text-gray-100 shadow-lg scale-105'
+                  : 'bg-gray-600 text-gray-200 hover:bg-gray-500 active:bg-gray-400 hover:scale-102'
                 }
               `}
             >
+              {isActive && '✓ '}
               {calc.name}
             </button>
           );
         })}
       </div>
+      <p className="text-xs text-gray-400 mt-2 text-center">
+        Нажмите на кнопку выше, чтобы переключиться между калькуляторами
+      </p>
     </div>
   );
 }
diff --git a/frontend/components/CostBlock.tsx b/frontend/components/CostBlock.tsx
new file mode 100644
index 0000000..5cb4020
--- /dev/null
+++ b/frontend/components/CostBlock.tsx
@@ -0,0 +1,24 @@
+// components/CostBlock.tsx
+// Блок отображения промежуточной стоимости
+
+type CostBlockProps = {
+  title: string;
+  value: number;
+  highlight?: boolean;
+};
+
+export default function CostBlock({ title, value, highlight = false }: CostBlockProps) {
+  return (
+    <div
+      className={`
+        p-2
+        ${highlight ? 'bg-gray-600 font-semibold' : 'bg-gray-700'}
+        text-gray-200
+        rounded
+      `}
+    >
+      {title}: {value.toFixed(1)} руб
+    </div>
+  );
+}
+
diff --git a/frontend/components/DynamicCalculator.tsx b/frontend/components/DynamicCalculator.tsx
index 85c2b9c..a1bfbe9 100644
--- a/frontend/components/DynamicCalculator.tsx
+++ b/frontend/components/DynamicCalculator.tsx
@@ -9,6 +9,7 @@ import { getCalculator } from '@/lib/calculators';
 import { submitCalculator } from '@/lib/api';
 import FormField from './FormField';
 import CalculatorNav from './CalculatorNav';
+import CostBlock from './CostBlock';
 import type { Calculator } from '@/types/calculator';
 
 interface DynamicCalculatorProps {
@@ -175,7 +176,21 @@ export default function DynamicCalculator({ calculatorType }: DynamicCalculatorP
   // Обработка отправки формы
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    if (!chatId) {
+    
+    // Получаем chat_id из разных источников
+    let currentChatId = chatId;
+    if (!currentChatId && typeof window !== 'undefined') {
+      const params = new URLSearchParams(window.location.search);
+      currentChatId = params.get('chat_id');
+      if (!currentChatId && typeof Storage !== 'undefined') {
+        currentChatId = sessionStorage.getItem('chat_id');
+      }
+      if (currentChatId) {
+        setChatId(currentChatId);
+      }
+    }
+    
+    if (!currentChatId) {
       alert('❗ Не найден chat_id. Откройте калькулятор через Telegram-бота.');
       return;
     }
@@ -218,7 +233,7 @@ export default function DynamicCalculator({ calculatorType }: DynamicCalculatorP
     // Отправка на backend
     const response = await submitCalculator(
       calculatorType,
-      chatId,
+      currentChatId!,
       submitData,
       photoFile
     );
@@ -273,55 +288,141 @@ export default function DynamicCalculator({ calculatorType }: DynamicCalculatorP
         Калькулятор: {calculator.name}
       </h1>
 
-      {/* Основные поля (без группы) */}
-      {groupedFields.general && (
-        <div className="space-y-4">
-          {groupedFields.general.map((field) => (
-            <FormField
-              key={field.id}
-              field={field}
-              value={formData[field.name] || ''}
-              onChange={(value) => updateField(field.name, value)}
+      {/* Специфичная структура для мыла с промежуточными стоимостями */}
+      {calculator.id === 'soap' && (
+        <>
+          {/* Название мыла */}
+          <FormField
+            field={calculator.fieldSchema.find((f) => f.name === 'soapName')!}
+            value={formData.soapName || ''}
+            onChange={(value) => updateField('soapName', value)}
+          />
+
+          {/* Фото */}
+          <label className="flex flex-col gap-1">
+            <span className="text-gray-300">Фото мыла (необязательно)</span>
+            <input
+              type="file"
+              accept="image/*"
+              onChange={handlePhotoChange}
+              className="
+                bg-gray-700
+                text-gray-200
+                rounded-md
+                border border-gray-600
+                p-2
+                focus:outline-none focus:border-sky-500
+              "
             />
-          ))}
-        </div>
+          </label>
+          {photoFile && (
+            <img
+              src={URL.createObjectURL(photoFile)}
+              alt="Предпросмотр мыла"
+              className="w-32 h-32 object-cover rounded-lg border border-sky-400"
+            />
+          )}
+
+          {/* Блок «Основа» */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'weight')!}
+              value={formData.weight || ''}
+              onChange={(value) => updateField('weight', value)}
+            />
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'basePrice')!}
+              value={formData.basePrice || ''}
+              onChange={(value) => updateField('basePrice', value)}
+            />
+          </div>
+          <CostBlock title="Себестоимость основы" value={result.base} />
+
+          {/* Блок «Отдушка» */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'aromaPrice')!}
+              value={formData.aromaPrice || ''}
+              onChange={(value) => updateField('aromaPrice', value)}
+            />
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'aromaWeight')!}
+              value={formData.aromaWeight || ''}
+              onChange={(value) => updateField('aromaWeight', value)}
+            />
+          </div>
+          <CostBlock title="Себестоимость отдушки (1 %)" value={result.aroma} />
+
+          {/* Блок «Пигмент» */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'pigmentPrice')!}
+              value={formData.pigmentPrice || ''}
+              onChange={(value) => updateField('pigmentPrice', value)}
+            />
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'pigmentWeight')!}
+              value={formData.pigmentWeight || ''}
+              onChange={(value) => updateField('pigmentWeight', value)}
+            />
+          </div>
+          <CostBlock title="Себестоимость пигмента (0.5 %)" value={result.pigment} />
+
+          {/* Блок «Форма» */}
+          <FormField
+            field={calculator.fieldSchema.find((f) => f.name === 'moldPrice')!}
+            value={formData.moldPrice || ''}
+            onChange={(value) => updateField('moldPrice', value)}
+          />
+          <CostBlock title="Себестоимость формы" value={result.mold} />
+
+          {/* Блок «Упаковка» */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'box')!}
+              value={formData.box || ''}
+              onChange={(value) => updateField('box', value)}
+            />
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'filler')!}
+              value={formData.filler || ''}
+              onChange={(value) => updateField('filler', value)}
+            />
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'ribbon')!}
+              value={formData.ribbon || ''}
+              onChange={(value) => updateField('ribbon', value)}
+            />
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'labelValue')!}
+              value={formData.labelValue || ''}
+              onChange={(value) => updateField('labelValue', value)}
+            />
+          </div>
+          <CostBlock title="Стоимость упаковки" value={result.packaging} />
+          <CostBlock title="Операционные расходы (5 %)" value={result.operational} />
+          <CostBlock title="Итого себестоимость" value={result.total} highlight />
+
+          {/* Блок «Наценка и цена 100 г» */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              field={calculator.fieldSchema.find((f) => f.name === 'markup')!}
+              value={formData.markup || ''}
+              onChange={(value) => updateField('markup', value)}
+            />
+          </div>
+          <CostBlock title="Итоговая цена с наценкой" value={finalPrice} />
+          <CostBlock title="Цена за 100 г" value={pricePer100g} />
+        </>
       )}
 
-      {/* Поля с фото */}
-      <label className="flex flex-col gap-1">
-        <span className="text-gray-300">Фото (необязательно)</span>
-        <input
-          type="file"
-          accept="image/*"
-          onChange={handlePhotoChange}
-          className="
-            bg-gray-700
-            text-gray-200
-            rounded-md
-            border border-gray-600
-            p-2
-            focus:outline-none focus:border-sky-500
-          "
-        />
-      </label>
-      {photoFile && (
-        <img
-          src={URL.createObjectURL(photoFile)}
-          alt="Предпросмотр"
-          className="w-32 h-32 object-cover rounded-lg border border-sky-400"
-        />
-      )}
-
-      {/* Группированные поля (например, упаковка) */}
-      {Object.entries(groupedFields)
-        .filter(([group]) => group !== 'general')
-        .map(([group, fields]) => (
-          <div key={group} className="space-y-4">
-            <h2 className="text-xl font-semibold text-gray-300 capitalize">
-              {group === 'packaging' ? 'Упаковка' : group}
-            </h2>
-            <div className="grid grid-cols-2 gap-4">
-              {fields.map((field) => (
+      {/* Универсальная структура для других калькуляторов */}
+      {calculator.id !== 'soap' && (
+        <>
+          {/* Основные поля (без группы) */}
+          {groupedFields.general && (
+            <div className="space-y-4">
+              {groupedFields.general.map((field) => (
                 <FormField
                   key={field.id}
                   field={field}
@@ -330,30 +431,73 @@ export default function DynamicCalculator({ calculatorType }: DynamicCalculatorP
                 />
               ))}
             </div>
-          </div>
-        ))}
+          )}
 
-      {/* Блоки с результатами расчёта */}
-      <div className="space-y-2">
-        {Object.entries(result)
-          .filter(([key]) => key !== 'total')
-          .map(([key, value]) => (
-            <div key={key} className="p-2 bg-gray-700 text-gray-200 rounded">
-              {formatResultLabel(key)}: {value.toFixed(1)} ₽
-            </div>
-          ))}
-        <div className="p-2 bg-gray-600 font-semibold text-gray-200 rounded">
-          Итого себестоимость: {result.total.toFixed(1)} ₽
-        </div>
-        <div className="p-2 bg-gray-700 text-gray-200 rounded">
-          Итоговая цена с наценкой: {finalPrice.toFixed(1)} ₽
-        </div>
-        {weight > 0 && (
-          <div className="p-2 bg-gray-700 text-gray-200 rounded">
-            Цена за 100 г: {pricePer100g.toFixed(1)} ₽
+          {/* Поля с фото */}
+          <label className="flex flex-col gap-1">
+            <span className="text-gray-300">Фото (необязательно)</span>
+            <input
+              type="file"
+              accept="image/*"
+              onChange={handlePhotoChange}
+              className="
+                bg-gray-700
+                text-gray-200
+                rounded-md
+                border border-gray-600
+                p-2
+                focus:outline-none focus:border-sky-500
+              "
+            />
+          </label>
+          {photoFile && (
+            <img
+              src={URL.createObjectURL(photoFile)}
+              alt="Предпросмотр"
+              className="w-32 h-32 object-cover rounded-lg border border-sky-400"
+            />
+          )}
+
+          {/* Группированные поля */}
+          {Object.entries(groupedFields)
+            .filter(([group]) => group !== 'general')
+            .map(([group, fields]) => (
+              <div key={group} className="space-y-4">
+                <h2 className="text-xl font-semibold text-gray-300 capitalize">
+                  {group === 'packaging' ? 'Упаковка' : group}
+                </h2>
+                <div className="grid grid-cols-2 gap-4">
+                  {fields.map((field) => (
+                    <FormField
+                      key={field.id}
+                      field={field}
+                      value={formData[field.name] || ''}
+                      onChange={(value) => updateField(field.name, value)}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+
+          {/* Блоки с результатами расчёта */}
+          <div className="space-y-2">
+            {Object.entries(result)
+              .filter(([key]) => key !== 'total')
+              .map(([key, value]) => (
+                <CostBlock
+                  key={key}
+                  title={formatResultLabel(key)}
+                  value={value}
+                />
+              ))}
+            <CostBlock title="Итого себестоимость" value={result.total} highlight />
+            <CostBlock title="Итоговая цена с наценкой" value={finalPrice} />
+            {weight > 0 && (
+              <CostBlock title="Цена за 100 г" value={pricePer100g} />
+            )}
           </div>
-        )}
-      </div>
+        </>
+      )}
 
       {/* Кнопка отправки */}
       <button