feat: add status workflow to MC and Open Day bookings, refactor into separate files

- DB migration v12: add status column to mc_registrations and open_day_bookings
- MC and Open Day tabs now have full status workflow (new → contacted → confirmed/declined)
- Filter tabs with counts, status badges, action buttons matching group bookings
- Extract shared components (_shared.tsx): FilterTabs, StatusBadge, StatusActions, BookingCard, ContactLinks
- Split monolith into _McRegistrationsTab.tsx, _OpenDayBookingsTab.tsx, _shared.tsx

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/admin/bookings/page.tsx

@@ -2,8 +2,17 @@
 
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
-import { Loader2, Trash2, Phone, Instagram, Send, ChevronDown, ChevronRight, Bell, CheckCircle2, XCircle, Clock, Star, Calendar, DoorOpen, X } from "lucide-react";
+import { Phone, Instagram, Send, ChevronDown, ChevronRight, Bell, CheckCircle2, XCircle, Clock, Star, Calendar, DoorOpen, X } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
+import {
+  type BookingStatus, type BookingFilter,
+  BOOKING_STATUSES, SHORT_DAYS,
+  LoadingSpinner, EmptyState, DeleteBtn, ContactLinks,
+  FilterTabs, StatusBadge, StatusActions, BookingCard,
+  fmtDate, countStatuses,
+} from "./_shared";
+import { McRegistrationsTab } from "./_McRegistrationsTab";
+import { OpenDayBookingsTab } from "./_OpenDayBookingsTab";
 
 // --- Types ---
 
@@ -23,50 +32,7 @@ interface GroupBooking {
   createdAt: string;
 }
 
-interface McRegistration {
-  id: number;
-  masterClassTitle: string;
-  name: string;
-  phone?: string;
-  instagram: string;
-  telegram?: string;
-  notifiedConfirm: boolean;
-  notifiedReminder: boolean;
-  createdAt: string;
-}
-
-interface OpenDayBooking {
-  id: number;
-  classId: number;
-  eventId: number;
-  name: string;
-  phone: string;
-  instagram?: string;
-  telegram?: string;
-  notifiedConfirm: boolean;
-  notifiedReminder: boolean;
-  createdAt: string;
-  classStyle?: string;
-  classTrainer?: string;
-  classTime?: string;
-  classHall?: string;
-}
-
-const SHORT_DAYS: Record<string, string> = {
-  "Понедельник": "ПН", "Вторник": "ВТ", "Среда": "СР", "Четверг": "ЧТ",
-  "Пятница": "ПТ", "Суббота": "СБ", "Воскресенье": "ВС",
-};
-
 type Tab = "reminders" | "classes" | "master-classes" | "open-day";
-type BookingStatus = "new" | "contacted" | "confirmed" | "declined";
-type BookingFilter = "all" | BookingStatus;
-
-const BOOKING_STATUSES: { key: BookingStatus; label: string; color: string; bg: string; border: string }[] = [
-  { key: "new", label: "Новая", color: "text-gold", bg: "bg-gold/10", border: "border-gold/30" },
-  { key: "contacted", label: "Связались", color: "text-blue-400", bg: "bg-blue-500/10", border: "border-blue-500/30" },
-  { key: "confirmed", label: "Подтверждено", color: "text-emerald-400", bg: "bg-emerald-500/10", border: "border-emerald-500/30" },
-  { key: "declined", label: "Отказ", color: "text-red-400", bg: "bg-red-500/10", border: "border-red-500/30" },
-];
 
 // --- Confirm Booking Modal ---
 
@@ -465,219 +431,6 @@ function GroupBookingsTab() {
   );
 }
 
-// --- MC Registrations Tab ---
-
-function McRegistrationsTab() {
-  const [regs, setRegs] = useState<McRegistration[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    adminFetch("/api/admin/mc-registrations")
-      .then((r) => r.json())
-      .then((data: McRegistration[]) => setRegs(data))
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
-  // Group by MC title
-  const grouped = useMemo(() => {
-    const map: Record<string, McRegistration[]> = {};
-    for (const r of regs) {
-      if (!map[r.masterClassTitle]) map[r.masterClassTitle] = [];
-      map[r.masterClassTitle].push(r);
-    }
-    return map;
-  }, [regs]);
-
-  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-  function toggleExpand(key: string) {
-    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
-  }
-
-  async function handleDelete(id: number) {
-    await adminFetch(`/api/admin/mc-registrations?id=${id}`, { method: "DELETE" });
-    setRegs((prev) => prev.filter((r) => r.id !== id));
-  }
-
-  if (loading) return <LoadingSpinner />;
-
-  return (
-    <div className="space-y-2">
-      {Object.keys(grouped).length === 0 && <EmptyState total={regs.length} />}
-      {Object.entries(grouped).map(([title, items]) => {
-        const isOpen = expanded[title] ?? false;
-        return (
-          <div key={title} className="rounded-xl border border-white/10 overflow-hidden">
-            <button
-              onClick={() => toggleExpand(title)}
-              className="w-full flex items-center gap-3 px-4 py-3 bg-neutral-900 hover:bg-neutral-800/80 transition-colors text-left"
-            >
-              {isOpen ? <ChevronDown size={14} className="text-neutral-500 shrink-0" /> : <ChevronRight size={14} className="text-neutral-500 shrink-0" />}
-              <span className="font-medium text-white text-sm truncate">{title}</span>
-              <span className="text-[10px] text-neutral-500 bg-neutral-800 rounded-full px-2 py-0.5 shrink-0">{items.length}</span>
-            </button>
-            {isOpen && (
-              <div className="px-4 pb-3 pt-1 space-y-1.5">
-                {items.map((r) => (
-                  <div
-                    key={r.id}
-                    className="rounded-lg border border-white/5 bg-neutral-800/30 p-3"
-                  >
-                      <div className="flex items-center gap-2 flex-wrap text-sm">
-                        <span className="font-medium text-white">{r.name}</span>
-                        {r.phone && (
-                          <a href={`tel:${r.phone.replace(/\D/g, "")}`} className="inline-flex items-center gap-1 text-emerald-400 hover:text-emerald-300 text-xs">
-                            <Phone size={10} />{r.phone}
-                          </a>
-                        )}
-                        {r.instagram && (
-                          <a
-                            href={`https://ig.me/m/${r.instagram.replace(/^@/, "")}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-1 text-pink-400 hover:text-pink-300 text-xs"
-                          >
-                            <Instagram size={10} />{r.instagram}
-                          </a>
-                        )}
-                        {r.telegram && (
-                          <a
-                            href={`https://t.me/${r.telegram.replace(/^@/, "")}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-1 text-blue-400 hover:text-blue-300 text-xs"
-                          >
-                            <Send size={10} />{r.telegram}
-                          </a>
-                        )}
-                        <span className="text-neutral-600 text-xs ml-auto">{fmtDate(r.createdAt)}</span>
-                        <DeleteBtn onClick={() => handleDelete(r.id)} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
-// --- Open Day Bookings Tab ---
-
-function OpenDayBookingsTab() {
-  const [bookings, setBookings] = useState<OpenDayBooking[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    adminFetch("/api/admin/open-day")
-      .then((r) => r.json())
-      .then((events: { id: number; date: string }[]) => {
-        if (events.length === 0) {
-          setLoading(false);
-          return;
-        }
-        const ev = events[0];
-        return adminFetch(`/api/admin/open-day/bookings?eventId=${ev.id}`)
-          .then((r) => r.json())
-          .then((data: OpenDayBooking[]) => setBookings(data));
-      })
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
-  // Group by class — sorted by hall then time
-  const grouped = useMemo(() => {
-    const map: Record<string, { hall: string; time: string; style: string; trainer: string; items: OpenDayBooking[] }> = {};
-    for (const b of bookings) {
-      const key = `${b.classHall}|${b.classTime}|${b.classStyle}`;
-      if (!map[key]) map[key] = { hall: b.classHall || "—", time: b.classTime || "—", style: b.classStyle || "—", trainer: b.classTrainer || "—", items: [] };
-      map[key].items.push(b);
-    }
-    // Sort by hall, then time
-    return Object.entries(map).sort(([, a], [, b]) => {
-      const hallCmp = a.hall.localeCompare(b.hall);
-      return hallCmp !== 0 ? hallCmp : a.time.localeCompare(b.time);
-    });
-  }, [bookings]);
-
-  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-  function toggleExpand(key: string) {
-    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
-  }
-
-  async function handleDelete(id: number) {
-    await adminFetch(`/api/admin/open-day/bookings?id=${id}`, { method: "DELETE" });
-    setBookings((prev) => prev.filter((b) => b.id !== id));
-  }
-
-  if (loading) return <LoadingSpinner />;
-
-  return (
-    <div className="space-y-2">
-      {grouped.length === 0 && <EmptyState total={bookings.length} />}
-      {grouped.map(([key, group]) => {
-        const isOpen = expanded[key] ?? false;
-        return (
-          <div key={key} className="rounded-xl border border-white/10 overflow-hidden">
-            <button
-              onClick={() => toggleExpand(key)}
-              className="w-full flex items-center gap-3 px-4 py-3 bg-neutral-900 hover:bg-neutral-800/80 transition-colors text-left"
-            >
-              {isOpen ? <ChevronDown size={14} className="text-neutral-500 shrink-0" /> : <ChevronRight size={14} className="text-neutral-500 shrink-0" />}
-              <span className="text-gold text-xs font-medium shrink-0">{group.time}</span>
-              <span className="font-medium text-white text-sm truncate">{group.style}</span>
-              <span className="text-xs text-neutral-500 truncate hidden sm:inline">· {group.trainer}</span>
-              <span className="text-[10px] text-neutral-500 bg-neutral-800 rounded-full px-2 py-0.5 shrink-0 ml-auto">{group.hall}</span>
-              <span className="text-[10px] text-neutral-500 bg-neutral-800 rounded-full px-2 py-0.5 shrink-0">{group.items.length} чел.</span>
-            </button>
-            {isOpen && (
-              <div className="px-4 pb-3 pt-1 space-y-1.5">
-                {group.items.map((b) => (
-                  <div
-                    key={b.id}
-                    className="rounded-lg border border-white/5 bg-neutral-800/30 p-3"
-                  >
-                      <div className="flex items-center gap-2 flex-wrap text-sm">
-                        <span className="font-medium text-white">{b.name}</span>
-                        <a href={`tel:${b.phone}`} className="inline-flex items-center gap-1 text-emerald-400 hover:text-emerald-300 text-xs">
-                          <Phone size={10} />{b.phone}
-                        </a>
-                        {b.instagram && (
-                          <a
-                            href={`https://ig.me/m/${b.instagram.replace(/^@/, "")}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-1 text-pink-400 hover:text-pink-300 text-xs"
-                          >
-                            <Instagram size={10} />{b.instagram}
-                          </a>
-                        )}
-                        {b.telegram && (
-                          <a
-                            href={`https://t.me/${b.telegram.replace(/^@/, "")}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-1 text-blue-400 hover:text-blue-300 text-xs"
-                          >
-                            <Send size={10} />{b.telegram}
-                          </a>
-                        )}
-                        <span className="text-neutral-600 text-xs ml-auto">{fmtDate(b.createdAt)}</span>
-                        <DeleteBtn onClick={() => handleDelete(b.id)} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
 // --- Reminders Tab ---
 
 interface ReminderItem {
@@ -891,42 +644,6 @@ function RemindersTab() {
   );
 }
 
-// --- Shared helpers ---
-
-function LoadingSpinner() {
-  return (
-    <div className="flex items-center gap-2 py-8 text-neutral-500 justify-center">
-      <Loader2 size={16} className="animate-spin" />
-      Загрузка...
-    </div>
-  );
-}
-
-function EmptyState({ total }: { total: number }) {
-  return (
-    <p className="text-sm text-neutral-500 py-8 text-center">
-      {total === 0 ? "Пока нет записей" : "Нет записей по фильтру"}
-    </p>
-  );
-}
-
-function DeleteBtn({ onClick }: { onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="rounded p-1 text-neutral-500 hover:text-red-400 transition-colors"
-      title="Удалить"
-    >
-      <Trash2 size={14} />
-    </button>
-  );
-}
-
-function fmtDate(iso: string): string {
-  return new Date(iso).toLocaleDateString("ru-RU");
-}
-
 // --- Main Page ---
 
 const TABS: { key: Tab; label: string }[] = [