From 2471a447b774123117e880fd5f5672b25efbcb3e Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Wed, 19 Aug 2026 12:28:30 +0330
Subject: [PATCH] ui(product): use 2-column grid layout for formula/live-price
 and visibility/TV formula

- Pricing tab: formula section and live price preview side by side in 2-col grid
- Specs tab: visibility switches and TV formula side by side in 2-col grid
- Reduces wasted horizontal space

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../base/components/ProductEditorFormBody.vue | 122 +++++++++---------
 1 file changed, 64 insertions(+), 58 deletions(-)

diff --git a/src/pages/menuPages/products/base/components/ProductEditorFormBody.vue b/src/pages/menuPages/products/base/components/ProductEditorFormBody.vue
index d4d06b8..b52ec13 100644
--- a/src/pages/menuPages/products/base/components/ProductEditorFormBody.vue
+++ b/src/pages/menuPages/products/base/components/ProductEditorFormBody.vue
@@ -222,48 +222,52 @@
 
           </div>
 
-          <FormulaPriceSection
-            :model-value="form"
-            :reference-middle-price="formulaReferenceMiddlePrice"
-            :product-amount="Number(form.amount) || 0"
-            @update:model-value="onFormulaFormPatch"
-            @enabled-change="onFormulaEnabledChange"
-          />
+          <div class="grid gap-4 md:grid-cols-2">
+            <FormulaPriceSection
+              :model-value="form"
+              :reference-middle-price="formulaReferenceMiddlePrice"
+              :product-amount="Number(form.amount) || 0"
+              @update:model-value="onFormulaFormPatch"
+              @enabled-change="onFormulaEnabledChange"
+            />
 
-          <div class="live-price-preview rounded-lg border border-solid px-3 py-2">
-            <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between md:gap-3">
-              <div class="flex flex-wrap items-center gap-x-3 gap-y-1 md:min-w-0 md:flex-1">
-                <DashboardLabelWithHelp
-                  label="قیمت لحظه‌ای"
-                  :help="livePriceHelp"
-                  size="sm"
-                  text-class="live-price-preview__label"
-                />
-                <span
-                  v-if="livePricePreview.status === 'ready'"
-                  class="live-price-preview__amount text-base font-700"
-                >
-                  {{ usePrice(livePricePreview.amount) }}
-                </span>
-                <span
-                  v-else-if="livePricePreview.message"
-                  class="live-price-preview__message text-sm"
-                >
-                  {{ livePricePreview.message }}
-                </span>
-                <span
-                  v-if="livePricePreview.status === 'ready'"
-                  class="live-price-preview__source truncate text-xs"
-                >
-                  مبنا: {{ livePricePreview.source }}
-                  <span v-if="!form.price_formula_enabled && Number(form.price_offset_percent) !== 0">
-                    — تعدیل {{ form.price_offset_percent }}٪
+            <div class="live-price-preview rounded-lg border border-solid px-3 py-2 self-start">
+              <div class="flex flex-col gap-2">
+                <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+                  <DashboardLabelWithHelp
+                    label="قیمت لحظه‌ای"
+                    :help="livePriceHelp"
+                    size="sm"
+                    text-class="live-price-preview__label"
+                  />
+                  <span
+                    v-if="livePricePreview.status === 'ready'"
+                    class="live-price-preview__amount text-base font-700"
+                  >
+                    {{ usePrice(livePricePreview.amount) }}
                   </span>
-                </span>
+                  <span
+                    v-else-if="livePricePreview.message"
+                    class="live-price-preview__message text-sm"
+                  >
+                    {{ livePricePreview.message }}
+                  </span>
+                </div>
+                <div class="flex items-center justify-between gap-2">
+                  <span
+                    v-if="livePricePreview.status === 'ready'"
+                    class="live-price-preview__source truncate text-xs"
+                  >
+                    مبنا: {{ livePricePreview.source }}
+                    <span v-if="!form.price_formula_enabled && Number(form.price_offset_percent) !== 0">
+                      — تعدیل {{ form.price_offset_percent }}٪
+                    </span>
+                  </span>
+                  <AButton size="small" class="shrink-0" @click="$emit('refreshPrices')">
+                    بروزرسانی
+                  </AButton>
+                </div>
               </div>
-              <AButton size="small" class="shrink-0 self-end md:self-auto" @click="$emit('refreshPrices')">
-                بروزرسانی
-              </AButton>
             </div>
           </div>
         </div>
@@ -398,27 +402,29 @@
           <!-- نمایش -->
           <div class="product-section">
             <div class="product-section__title">تنظیمات نمایش</div>
-            <div class="product-visibility-panel">
-              <div class="product-visibility-row">
-                <span class="text-sm">نمایش در لیست محصولات</span>
-                <a-switch v-model:checked="form.show_in_list" />
-              </div>
-              <div class="product-visibility-row">
-                <span class="text-sm">نمایش در دارایی‌ها</span>
-                <a-switch v-model:checked="form.show_in_assets" />
-              </div>
-              <div class="product-visibility-row">
-                <span class="text-sm">نمایش در تابلو TV</span>
-                <a-switch v-model:checked="form.show_on_tv" />
+            <div class="grid gap-4 md:grid-cols-2">
+              <div class="product-visibility-panel">
+                <div class="product-visibility-row">
+                  <span class="text-sm">نمایش در لیست محصولات</span>
+                  <a-switch v-model:checked="form.show_in_list" />
+                </div>
+                <div class="product-visibility-row">
+                  <span class="text-sm">نمایش در دارایی‌ها</span>
+                  <a-switch v-model:checked="form.show_in_assets" />
+                </div>
+                <div class="product-visibility-row">
+                  <span class="text-sm">نمایش در تابلو TV</span>
+                  <a-switch v-model:checked="form.show_on_tv" />
+                </div>
               </div>
+              <TvFormulaPriceSection
+                v-if="form.show_on_tv"
+                :model-value="form"
+                :reference-middle-price="formulaReferenceMiddlePrice"
+                :product-amount="Number(form.amount) || 0"
+                @update:model-value="onTvFormulaFormPatch"
+              />
             </div>
-            <TvFormulaPriceSection
-              v-if="form.show_on_tv"
-              :model-value="form"
-              :reference-middle-price="formulaReferenceMiddlePrice"
-              :product-amount="Number(form.amount) || 0"
-              @update:model-value="onTvFormulaFormPatch"
-            />
           </div>
         </div>
       </a-tab-pane>