From 56f36c30b4840deb7cef6fa2bf1aa559020bf8c5 Mon Sep 17 00:00:00 2001
From: nns <278048682+nurdotnet@users.noreply.github.com>
Date: Sun, 26 Apr 2026 01:35:29 +0500
Subject: [PATCH] =?UTF-8?q?ui(product-card):=20=C2=AB=D0=97=D0=B0=D0=BA?=
 =?UTF-8?q?=D1=83=D0=BF=D0=BA=D0=B0=C2=BB=20=D0=B8=20=C2=AB=D0=A6=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B4=D0=B0=D0=B6=D0=B8=C2=BB?=
 =?UTF-8?q?=20=D0=B2=20=D0=B4=D0=B2=D0=B5=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BD=D0=B0=20=D0=B4=D0=B5=D1=81=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Внутри секции «Цены» теперь двухколоночная сетка (lg:grid-cols-2):
закупка слева, цены продажи справа, с вертикальным разделителем.
На узких экранах (<lg) колонки складываются вертикально, как раньше.

В правой колонке цены продажи переведены на стандартный <Field>
с label сверху, чтобы выравниваться с полями закупки.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/pages/ProductEditPage.tsx             | 117 +++++++++---------
 1 file changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/food-market.web/src/pages/ProductEditPage.tsx b/src/food-market.web/src/pages/ProductEditPage.tsx
index 0990c9a..f65a0b9 100644
--- a/src/food-market.web/src/pages/ProductEditPage.tsx
+++ b/src/food-market.web/src/pages/ProductEditPage.tsx
@@ -423,57 +423,56 @@ export function ProductEditPage() {
               </div>
             }
           >
-            <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-3">Закупка</h3>
-            <Grid cols={4}>
-              {org.data?.showReferencePriceOnProduct && (
-                <Field label="Эталонная цена">
-                  <MoneyInput
-                    value={form.referencePrice === '' ? null : Number(form.referencePrice)}
-                    onChange={(n) => setForm({ ...form, referencePrice: n == null ? '' : String(n) })}
-                    currencyCode={currencies.data?.find((c) => c.id === form.purchaseCurrencyId)?.code ?? org.data?.defaultCurrencyCode ?? undefined}
-                    currencySymbol={currencies.data?.find((c) => c.id === form.purchaseCurrencyId)?.symbol ?? org.data?.defaultCurrencySymbol ?? undefined}
-                  />
-                  <p className="text-xs text-slate-400 mt-1">не обязательное поле</p>
-                </Field>
-              )}
-              <Field label="Себестоимость">
-                <MoneyInput
-                  value={existing.data?.cost ?? 0}
-                  onChange={() => {}}
-                  disabled
-                  currencyCode={org.data?.defaultCurrencyCode ?? undefined}
-                  currencySymbol={org.data?.defaultCurrencySymbol ?? undefined}
-                />
-                <p className="text-xs text-slate-400 mt-1">расчётная (скользящее среднее)</p>
-              </Field>
-              {org.data?.multiCurrencyEnabled && (
-                <Field label="Валюта закупки">
-                  <Select value={form.purchaseCurrencyId} onChange={(e) => setForm({ ...form, purchaseCurrencyId: e.target.value })}>
-                    <option value="">—</option>
-                    {currencies.data?.map((c) => <option key={c.id} value={c.id}>{c.code}</option>)}
-                  </Select>
-                </Field>
-              )}
-            </Grid>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-5">
+              <div>
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-3">Закупка</h3>
+                <div className="space-y-3">
+                  {org.data?.showReferencePriceOnProduct && (
+                    <Field label="Эталонная цена">
+                      <MoneyInput
+                        value={form.referencePrice === '' ? null : Number(form.referencePrice)}
+                        onChange={(n) => setForm({ ...form, referencePrice: n == null ? '' : String(n) })}
+                        currencyCode={currencies.data?.find((c) => c.id === form.purchaseCurrencyId)?.code ?? org.data?.defaultCurrencyCode ?? undefined}
+                        currencySymbol={currencies.data?.find((c) => c.id === form.purchaseCurrencyId)?.symbol ?? org.data?.defaultCurrencySymbol ?? undefined}
+                      />
+                      <p className="text-xs text-slate-400 mt-1">не обязательное поле</p>
+                    </Field>
+                  )}
+                  <Field label="Себестоимость">
+                    <MoneyInput
+                      value={existing.data?.cost ?? 0}
+                      onChange={() => {}}
+                      disabled
+                      currencyCode={org.data?.defaultCurrencyCode ?? undefined}
+                      currencySymbol={org.data?.defaultCurrencySymbol ?? undefined}
+                    />
+                    <p className="text-xs text-slate-400 mt-1">расчётная (скользящее среднее)</p>
+                  </Field>
+                  {org.data?.multiCurrencyEnabled && (
+                    <Field label="Валюта закупки">
+                      <Select value={form.purchaseCurrencyId} onChange={(e) => setForm({ ...form, purchaseCurrencyId: e.target.value })}>
+                        <option value="">—</option>
+                        {currencies.data?.map((c) => <option key={c.id} value={c.id}>{c.code}</option>)}
+                      </Select>
+                    </Field>
+                  )}
+                </div>
+              </div>
 
-            <div className="mt-5 pt-5 border-t border-slate-100 dark:border-slate-800">
-              <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-3">Цены продажи</h3>
-              {/* Список цен рендерится по справочнику PriceType: одно поле на каждый
-                * тип, без выпадашки выбора. Значение хранится в form.prices,
-                * key = priceTypeId. Для отсутствующих записей при наборе создаётся
-                * новая, при стирании — null Amount (UI пустое). Обязательные (IsRequired)
-                * помечаются звёздочкой. */}
-              <div className="space-y-3">
-                {priceTypes.data?.slice().sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name)).map((pt) => {
-                  const idx = form.prices.findIndex(p => p.priceTypeId === pt.id)
-                  const row = idx >= 0 ? form.prices[idx] : null
-                  const required = pt.isRequired
-                  return (
-                    <div key={pt.id} className="grid grid-cols-1 sm:grid-cols-3 gap-2 items-start">
-                      <label className="text-sm text-slate-700 dark:text-slate-200 sm:pt-2">
-                        {pt.name}{required && <span className="text-red-500"> *</span>}
-                      </label>
-                      <div className="sm:col-span-2">
+              <div className="lg:border-l lg:border-slate-100 lg:dark:border-slate-800 lg:pl-6">
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-3">Цены продажи</h3>
+                {/* Список цен рендерится по справочнику PriceType: одно поле на каждый
+                  * тип, без выпадашки выбора. Значение хранится в form.prices,
+                  * key = priceTypeId. Для отсутствующих записей при наборе создаётся
+                  * новая, при стирании — null Amount (UI пустое). Обязательные (IsRequired)
+                  * помечаются звёздочкой. */}
+                <div className="space-y-3">
+                  {priceTypes.data?.slice().sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name)).map((pt) => {
+                    const idx = form.prices.findIndex(p => p.priceTypeId === pt.id)
+                    const row = idx >= 0 ? form.prices[idx] : null
+                    const required = pt.isRequired
+                    return (
+                      <Field key={pt.id} label={`${pt.name}${required ? ' *' : ''}`}>
                         <MoneyInput
                           value={row?.amount ?? null}
                           onChange={(n) => {
@@ -491,20 +490,20 @@ export function ProductEditPage() {
                           currencyCode={currencies.data?.find((c) => c.id === row?.currencyId)?.code ?? org.data?.defaultCurrencyCode ?? undefined}
                           currencySymbol={currencies.data?.find((c) => c.id === row?.currencyId)?.symbol ?? org.data?.defaultCurrencySymbol ?? undefined}
                         />
-                      </div>
-                    </div>
-                  )
-                })}
+                      </Field>
+                    )
+                  })}
                 {priceTypes.data?.length === 0 && (
                   <div className="text-sm text-slate-400 py-2">Нет ни одного типа цен. Создай в «Настройки → Типы цен».</div>
                 )}
-                {missingRequiredPrices.length > 0 && (
-                  <div className="text-sm text-red-600 mt-2">
-                    Заполни обязательные цены: {missingRequiredPrices.map((pt) => `«${pt.name}»`).join(', ')} (значение должно быть больше 0).
-                  </div>
-                )}
+                </div>
               </div>
             </div>
+            {missingRequiredPrices.length > 0 && (
+              <div className="text-sm text-red-600 mt-3">
+                Заполни обязательные цены: {missingRequiredPrices.map((pt) => `«${pt.name}»`).join(', ')} (значение должно быть больше 0).
+              </div>
+            )}
           </Section>
 
           {org.data?.showMinMaxStock && (