feat: dashboard summary on bookings page, archive expired MC and Open Day
- Dashboard cards show new/pending counts per tab, click to navigate - MC tab: expired master classes (past date or deleted) move to collapsible archive - Open Day tab: past events move to archive section - Date badges on MC group headers (gold active, strikethrough archived) - Fix MC content API key (masterClasses not master-classes) - Fuzzy title matching for MC registration → content date lookup Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { ChevronDown, ChevronRight, Archive } from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import {
|
||||
type BookingStatus, type BookingFilter,
|
||||
@@ -21,35 +21,75 @@ interface McRegistration {
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface McSlot { date: string; startTime: string }
|
||||
interface McItem { title: string; slots: McSlot[] }
|
||||
|
||||
export function McRegistrationsTab() {
|
||||
const [regs, setRegs] = useState<McRegistration[]>([]);
|
||||
const [mcDates, setMcDates] = useState<Record<string, string>>({}); // title → latest slot date
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<BookingFilter>("all");
|
||||
const [showArchived, setShowArchived] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
adminFetch("/api/admin/mc-registrations")
|
||||
.then((r) => r.json())
|
||||
.then((data: McRegistration[]) => setRegs(data))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
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?: McItem[] }]) => {
|
||||
setRegs(regData);
|
||||
// Build lookup: MC title → latest slot date
|
||||
// Use both exact match and fuzzy match (registration title contains MC title or vice versa)
|
||||
const dates: Record<string, string> = {};
|
||||
const mcItems = mcData.items || [];
|
||||
for (const mc of mcItems) {
|
||||
const latestSlot = mc.slots?.reduce((latest, s) => s.date > latest ? s.date : latest, "");
|
||||
if (latestSlot) dates[mc.title] = latestSlot;
|
||||
}
|
||||
// Also match registration titles that don't exactly match MC titles
|
||||
const regTitles = new Set(regData.map((r) => r.masterClassTitle));
|
||||
for (const regTitle of regTitles) {
|
||||
if (dates[regTitle]) continue; // already matched
|
||||
// Try fuzzy: find MC whose title is contained in regTitle or vice versa
|
||||
for (const mc of mcItems) {
|
||||
const latestSlot = mc.slots?.reduce((latest, s) => s.date > latest ? s.date : latest, "");
|
||||
if (!latestSlot) continue;
|
||||
if (regTitle.toLowerCase().includes(mc.title.toLowerCase()) || mc.title.toLowerCase().includes(regTitle.toLowerCase())) {
|
||||
dates[regTitle] = latestSlot;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
setMcDates(dates);
|
||||
}).catch(() => {}).finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
|
||||
function isExpired(title: string) {
|
||||
const date = mcDates[title];
|
||||
if (!date) return true; // no matching MC in content = deleted/archived
|
||||
return date < today;
|
||||
}
|
||||
|
||||
const counts = useMemo(() => countStatuses(regs), [regs]);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const map: Record<string, McRegistration[]> = {};
|
||||
const { active, archived } = useMemo(() => {
|
||||
const active: Record<string, McRegistration[]> = {};
|
||||
const archived: 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);
|
||||
const target = isExpired(r.masterClassTitle) ? archived : active;
|
||||
if (!target[r.masterClassTitle]) target[r.masterClassTitle] = [];
|
||||
target[r.masterClassTitle].push(r);
|
||||
}
|
||||
for (const items of Object.values(map)) {
|
||||
for (const items of [...Object.values(active), ...Object.values(archived)]) {
|
||||
const sorted = sortByStatus(items);
|
||||
items.length = 0;
|
||||
items.push(...sorted);
|
||||
}
|
||||
return map;
|
||||
}, [regs, filter]);
|
||||
return { active, archived };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [regs, filter, mcDates]);
|
||||
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||||
|
||||
@@ -69,56 +109,90 @@ export function McRegistrationsTab() {
|
||||
|
||||
if (loading) return <LoadingSpinner />;
|
||||
|
||||
function renderGroup(title: string, items: McRegistration[], isArchived: boolean) {
|
||||
const isOpen = expanded[title] ?? !isArchived;
|
||||
const groupCounts = countStatuses(items);
|
||||
return (
|
||||
<div key={title} className={`rounded-xl border overflow-hidden ${isArchived ? "border-white/5 opacity-60" : "border-white/10"}`}>
|
||||
<button
|
||||
onClick={() => setExpanded((p) => ({ ...p, [title]: !isOpen }))}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 transition-colors text-left ${isArchived ? "bg-neutral-900/50 hover:bg-neutral-800/50" : "bg-neutral-900 hover:bg-neutral-800/80"}`}
|
||||
>
|
||||
{isOpen ? <ChevronDown size={14} className="text-neutral-500 shrink-0" /> : <ChevronRight size={14} className="text-neutral-500 shrink-0" />}
|
||||
<span className={`font-medium text-sm truncate ${isArchived ? "text-neutral-400" : "text-white"}`}>{title}</span>
|
||||
{mcDates[title] && (
|
||||
<span className={`text-[10px] rounded-full px-2 py-0.5 shrink-0 ${
|
||||
isArchived ? "text-neutral-600 bg-neutral-800 line-through" : "text-gold bg-gold/10"
|
||||
}`}>
|
||||
{new Date(mcDates[title] + "T12:00").toLocaleDateString("ru-RU", { day: "numeric", month: "short" })}
|
||||
</span>
|
||||
)}
|
||||
{isArchived && (
|
||||
<span className="text-[10px] text-neutral-600 bg-neutral-800 rounded-full px-2 py-0.5 shrink-0">архив</span>
|
||||
)}
|
||||
<span className="text-[10px] text-neutral-500 bg-neutral-800 rounded-full px-2 py-0.5 shrink-0">{items.length} чел.</span>
|
||||
{!isArchived && (
|
||||
<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} />
|
||||
{!isArchived && <StatusActions status={r.status} onStatus={(s) => handleStatus(r.id, s)} />}
|
||||
</div>
|
||||
</BookingCard>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const archivedCount = Object.values(archived).reduce((sum, items) => sum + items.length, 0);
|
||||
|
||||
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>
|
||||
);
|
||||
})}
|
||||
{Object.keys(active).length === 0 && Object.keys(archived).length === 0 && <EmptyState total={regs.length} />}
|
||||
{Object.entries(active).map(([title, items]) => renderGroup(title, items, false))}
|
||||
</div>
|
||||
|
||||
{archivedCount > 0 && (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={() => setShowArchived((v) => !v)}
|
||||
className="flex items-center gap-2 text-xs text-neutral-500 hover:text-neutral-300 transition-colors"
|
||||
>
|
||||
<Archive size={13} />
|
||||
{showArchived ? "Скрыть архив" : `Архив (${archivedCount} записей)`}
|
||||
{showArchived ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
</button>
|
||||
{showArchived && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{Object.entries(archived).map(([title, items]) => renderGroup(title, items, true))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { ChevronDown, ChevronRight, Archive } from "lucide-react";
|
||||
import { adminFetch } from "@/lib/csrf";
|
||||
import {
|
||||
type BookingStatus, type BookingFilter,
|
||||
@@ -26,48 +26,76 @@ interface OpenDayBooking {
|
||||
classHall?: string;
|
||||
}
|
||||
|
||||
interface EventInfo { id: number; date: string; title?: string }
|
||||
|
||||
export function OpenDayBookingsTab() {
|
||||
const [bookings, setBookings] = useState<OpenDayBooking[]>([]);
|
||||
const [events, setEvents] = useState<EventInfo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<BookingFilter>("all");
|
||||
const [showArchived, setShowArchived] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
adminFetch("/api/admin/open-day")
|
||||
.then((r) => r.json())
|
||||
.then((events: { id: number; date: string }[]) => {
|
||||
if (events.length === 0) {
|
||||
setLoading(false);
|
||||
return;
|
||||
.then(async (evts: EventInfo[]) => {
|
||||
setEvents(evts);
|
||||
if (evts.length === 0) return;
|
||||
// Fetch bookings for all events
|
||||
const allBookings: OpenDayBooking[] = [];
|
||||
for (const ev of evts) {
|
||||
const data = await adminFetch(`/api/admin/open-day/bookings?eventId=${ev.id}`).then((r) => r.json());
|
||||
allBookings.push(...data);
|
||||
}
|
||||
const ev = events[0];
|
||||
return adminFetch(`/api/admin/open-day/bookings?eventId=${ev.id}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: OpenDayBooking[]) => setBookings(data));
|
||||
setBookings(allBookings);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
|
||||
const eventDateMap = useMemo(() => {
|
||||
const map: Record<number, string> = {};
|
||||
for (const ev of events) map[ev.id] = ev.date;
|
||||
return map;
|
||||
}, [events]);
|
||||
|
||||
function isExpired(eventId: number) {
|
||||
const date = eventDateMap[eventId];
|
||||
return date ? date < today : false;
|
||||
}
|
||||
|
||||
const counts = useMemo(() => countStatuses(bookings), [bookings]);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
type GroupInfo = { hall: string; time: string; style: string; trainer: string; items: OpenDayBooking[]; eventId: number };
|
||||
|
||||
const { activeGroups, archivedGroups } = 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[] }> = {};
|
||||
const activeMap: Record<string, GroupInfo> = {};
|
||||
const archivedMap: Record<string, GroupInfo> = {};
|
||||
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);
|
||||
const key = `${b.eventId}|${b.classHall}|${b.classTime}|${b.classStyle}`;
|
||||
const target = isExpired(b.eventId) ? archivedMap : activeMap;
|
||||
if (!target[key]) target[key] = { hall: b.classHall || "—", time: b.classTime || "—", style: b.classStyle || "—", trainer: b.classTrainer || "—", items: [], eventId: b.eventId };
|
||||
target[key].items.push(b);
|
||||
}
|
||||
for (const g of Object.values(map)) {
|
||||
for (const g of [...Object.values(activeMap), ...Object.values(archivedMap)]) {
|
||||
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 sortGroups = (entries: [string, GroupInfo][]) =>
|
||||
entries.sort(([, a], [, b]) => {
|
||||
const hallCmp = a.hall.localeCompare(b.hall);
|
||||
return hallCmp !== 0 ? hallCmp : a.time.localeCompare(b.time);
|
||||
});
|
||||
return {
|
||||
activeGroups: sortGroups(Object.entries(activeMap)),
|
||||
archivedGroups: sortGroups(Object.entries(archivedMap)),
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [bookings, filter, eventDateMap]);
|
||||
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||||
|
||||
@@ -87,58 +115,88 @@ export function OpenDayBookingsTab() {
|
||||
|
||||
if (loading) return <LoadingSpinner />;
|
||||
|
||||
function renderGroup(key: string, group: GroupInfo, isArchived: boolean) {
|
||||
const isOpen = expanded[key] ?? !isArchived;
|
||||
const groupCounts = countStatuses(group.items);
|
||||
const eventDate = eventDateMap[group.eventId];
|
||||
return (
|
||||
<div key={key} className={`rounded-xl border overflow-hidden ${isArchived ? "border-white/5 opacity-60" : "border-white/10"}`}>
|
||||
<button
|
||||
onClick={() => setExpanded((p) => ({ ...p, [key]: !isOpen }))}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 transition-colors text-left ${isArchived ? "bg-neutral-900/50 hover:bg-neutral-800/50" : "bg-neutral-900 hover:bg-neutral-800/80"}`}
|
||||
>
|
||||
{isOpen ? <ChevronDown size={14} className="text-neutral-500 shrink-0" /> : <ChevronRight size={14} className="text-neutral-500 shrink-0" />}
|
||||
<span className={`text-xs font-medium shrink-0 ${isArchived ? "text-neutral-500" : "text-gold"}`}>{group.time}</span>
|
||||
<span className={`font-medium text-sm truncate ${isArchived ? "text-neutral-400" : "text-white"}`}>{group.style}</span>
|
||||
<span className="text-xs text-neutral-500 truncate hidden sm:inline">· {group.trainer}</span>
|
||||
{isArchived && (
|
||||
<span className="text-[10px] text-neutral-600 bg-neutral-800 rounded-full px-2 py-0.5 shrink-0">
|
||||
{eventDate ? new Date(eventDate + "T12:00").toLocaleDateString("ru-RU", { day: "numeric", month: "short" }) : "архив"}
|
||||
</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>
|
||||
{!isArchived && (
|
||||
<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} />
|
||||
{!isArchived && <StatusActions status={b.status} onStatus={(s) => handleStatus(b.id, s)} />}
|
||||
</div>
|
||||
</BookingCard>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const archivedCount = archivedGroups.reduce((sum, [, g]) => sum + g.items.length, 0);
|
||||
|
||||
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>
|
||||
);
|
||||
})}
|
||||
{activeGroups.length === 0 && archivedGroups.length === 0 && <EmptyState total={bookings.length} />}
|
||||
{activeGroups.map(([key, group]) => renderGroup(key, group, false))}
|
||||
</div>
|
||||
|
||||
{archivedCount > 0 && (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={() => setShowArchived((v) => !v)}
|
||||
className="flex items-center gap-2 text-xs text-neutral-500 hover:text-neutral-300 transition-colors"
|
||||
>
|
||||
<Archive size={13} />
|
||||
{showArchived ? "Скрыть архив" : `Архив (${archivedCount} записей)`}
|
||||
{showArchived ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
</button>
|
||||
{showArchived && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{archivedGroups.map(([key, group]) => renderGroup(key, group, true))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -644,6 +644,118 @@ function RemindersTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// --- Dashboard Summary ---
|
||||
|
||||
interface DashboardCounts {
|
||||
classesNew: number;
|
||||
classesContacted: number;
|
||||
mcNew: number;
|
||||
mcContacted: number;
|
||||
odNew: number;
|
||||
odContacted: number;
|
||||
remindersToday: number;
|
||||
remindersTomorrow: number;
|
||||
}
|
||||
|
||||
function DashboardSummary({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
|
||||
const [counts, setCounts] = useState<DashboardCounts | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
adminFetch("/api/admin/group-bookings").then((r) => r.json()),
|
||||
adminFetch("/api/admin/mc-registrations").then((r) => r.json()),
|
||||
adminFetch("/api/admin/open-day").then((r) => r.json()).then(async (events: { id: number }[]) => {
|
||||
if (events.length === 0) return [];
|
||||
return adminFetch(`/api/admin/open-day/bookings?eventId=${events[0].id}`).then((r) => r.json());
|
||||
}),
|
||||
adminFetch("/api/admin/reminders").then((r) => r.json()).catch(() => []),
|
||||
]).then(([gb, mc, od, rem]: [{ status: string }[], { status: string }[], { status: string }[], { eventDate: string }[]]) => {
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
const tomorrow = new Date(Date.now() + 86400000).toISOString().split("T")[0];
|
||||
setCounts({
|
||||
classesNew: gb.filter((b) => b.status === "new").length,
|
||||
classesContacted: gb.filter((b) => b.status === "contacted").length,
|
||||
mcNew: mc.filter((b) => b.status === "new").length,
|
||||
mcContacted: mc.filter((b) => b.status === "contacted").length,
|
||||
odNew: od.filter((b) => b.status === "new").length,
|
||||
odContacted: od.filter((b) => b.status === "contacted").length,
|
||||
remindersToday: rem.filter((r) => r.eventDate === today).length,
|
||||
remindersTomorrow: rem.filter((r) => r.eventDate === tomorrow).length,
|
||||
});
|
||||
}).catch(() => {});
|
||||
}, []);
|
||||
|
||||
if (!counts) return null;
|
||||
|
||||
const cards: { tab: Tab; label: string; urgent: number; urgentLabel: string; pending: number; pendingLabel: string; color: string; urgentColor: string }[] = [
|
||||
{
|
||||
tab: "reminders", label: "Напоминания",
|
||||
urgent: counts.remindersToday, urgentLabel: "сегодня",
|
||||
pending: counts.remindersTomorrow, pendingLabel: "завтра",
|
||||
color: "border-amber-500/20", urgentColor: "text-amber-400",
|
||||
},
|
||||
{
|
||||
tab: "classes", label: "Занятия",
|
||||
urgent: counts.classesNew, urgentLabel: "новых",
|
||||
pending: counts.classesContacted, pendingLabel: "в работе",
|
||||
color: "border-gold/20", urgentColor: "text-gold",
|
||||
},
|
||||
{
|
||||
tab: "master-classes", label: "Мастер-классы",
|
||||
urgent: counts.mcNew, urgentLabel: "новых",
|
||||
pending: counts.mcContacted, pendingLabel: "в работе",
|
||||
color: "border-purple-500/20", urgentColor: "text-purple-400",
|
||||
},
|
||||
{
|
||||
tab: "open-day", label: "Open Day",
|
||||
urgent: counts.odNew, urgentLabel: "новых",
|
||||
pending: counts.odContacted, pendingLabel: "в работе",
|
||||
color: "border-blue-500/20", urgentColor: "text-blue-400",
|
||||
},
|
||||
];
|
||||
|
||||
const hasWork = cards.some((c) => c.urgent > 0 || c.pending > 0);
|
||||
if (!hasWork) return null;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mt-4">
|
||||
{cards.map((c) => {
|
||||
const total = c.urgent + c.pending;
|
||||
if (total === 0) return (
|
||||
<div key={c.tab} className="rounded-xl border border-white/5 bg-neutral-900/50 p-3 opacity-40">
|
||||
<p className="text-xs text-neutral-500">{c.label}</p>
|
||||
<p className="text-lg font-bold text-neutral-600 mt-1">—</p>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<button
|
||||
key={c.tab}
|
||||
onClick={() => onNavigate(c.tab)}
|
||||
className={`rounded-xl border ${c.color} bg-neutral-900 p-3 text-left transition-all hover:bg-neutral-800/80 hover:scale-[1.02]`}
|
||||
>
|
||||
<p className="text-xs text-neutral-400">{c.label}</p>
|
||||
<div className="flex items-baseline gap-2 mt-1">
|
||||
{c.urgent > 0 && (
|
||||
<span className={`text-lg font-bold ${c.urgentColor}`}>{c.urgent}</span>
|
||||
)}
|
||||
{c.urgent > 0 && (
|
||||
<span className="text-[10px] text-neutral-500">{c.urgentLabel}</span>
|
||||
)}
|
||||
{c.pending > 0 && (
|
||||
<>
|
||||
{c.urgent > 0 && <span className="text-neutral-700">·</span>}
|
||||
<span className="text-sm font-medium text-neutral-400">{c.pending}</span>
|
||||
<span className="text-[10px] text-neutral-500">{c.pendingLabel}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Main Page ---
|
||||
|
||||
const TABS: { key: Tab; label: string }[] = [
|
||||
@@ -659,9 +771,9 @@ export default function BookingsPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Записи</h1>
|
||||
<p className="mt-1 text-neutral-400 text-sm">
|
||||
Все заявки и записи в одном месте
|
||||
</p>
|
||||
|
||||
{/* Dashboard — what needs attention */}
|
||||
<DashboardSummary onNavigate={setTab} />
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mt-5 flex border-b border-white/10">
|
||||
|
||||
Reference in New Issue
Block a user