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>
This commit is contained in:
124
src/app/admin/bookings/_McRegistrationsTab.tsx
Normal file
124
src/app/admin/bookings/_McRegistrationsTab.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import {
|
||||
type BookingStatus, type BookingFilter,
|
||||
LoadingSpinner, EmptyState, DeleteBtn, ContactLinks,
|
||||
FilterTabs, StatusBadge, StatusActions, BookingCard,
|
||||
fmtDate, countStatuses, sortByStatus,
|
||||
} from "./_shared";
|
||||
|
||||
interface McRegistration {
|
||||
id: number;
|
||||
masterClassTitle: string;
|
||||
name: string;
|
||||
phone?: string;
|
||||
instagram?: string;
|
||||
telegram?: string;
|
||||
status: BookingStatus;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export function McRegistrationsTab() {
|
||||
const [regs, setRegs] = useState<McRegistration[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<BookingFilter>("all");
|
||||
|
||||
useEffect(() => {
|
||||
adminFetch("/api/admin/mc-registrations")
|
||||
.then((r) => r.json())
|
||||
.then((data: McRegistration[]) => setRegs(data))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const counts = useMemo(() => countStatuses(regs), [regs]);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const map: Record<string, McRegistration[]> = {};
|
||||
for (const r of regs) {
|
||||
if (filter !== "all" && r.status !== filter) continue;
|
||||
if (!map[r.masterClassTitle]) map[r.masterClassTitle] = [];
|
||||
map[r.masterClassTitle].push(r);
|
||||
}
|
||||
for (const items of Object.values(map)) {
|
||||
const sorted = sortByStatus(items);
|
||||
items.length = 0;
|
||||
items.push(...sorted);
|
||||
}
|
||||
return map;
|
||||
}, [regs, filter]);
|
||||
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||||
|
||||
async function handleStatus(id: number, status: BookingStatus) {
|
||||
setRegs((prev) => prev.map((r) => r.id === id ? { ...r, status } : r));
|
||||
await adminFetch("/api/admin/mc-registrations", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "set-status", id, status }),
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
<FilterTabs filter={filter} counts={counts} total={regs.length} onFilter={setFilter} />
|
||||
|
||||
<div className="mt-3 space-y-2">
|
||||
{Object.keys(grouped).length === 0 && <EmptyState total={regs.length} />}
|
||||
{Object.entries(grouped).map(([title, items]) => {
|
||||
const isOpen = expanded[title] ?? true;
|
||||
const groupCounts = countStatuses(items);
|
||||
return (
|
||||
<div key={title} className="rounded-xl border border-white/10 overflow-hidden">
|
||||
<button
|
||||
onClick={() => setExpanded((p) => ({ ...p, [title]: !isOpen }))}
|
||||
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>
|
||||
<div className="flex gap-2 ml-auto text-[10px]">
|
||||
{groupCounts.new > 0 && <span className="text-gold">{groupCounts.new} новых</span>}
|
||||
{groupCounts.contacted > 0 && <span className="text-blue-400">{groupCounts.contacted} связ.</span>}
|
||||
{groupCounts.confirmed > 0 && <span className="text-emerald-400">{groupCounts.confirmed} подтв.</span>}
|
||||
</div>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="px-4 pb-3 pt-1 space-y-2">
|
||||
{items.map((r) => (
|
||||
<BookingCard key={r.id} status={r.status}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-2 flex-wrap text-sm min-w-0">
|
||||
<span className="font-medium text-white">{r.name}</span>
|
||||
<ContactLinks phone={r.phone} instagram={r.instagram} telegram={r.telegram} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span className="text-neutral-600 text-xs">{fmtDate(r.createdAt)}</span>
|
||||
<DeleteBtn onClick={() => handleDelete(r.id)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 flex-wrap">
|
||||
<StatusBadge status={r.status} />
|
||||
<StatusActions status={r.status} onStatus={(s) => handleStatus(r.id, s)} />
|
||||
</div>
|
||||
</BookingCard>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
144
src/app/admin/bookings/_OpenDayBookingsTab.tsx
Normal file
144
src/app/admin/bookings/_OpenDayBookingsTab.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import {
|
||||
type BookingStatus, type BookingFilter,
|
||||
LoadingSpinner, EmptyState, DeleteBtn, ContactLinks,
|
||||
FilterTabs, StatusBadge, StatusActions, BookingCard,
|
||||
fmtDate, countStatuses, sortByStatus,
|
||||
} from "./_shared";
|
||||
|
||||
interface OpenDayBooking {
|
||||
id: number;
|
||||
classId: number;
|
||||
eventId: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
instagram?: string;
|
||||
telegram?: string;
|
||||
status: BookingStatus;
|
||||
createdAt: string;
|
||||
classStyle?: string;
|
||||
classTrainer?: string;
|
||||
classTime?: string;
|
||||
classHall?: string;
|
||||
}
|
||||
|
||||
export function OpenDayBookingsTab() {
|
||||
const [bookings, setBookings] = useState<OpenDayBooking[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<BookingFilter>("all");
|
||||
|
||||
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));
|
||||
}, []);
|
||||
|
||||
const counts = useMemo(() => countStatuses(bookings), [bookings]);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const filtered = filter === "all" ? bookings : bookings.filter((b) => b.status === filter);
|
||||
const map: Record<string, { hall: string; time: string; style: string; trainer: string; items: OpenDayBooking[] }> = {};
|
||||
for (const b of filtered) {
|
||||
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);
|
||||
}
|
||||
for (const g of Object.values(map)) {
|
||||
const sorted = sortByStatus(g.items);
|
||||
g.items.length = 0;
|
||||
g.items.push(...sorted);
|
||||
}
|
||||
return Object.entries(map).sort(([, a], [, b]) => {
|
||||
const hallCmp = a.hall.localeCompare(b.hall);
|
||||
return hallCmp !== 0 ? hallCmp : a.time.localeCompare(b.time);
|
||||
});
|
||||
}, [bookings, filter]);
|
||||
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||||
|
||||
async function handleStatus(id: number, status: BookingStatus) {
|
||||
setBookings((prev) => prev.map((b) => b.id === id ? { ...b, status } : b));
|
||||
await adminFetch("/api/admin/open-day/bookings", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "set-status", id, status }),
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
<FilterTabs filter={filter} counts={counts} total={bookings.length} onFilter={setFilter} />
|
||||
|
||||
<div className="mt-3 space-y-2">
|
||||
{grouped.length === 0 && <EmptyState total={bookings.length} />}
|
||||
{grouped.map(([key, group]) => {
|
||||
const isOpen = expanded[key] ?? true;
|
||||
const groupCounts = countStatuses(group.items);
|
||||
return (
|
||||
<div key={key} className="rounded-xl border border-white/10 overflow-hidden">
|
||||
<button
|
||||
onClick={() => setExpanded((p) => ({ ...p, [key]: !isOpen }))}
|
||||
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>
|
||||
<div className="flex gap-2 text-[10px] shrink-0">
|
||||
{groupCounts.new > 0 && <span className="text-gold">{groupCounts.new} нов.</span>}
|
||||
{groupCounts.confirmed > 0 && <span className="text-emerald-400">{groupCounts.confirmed} подтв.</span>}
|
||||
</div>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="px-4 pb-3 pt-1 space-y-2">
|
||||
{group.items.map((b) => (
|
||||
<BookingCard key={b.id} status={b.status}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-2 flex-wrap text-sm min-w-0">
|
||||
<span className="font-medium text-white">{b.name}</span>
|
||||
<ContactLinks phone={b.phone} instagram={b.instagram} telegram={b.telegram} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span className="text-neutral-600 text-xs">{fmtDate(b.createdAt)}</span>
|
||||
<DeleteBtn onClick={() => handleDelete(b.id)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 flex-wrap">
|
||||
<StatusBadge status={b.status} />
|
||||
<StatusActions status={b.status} onStatus={(s) => handleStatus(b.id, s)} />
|
||||
</div>
|
||||
</BookingCard>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
172
src/app/admin/bookings/_shared.tsx
Normal file
172
src/app/admin/bookings/_shared.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2, Trash2, Phone, Instagram, Send } from "lucide-react";
|
||||
|
||||
// --- Types ---
|
||||
|
||||
export type BookingStatus = "new" | "contacted" | "confirmed" | "declined";
|
||||
export type BookingFilter = "all" | BookingStatus;
|
||||
|
||||
export const SHORT_DAYS: Record<string, string> = {
|
||||
"Понедельник": "ПН", "Вторник": "ВТ", "Среда": "СР", "Четверг": "ЧТ",
|
||||
"Пятница": "ПТ", "Суббота": "СБ", "Воскресенье": "ВС",
|
||||
};
|
||||
|
||||
export 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" },
|
||||
];
|
||||
|
||||
// --- Shared Components ---
|
||||
|
||||
export function LoadingSpinner() {
|
||||
return (
|
||||
<div className="flex items-center gap-2 py-8 text-neutral-500 justify-center">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
Загрузка...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function EmptyState({ total }: { total: number }) {
|
||||
return (
|
||||
<p className="text-sm text-neutral-500 py-8 text-center">
|
||||
{total === 0 ? "Пока нет записей" : "Нет записей по фильтру"}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export 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>
|
||||
);
|
||||
}
|
||||
|
||||
export function ContactLinks({ phone, instagram, telegram }: { phone?: string; instagram?: string; telegram?: string }) {
|
||||
return (
|
||||
<>
|
||||
{phone && (
|
||||
<a href={`tel:${phone.replace(/\D/g, "")}`} className="inline-flex items-center gap-1 text-emerald-400 hover:text-emerald-300 text-xs">
|
||||
<Phone size={10} />{phone}
|
||||
</a>
|
||||
)}
|
||||
{instagram && (
|
||||
<a href={`https://ig.me/m/${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} />{instagram}
|
||||
</a>
|
||||
)}
|
||||
{telegram && (
|
||||
<a href={`https://t.me/${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} />{telegram}
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function FilterTabs({ filter, counts, total, onFilter }: {
|
||||
filter: BookingFilter;
|
||||
counts: Record<string, number>;
|
||||
total: number;
|
||||
onFilter: (f: BookingFilter) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<button
|
||||
onClick={() => onFilter("all")}
|
||||
className={`rounded-full px-3 py-1.5 text-xs font-medium transition-all ${
|
||||
filter === "all" ? "bg-gold/20 text-gold border border-gold/40" : "bg-neutral-800 text-neutral-400 border border-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
Все <span className="text-neutral-500 ml-1">{total}</span>
|
||||
</button>
|
||||
{BOOKING_STATUSES.map((s) => (
|
||||
<button
|
||||
key={s.key}
|
||||
onClick={() => onFilter(s.key)}
|
||||
className={`rounded-full px-3 py-1.5 text-xs font-medium transition-all ${
|
||||
filter === s.key ? `${s.bg} ${s.color} border ${s.border}` : "bg-neutral-800 text-neutral-400 border border-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{s.label}
|
||||
{counts[s.key] > 0 && <span className="ml-1.5">{counts[s.key]}</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatusBadge({ status }: { status: BookingStatus }) {
|
||||
const conf = BOOKING_STATUSES.find((s) => s.key === status) || BOOKING_STATUSES[0];
|
||||
return (
|
||||
<span className={`text-[10px] font-medium ${conf.bg} ${conf.color} border ${conf.border} rounded-full px-2.5 py-0.5`}>
|
||||
{conf.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatusActions({ status, onStatus }: { status: BookingStatus; onStatus: (s: BookingStatus) => void }) {
|
||||
return (
|
||||
<div className="flex gap-1 ml-auto">
|
||||
{status === "new" && (
|
||||
<button onClick={() => onStatus("contacted")} className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[10px] font-medium bg-blue-500/10 text-blue-400 border border-blue-500/30 hover:bg-blue-500/20 transition-all">
|
||||
Связались →
|
||||
</button>
|
||||
)}
|
||||
{status === "contacted" && (
|
||||
<>
|
||||
<button onClick={() => onStatus("confirmed")} className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[10px] font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 hover:bg-emerald-500/20 transition-all">
|
||||
Подтвердить
|
||||
</button>
|
||||
<button onClick={() => onStatus("declined")} className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[10px] font-medium bg-red-500/10 text-red-400 border border-red-500/30 hover:bg-red-500/20 transition-all">
|
||||
Отказ
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(status === "confirmed" || status === "declined") && (
|
||||
<button onClick={() => onStatus("contacted")} className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[10px] font-medium bg-neutral-800/50 text-neutral-500 border border-transparent hover:border-white/10 hover:text-neutral-300 transition-all">
|
||||
Вернуть
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookingCard({ status, children }: { status: BookingStatus; children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
className={`rounded-lg border p-3 transition-colors ${
|
||||
status === "declined" ? "border-red-500/15 bg-red-500/[0.02] opacity-50"
|
||||
: status === "confirmed" ? "border-emerald-500/15 bg-emerald-500/[0.02]"
|
||||
: status === "new" ? "border-gold/20 bg-gold/[0.03]"
|
||||
: "border-white/10 bg-neutral-800/30"
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function fmtDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString("ru-RU");
|
||||
}
|
||||
|
||||
export function countStatuses(items: { status: string }[]): Record<string, number> {
|
||||
const c: Record<string, number> = { new: 0, contacted: 0, confirmed: 0, declined: 0 };
|
||||
for (const i of items) c[i.status] = (c[i.status] || 0) + 1;
|
||||
return c;
|
||||
}
|
||||
|
||||
export function sortByStatus<T extends { status: string }>(items: T[]): T[] {
|
||||
const order: Record<string, number> = { new: 0, contacted: 1, confirmed: 2, declined: 3 };
|
||||
return [...items].sort((a, b) => (order[a.status] ?? 0) - (order[b.status] ?? 0));
|
||||
}
|
||||
@@ -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 }[] = [
|
||||
|
||||
Reference in New Issue
Block a user