feat: pricing admin — collapsible sections, card collapse, remove contact toggle

src/app/admin/pricing/page.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
 import { SectionEditor } from "../_components/SectionEditor";
 import { InputField, SelectField } from "../_components/FormField";
 import { ArrayEditor } from "../_components/ArrayEditor";
@@ -23,7 +25,6 @@ interface PricingData {
 }
 
 function PriceField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
-  // Strip "BYN" suffix for editing, add back on save
   const raw = value.replace(/\s*BYN\s*$/i, "").trim();
 
   return (
@@ -48,157 +49,205 @@ function PriceField({ label, value, onChange }: { label: string; value: string;
   );
 }
 
+function CollapsibleSection({
+  title,
+  count,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  count?: number;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-xl border border-white/10 bg-neutral-900/30 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-between w-full px-5 py-3.5 text-left cursor-pointer group hover:bg-white/[0.02] transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-white transition-colors">{title}</h3>
+          {count !== undefined && (
+            <span className="text-xs text-neutral-500">{count}</span>
+          )}
+        </div>
+        <ChevronDown
+          size={16}
+          className={`text-neutral-500 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+      <div
+        className="grid transition-[grid-template-rows] duration-300 ease-out"
+        style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
+      >
+        <div className="overflow-hidden">
+          <div className="px-5 pb-5 space-y-4">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function PricingEditorPage() {
   return (
     <SectionEditor<PricingData> sectionKey="pricing" title="Цены">
       {(data, update) => (
-        <>
-          <InputField
-            label="Заголовок секции"
-            value={data.title}
-            onChange={(v) => update({ ...data, title: v })}
-          />
-          <InputField
-            label="Подзаголовок"
-            value={data.subtitle}
-            onChange={(v) => update({ ...data, subtitle: v })}
-          />
+        <div className="space-y-4">
+          <div className="grid gap-3 sm:grid-cols-2">
+            <InputField
+              label="Заголовок секции"
+              value={data.title}
+              onChange={(v) => update({ ...data, title: v })}
+            />
+            <InputField
+              label="Подзаголовок"
+              value={data.subtitle}
+              onChange={(v) => update({ ...data, subtitle: v })}
+            />
+          </div>
 
-          <label className="inline-flex items-center gap-2 cursor-pointer select-none">
-            <button
-              type="button"
-              role="switch"
-              aria-checked={data.showContactHint !== false}
-              onClick={() => update({ ...data, showContactHint: data.showContactHint === false })}
-              className={`relative h-5 w-9 rounded-full transition-colors ${
-                data.showContactHint !== false ? "bg-gold" : "bg-neutral-600"
-              }`}
-            >
-              <span
-                className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
-                  data.showContactHint !== false ? "translate-x-4" : ""
-                }`}
-              />
-            </button>
-            <span className="text-sm text-neutral-400">Показывать контакты для записи (Instagram, Telegram, телефон)</span>
-          </label>
+          {/* Абонементы */}
+          <CollapsibleSection title="Абонементы" count={data.items.length}>
+            {(() => {
+              const itemOptions = data.items
+                .map((it, idx) => ({ value: String(idx), label: it.name }))
+                .filter((o) => o.label.trim() !== "");
+              const noneOption = { value: "", label: "— Нет —" };
+              const featuredIdx = data.items.findIndex((it) => it.featured);
 
-          {/* Featured selector */}
-          {(() => {
-            const itemOptions = data.items
-              .map((it, idx) => ({ value: String(idx), label: it.name }))
-              .filter((o) => o.label.trim() !== "");
-            const noneOption = { value: "", label: "— Нет —" };
-            const featuredIdx = data.items.findIndex((it) => it.featured);
+              return (
+                <SelectField
+                  label="Выделенный абонемент (безлимит)"
+                  value={featuredIdx >= 0 ? String(featuredIdx) : ""}
+                  onChange={(v) => {
+                    const items = data.items.map((it, idx) => ({
+                      ...it,
+                      featured: v ? idx === Number(v) : false,
+                    }));
+                    update({ ...data, items });
+                  }}
+                  options={[noneOption, ...itemOptions]}
+                  placeholder="Выберите..."
+                />
+              );
+            })()}
 
-            return (
-              <SelectField
-                label="Выделенный абонемент (безлимит)"
-                value={featuredIdx >= 0 ? String(featuredIdx) : ""}
-                onChange={(v) => {
-                  const items = data.items.map((it, idx) => ({
-                    ...it,
-                    featured: v ? idx === Number(v) : false,
-                  }));
-                  update({ ...data, items });
-                }}
-                options={[noneOption, ...itemOptions]}
-                placeholder="Выберите..."
-              />
-            );
-          })()}
-
-          <ArrayEditor
-            label="Абонементы"
-            items={data.items}
-            onChange={(items) => update({ ...data, items })}
-            renderItem={(item, _i, updateItem) => (
-              <div className="space-y-3">
-                <div className="grid gap-3 sm:grid-cols-3">
-                  <InputField
-                    label="Название"
-                    value={item.name}
-                    onChange={(v) => updateItem({ ...item, name: v })}
-                  />
-                  <PriceField
-                    label="Цена"
-                    value={item.price}
-                    onChange={(v) => updateItem({ ...item, price: v })}
-                  />
+            <ArrayEditor
+              items={data.items}
+              onChange={(items) => update({ ...data, items })}
+              collapsible
+              getItemTitle={(item) => item.name || "Без названия"}
+              getItemBadge={(item) =>
+                item.popular ? (
+                  <span className="shrink-0 rounded-full bg-gold/20 px-2 py-0.5 text-[10px] font-medium text-gold">
+                    Популярный
+                  </span>
+                ) : null
+              }
+              renderItem={(item, _i, updateItem) => (
+                <div className="space-y-3">
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <InputField
+                      label="Название"
+                      value={item.name}
+                      onChange={(v) => updateItem({ ...item, name: v })}
+                    />
+                    <PriceField
+                      label="Цена"
+                      value={item.price}
+                      onChange={(v) => updateItem({ ...item, price: v })}
+                    />
+                  </div>
                   <InputField
                     label="Примечание"
                     value={item.note || ""}
-                    onChange={(v) => updateItem({ ...item, note: v })}
+                    onChange={(v) => updateItem({ ...item, note: v || undefined })}
+                    placeholder="Например: 8 занятий, срок 30 дней"
+                  />
+                  <label className="inline-flex items-center gap-2 cursor-pointer select-none">
+                    <button
+                      type="button"
+                      role="switch"
+                      aria-checked={!!item.popular}
+                      onClick={() => updateItem({ ...item, popular: !item.popular })}
+                      className={`relative h-5 w-9 rounded-full transition-colors ${
+                        item.popular ? "bg-gold" : "bg-neutral-600"
+                      }`}
+                    >
+                      <span
+                        className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
+                          item.popular ? "translate-x-4" : ""
+                        }`}
+                      />
+                    </button>
+                    <span className="text-sm text-neutral-400">Популярный</span>
+                  </label>
+                </div>
+              )}
+              createItem={() => ({ name: "", price: "", note: "" })}
+              addLabel="Добавить абонемент"
+            />
+          </CollapsibleSection>
+
+          {/* Аренда */}
+          <CollapsibleSection title="Аренда" count={data.rentalItems.length}>
+            <InputField
+              label="Заголовок"
+              value={data.rentalTitle}
+              onChange={(v) => update({ ...data, rentalTitle: v })}
+            />
+
+            <ArrayEditor
+              items={data.rentalItems}
+              onChange={(rentalItems) => update({ ...data, rentalItems })}
+              collapsible
+              getItemTitle={(item) => item.name || "Без названия"}
+              renderItem={(item, _i, updateItem) => (
+                <div className="space-y-3">
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <InputField
+                      label="Название"
+                      value={item.name}
+                      onChange={(v) => updateItem({ ...item, name: v })}
+                    />
+                    <PriceField
+                      label="Цена"
+                      value={item.price}
+                      onChange={(v) => updateItem({ ...item, price: v })}
+                    />
+                  </div>
+                  <InputField
+                    label="Примечание"
+                    value={item.note || ""}
+                    onChange={(v) => updateItem({ ...item, note: v || undefined })}
+                    placeholder="Например: за 1 час"
                   />
                 </div>
-                <label className="inline-flex items-center gap-2 cursor-pointer select-none">
-                  <button
-                    type="button"
-                    role="switch"
-                    aria-checked={!!item.popular}
-                    onClick={() => updateItem({ ...item, popular: !item.popular })}
-                    className={`relative h-5 w-9 rounded-full transition-colors ${
-                      item.popular ? "bg-gold" : "bg-neutral-600"
-                    }`}
-                  >
-                    <span
-                      className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
-                        item.popular ? "translate-x-4" : ""
-                      }`}
-                    />
-                  </button>
-                  <span className="text-sm text-neutral-400">Популярный</span>
-                </label>
-              </div>
-            )}
-            createItem={() => ({ name: "", price: "", note: "" })}
-            addLabel="Добавить абонемент"
-          />
+              )}
+              createItem={() => ({ name: "", price: "", note: "" })}
+              addLabel="Добавить вариант аренды"
+            />
+          </CollapsibleSection>
 
-          <InputField
-            label="Заголовок аренды"
-            value={data.rentalTitle}
-            onChange={(v) => update({ ...data, rentalTitle: v })}
-          />
-
-          <ArrayEditor
-            label="Аренда"
-            items={data.rentalItems}
-            onChange={(rentalItems) => update({ ...data, rentalItems })}
-            renderItem={(item, _i, updateItem) => (
-              <div className="grid gap-3 sm:grid-cols-3">
-                <InputField
-                  label="Название"
-                  value={item.name}
-                  onChange={(v) => updateItem({ ...item, name: v })}
-                />
-                <PriceField
-                  label="Цена"
-                  value={item.price}
-                  onChange={(v) => updateItem({ ...item, price: v })}
-                />
-                <InputField
-                  label="Примечание"
-                  value={item.note || ""}
-                  onChange={(v) => updateItem({ ...item, note: v })}
-                />
-              </div>
-            )}
-            createItem={() => ({ name: "", price: "", note: "" })}
-            addLabel="Добавить вариант аренды"
-          />
-
-          <ArrayEditor
-            label="Правила"
-            items={data.rules}
-            onChange={(rules) => update({ ...data, rules })}
-            renderItem={(rule, _i, updateItem) => (
-              <InputField label="Правило" value={rule} onChange={updateItem} />
-            )}
-            createItem={() => ""}
-            addLabel="Добавить правило"
-          />
-        </>
+          {/* Правила */}
+          <CollapsibleSection title="Правила" count={data.rules.length} defaultOpen={false}>
+            <ArrayEditor
+              items={data.rules}
+              onChange={(rules) => update({ ...data, rules })}
+              renderItem={(rule, _i, updateItem) => (
+                <InputField label="Правило" value={rule} onChange={updateItem} />
+              )}
+              createItem={() => ""}
+              addLabel="Добавить правило"
+            />
+          </CollapsibleSection>
+        </div>
       )}
     </SectionEditor>
   );