feat: add booking management, Open Day, unified signup modal
- MC registrations: notification toggles (confirm/remind) with urgency - Group bookings: save to DB from BookingModal, admin CRUD at /admin/bookings - Open Day: full event system with schedule grid (halls × time), per-class booking, discount pricing (30 BYN / 20 BYN from 3+), auto-cancel threshold - Unified SignupModal replaces 3 separate forms — consistent fields (name, phone, instagram, telegram), Instagram DM fallback on network error - Centralized /admin/bookings page with 3 tabs (classes, MC, Open Day), collapsible sections, notification toggles, filter chips - Unread booking badge on sidebar + dashboard widget with per-type breakdown - Pricing: contact hint (Instagram/Telegram/phone) on price & rental tabs, admin toggle to show/hide - DB migrations 5-7: group_bookings table, open_day tables, unified fields Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
71
src/app/admin/_components/NotifyToggle.tsx
Normal file
71
src/app/admin/_components/NotifyToggle.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import { Bell, CheckCircle2 } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
function Toggle({
|
||||
done,
|
||||
urgent,
|
||||
icon: Icon,
|
||||
label,
|
||||
onToggle,
|
||||
}: {
|
||||
done: boolean;
|
||||
urgent: boolean;
|
||||
icon: LucideIcon;
|
||||
label: string;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
title={label}
|
||||
className={`relative flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-all ${
|
||||
done
|
||||
? "bg-emerald-500/15 text-emerald-400 border border-emerald-500/30"
|
||||
: urgent
|
||||
? "bg-red-500/15 text-red-400 border border-red-500/30 pulse-urgent"
|
||||
: "bg-neutral-700/50 text-neutral-400 border border-white/10 hover:border-white/25 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<Icon size={10} />
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function NotifyToggle({
|
||||
confirmed,
|
||||
reminded,
|
||||
confirmUrgent,
|
||||
reminderUrgent,
|
||||
onToggleConfirm,
|
||||
onToggleReminder,
|
||||
}: {
|
||||
confirmed: boolean;
|
||||
reminded: boolean;
|
||||
confirmUrgent?: boolean;
|
||||
reminderUrgent?: boolean;
|
||||
onToggleConfirm: () => void;
|
||||
onToggleReminder: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Toggle
|
||||
done={confirmed}
|
||||
urgent={confirmUrgent ?? !confirmed}
|
||||
icon={CheckCircle2}
|
||||
label="Подтверждение"
|
||||
onToggle={onToggleConfirm}
|
||||
/>
|
||||
<Toggle
|
||||
done={reminded}
|
||||
urgent={reminderUrgent ?? false}
|
||||
icon={Bell}
|
||||
label="Напоминание"
|
||||
onToggle={onToggleReminder}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
597
src/app/admin/bookings/page.tsx
Normal file
597
src/app/admin/bookings/page.tsx
Normal file
@@ -0,0 +1,597 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Loader2, Trash2, Phone, Instagram, Send, ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import { NotifyToggle } from "../_components/NotifyToggle";
|
||||
|
||||
// --- Types ---
|
||||
|
||||
interface GroupBooking {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
groupInfo?: string;
|
||||
notifiedConfirm: boolean;
|
||||
notifiedReminder: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface McRegistration {
|
||||
id: number;
|
||||
masterClassTitle: string;
|
||||
name: 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;
|
||||
}
|
||||
|
||||
interface MasterClassSlot {
|
||||
date: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
}
|
||||
|
||||
interface MasterClassItem {
|
||||
title: string;
|
||||
slots: MasterClassSlot[];
|
||||
}
|
||||
|
||||
type Tab = "classes" | "master-classes" | "open-day";
|
||||
type NotifyFilter = "all" | "new" | "no-reminder";
|
||||
|
||||
// --- Filter Chips ---
|
||||
|
||||
function FilterChips({
|
||||
filter,
|
||||
setFilter,
|
||||
newCount,
|
||||
noReminderCount,
|
||||
}: {
|
||||
filter: NotifyFilter;
|
||||
setFilter: (f: NotifyFilter) => void;
|
||||
newCount: number;
|
||||
noReminderCount: number;
|
||||
}) {
|
||||
const FILTERS: { key: NotifyFilter; label: string; count?: number }[] = [
|
||||
{ key: "all", label: "Все" },
|
||||
{ key: "new", label: "Новые", count: newCount },
|
||||
{ key: "no-reminder", label: "Без напоминания", count: noReminderCount },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
className={`rounded-full px-3 py-1.5 text-xs font-medium transition-all ${
|
||||
filter === f.key
|
||||
? "bg-gold/20 text-gold border border-gold/40"
|
||||
: "bg-neutral-800 text-neutral-400 border border-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{f.label}
|
||||
{f.count !== undefined && f.count > 0 && (
|
||||
<span className="ml-1.5 rounded-full bg-red-500/20 text-red-400 px-1.5 py-0.5 text-[10px]">
|
||||
{f.count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Group Bookings Tab ---
|
||||
|
||||
function GroupBookingsTab() {
|
||||
const [bookings, setBookings] = useState<GroupBooking[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<NotifyFilter>("all");
|
||||
|
||||
useEffect(() => {
|
||||
adminFetch("/api/admin/group-bookings")
|
||||
.then((r) => r.json())
|
||||
.then((data: GroupBooking[]) => setBookings(data))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const newCount = bookings.filter((b) => !b.notifiedConfirm).length;
|
||||
const noReminderCount = bookings.filter((b) => !b.notifiedReminder).length;
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (filter === "new") return bookings.filter((b) => !b.notifiedConfirm);
|
||||
if (filter === "no-reminder") return bookings.filter((b) => !b.notifiedReminder);
|
||||
return bookings;
|
||||
}, [bookings, filter]);
|
||||
|
||||
async function handleToggle(id: number, field: "notified_confirm" | "notified_reminder") {
|
||||
const b = bookings.find((x) => x.id === id);
|
||||
if (!b) return;
|
||||
const key = field === "notified_confirm" ? "notifiedConfirm" : "notifiedReminder";
|
||||
const newValue = !b[key];
|
||||
setBookings((prev) => prev.map((x) => x.id === id ? { ...x, [key]: newValue } : x));
|
||||
await adminFetch("/api/admin/group-bookings", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "toggle-notify", id, field, value: newValue }),
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
await adminFetch(`/api/admin/group-bookings?id=${id}`, { method: "DELETE" });
|
||||
setBookings((prev) => prev.filter((b) => b.id !== id));
|
||||
}
|
||||
|
||||
if (loading) return <LoadingSpinner />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilterChips filter={filter} setFilter={setFilter} newCount={newCount} noReminderCount={noReminderCount} />
|
||||
<div className="mt-3 space-y-2">
|
||||
{filtered.length === 0 && <EmptyState total={bookings.length} />}
|
||||
{filtered.map((b) => (
|
||||
<div
|
||||
key={b.id}
|
||||
className={`rounded-xl border p-4 space-y-2 transition-colors ${
|
||||
!b.notifiedConfirm ? "border-gold/20 bg-gold/[0.03]" : "border-white/10 bg-neutral-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<span className="font-medium text-white">{b.name}</span>
|
||||
<a href={`tel:${b.phone.replace(/\D/g, "")}`} className="inline-flex items-center gap-1 text-emerald-400 hover:text-emerald-300 text-sm">
|
||||
<Phone size={12} />{b.phone}
|
||||
</a>
|
||||
{b.groupInfo && (
|
||||
<>
|
||||
<span className="text-neutral-600">·</span>
|
||||
<span className="text-xs text-neutral-400 bg-neutral-800 rounded-full px-2 py-0.5">{b.groupInfo}</span>
|
||||
</>
|
||||
)}
|
||||
<span className="text-neutral-600 text-xs ml-auto">{fmtDate(b.createdAt)}</span>
|
||||
<DeleteBtn onClick={() => handleDelete(b.id)} />
|
||||
</div>
|
||||
<NotifyToggle
|
||||
confirmed={b.notifiedConfirm}
|
||||
reminded={b.notifiedReminder}
|
||||
onToggleConfirm={() => handleToggle(b.id, "notified_confirm")}
|
||||
onToggleReminder={() => handleToggle(b.id, "notified_reminder")}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// --- MC Registrations Tab ---
|
||||
|
||||
function McRegistrationsTab() {
|
||||
const [regs, setRegs] = useState<McRegistration[]>([]);
|
||||
const [mcItems, setMcItems] = useState<MasterClassItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<NotifyFilter>("all");
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
adminFetch("/api/admin/mc-registrations").then((r) => r.json()),
|
||||
adminFetch("/api/admin/sections/masterClasses").then((r) => r.json()),
|
||||
])
|
||||
.then(([regData, mcData]: [McRegistration[], { items: MasterClassItem[] }]) => {
|
||||
setRegs(regData);
|
||||
setMcItems(mcData.items || []);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
// Compute reminder urgency per MC title
|
||||
const urgencyMap = useMemo(() => {
|
||||
const map: Record<string, boolean> = {};
|
||||
const now = Date.now();
|
||||
const twoDays = 2 * 24 * 60 * 60 * 1000;
|
||||
for (const mc of mcItems) {
|
||||
map[mc.title] = (mc.slots || []).some((s) => {
|
||||
if (!s.date) return false;
|
||||
const slotTime = new Date(s.date + "T" + (s.startTime || "23:59")).getTime();
|
||||
const diff = slotTime - now;
|
||||
return diff >= 0 && diff <= twoDays;
|
||||
});
|
||||
}
|
||||
return map;
|
||||
}, [mcItems]);
|
||||
|
||||
const newCount = regs.filter((r) => !r.notifiedConfirm).length;
|
||||
const noReminderCount = regs.filter((r) => !r.notifiedReminder).length;
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (filter === "new") return regs.filter((r) => !r.notifiedConfirm);
|
||||
if (filter === "no-reminder") return regs.filter((r) => !r.notifiedReminder);
|
||||
return regs;
|
||||
}, [regs, filter]);
|
||||
|
||||
// Group by MC title
|
||||
const grouped = useMemo(() => {
|
||||
const map: Record<string, McRegistration[]> = {};
|
||||
for (const r of filtered) {
|
||||
if (!map[r.masterClassTitle]) map[r.masterClassTitle] = [];
|
||||
map[r.masterClassTitle].push(r);
|
||||
}
|
||||
return map;
|
||||
}, [filtered]);
|
||||
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||||
function toggleExpand(key: string) {
|
||||
setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
}
|
||||
|
||||
async function handleToggle(id: number, field: "notified_confirm" | "notified_reminder") {
|
||||
const r = regs.find((x) => x.id === id);
|
||||
if (!r) return;
|
||||
const key = field === "notified_confirm" ? "notifiedConfirm" : "notifiedReminder";
|
||||
const newValue = !r[key];
|
||||
setRegs((prev) => prev.map((x) => x.id === id ? { ...x, [key]: newValue } : x));
|
||||
await adminFetch("/api/admin/mc-registrations", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "toggle-notify", id, field, value: newValue }),
|
||||
});
|
||||
}
|
||||
|
||||
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 (
|
||||
<>
|
||||
<FilterChips filter={filter} setFilter={setFilter} newCount={newCount} noReminderCount={noReminderCount} />
|
||||
<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] ?? false;
|
||||
const groupNewCount = items.filter((r) => !r.notifiedConfirm).length;
|
||||
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>
|
||||
{urgencyMap[title] && (
|
||||
<span className="text-[10px] text-red-400 bg-red-500/10 rounded-full px-2 py-0.5 shrink-0">скоро</span>
|
||||
)}
|
||||
{groupNewCount > 0 && (
|
||||
<span className="text-[10px] text-gold bg-gold/10 rounded-full px-2 py-0.5 shrink-0">{groupNewCount} новых</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 p-3 space-y-1.5 transition-colors ${
|
||||
!r.notifiedConfirm ? "border-gold/20 bg-gold/[0.03]" : "border-white/5 bg-neutral-800/30"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-wrap text-sm">
|
||||
<span className="font-medium text-white">{r.name}</span>
|
||||
<span className="text-neutral-500">·</span>
|
||||
<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"
|
||||
>
|
||||
<Instagram size={12} />
|
||||
<span className="text-neutral-300">{r.instagram}</span>
|
||||
</a>
|
||||
{r.telegram && (
|
||||
<>
|
||||
<span className="text-neutral-600">·</span>
|
||||
<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"
|
||||
>
|
||||
<Send size={12} />
|
||||
<span className="text-neutral-300">{r.telegram}</span>
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
<span className="text-neutral-600 text-xs ml-auto">{fmtDate(r.createdAt)}</span>
|
||||
<DeleteBtn onClick={() => handleDelete(r.id)} />
|
||||
</div>
|
||||
<NotifyToggle
|
||||
confirmed={r.notifiedConfirm}
|
||||
reminded={r.notifiedReminder}
|
||||
reminderUrgent={urgencyMap[r.masterClassTitle] && !r.notifiedReminder}
|
||||
onToggleConfirm={() => handleToggle(r.id, "notified_confirm")}
|
||||
onToggleReminder={() => handleToggle(r.id, "notified_reminder")}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Open Day Bookings Tab ---
|
||||
|
||||
function OpenDayBookingsTab() {
|
||||
const [bookings, setBookings] = useState<OpenDayBooking[]>([]);
|
||||
const [eventDate, setEventDate] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<NotifyFilter>("all");
|
||||
|
||||
useEffect(() => {
|
||||
// Get events to find active one
|
||||
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];
|
||||
setEventDate(ev.date);
|
||||
return adminFetch(`/api/admin/open-day/bookings?eventId=${ev.id}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: OpenDayBooking[]) => setBookings(data));
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const reminderUrgent = useMemo(() => {
|
||||
if (!eventDate) return false;
|
||||
const now = Date.now();
|
||||
const twoDays = 2 * 24 * 60 * 60 * 1000;
|
||||
const eventTime = new Date(eventDate + "T10:00").getTime();
|
||||
const diff = eventTime - now;
|
||||
return diff >= 0 && diff <= twoDays;
|
||||
}, [eventDate]);
|
||||
|
||||
const newCount = bookings.filter((b) => !b.notifiedConfirm).length;
|
||||
const noReminderCount = bookings.filter((b) => !b.notifiedReminder).length;
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (filter === "new") return bookings.filter((b) => !b.notifiedConfirm);
|
||||
if (filter === "no-reminder") return bookings.filter((b) => !b.notifiedReminder);
|
||||
return bookings;
|
||||
}, [bookings, filter]);
|
||||
|
||||
// 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 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);
|
||||
}
|
||||
// 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);
|
||||
});
|
||||
}, [filtered]);
|
||||
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||||
function toggleExpand(key: string) {
|
||||
setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
}
|
||||
|
||||
async function handleToggle(id: number, field: "notified_confirm" | "notified_reminder") {
|
||||
const b = bookings.find((x) => x.id === id);
|
||||
if (!b) return;
|
||||
const key = field === "notified_confirm" ? "notifiedConfirm" : "notifiedReminder";
|
||||
const newValue = !b[key];
|
||||
setBookings((prev) => prev.map((x) => x.id === id ? { ...x, [key]: newValue } : x));
|
||||
await adminFetch("/api/admin/open-day/bookings", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "toggle-notify", id, field, value: newValue }),
|
||||
});
|
||||
}
|
||||
|
||||
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 (
|
||||
<>
|
||||
<FilterChips filter={filter} setFilter={setFilter} newCount={newCount} noReminderCount={noReminderCount} />
|
||||
<div className="mt-3 space-y-2">
|
||||
{grouped.length === 0 && <EmptyState total={bookings.length} />}
|
||||
{grouped.map(([key, group]) => {
|
||||
const isOpen = expanded[key] ?? false;
|
||||
const groupNewCount = group.items.filter((b) => !b.notifiedConfirm).length;
|
||||
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>
|
||||
{groupNewCount > 0 && (
|
||||
<span className="text-[10px] text-gold bg-gold/10 rounded-full px-2 py-0.5 shrink-0">{groupNewCount} новых</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 p-3 space-y-1.5 transition-colors ${
|
||||
!b.notifiedConfirm ? "border-gold/20 bg-gold/[0.03]" : "border-white/5 bg-neutral-800/30"
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
<NotifyToggle
|
||||
confirmed={b.notifiedConfirm}
|
||||
reminded={b.notifiedReminder}
|
||||
reminderUrgent={reminderUrgent && !b.notifiedReminder}
|
||||
onToggleConfirm={() => handleToggle(b.id, "notified_confirm")}
|
||||
onToggleReminder={() => handleToggle(b.id, "notified_reminder")}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// --- 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 }[] = [
|
||||
{ key: "classes", label: "Занятия" },
|
||||
{ key: "master-classes", label: "Мастер-классы" },
|
||||
{ key: "open-day", label: "День открытых дверей" },
|
||||
];
|
||||
|
||||
export default function BookingsPage() {
|
||||
const [tab, setTab] = useState<Tab>("classes");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Записи</h1>
|
||||
<p className="mt-1 text-neutral-400 text-sm">
|
||||
Все заявки и записи в одном месте
|
||||
</p>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mt-5 flex border-b border-white/10">
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setTab(t.key)}
|
||||
className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
|
||||
tab === t.key
|
||||
? "text-gold"
|
||||
: "text-neutral-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
{tab === t.key && (
|
||||
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gold rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
<div className="mt-4">
|
||||
{tab === "classes" && <GroupBookingsTab />}
|
||||
{tab === "master-classes" && <McRegistrationsTab />}
|
||||
{tab === "open-day" && <OpenDayBookingsTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Sparkles,
|
||||
@@ -20,6 +21,8 @@ import {
|
||||
Menu,
|
||||
X,
|
||||
ChevronLeft,
|
||||
ClipboardList,
|
||||
DoorOpen,
|
||||
} from "lucide-react";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
@@ -30,7 +33,9 @@ const NAV_ITEMS = [
|
||||
{ href: "/admin/team", label: "Команда", icon: Users },
|
||||
{ href: "/admin/classes", label: "Направления", icon: BookOpen },
|
||||
{ href: "/admin/master-classes", label: "Мастер-классы", icon: Star },
|
||||
{ href: "/admin/open-day", label: "День открытых дверей", icon: DoorOpen },
|
||||
{ href: "/admin/schedule", label: "Расписание", icon: Calendar },
|
||||
{ href: "/admin/bookings", label: "Записи", icon: ClipboardList },
|
||||
{ href: "/admin/pricing", label: "Цены", icon: DollarSign },
|
||||
{ href: "/admin/faq", label: "FAQ", icon: HelpCircle },
|
||||
{ href: "/admin/news", label: "Новости", icon: Newspaper },
|
||||
@@ -45,12 +50,27 @@ export default function AdminLayout({
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [unreadTotal, setUnreadTotal] = useState(0);
|
||||
|
||||
// Don't render admin shell on login page
|
||||
if (pathname === "/admin/login") {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
// Fetch unread counts — poll every 30s
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useEffect(() => {
|
||||
function fetchCounts() {
|
||||
adminFetch("/api/admin/unread-counts")
|
||||
.then((r) => r.json())
|
||||
.then((data: { total: number }) => setUnreadTotal(data.total))
|
||||
.catch(() => {});
|
||||
}
|
||||
fetchCounts();
|
||||
const interval = setInterval(fetchCounts, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
async function handleLogout() {
|
||||
await fetch("/api/logout", { method: "POST" });
|
||||
router.push("/admin/login");
|
||||
@@ -106,6 +126,11 @@ export default function AdminLayout({
|
||||
>
|
||||
<Icon size={18} />
|
||||
{item.label}
|
||||
{item.href === "/admin/bookings" && unreadTotal > 0 && (
|
||||
<span className="ml-auto rounded-full bg-red-500 text-white text-[10px] font-bold min-w-[18px] h-[18px] flex items-center justify-center px-1">
|
||||
{unreadTotal > 99 ? "99+" : unreadTotal}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, useMemo } from "react";
|
||||
import { SectionEditor } from "../_components/SectionEditor";
|
||||
import { InputField, TextareaField } from "../_components/FormField";
|
||||
import { ArrayEditor } from "../_components/ArrayEditor";
|
||||
import { Plus, X, Upload, Loader2, ImageIcon, AlertCircle, Check, ChevronDown, ChevronUp, Instagram, Send, Trash2, Pencil } from "lucide-react";
|
||||
import { Plus, X, Upload, Loader2, ImageIcon, AlertCircle, Check } from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import type { MasterClassItem, MasterClassSlot } from "@/types/content";
|
||||
|
||||
@@ -38,15 +38,6 @@ interface MasterClassesData {
|
||||
items: MasterClassItem[];
|
||||
}
|
||||
|
||||
interface McRegistration {
|
||||
id: number;
|
||||
masterClassTitle: string;
|
||||
name: string;
|
||||
instagram: string;
|
||||
telegram?: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
// --- Autocomplete Multi-Select ---
|
||||
function AutocompleteMulti({
|
||||
label,
|
||||
@@ -482,340 +473,6 @@ function ValidationHint({ fields }: { fields: Record<string, string> }) {
|
||||
);
|
||||
}
|
||||
|
||||
// --- Registration Row (inline edit) ---
|
||||
function RegistrationRow({
|
||||
reg,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
}: {
|
||||
reg: McRegistration;
|
||||
onUpdate: (updated: McRegistration) => void;
|
||||
onDelete: () => void;
|
||||
}) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [name, setName] = useState(reg.name);
|
||||
const [ig, setIg] = useState(reg.instagram.replace(/^@/, ""));
|
||||
const [tg, setTg] = useState((reg.telegram || "").replace(/^@/, ""));
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
async function save() {
|
||||
if (!name.trim() || !ig.trim()) return;
|
||||
setSaving(true);
|
||||
const body = {
|
||||
id: reg.id,
|
||||
name: name.trim(),
|
||||
instagram: `@${ig.trim()}`,
|
||||
telegram: tg.trim() ? `@${tg.trim()}` : undefined,
|
||||
};
|
||||
const res = await adminFetch("/api/admin/mc-registrations", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (res.ok) {
|
||||
onUpdate({ ...reg, name: body.name, instagram: body.instagram, telegram: body.telegram });
|
||||
setEditing(false);
|
||||
}
|
||||
setSaving(false);
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
setName(reg.name);
|
||||
setIg(reg.instagram.replace(/^@/, ""));
|
||||
setTg((reg.telegram || "").replace(/^@/, ""));
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<div className="rounded-lg bg-neutral-800/50 px-3 py-2 space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Имя"
|
||||
className="flex-1 rounded-md border border-white/10 bg-neutral-800 px-2 py-1.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-gold"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-1 items-center rounded-md border border-white/10 bg-neutral-800 text-sm">
|
||||
<span className="flex items-center gap-1 pl-2 text-neutral-500 select-none">
|
||||
<Instagram size={11} className="text-pink-400" />@
|
||||
</span>
|
||||
<input
|
||||
value={ig}
|
||||
onChange={(e) => setIg(e.target.value.replace(/^@/, ""))}
|
||||
placeholder="instagram"
|
||||
className="flex-1 bg-transparent px-1 py-1.5 text-white placeholder-neutral-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center rounded-md border border-white/10 bg-neutral-800 text-sm">
|
||||
<span className="flex items-center gap-1 pl-2 text-neutral-500 select-none">
|
||||
<Send size={11} className="text-blue-400" />@
|
||||
</span>
|
||||
<input
|
||||
value={tg}
|
||||
onChange={(e) => setTg(e.target.value.replace(/^@/, ""))}
|
||||
placeholder="telegram"
|
||||
className="flex-1 bg-transparent px-1 py-1.5 text-white placeholder-neutral-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={cancel}
|
||||
className="rounded-md px-3 py-1 text-xs text-neutral-400 hover:text-white transition-colors"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={save}
|
||||
disabled={saving || !name.trim() || !ig.trim()}
|
||||
className="rounded-md bg-gold/20 px-3 py-1 text-xs font-medium text-gold hover:bg-gold/30 transition-colors disabled:opacity-40"
|
||||
>
|
||||
{saving ? "..." : "Сохранить"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-lg bg-neutral-800/50 px-3 py-2 text-sm">
|
||||
<span className="font-medium text-white">{reg.name}</span>
|
||||
<span className="text-neutral-500">·</span>
|
||||
<a
|
||||
href={`https://ig.me/m/${reg.instagram.replace(/^@/, "")}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-pink-400 hover:text-pink-300 transition-colors"
|
||||
title="Написать в Instagram"
|
||||
>
|
||||
<Instagram size={12} />
|
||||
<span className="text-neutral-300">{reg.instagram}</span>
|
||||
</a>
|
||||
{reg.telegram && (
|
||||
<>
|
||||
<span className="text-neutral-600">·</span>
|
||||
<a
|
||||
href={`https://t.me/${reg.telegram.replace(/^@/, "")}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-blue-400 hover:text-blue-300 transition-colors"
|
||||
title="Написать в Telegram"
|
||||
>
|
||||
<Send size={12} />
|
||||
<span className="text-neutral-300">{reg.telegram}</span>
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
<span className="text-neutral-600 text-xs ml-auto">
|
||||
{new Date(reg.createdAt).toLocaleDateString("ru-RU")}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditing(true)}
|
||||
className="rounded p-1 text-neutral-500 hover:text-gold transition-colors"
|
||||
title="Редактировать"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDelete}
|
||||
className="rounded p-1 text-neutral-500 hover:text-red-400 transition-colors"
|
||||
title="Удалить"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Registrations List ---
|
||||
function RegistrationsList({ title }: { title: string }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [regs, setRegs] = useState<McRegistration[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [count, setCount] = useState<number | null>(null);
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [newName, setNewName] = useState("");
|
||||
const [newIg, setNewIg] = useState("");
|
||||
const [newTg, setNewTg] = useState("");
|
||||
const [savingNew, setSavingNew] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!title) return;
|
||||
adminFetch(`/api/admin/mc-registrations?title=${encodeURIComponent(title)}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: McRegistration[]) => {
|
||||
setCount(data.length);
|
||||
setRegs(data);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [title]);
|
||||
|
||||
function toggle() {
|
||||
if (!open && regs.length === 0 && count !== 0) {
|
||||
setLoading(true);
|
||||
adminFetch(`/api/admin/mc-registrations?title=${encodeURIComponent(title)}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: McRegistration[]) => {
|
||||
setRegs(data);
|
||||
setCount(data.length);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
setOpen(!open);
|
||||
}
|
||||
|
||||
async function handleAdd() {
|
||||
if (!newName.trim() || !newIg.trim()) return;
|
||||
setSavingNew(true);
|
||||
const body = {
|
||||
masterClassTitle: title,
|
||||
name: newName.trim(),
|
||||
instagram: `@${newIg.trim()}`,
|
||||
telegram: newTg.trim() ? `@${newTg.trim()}` : undefined,
|
||||
};
|
||||
const res = await adminFetch("/api/admin/mc-registrations", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (res.ok) {
|
||||
const { id } = await res.json();
|
||||
setRegs((prev) => [{
|
||||
id,
|
||||
masterClassTitle: title,
|
||||
name: body.name,
|
||||
instagram: body.instagram,
|
||||
telegram: body.telegram,
|
||||
createdAt: new Date().toISOString(),
|
||||
}, ...prev]);
|
||||
setCount((prev) => (prev !== null ? prev + 1 : 1));
|
||||
setNewName("");
|
||||
setNewIg("");
|
||||
setNewTg("");
|
||||
setAdding(false);
|
||||
}
|
||||
setSavingNew(false);
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
await adminFetch(`/api/admin/mc-registrations?id=${id}`, { method: "DELETE" });
|
||||
setRegs((prev) => prev.filter((r) => r.id !== id));
|
||||
setCount((prev) => (prev !== null ? prev - 1 : null));
|
||||
}
|
||||
|
||||
function handleUpdate(updated: McRegistration) {
|
||||
setRegs((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
|
||||
}
|
||||
|
||||
if (!title) return null;
|
||||
|
||||
return (
|
||||
<div className="border-t border-white/5 pt-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
className="flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors"
|
||||
>
|
||||
{open ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
Записи{count !== null ? ` (${count})` : ""}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{loading && (
|
||||
<div className="flex items-center gap-2 text-xs text-neutral-500">
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
Загрузка...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && regs.length === 0 && !adding && (
|
||||
<p className="text-xs text-neutral-500">Пока никто не записался</p>
|
||||
)}
|
||||
|
||||
{regs.map((reg) => (
|
||||
<RegistrationRow
|
||||
key={reg.id}
|
||||
reg={reg}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={() => handleDelete(reg.id)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{adding ? (
|
||||
<div className="rounded-lg bg-neutral-800/50 px-3 py-2 space-y-2">
|
||||
<input
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder="Имя"
|
||||
className="w-full rounded-md border border-white/10 bg-neutral-800 px-2 py-1.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-gold"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-1 items-center rounded-md border border-white/10 bg-neutral-800 text-sm">
|
||||
<span className="flex items-center gap-1 pl-2 text-neutral-500 select-none">
|
||||
<Instagram size={11} className="text-pink-400" />@
|
||||
</span>
|
||||
<input
|
||||
value={newIg}
|
||||
onChange={(e) => setNewIg(e.target.value.replace(/^@/, ""))}
|
||||
placeholder="instagram"
|
||||
className="flex-1 bg-transparent px-1 py-1.5 text-white placeholder-neutral-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center rounded-md border border-white/10 bg-neutral-800 text-sm">
|
||||
<span className="flex items-center gap-1 pl-2 text-neutral-500 select-none">
|
||||
<Send size={11} className="text-blue-400" />@
|
||||
</span>
|
||||
<input
|
||||
value={newTg}
|
||||
onChange={(e) => setNewTg(e.target.value.replace(/^@/, ""))}
|
||||
placeholder="telegram"
|
||||
className="flex-1 bg-transparent px-1 py-1.5 text-white placeholder-neutral-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setAdding(false); setNewName(""); setNewIg(""); setNewTg(""); }}
|
||||
className="rounded-md px-3 py-1 text-xs text-neutral-400 hover:text-white transition-colors"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAdd}
|
||||
disabled={savingNew || !newName.trim() || !newIg.trim()}
|
||||
className="rounded-md bg-gold/20 px-3 py-1 text-xs font-medium text-gold hover:bg-gold/30 transition-colors disabled:opacity-40"
|
||||
>
|
||||
{savingNew ? "..." : "Добавить"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAdding(true)}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-dashed border-white/10 px-3 py-1.5 text-xs text-neutral-500 hover:text-gold hover:border-gold/30 transition-colors"
|
||||
>
|
||||
<Plus size={12} />
|
||||
Добавить запись
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Main page ---
|
||||
export default function MasterClassesEditorPage() {
|
||||
const [trainers, setTrainers] = useState<string[]>([]);
|
||||
@@ -952,7 +609,6 @@ export default function MasterClassesEditorPage() {
|
||||
}
|
||||
/>
|
||||
|
||||
<RegistrationsList title={item.title} />
|
||||
</div>
|
||||
)}
|
||||
createItem={() => ({
|
||||
|
||||
711
src/app/admin/open-day/page.tsx
Normal file
711
src/app/admin/open-day/page.tsx
Normal file
@@ -0,0 +1,711 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import {
|
||||
Plus, X, Loader2, Calendar, Trash2, Ban, CheckCircle2, ChevronDown, ChevronUp,
|
||||
Phone, Instagram, Send,
|
||||
} from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import { NotifyToggle } from "../_components/NotifyToggle";
|
||||
|
||||
// --- Types ---
|
||||
|
||||
interface OpenDayEvent {
|
||||
id: number;
|
||||
date: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
pricePerClass: number;
|
||||
discountPrice: number;
|
||||
discountThreshold: number;
|
||||
minBookings: number;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface OpenDayClass {
|
||||
id: number;
|
||||
eventId: number;
|
||||
hall: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
trainer: string;
|
||||
style: string;
|
||||
cancelled: boolean;
|
||||
sortOrder: number;
|
||||
bookingCount: number;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
function generateTimeSlots(startHour: number, endHour: number): string[] {
|
||||
const slots: string[] = [];
|
||||
for (let h = startHour; h < endHour; h++) {
|
||||
slots.push(`${h.toString().padStart(2, "0")}:00`);
|
||||
}
|
||||
return slots;
|
||||
}
|
||||
|
||||
function addHour(time: string): string {
|
||||
const [h, m] = time.split(":").map(Number);
|
||||
return `${(h + 1).toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
// --- Event Settings ---
|
||||
|
||||
function EventSettings({
|
||||
event,
|
||||
onChange,
|
||||
}: {
|
||||
event: OpenDayEvent;
|
||||
onChange: (patch: Partial<OpenDayEvent>) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-xl border border-white/10 bg-neutral-900 p-5 space-y-4">
|
||||
<h2 className="text-lg font-bold flex items-center gap-2">
|
||||
<Calendar size={18} className="text-gold" />
|
||||
Настройки мероприятия
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-1.5">Название</label>
|
||||
<input
|
||||
type="text"
|
||||
value={event.title}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none focus:border-gold transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-1.5">Дата</label>
|
||||
<input
|
||||
type="date"
|
||||
value={event.date}
|
||||
onChange={(e) => onChange({ date: e.target.value })}
|
||||
className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-1.5">Описание</label>
|
||||
<textarea
|
||||
value={event.description || ""}
|
||||
onChange={(e) => onChange({ description: e.target.value || undefined })}
|
||||
rows={2}
|
||||
className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none focus:border-gold transition-colors resize-none"
|
||||
placeholder="Описание мероприятия..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-4">
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-1.5">Цена за занятие (BYN)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={event.pricePerClass}
|
||||
onChange={(e) => onChange({ pricePerClass: parseInt(e.target.value) || 0 })}
|
||||
className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-1.5">Скидка (BYN)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={event.discountPrice}
|
||||
onChange={(e) => onChange({ discountPrice: parseInt(e.target.value) || 0 })}
|
||||
className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-1.5">От N занятий</label>
|
||||
<input
|
||||
type="number"
|
||||
value={event.discountThreshold}
|
||||
onChange={(e) => onChange({ discountThreshold: parseInt(e.target.value) || 1 })}
|
||||
className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-1.5">Мин. записей</label>
|
||||
<input
|
||||
type="number"
|
||||
value={event.minBookings}
|
||||
onChange={(e) => onChange({ minBookings: parseInt(e.target.value) || 1 })}
|
||||
className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange({ active: !event.active })}
|
||||
className={`relative flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all ${
|
||||
event.active
|
||||
? "bg-emerald-500/15 text-emerald-400 border border-emerald-500/30"
|
||||
: "bg-neutral-800 text-neutral-400 border border-white/10"
|
||||
}`}
|
||||
>
|
||||
{event.active ? <CheckCircle2 size={14} /> : <Ban size={14} />}
|
||||
{event.active ? "Опубликовано" : "Черновик"}
|
||||
</button>
|
||||
<span className="text-xs text-neutral-500">
|
||||
{event.pricePerClass} BYN / занятие, от {event.discountThreshold} — {event.discountPrice} BYN
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Class Grid Cell ---
|
||||
|
||||
function ClassCell({
|
||||
cls,
|
||||
minBookings,
|
||||
trainers,
|
||||
styles,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
onCancel,
|
||||
}: {
|
||||
cls: OpenDayClass;
|
||||
minBookings: number;
|
||||
trainers: string[];
|
||||
styles: string[];
|
||||
onUpdate: (id: number, data: Partial<OpenDayClass>) => void;
|
||||
onDelete: (id: number) => void;
|
||||
onCancel: (id: number) => void;
|
||||
}) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [trainer, setTrainer] = useState(cls.trainer);
|
||||
const [style, setStyle] = useState(cls.style);
|
||||
|
||||
const atRisk = cls.bookingCount < minBookings && !cls.cancelled;
|
||||
|
||||
function save() {
|
||||
if (trainer.trim() && style.trim()) {
|
||||
onUpdate(cls.id, { trainer: trainer.trim(), style: style.trim() });
|
||||
setEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<div className="p-2 space-y-1.5">
|
||||
<select
|
||||
value={trainer}
|
||||
onChange={(e) => setTrainer(e.target.value)}
|
||||
className="w-full rounded-md border border-white/10 bg-neutral-800 px-2 py-1 text-xs text-white outline-none focus:border-gold"
|
||||
>
|
||||
<option value="">Тренер...</option>
|
||||
{trainers.map((t) => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={style}
|
||||
onChange={(e) => setStyle(e.target.value)}
|
||||
className="w-full rounded-md border border-white/10 bg-neutral-800 px-2 py-1 text-xs text-white outline-none focus:border-gold"
|
||||
>
|
||||
<option value="">Стиль...</option>
|
||||
{styles.map((s) => (
|
||||
<option key={s} value={s}>{s}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex gap-1 justify-end">
|
||||
<button onClick={() => setEditing(false)} className="text-[10px] text-neutral-500 hover:text-white px-1">
|
||||
Отмена
|
||||
</button>
|
||||
<button onClick={save} className="text-[10px] text-gold hover:text-gold-light px-1 font-medium">
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative p-2 rounded-lg cursor-pointer transition-all ${
|
||||
cls.cancelled
|
||||
? "bg-neutral-800/30 opacity-50"
|
||||
: atRisk
|
||||
? "bg-red-500/5 border border-red-500/20"
|
||||
: "bg-gold/5 border border-gold/15 hover:border-gold/30"
|
||||
}`}
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
<div className="text-xs font-medium text-white truncate">{cls.style}</div>
|
||||
<div className="text-[10px] text-neutral-400 truncate">{cls.trainer}</div>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<span className={`text-[10px] font-medium ${
|
||||
cls.cancelled
|
||||
? "text-neutral-500 line-through"
|
||||
: atRisk
|
||||
? "text-red-400"
|
||||
: "text-emerald-400"
|
||||
}`}>
|
||||
{cls.bookingCount} чел.
|
||||
</span>
|
||||
{atRisk && !cls.cancelled && (
|
||||
<span className="text-[9px] text-red-400">мин. {minBookings}</span>
|
||||
)}
|
||||
{cls.cancelled && <span className="text-[9px] text-neutral-500">отменено</span>}
|
||||
</div>
|
||||
{/* Actions */}
|
||||
<div className="absolute top-1 right-1 hidden group-hover:flex gap-0.5">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onCancel(cls.id); }}
|
||||
className="rounded p-0.5 text-neutral-500 hover:text-yellow-400"
|
||||
title={cls.cancelled ? "Восстановить" : "Отменить"}
|
||||
>
|
||||
<Ban size={10} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onDelete(cls.id); }}
|
||||
className="rounded p-0.5 text-neutral-500 hover:text-red-400"
|
||||
title="Удалить"
|
||||
>
|
||||
<Trash2 size={10} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Schedule Grid ---
|
||||
|
||||
function ScheduleGrid({
|
||||
eventId,
|
||||
minBookings,
|
||||
halls,
|
||||
classes,
|
||||
trainers,
|
||||
styles,
|
||||
onClassesChange,
|
||||
}: {
|
||||
eventId: number;
|
||||
minBookings: number;
|
||||
halls: string[];
|
||||
classes: OpenDayClass[];
|
||||
trainers: string[];
|
||||
styles: string[];
|
||||
onClassesChange: () => void;
|
||||
}) {
|
||||
const timeSlots = generateTimeSlots(10, 22);
|
||||
|
||||
// Build lookup: hall -> time -> class
|
||||
const grid = useMemo(() => {
|
||||
const map: Record<string, Record<string, OpenDayClass>> = {};
|
||||
for (const hall of halls) map[hall] = {};
|
||||
for (const cls of classes) {
|
||||
if (!map[cls.hall]) map[cls.hall] = {};
|
||||
map[cls.hall][cls.startTime] = cls;
|
||||
}
|
||||
return map;
|
||||
}, [classes, halls]);
|
||||
|
||||
async function addClass(hall: string, startTime: string) {
|
||||
const endTime = addHour(startTime);
|
||||
await adminFetch("/api/admin/open-day/classes", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ eventId, hall, startTime, endTime, trainer: "—", style: "—" }),
|
||||
});
|
||||
onClassesChange();
|
||||
}
|
||||
|
||||
async function updateClass(id: number, data: Partial<OpenDayClass>) {
|
||||
await adminFetch("/api/admin/open-day/classes", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id, ...data }),
|
||||
});
|
||||
onClassesChange();
|
||||
}
|
||||
|
||||
async function deleteClass(id: number) {
|
||||
await adminFetch(`/api/admin/open-day/classes?id=${id}`, { method: "DELETE" });
|
||||
onClassesChange();
|
||||
}
|
||||
|
||||
async function cancelClass(id: number) {
|
||||
const cls = classes.find((c) => c.id === id);
|
||||
if (!cls) return;
|
||||
await updateClass(id, { cancelled: !cls.cancelled });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-white/10 bg-neutral-900 p-5 space-y-3">
|
||||
<h2 className="text-lg font-bold">Расписание</h2>
|
||||
|
||||
{halls.length === 0 ? (
|
||||
<p className="text-sm text-neutral-500">Нет залов в расписании. Добавьте локации в разделе «Расписание».</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse min-w-[500px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left text-xs text-neutral-500 font-medium pb-2 w-16">Время</th>
|
||||
{halls.map((hall) => (
|
||||
<th key={hall} className="text-left text-xs text-neutral-400 font-medium pb-2 px-1">
|
||||
{hall}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{timeSlots.map((time) => (
|
||||
<tr key={time} className="border-t border-white/5">
|
||||
<td className="text-xs text-neutral-500 py-1 pr-2 align-top pt-2">{time}</td>
|
||||
{halls.map((hall) => {
|
||||
const cls = grid[hall]?.[time];
|
||||
return (
|
||||
<td key={hall} className="py-1 px-1 align-top">
|
||||
{cls ? (
|
||||
<ClassCell
|
||||
cls={cls}
|
||||
minBookings={minBookings}
|
||||
trainers={trainers}
|
||||
styles={styles}
|
||||
onUpdate={updateClass}
|
||||
onDelete={deleteClass}
|
||||
onCancel={cancelClass}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => addClass(hall, time)}
|
||||
className="w-full rounded-lg border border-dashed border-white/5 p-2 text-neutral-600 hover:text-gold hover:border-gold/20 transition-colors"
|
||||
>
|
||||
<Plus size={12} className="mx-auto" />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Bookings Table ---
|
||||
|
||||
function BookingsSection({
|
||||
eventId,
|
||||
eventDate,
|
||||
}: {
|
||||
eventId: number;
|
||||
eventDate: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [bookings, setBookings] = useState<OpenDayBooking[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const reminderUrgent = useMemo(() => {
|
||||
if (!eventDate) return false;
|
||||
const now = Date.now();
|
||||
const twoDays = 2 * 24 * 60 * 60 * 1000;
|
||||
const eventTime = new Date(eventDate + "T10:00").getTime();
|
||||
const diff = eventTime - now;
|
||||
return diff >= 0 && diff <= twoDays;
|
||||
}, [eventDate]);
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
adminFetch(`/api/admin/open-day/bookings?eventId=${eventId}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: OpenDayBooking[]) => setBookings(data))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (!open) load();
|
||||
setOpen(!open);
|
||||
}
|
||||
|
||||
async function handleToggle(id: number, field: "notified_confirm" | "notified_reminder") {
|
||||
const b = bookings.find((x) => x.id === id);
|
||||
if (!b) return;
|
||||
const key = field === "notified_confirm" ? "notifiedConfirm" : "notifiedReminder";
|
||||
const newValue = !b[key];
|
||||
setBookings((prev) => prev.map((x) => x.id === id ? { ...x, [key]: newValue } : x));
|
||||
await adminFetch("/api/admin/open-day/bookings", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "toggle-notify", id, field, value: newValue }),
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
await adminFetch(`/api/admin/open-day/bookings?id=${id}`, { method: "DELETE" });
|
||||
setBookings((prev) => prev.filter((x) => x.id !== id));
|
||||
}
|
||||
|
||||
const newCount = bookings.filter((b) => !b.notifiedConfirm).length;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-white/10 bg-neutral-900 p-5">
|
||||
<button
|
||||
onClick={toggle}
|
||||
className="flex items-center gap-2 text-lg font-bold hover:text-gold transition-colors"
|
||||
>
|
||||
{open ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
|
||||
Записи
|
||||
{bookings.length > 0 && (
|
||||
<span className="text-sm font-normal text-neutral-400">({bookings.length})</span>
|
||||
)}
|
||||
{newCount > 0 && (
|
||||
<span className="rounded-full bg-red-500/20 text-red-400 px-2 py-0.5 text-[10px] font-medium">
|
||||
{newCount} новых
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{loading && (
|
||||
<div className="flex items-center gap-2 text-neutral-500 text-sm py-4 justify-center">
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
Загрузка...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && bookings.length === 0 && (
|
||||
<p className="text-sm text-neutral-500 text-center py-4">Пока нет записей</p>
|
||||
)}
|
||||
|
||||
{bookings.map((b) => (
|
||||
<div
|
||||
key={b.id}
|
||||
className={`rounded-lg p-3 space-y-1.5 ${
|
||||
!b.notifiedConfirm ? "bg-gold/[0.03] border border-gold/20" : "bg-neutral-800/50 border border-white/5"
|
||||
}`}
|
||||
>
|
||||
<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-[10px] text-neutral-500 ml-auto">
|
||||
{b.classHall} {b.classTime} · {b.classStyle}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleDelete(b.id)}
|
||||
className="rounded p-1 text-neutral-500 hover:text-red-400"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
<NotifyToggle
|
||||
confirmed={b.notifiedConfirm}
|
||||
reminded={b.notifiedReminder}
|
||||
reminderUrgent={reminderUrgent && !b.notifiedReminder}
|
||||
onToggleConfirm={() => handleToggle(b.id, "notified_confirm")}
|
||||
onToggleReminder={() => handleToggle(b.id, "notified_reminder")}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Main Page ---
|
||||
|
||||
export default function OpenDayAdminPage() {
|
||||
const [event, setEvent] = useState<OpenDayEvent | null>(null);
|
||||
const [classes, setClasses] = useState<OpenDayClass[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [trainers, setTrainers] = useState<string[]>([]);
|
||||
const [styles, setStyles] = useState<string[]>([]);
|
||||
const [halls, setHalls] = useState<string[]>([]);
|
||||
const saveTimerRef = { current: null as ReturnType<typeof setTimeout> | null };
|
||||
|
||||
// Load data
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
adminFetch("/api/admin/open-day").then((r) => r.json()),
|
||||
adminFetch("/api/admin/team").then((r) => r.json()),
|
||||
adminFetch("/api/admin/sections/classes").then((r) => r.json()),
|
||||
adminFetch("/api/admin/sections/schedule").then((r) => r.json()),
|
||||
])
|
||||
.then(([events, members, classesData, scheduleData]: [OpenDayEvent[], { name: string }[], { items: { name: string }[] }, { locations: { name: string }[] }]) => {
|
||||
if (events.length > 0) {
|
||||
setEvent(events[0]);
|
||||
loadClasses(events[0].id);
|
||||
}
|
||||
setTrainers(members.map((m) => m.name));
|
||||
setStyles(classesData.items.map((c) => c.name));
|
||||
setHalls(scheduleData.locations.map((l) => l.name));
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
function loadClasses(eventId: number) {
|
||||
adminFetch(`/api/admin/open-day/classes?eventId=${eventId}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: OpenDayClass[]) => setClasses(data))
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// Auto-save event changes
|
||||
const saveEvent = useCallback(
|
||||
(updated: OpenDayEvent) => {
|
||||
if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
|
||||
saveTimerRef.current = setTimeout(async () => {
|
||||
setSaving(true);
|
||||
await adminFetch("/api/admin/open-day", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(updated),
|
||||
});
|
||||
setSaving(false);
|
||||
}, 800);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
function handleEventChange(patch: Partial<OpenDayEvent>) {
|
||||
if (!event) return;
|
||||
const updated = { ...event, ...patch };
|
||||
setEvent(updated);
|
||||
saveEvent(updated);
|
||||
}
|
||||
|
||||
async function createEvent() {
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
const res = await adminFetch("/api/admin/open-day", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ date: today }),
|
||||
});
|
||||
const { id } = await res.json();
|
||||
setEvent({
|
||||
id,
|
||||
date: today,
|
||||
title: "День открытых дверей",
|
||||
pricePerClass: 30,
|
||||
discountPrice: 20,
|
||||
discountThreshold: 3,
|
||||
minBookings: 4,
|
||||
active: true,
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteEvent() {
|
||||
if (!event) return;
|
||||
await adminFetch(`/api/admin/open-day?id=${event.id}`, { method: "DELETE" });
|
||||
setEvent(null);
|
||||
setClasses([]);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 py-12 text-neutral-500 justify-center">
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
Загрузка...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!event) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<h1 className="text-2xl font-bold">День открытых дверей</h1>
|
||||
<p className="mt-2 text-neutral-400">Создайте мероприятие, чтобы начать</p>
|
||||
<button
|
||||
onClick={createEvent}
|
||||
className="mt-6 inline-flex items-center gap-2 rounded-xl bg-gold px-6 py-3 text-sm font-semibold text-black hover:bg-gold-light transition-colors"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Создать мероприятие
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">День открытых дверей</h1>
|
||||
{saving && <span className="text-xs text-neutral-500">Сохранение...</span>}
|
||||
</div>
|
||||
<button
|
||||
onClick={deleteEvent}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-red-500/20 px-3 py-1.5 text-xs text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<EventSettings event={event} onChange={handleEventChange} />
|
||||
|
||||
<ScheduleGrid
|
||||
eventId={event.id}
|
||||
minBookings={event.minBookings}
|
||||
halls={halls}
|
||||
classes={classes}
|
||||
trainers={trainers}
|
||||
styles={styles}
|
||||
onClassesChange={() => loadClasses(event.id)}
|
||||
/>
|
||||
|
||||
<BookingsSection eventId={event.id} eventDate={event.date} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Globe,
|
||||
@@ -11,7 +14,18 @@ import {
|
||||
HelpCircle,
|
||||
Newspaper,
|
||||
Phone,
|
||||
ClipboardList,
|
||||
DoorOpen,
|
||||
UserPlus,
|
||||
} from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
|
||||
interface UnreadCounts {
|
||||
groupBookings: number;
|
||||
mcRegistrations: number;
|
||||
openDayBookings: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
const CARDS = [
|
||||
{ href: "/admin/meta", label: "SEO / Мета", icon: Globe, desc: "Заголовок и описание сайта" },
|
||||
@@ -20,22 +34,82 @@ const CARDS = [
|
||||
{ href: "/admin/team", label: "Команда", icon: Users, desc: "Тренеры и инструкторы" },
|
||||
{ href: "/admin/classes", label: "Направления", icon: BookOpen, desc: "Типы занятий" },
|
||||
{ href: "/admin/master-classes", label: "Мастер-классы", icon: Star, desc: "Мастер-классы и записи" },
|
||||
{ href: "/admin/open-day", label: "День открытых дверей", icon: DoorOpen, desc: "Открытые занятия, расписание, записи" },
|
||||
{ href: "/admin/schedule", label: "Расписание", icon: Calendar, desc: "Расписание занятий" },
|
||||
{ href: "/admin/bookings", label: "Записи", icon: ClipboardList, desc: "Все записи и заявки" },
|
||||
{ href: "/admin/pricing", label: "Цены", icon: DollarSign, desc: "Абонементы и аренда" },
|
||||
{ href: "/admin/faq", label: "FAQ", icon: HelpCircle, desc: "Часто задаваемые вопросы" },
|
||||
{ href: "/admin/news", label: "Новости", icon: Newspaper, desc: "Новости и анонсы" },
|
||||
{ href: "/admin/contact", label: "Контакты", icon: Phone, desc: "Адреса, телефон, карта" },
|
||||
];
|
||||
|
||||
function UnreadWidget({ counts }: { counts: UnreadCounts }) {
|
||||
if (counts.total === 0) return null;
|
||||
|
||||
const items: { label: string; count: number; tab: string }[] = [];
|
||||
if (counts.groupBookings > 0) items.push({ label: "Занятия", count: counts.groupBookings, tab: "classes" });
|
||||
if (counts.mcRegistrations > 0) items.push({ label: "Мастер-классы", count: counts.mcRegistrations, tab: "master-classes" });
|
||||
if (counts.openDayBookings > 0) items.push({ label: "День открытых дверей", count: counts.openDayBookings, tab: "open-day" });
|
||||
|
||||
return (
|
||||
<Link
|
||||
href="/admin/bookings"
|
||||
className="block rounded-xl border border-gold/20 bg-gold/[0.03] p-5 transition-all hover:border-gold/40 hover:bg-gold/[0.06]"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500/10 text-red-400">
|
||||
<UserPlus size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-medium text-white">
|
||||
Новые записи
|
||||
<span className="ml-2 inline-flex items-center justify-center rounded-full bg-red-500 text-white text-[11px] font-bold min-w-[20px] h-[20px] px-1.5">
|
||||
{counts.total}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xs text-neutral-400">Не подтверждённые заявки</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
{items.map((item) => (
|
||||
<div key={item.tab} className="flex items-center gap-1.5 text-xs">
|
||||
<span className="rounded-full bg-gold/15 text-gold font-medium px-2 py-0.5">
|
||||
{item.count}
|
||||
</span>
|
||||
<span className="text-neutral-400">{item.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [counts, setCounts] = useState<UnreadCounts | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
adminFetch("/api/admin/unread-counts")
|
||||
.then((r) => r.json())
|
||||
.then((data: UnreadCounts) => setCounts(data))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Панель управления</h1>
|
||||
<p className="mt-1 text-neutral-400">Выберите раздел для редактирования</p>
|
||||
|
||||
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Unread bookings widget */}
|
||||
{counts && counts.total > 0 && (
|
||||
<div className="mt-6">
|
||||
<UnreadWidget counts={counts} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{CARDS.map((card) => {
|
||||
const Icon = card.icon;
|
||||
const isBookings = card.href === "/admin/bookings";
|
||||
return (
|
||||
<Link
|
||||
key={card.href}
|
||||
@@ -46,9 +120,14 @@ export default function AdminDashboard() {
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gold/10 text-gold">
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-medium text-white group-hover:text-gold transition-colors">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="font-medium text-white group-hover:text-gold transition-colors flex items-center gap-2">
|
||||
{card.label}
|
||||
{isBookings && counts && counts.total > 0 && (
|
||||
<span className="rounded-full bg-red-500 text-white text-[10px] font-bold min-w-[18px] h-[18px] flex items-center justify-center px-1">
|
||||
{counts.total}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
<p className="text-xs text-neutral-500">{card.desc}</p>
|
||||
</div>
|
||||
|
||||
@@ -19,6 +19,7 @@ interface PricingData {
|
||||
rentalTitle: string;
|
||||
rentalItems: { name: string; price: string; note?: string }[];
|
||||
rules: string[];
|
||||
showContactHint?: boolean;
|
||||
}
|
||||
|
||||
function PriceField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
|
||||
@@ -63,6 +64,25 @@ export default function PricingEditorPage() {
|
||||
onChange={(v) => update({ ...data, subtitle: v })}
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Featured selector */}
|
||||
{(() => {
|
||||
const itemOptions = data.items
|
||||
|
||||
40
src/app/api/admin/group-bookings/route.ts
Normal file
40
src/app/api/admin/group-bookings/route.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getGroupBookings, toggleGroupBookingNotification, deleteGroupBooking } from "@/lib/db";
|
||||
|
||||
export async function GET() {
|
||||
const bookings = getGroupBookings();
|
||||
return NextResponse.json(bookings);
|
||||
}
|
||||
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
if (body.action === "toggle-notify") {
|
||||
const { id, field, value } = body;
|
||||
if (!id || !field || typeof value !== "boolean") {
|
||||
return NextResponse.json({ error: "id, field, value are required" }, { status: 400 });
|
||||
}
|
||||
if (field !== "notified_confirm" && field !== "notified_reminder") {
|
||||
return NextResponse.json({ error: "Invalid field" }, { status: 400 });
|
||||
}
|
||||
toggleGroupBookingNotification(id, field, value);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Internal error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
const idStr = request.nextUrl.searchParams.get("id");
|
||||
if (!idStr) {
|
||||
return NextResponse.json({ error: "id parameter is required" }, { status: 400 });
|
||||
}
|
||||
const id = parseInt(idStr, 10);
|
||||
if (isNaN(id)) {
|
||||
return NextResponse.json({ error: "Invalid id" }, { status: 400 });
|
||||
}
|
||||
deleteGroupBooking(id);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getMcRegistrations, addMcRegistration, updateMcRegistration, deleteMcRegistration } from "@/lib/db";
|
||||
import { getMcRegistrations, getAllMcRegistrations, addMcRegistration, updateMcRegistration, toggleMcNotification, deleteMcRegistration } from "@/lib/db";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const title = request.nextUrl.searchParams.get("title");
|
||||
if (!title) {
|
||||
return NextResponse.json({ error: "title parameter is required" }, { status: 400 });
|
||||
if (title) {
|
||||
return NextResponse.json(getMcRegistrations(title));
|
||||
}
|
||||
const registrations = getMcRegistrations(title);
|
||||
return NextResponse.json(registrations);
|
||||
// No title = return all registrations
|
||||
return NextResponse.json(getAllMcRegistrations());
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
@@ -27,6 +27,21 @@ export async function POST(request: NextRequest) {
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
|
||||
// Toggle notification status
|
||||
if (body.action === "toggle-notify") {
|
||||
const { id, field, value } = body;
|
||||
if (!id || !field || typeof value !== "boolean") {
|
||||
return NextResponse.json({ error: "id, field, value are required" }, { status: 400 });
|
||||
}
|
||||
if (field !== "notified_confirm" && field !== "notified_reminder") {
|
||||
return NextResponse.json({ error: "Invalid field" }, { status: 400 });
|
||||
}
|
||||
toggleMcNotification(id, field, value);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
|
||||
// Regular update
|
||||
const { id, name, instagram, telegram } = body;
|
||||
if (!id || !name || !instagram) {
|
||||
return NextResponse.json({ error: "id, name, instagram are required" }, { status: 400 });
|
||||
|
||||
43
src/app/api/admin/open-day/bookings/route.ts
Normal file
43
src/app/api/admin/open-day/bookings/route.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import {
|
||||
getOpenDayBookings,
|
||||
toggleOpenDayNotification,
|
||||
deleteOpenDayBooking,
|
||||
} from "@/lib/db";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const eventIdStr = request.nextUrl.searchParams.get("eventId");
|
||||
if (!eventIdStr) return NextResponse.json({ error: "eventId is required" }, { status: 400 });
|
||||
const eventId = parseInt(eventIdStr, 10);
|
||||
if (isNaN(eventId)) return NextResponse.json({ error: "Invalid eventId" }, { status: 400 });
|
||||
return NextResponse.json(getOpenDayBookings(eventId));
|
||||
}
|
||||
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
if (body.action === "toggle-notify") {
|
||||
const { id, field, value } = body;
|
||||
if (!id || !field || typeof value !== "boolean") {
|
||||
return NextResponse.json({ error: "id, field, value required" }, { status: 400 });
|
||||
}
|
||||
if (field !== "notified_confirm" && field !== "notified_reminder") {
|
||||
return NextResponse.json({ error: "Invalid field" }, { status: 400 });
|
||||
}
|
||||
toggleOpenDayNotification(id, field, value);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Internal error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
const idStr = request.nextUrl.searchParams.get("id");
|
||||
if (!idStr) return NextResponse.json({ error: "id is required" }, { status: 400 });
|
||||
const id = parseInt(idStr, 10);
|
||||
if (isNaN(id)) return NextResponse.json({ error: "Invalid id" }, { status: 400 });
|
||||
deleteOpenDayBooking(id);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
54
src/app/api/admin/open-day/classes/route.ts
Normal file
54
src/app/api/admin/open-day/classes/route.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import {
|
||||
getOpenDayClasses,
|
||||
addOpenDayClass,
|
||||
updateOpenDayClass,
|
||||
deleteOpenDayClass,
|
||||
} from "@/lib/db";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const eventIdStr = request.nextUrl.searchParams.get("eventId");
|
||||
if (!eventIdStr) return NextResponse.json({ error: "eventId is required" }, { status: 400 });
|
||||
const eventId = parseInt(eventIdStr, 10);
|
||||
if (isNaN(eventId)) return NextResponse.json({ error: "Invalid eventId" }, { status: 400 });
|
||||
return NextResponse.json(getOpenDayClasses(eventId));
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { eventId, hall, startTime, endTime, trainer, style } = body;
|
||||
if (!eventId || !hall || !startTime || !endTime || !trainer || !style) {
|
||||
return NextResponse.json({ error: "All fields required" }, { status: 400 });
|
||||
}
|
||||
const id = addOpenDayClass(eventId, { hall, startTime, endTime, trainer, style });
|
||||
return NextResponse.json({ ok: true, id });
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : "Internal error";
|
||||
if (msg.includes("UNIQUE")) {
|
||||
return NextResponse.json({ error: "Этот слот уже занят" }, { status: 409 });
|
||||
}
|
||||
return NextResponse.json({ error: msg }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
if (!body.id) return NextResponse.json({ error: "id is required" }, { status: 400 });
|
||||
const { id, ...data } = body;
|
||||
updateOpenDayClass(id, data);
|
||||
return NextResponse.json({ ok: true });
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Internal error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
const idStr = request.nextUrl.searchParams.get("id");
|
||||
if (!idStr) return NextResponse.json({ error: "id is required" }, { status: 400 });
|
||||
const id = parseInt(idStr, 10);
|
||||
if (isNaN(id)) return NextResponse.json({ error: "Invalid id" }, { status: 400 });
|
||||
deleteOpenDayClass(id);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
54
src/app/api/admin/open-day/route.ts
Normal file
54
src/app/api/admin/open-day/route.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import {
|
||||
getOpenDayEvents,
|
||||
getOpenDayEvent,
|
||||
createOpenDayEvent,
|
||||
updateOpenDayEvent,
|
||||
deleteOpenDayEvent,
|
||||
} from "@/lib/db";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const idStr = request.nextUrl.searchParams.get("id");
|
||||
if (idStr) {
|
||||
const id = parseInt(idStr, 10);
|
||||
if (isNaN(id)) return NextResponse.json({ error: "Invalid id" }, { status: 400 });
|
||||
const event = getOpenDayEvent(id);
|
||||
if (!event) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||
return NextResponse.json(event);
|
||||
}
|
||||
return NextResponse.json(getOpenDayEvents());
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
if (!body.date || typeof body.date !== "string") {
|
||||
return NextResponse.json({ error: "date is required" }, { status: 400 });
|
||||
}
|
||||
const id = createOpenDayEvent(body);
|
||||
return NextResponse.json({ ok: true, id });
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Internal error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
if (!body.id) return NextResponse.json({ error: "id is required" }, { status: 400 });
|
||||
const { id, ...data } = body;
|
||||
updateOpenDayEvent(id, data);
|
||||
return NextResponse.json({ ok: true });
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Internal error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
const idStr = request.nextUrl.searchParams.get("id");
|
||||
if (!idStr) return NextResponse.json({ error: "id is required" }, { status: 400 });
|
||||
const id = parseInt(idStr, 10);
|
||||
if (isNaN(id)) return NextResponse.json({ error: "Invalid id" }, { status: 400 });
|
||||
deleteOpenDayEvent(id);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
6
src/app/api/admin/unread-counts/route.ts
Normal file
6
src/app/api/admin/unread-counts/route.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getUnreadBookingCounts } from "@/lib/db";
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json(getUnreadBookingCounts());
|
||||
}
|
||||
24
src/app/api/group-booking/route.ts
Normal file
24
src/app/api/group-booking/route.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { addGroupBooking } from "@/lib/db";
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { name, phone, groupInfo, instagram, telegram } = body;
|
||||
|
||||
if (!name || typeof name !== "string" || !phone || typeof phone !== "string") {
|
||||
return NextResponse.json({ error: "name and phone are required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const cleanName = name.trim().slice(0, 100);
|
||||
const cleanPhone = phone.trim().slice(0, 30);
|
||||
const cleanGroup = typeof groupInfo === "string" ? groupInfo.trim().slice(0, 200) : undefined;
|
||||
const cleanIg = typeof instagram === "string" ? instagram.trim().slice(0, 100) : undefined;
|
||||
const cleanTg = typeof telegram === "string" ? telegram.trim().slice(0, 100) : undefined;
|
||||
|
||||
const id = addGroupBooking(cleanName, cleanPhone, cleanGroup, cleanIg, cleanTg);
|
||||
return NextResponse.json({ ok: true, id });
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Internal error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { addMcRegistration } from "@/lib/db";
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { masterClassTitle, name, instagram, telegram } = body;
|
||||
const { masterClassTitle, name, phone, instagram, telegram } = body;
|
||||
|
||||
if (!masterClassTitle || typeof masterClassTitle !== "string" || masterClassTitle.length > 200) {
|
||||
return NextResponse.json({ error: "masterClassTitle is required" }, { status: 400 });
|
||||
@@ -12,18 +12,20 @@ export async function POST(request: Request) {
|
||||
if (!name || typeof name !== "string" || !name.trim() || name.length > 100) {
|
||||
return NextResponse.json({ error: "name is required (max 100 chars)" }, { status: 400 });
|
||||
}
|
||||
if (!instagram || typeof instagram !== "string" || !instagram.trim() || instagram.length > 100) {
|
||||
return NextResponse.json({ error: "Instagram аккаунт обязателен" }, { status: 400 });
|
||||
}
|
||||
if (telegram && (typeof telegram !== "string" || telegram.length > 100)) {
|
||||
return NextResponse.json({ error: "Telegram too long" }, { status: 400 });
|
||||
if (!phone || typeof phone !== "string" || !phone.trim()) {
|
||||
return NextResponse.json({ error: "Телефон обязателен" }, { status: 400 });
|
||||
}
|
||||
|
||||
const cleanIg = instagram && typeof instagram === "string" ? instagram.trim().slice(0, 100) : "";
|
||||
const cleanTg = telegram && typeof telegram === "string" ? telegram.trim().slice(0, 100) : undefined;
|
||||
const cleanPhone = phone.trim().slice(0, 30);
|
||||
|
||||
const id = addMcRegistration(
|
||||
masterClassTitle.trim().slice(0, 200),
|
||||
name.trim().slice(0, 100),
|
||||
instagram.trim().slice(0, 100),
|
||||
telegram && typeof telegram === "string" ? telegram.trim().slice(0, 100) : undefined
|
||||
cleanIg,
|
||||
cleanTg,
|
||||
cleanPhone
|
||||
);
|
||||
|
||||
return NextResponse.json({ ok: true, id });
|
||||
|
||||
54
src/app/api/open-day-register/route.ts
Normal file
54
src/app/api/open-day-register/route.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import {
|
||||
addOpenDayBooking,
|
||||
isOpenDayClassBookedByPhone,
|
||||
getPersonOpenDayBookings,
|
||||
getOpenDayEvent,
|
||||
} from "@/lib/db";
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { classId, eventId, name, phone, instagram, telegram } = body;
|
||||
|
||||
if (!classId || !eventId || !name || !phone) {
|
||||
return NextResponse.json({ error: "classId, eventId, name, phone are required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const cleanName = (name as string).trim().slice(0, 100);
|
||||
const cleanPhone = (phone as string).replace(/\D/g, "").slice(0, 15);
|
||||
const cleanIg = instagram ? (instagram as string).trim().slice(0, 100) : undefined;
|
||||
const cleanTg = telegram ? (telegram as string).trim().slice(0, 100) : undefined;
|
||||
|
||||
if (!cleanPhone) {
|
||||
return NextResponse.json({ error: "Invalid phone" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Check not already booked
|
||||
if (isOpenDayClassBookedByPhone(classId, cleanPhone)) {
|
||||
return NextResponse.json({ error: "Вы уже записаны на это занятие" }, { status: 409 });
|
||||
}
|
||||
|
||||
const id = addOpenDayBooking(classId, eventId, {
|
||||
name: cleanName,
|
||||
phone: cleanPhone,
|
||||
instagram: cleanIg,
|
||||
telegram: cleanTg,
|
||||
});
|
||||
|
||||
// Return total bookings for this person (for discount calculation)
|
||||
const totalBookings = getPersonOpenDayBookings(eventId, cleanPhone);
|
||||
const event = getOpenDayEvent(eventId);
|
||||
const pricePerClass = event && totalBookings >= event.discountThreshold
|
||||
? event.discountPrice
|
||||
: event?.pricePerClass ?? 30;
|
||||
|
||||
return NextResponse.json({ ok: true, id, totalBookings, pricePerClass });
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : "Internal error";
|
||||
if (msg.includes("UNIQUE")) {
|
||||
return NextResponse.json({ error: "Вы уже записаны на это занятие" }, { status: 409 });
|
||||
}
|
||||
return NextResponse.json({ error: msg }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -12,15 +12,19 @@ import { BackToTop } from "@/components/ui/BackToTop";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
import { getContent } from "@/lib/content";
|
||||
import { OpenDay } from "@/components/sections/OpenDay";
|
||||
import { getActiveOpenDay } from "@/lib/openDay";
|
||||
|
||||
export default function HomePage() {
|
||||
const content = getContent();
|
||||
const openDayData = getActiveOpenDay();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
<Hero data={content.hero} />
|
||||
{openDayData && <OpenDay data={openDayData} />}
|
||||
<About
|
||||
data={content.about}
|
||||
stats={{
|
||||
|
||||
@@ -324,6 +324,21 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ===== Notification Pulse ===== */
|
||||
|
||||
@keyframes pulse-urgent {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-urgent {
|
||||
animation: pulse-urgent 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ===== Section Divider ===== */
|
||||
|
||||
.section-divider {
|
||||
|
||||
Reference in New Issue
Block a user