fix

frontend/src/views/OLAPConstructor.vue

@@ -106,44 +106,101 @@
 
       <!-- Правая часть -->
       <div class="flex-1 overflow-x-auto">
-        <!-- Верхняя панель настроек -->
+        <div class="card p-3 mb-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 items-end">
-        <div class="card p-3 mb-4 flex flex-wrap items-center gap-3 justify-between">
+
-          <div class="flex items-center gap-2">
+          <!-- Тип отчета -->
-            <span class="font-bold text-gray-700 text-sm">Тип отчета:</span>
+          <div class="flex flex-col">
-            <select v-model="reportType" class="input-field w-auto py-1 text-sm">
+            <label class="text-xs text-gray-500">Тип отчета</label>
+            <select v-model="reportType" class="input-field py-1 text-sm">
               <option value="SALES">SALES</option>
               <option value="DELIVERIES">DELIVERIES</option>
               <option value="TRANSACTIONS">TRANSACTIONS</option>
             </select>
           </div>
-          <label class="flex items-center gap-1.5 cursor-pointer text-sm">
-            <input type="checkbox" v-model="buildSummary" class="w-4 h-4 rounded border-gray-300 text-primary-600">
-            <span class="font-bold">buildSummary</span>
-          </label>
-          <label class="flex items-center gap-1.5 cursor-pointer text-sm">
-            <input type="checkbox" v-model="active" class="w-4 h-4 rounded border-gray-300 text-primary-600">
-            <span class="font-bold">Активно (UI)</span>
-          </label>
-        </div>
 
-        <!-- Имя таблицы -->
+          <!-- Таблица -->
-        <div class="card p-3 mb-4">
+          <div class="flex flex-col col-span-2 md:col-span-1">
-          <label class="font-medium text-gray-700 text-sm">Имя таблицы ClickHouse</label>
+            <label class="text-xs text-gray-500">Таблица</label>
-          <input type="text" v-model="tableName" @input="validateTableName"
+            <input
-                 class="input-field mt-1 py-1.5 text-sm"
+              type="text"
-                 :class="{'border-green-500 bg-green-50': tableNameValid && tableName, 'border-red-500 bg-red-50': tableNameTouched && !tableNameValid && tableName}">
+              v-model="tableName"
-          <div v-if="tableNameTouched && tableName && !tableNameValid" class="text-red-500 text-xs mt-1">Должно начинаться с буквы</div>
+              @input="validateTableName"
-        </div>
+              class="input-field py-1 text-sm"
-
+              :class="{
-        <!-- Настройки даты -->
+                'border-green-500 bg-green-50': tableNameValid && tableName,
-        <div class="card p-3 mb-4 grid grid-cols-2 gap-3">
+                'border-red-500 bg-red-50': tableNameTouched && !tableNameValid && tableName
-          <div>
+              }"
-            <label class="font-medium text-gray-700 text-sm">Дата до (конец дня)</label>
+            >
-            <input type="date" v-model="dateTo" class="input-field py-1.5 text-sm">
           </div>
-          <div>
+
-            <label class="font-medium text-gray-700 text-sm">Дней назад (≥1)</label>
+          <!-- Дата до -->
-            <input type="number" v-model.number="daysBack" min="1" step="1" class="input-field py-1.5 text-sm">
+          <div class="flex flex-col">
+            <label class="text-xs text-gray-500">Дата до (конец дня)</label>
+            <input type="date" v-model="dateTo" class="input-field py-1 text-sm">
+          </div>
+
+          <!-- Дней назад -->
+          <div class="flex flex-col">
+            <label class="text-xs text-gray-500">Дней назад (≥1)</label>
+            <input type="number" v-model.number="daysBack" min="1" class="input-field py-1 text-sm">
+          </div>
+
+          <!-- Опции справа -->
+          <div class="flex items-center justify-end gap-2 h-full col-span-2 md:col-span-3 lg:col-span-2">
+
+            <!-- Summary -->
+            <label
+              class="flex items-center gap-2 px-2.5 h-[30px] rounded-md border cursor-pointer transition
+                     hover:bg-gray-50 text-xs"
+              :class="buildSummary
+                ? 'bg-primary-50 border-primary-300 text-primary-700'
+                : 'border-gray-200 text-gray-600'">
+
+              <input type="checkbox" v-model="buildSummary" class="hidden">
+
+              <div class="w-3.5 h-3.5 rounded border flex items-center justify-center transition"
+                   :class="buildSummary
+                     ? 'bg-primary-600 border-primary-600'
+                     : 'border-gray-400 bg-white'">
+
+                <svg v-if="buildSummary"
+                     class="w-2.5 h-2.5 text-white"
+                     fill="none"
+                     stroke="currentColor"
+                     viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
+                </svg>
+              </div>
+
+              <span class="font-medium">Summary</span>
+            </label>
+
+            <!-- Активно -->
+            <label
+              class="flex items-center gap-2 px-2.5 h-[30px] rounded-md border cursor-pointer transition
+                     hover:bg-gray-50 text-xs"
+              :class="active
+                ? 'bg-green-50 border-green-300 text-green-700'
+                : 'border-gray-200 text-gray-600'">
+
+              <input type="checkbox" v-model="active" class="hidden">
+
+              <div class="w-3.5 h-3.5 rounded border flex items-center justify-center transition"
+                   :class="active
+                     ? 'bg-green-600 border-green-600'
+                     : 'border-gray-400 bg-white'">
+
+                <svg v-if="active"
+                     class="w-2.5 h-2.5 text-white"
+                     fill="none"
+                     stroke="currentColor"
+                     viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
+                </svg>
+              </div>
+
+              <span class="font-medium">Активно</span>
+            </label>
           </div>
         </div>
 
@@ -305,7 +362,7 @@
       </div>
     </div>
 
-    <!-- Модалка подтверждения сброса (без изменений) -->
+    <!-- Модалка подтверждения сброса -->
     <Transition name="fade">
       <div v-if="resetModal.show" class="fixed inset-0 z-50 overflow-y-auto" @click.self="resetModal.show = false">
         <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>
@@ -428,7 +485,6 @@ const collapsed = ref({
   filter: false
 })
 
-// Метод переключения
 const toggleSection = (section: 'number' | 'category' | 'filter') => {
   collapsed.value[section] = !collapsed.value[section]
 }
@@ -436,7 +492,7 @@ const toggleSection = (section: 'number' | 'category' | 'filter') => {
 // Модалка сброса
 const resetModal = ref({ show: false })
 
-// Drag & drop state (без изменений)
+// Drag & drop state
 let draggedItem: AvailableField | null = null
 let draggedFromSidebar = true
 const dragOverZone = ref<string | null>(null)
@@ -444,7 +500,6 @@ let dragReorderItem: CategoryField | NumberField | null = null
 let dragReorderType: string | null = null
 let dragReorderFromIdx: number | null = null
 
-// Функции (без изменений, кроме удаления collapsed)
 const buildAvailableFields = (): AvailableField[] => {
   if (!columnsData.value.length) return []
   const selected = reportType.value