From 6c9e13d19af195f01f9c5b251524b325c4881f59 Mon Sep 17 00:00:00 2001
From: root <root@whpoejrmfc.local>
Date: Wed, 22 Jul 2026 06:45:39 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20SMS=20city=20profiles=20UI=20=E2=80=94?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BD=D1=82=D1=80=D0=B0=D1=81=D1=82=20=D1=86?=
 =?UTF-8?q?=D0=B2=D0=B5=D1=82=D0=BE=D0=B2,=20=D0=B2=D1=8B=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BD=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- bg-[var(--color-surface-strong)] вместо --color-bg внутри карточек
- Карточки профилей: --color-surface-strong, вложенные блоки: --color-surface
- Текст всегда var(--color-text) — виден в светлой и тёмной теме
- Toggle: компактнее (h-5 w-10)
- Выравнивание: flex-wrap, gap, border-t для разделения секций
- SMS ON/OFF badge вместо toggle в строке заголовка
---
 src/components/admin/SmsCityProfilesPanel.jsx | 148 +++++++++---------
 1 file changed, 75 insertions(+), 73 deletions(-)

diff --git a/src/components/admin/SmsCityProfilesPanel.jsx b/src/components/admin/SmsCityProfilesPanel.jsx
index 43d9671..d571a8d 100644
--- a/src/components/admin/SmsCityProfilesPanel.jsx
+++ b/src/components/admin/SmsCityProfilesPanel.jsx
@@ -147,9 +147,9 @@ export const SmsCityProfilesPanel = () => {
   // ── UI helpers ──────────────────────────────────────────────────────────
   const ModeBadge = ({ mode }) => {
     if (mode === "notification") {
-      return <span className="rounded-lg px-2 py-0.5 text-[10px] font-semibold uppercase" style={{ backgroundColor: "rgba(59,130,246,0.12)", color: "#3b82f6" }}>Уведомление</span>;
+      return <span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(59,130,246,0.15)", color: "#3b82f6" }}>Уведомление</span>;
     }
-    return <span className="rounded-lg px-2 py-0.5 text-[10px] font-semibold uppercase" style={{ backgroundColor: "rgba(34,197,94,0.12)", color: "#22c55e" }}>Ссылка</span>;
+    return <span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(34,197,94,0.15)", color: "#22c55e" }}>Ссылка</span>;
   };
 
   const Toggle = ({ checked, onChange, label }) => (
@@ -157,15 +157,16 @@ export const SmsCityProfilesPanel = () => {
       <button
         type="button"
         onClick={onChange}
-        className={`relative h-6 w-11 rounded-full transition shrink-0 ${checked ? "bg-[#22c55e]" : "bg-[var(--color-border)]"}`}
+        className={`relative h-5 w-10 rounded-full transition shrink-0 ${checked ? "bg-[#22c55e]" : "bg-[var(--color-border)]"}`}
       >
-        <span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white transition-all ${checked ? "left-[22px]" : "left-0.5"}`} />
+        <span className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all ${checked ? "left-[20px]" : "left-0.5"}`} />
       </button>
-      <span className="text-xs text-[var(--color-text-muted)]">{label}</span>
+      {label && <span className="text-xs text-[var(--color-text)]">{label}</span>}
     </div>
   );
 
-  const modeLabel = (mode) => mode === "notification" ? "Уведомление без ссылки" : "Согласование по ссылке";
+  const inputCls = "w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-strong)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)]";
+  const cardCls = "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3";
 
   return (
     <div className="space-y-4">
@@ -191,58 +192,58 @@ export const SmsCityProfilesPanel = () => {
             {showForm ? "Отмена" : "+ Профиль"}
           </button>
         </div>
-        {message && <span className="text-sm text-[var(--color-text-muted)]">{message}</span>}
+        {message && <span className="text-sm text-[var(--color-text)]">{message}</span>}
       </Panel>
 
       {/* Add/Edit form */}
       {showForm && (
-        <Panel className="p-5 space-y-5">
+        <Panel className="p-5 space-y-4">
           <h3 className="text-sm font-semibold text-[var(--color-text)]">
             {editingId ? "Редактировать профиль" : "Новый профиль города"}
           </h3>
 
-          {/* City */}
-          <div className="space-y-1">
-            <label className="text-xs font-medium text-[var(--color-text-muted)]">Город</label>
-            <select
-              value={formCity}
-              onChange={(e) => setFormCity(e.target.value)}
-              disabled={!!editingId}
-              className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] disabled:opacity-50"
-            >
-              {CRIMEAN_CITIES.map((c) => (
-                <option key={c} value={c}>{c}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* SMS enabled master toggle */}
-          <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
-            <Toggle checked={formSmsEnabled} onChange={() => setFormSmsEnabled(!formSmsEnabled)} label="SMS включены для этого города" />
-            {!formSmsEnabled && (
-              <p className="text-xs text-[var(--color-danger)] mt-2">⚠ Все SMS в этот город отключены</p>
-            )}
+          {/* City + master toggle */}
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-[var(--color-text-muted)]">Город</label>
+              <select
+                value={formCity}
+                onChange={(e) => setFormCity(e.target.value)}
+                disabled={!!editingId}
+                className={`${inputCls} disabled:opacity-50`}
+              >
+                {CRIMEAN_CITIES.map((c) => (
+                  <option key={c} value={c}>{c}</option>
+                ))}
+              </select>
+            </div>
+            <div className={cardCls}>
+              <Toggle checked={formSmsEnabled} onChange={() => setFormSmsEnabled(!formSmsEnabled)} label="SMS включены для города" />
+              {!formSmsEnabled && (
+                <p className="text-xs text-[var(--color-danger)]">⚠ Все SMS в этот город отключены</p>
+              )}
+            </div>
           </div>
 
           {/* Delivery */}
-          <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
+          <div className={cardCls}>
             <div className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">📦 Доставка</div>
             <div className="flex gap-2">
               <button
                 type="button"
                 onClick={() => setFormDeliveryMode("link")}
-                className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
-                  formDeliveryMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.12)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
+                className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
+                  formDeliveryMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.1)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
               >
-                🔗 Ссылка на согласование
+                🔗 Ссылка
               </button>
               <button
                 type="button"
                 onClick={() => setFormDeliveryMode("notification")}
-                className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
-                  formDeliveryMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.12)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
+                className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
+                  formDeliveryMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.1)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
               >
-                📢 Уведомление без ссылки
+                📢 Уведомление
               </button>
             </div>
             {formDeliveryMode === "notification" && (
@@ -251,33 +252,33 @@ export const SmsCityProfilesPanel = () => {
                 onChange={(e) => setFormDeliveryText(e.target.value)}
                 placeholder="Ваш заказ готов. Доставим по графику."
                 rows={2}
-                className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] resize-none"
+                className={`${inputCls} resize-none`}
               />
             )}
             <p className="text-xs text-[var(--color-text-muted)]">
-              {formDeliveryMode === "link" ? "Клиент получит ссылку для выбора даты доставки" : "Клиент получит уведомление — без согласования, без 2-й SMS"}
+              {formDeliveryMode === "link" ? "Клиент получит ссылку для выбора даты доставки" : "Уведомление без ссылки, без 2-й SMS"}
             </p>
           </div>
 
           {/* Pickup */}
-          <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
+          <div className={cardCls}>
             <div className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">🏪 Самовывоз</div>
             <div className="flex gap-2">
               <button
                 type="button"
                 onClick={() => setFormPickupMode("link")}
-                className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
-                  formPickupMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.12)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
+                className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
+                  formPickupMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.1)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
               >
-                🔗 Ссылка на согласование
+                🔗 Ссылка
               </button>
               <button
                 type="button"
                 onClick={() => setFormPickupMode("notification")}
-                className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
-                  formPickupMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.12)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
+                className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
+                  formPickupMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.1)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
               >
-                📢 Уведомление без ссылки
+                📢 Уведомление
               </button>
             </div>
             {formPickupMode === "notification" && (
@@ -286,18 +287,18 @@ export const SmsCityProfilesPanel = () => {
                 onChange={(e) => setFormPickupText(e.target.value)}
                 placeholder="Ваш заказ готов. Заберите со склада."
                 rows={2}
-                className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] resize-none"
+                className={`${inputCls} resize-none`}
               />
             )}
           </div>
 
           {/* Toggles row */}
           <div className="grid gap-3 sm:grid-cols-2">
-            <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
-              <Toggle checked={formSecondSms} onChange={() => setFormSecondSms(!formSecondSms)} label="2-я SMS (повторная отправка)" />
+            <div className={cardCls}>
+              <Toggle checked={formSecondSms} onChange={() => setFormSecondSms(!formSecondSms)} label="2-я SMS (повтор)" />
             </div>
-            <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
-              <Toggle checked={formPaidStorage} onChange={() => setFormPaidStorage(!formPaidStorage)} label="SMS о платном хранении" />
+            <div className={cardCls}>
+              <Toggle checked={formPaidStorage} onChange={() => setFormPaidStorage(!formPaidStorage)} label="SMS: платное хранение" />
             </div>
           </div>
 
@@ -309,7 +310,7 @@ export const SmsCityProfilesPanel = () => {
               value={formNote}
               onChange={(e) => setFormNote(e.target.value)}
               placeholder="Например: Ялта — доставка без согласования"
-              className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)]"
+              className={inputCls}
             />
           </div>
 
@@ -340,28 +341,29 @@ export const SmsCityProfilesPanel = () => {
         ) : (
           <div className="space-y-3">
             {profiles.map((p) => (
-              <div key={p.id} className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
-                {/* Header */}
+              <div key={p.id} className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3">
+                {/* Header row */}
                 <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
                     <span className="text-base font-semibold text-[var(--color-text)]">{p.city}</span>
-                    <Toggle checked={p.sms_enabled} onChange={() => handleQuickToggle(p, "sms_enabled")} label="" />
-                    {!p.sms_enabled && (
-                      <span className="rounded-lg px-2 py-0.5 text-[10px] font-semibold uppercase" style={{ backgroundColor: "rgba(239,68,68,0.12)", color: "#ef4444" }}>SMS отключены</span>
+                    {!p.sms_enabled ? (
+                      <span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(239,68,68,0.15)", color: "#ef4444" }}>SMS OFF</span>
+                    ) : (
+                      <span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(34,197,94,0.15)", color: "#22c55e" }}>SMS ON</span>
                     )}
                   </div>
                   <div className="flex items-center gap-2">
                     <button
                       type="button"
                       onClick={() => handleEdit(p)}
-                      className="rounded-lg border border-[var(--color-border)] px-2 py-1 text-xs font-medium text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
+                      className="rounded-lg border border-[var(--color-border)] px-2.5 py-1 text-xs font-medium text-[var(--color-text)] hover:bg-[var(--color-surface)]"
                     >
                       ✏️ Изменить
                     </button>
                     <button
                       type="button"
                       onClick={() => handleDelete(p.id)}
-                      className="rounded-lg p-1.5 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-danger)]"
+                      className="rounded-lg p-1.5 text-[var(--color-text-muted)] hover:bg-[var(--color-surface)] hover:text-[var(--color-danger)]"
                       title="Удалить"
                     >
                       ✕
@@ -370,41 +372,41 @@ export const SmsCityProfilesPanel = () => {
                 </div>
 
                 {/* Config grid */}
-                <div className="grid gap-2 sm:grid-cols-2 text-xs">
+                <div className="grid gap-2 sm:grid-cols-2">
                   {/* Delivery */}
-                  <div className="rounded-lg bg-[var(--color-bg)] p-3 space-y-1">
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium text-[var(--color-text)]">📦 Доставка:</span>
+                  <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-3 space-y-1.5">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="text-xs font-medium text-[var(--color-text)]">📦 Доставка</span>
                       <ModeBadge mode={p.delivery_mode} />
                     </div>
                     {p.delivery_text && (
-                      <p className="text-[var(--color-text-muted)] italic">"{p.delivery_text}"</p>
+                      <p className="text-xs text-[var(--color-text-muted)] italic leading-snug">"{p.delivery_text}"</p>
                     )}
                   </div>
                   {/* Pickup */}
-                  <div className="rounded-lg bg-[var(--color-bg)] p-3 space-y-1">
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium text-[var(--color-text)]">🏪 Самовывоз:</span>
+                  <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-3 space-y-1.5">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="text-xs font-medium text-[var(--color-text)]">🏪 Самовывоз</span>
                       <ModeBadge mode={p.pickup_mode} />
                     </div>
                     {p.pickup_text && (
-                      <p className="text-[var(--color-text-muted)] italic">"{p.pickup_text}"</p>
+                      <p className="text-xs text-[var(--color-text-muted)] italic leading-snug">"{p.pickup_text}"</p>
                     )}
                   </div>
                 </div>
 
-                {/* Toggles */}
-                <div className="flex items-center gap-4 text-xs">
-                  <span className={`font-medium ${p.second_sms_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)] line-through"}`}>
+                {/* Toggles row */}
+                <div className="flex flex-wrap items-center gap-4 pt-1 border-t border-[var(--color-border)]">
+                  <span className={`text-xs font-medium ${p.second_sms_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}`}>
                     2-я SMS: {p.second_sms_enabled ? "✅" : "❌"}
                   </span>
-                  <span className={`font-medium ${p.paid_storage_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)] line-through"}`}>
+                  <span className={`text-xs font-medium ${p.paid_storage_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}`}>
                     Платное хранение: {p.paid_storage_enabled ? "✅" : "❌"}
                   </span>
                 </div>
 
                 {p.note && (
-                  <p className="text-xs text-[var(--color-text-muted)]">💬 {p.note}</p>
+                  <p className="text-xs text-[var(--color-text-muted)] pt-1">💬 {p.note}</p>
                 )}
               </div>
             ))}