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,11 +49,57 @@ 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) => (
-        <>
+        <div className="space-y-4">
+          <div className="grid gap-3 sm:grid-cols-2">
             <InputField
               label="Заголовок секции"
               value={data.title}
@@ -63,27 +110,10 @@ export default function PricingEditorPage() {
               value={data.subtitle}
               onChange={(v) => update({ ...data, subtitle: v })}
             />
+          </div>
 
-          <label className="inline-flex items-center gap-2 cursor-pointer select-none">
+          {/* Абонементы */}
-            <button
+          <CollapsibleSection title="Абонементы" count={data.items.length}>
-              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>
-
-          {/* Featured selector */}
             {(() => {
               const itemOptions = data.items
                 .map((it, idx) => ({ value: String(idx), label: it.name }))
@@ -109,12 +139,20 @@ export default function PricingEditorPage() {
             })()}
 
             <ArrayEditor
-            label="Абонементы"
               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-3">
+                  <div className="grid gap-3 sm:grid-cols-2">
                     <InputField
                       label="Название"
                       value={item.name}
@@ -125,12 +163,13 @@ export default function PricingEditorPage() {
                       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 дней"
                   />
-                </div>
                   <label className="inline-flex items-center gap-2 cursor-pointer select-none">
                     <button
                       type="button"
@@ -154,19 +193,24 @@ export default function PricingEditorPage() {
               createItem={() => ({ name: "", price: "", note: "" })}
               addLabel="Добавить абонемент"
             />
+          </CollapsibleSection>
 
+          {/* Аренда */}
+          <CollapsibleSection title="Аренда" count={data.rentalItems.length}>
             <InputField
-            label="Заголовок аренды"
+              label="Заголовок"
               value={data.rentalTitle}
               onChange={(v) => update({ ...data, rentalTitle: v })}
             />
 
             <ArrayEditor
-            label="Аренда"
               items={data.rentalItems}
               onChange={(rentalItems) => update({ ...data, rentalItems })}
+              collapsible
+              getItemTitle={(item) => item.name || "Без названия"}
               renderItem={(item, _i, updateItem) => (
-              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="space-y-3">
+                  <div className="grid gap-3 sm:grid-cols-2">
                     <InputField
                       label="Название"
                       value={item.name}
@@ -177,19 +221,23 @@ export default function PricingEditorPage() {
                       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="Например: за 1 час"
                   />
                 </div>
               )}
               createItem={() => ({ name: "", price: "", note: "" })}
               addLabel="Добавить вариант аренды"
             />
+          </CollapsibleSection>
 
+          {/* Правила */}
+          <CollapsibleSection title="Правила" count={data.rules.length} defaultOpen={false}>
             <ArrayEditor
-            label="Правила"
               items={data.rules}
               onChange={(rules) => update({ ...data, rules })}
               renderItem={(rule, _i, updateItem) => (
@@ -198,7 +246,8 @@ export default function PricingEditorPage() {
               createItem={() => ""}
               addLabel="Добавить правило"
             />
-        </>
+          </CollapsibleSection>
+        </div>
       )}
     </SectionEditor>
   );