refactor: move status filter from per-tab pills to global search bar

- Remove FilterTabs from inside each booking tab - Add compact status chips (Все/Новая/Связались/Подтверждено/Отказ) below the search bar — one global filter for all tabs - Filter chips hidden during active text search - Status filter toggles on click (click again to deselect) - GenericBookingsList accepts filter as prop instead of managing internally
2026-03-24 17:15:47 +03:00
parent 057f1ff1ee
commit 49d710b2e7
5 changed files with 77 additions and 49 deletions
--- a/src/app/admin/bookings/GenericBookingsList.tsx
+++ b/src/app/admin/bookings/GenericBookingsList.tsx
@@ -3,8 +3,8 @@
 import { useState, useMemo } from "react";
 import { ChevronDown, ChevronRight, Archive } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
-import { type BookingStatus, type BookingFilter, type BaseBooking, type BookingGroup, countStatuses, sortByStatus } from "./types";
-import { FilterTabs, EmptyState, BookingCard, ContactLinks, StatusBadge, StatusActions, DeleteBtn } from "./BookingComponents";
+import { type BookingStatus, type BookingFilter, type BaseBooking, type BookingGroup, sortByStatus } from "./types";
+import { EmptyState, BookingCard, ContactLinks, StatusBadge, StatusActions, DeleteBtn } from "./BookingComponents";
 import { fmtDate } from "./types";
 import { InlineNotes } from "./InlineNotes";
 import { useToast } from "./Toast";
@@ -12,6 +12,7 @@ import { useToast } from "./Toast";
 interface GenericBookingsListProps<T extends BaseBooking> {
  items: T[];
  endpoint: string;
+  filter: BookingFilter;
  onItemsChange: (fn: (prev: T[]) => T[]) => void;
  groups?: BookingGroup<T>[];
  renderExtra?: (item: T) => React.ReactNode;
@@ -21,18 +22,16 @@ interface GenericBookingsListProps<T extends BaseBooking> {
 export function GenericBookingsList<T extends BaseBooking>({
  items,
  endpoint,
+  filter,
  onItemsChange,
  groups,
  renderExtra,
  onConfirm,
 }: GenericBookingsListProps<T>) {
-  const [filter, setFilter] = useState<BookingFilter>("all");
  const [showArchived, setShowArchived] = useState(false);
  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
  const { showError } = useToast();

-  const counts = useMemo(() => countStatuses(items), [items]);
-
  async function handleStatus(id: number, status: BookingStatus) {
    if (status === "confirmed" && onConfirm) {
      onConfirm(id);
@@ -113,18 +112,12 @@ export function GenericBookingsList<T extends BaseBooking>({
    const activeGroups = filteredGroups.filter((g) => !g.isArchived);
    const archivedGroups = filteredGroups.filter((g) => g.isArchived);
    const archivedCount = archivedGroups.reduce((sum, g) => sum + g.items.length, 0);
-    const allArchived = activeGroups.length === 0 && archivedCount > 0;
-
-    // Count only active (non-archived) items for filter pills
-    const activeItems = items.filter((item) => {
-      const group = groups.find((g) => g.items.some((gi) => gi.id === item.id));
-      return group && !group.isArchived;
-    });
-    const activeCounts = countStatuses(activeItems);
+    const allArchived = activeGroups.length === 0 && archivedCount > 0 && filter === "all";

    function renderGroup(group: BookingGroup<T>) {
      const isOpen = expanded[group.key] ?? !group.isArchived;
-      const groupCounts = countStatuses(group.items);
+      const groupCounts = { new: 0, contacted: 0, confirmed: 0, declined: 0 };
+      for (const item of group.items) groupCounts[item.status] = (groupCounts[item.status] || 0) + 1;
      return (
        <div key={group.key} className={`rounded-xl border overflow-hidden ${group.isArchived ? "border-white/5 opacity-60" : "border-white/10"}`}>
          <button
@@ -166,16 +159,14 @@ export function GenericBookingsList<T extends BaseBooking>({

    return (
      <div>
-        {allArchived ? (
+        {allArchived && (
          <p className="text-sm text-neutral-500 py-4">Все записи в архиве</p>
-        ) : (
-          <>
-            <FilterTabs filter={filter} counts={activeCounts} total={activeItems.length} onFilter={setFilter} />
-            <div className="mt-3 space-y-2">
-              {activeGroups.length === 0 && archivedGroups.length === 0 && <EmptyState total={items.length} />}
-              {activeGroups.map(renderGroup)}
-            </div>
-          </>
+        )}
+        {!allArchived && (
+          <div className="space-y-2">
+            {activeGroups.length === 0 && archivedGroups.length === 0 && <EmptyState total={items.length} />}
+            {activeGroups.map(renderGroup)}
+          </div>
        )}
        {archivedCount > 0 && (
          <div className="mt-4">
@@ -205,8 +196,7 @@ export function GenericBookingsList<T extends BaseBooking>({

  return (
    <div>
-      <FilterTabs filter={filter} counts={counts} total={items.length} onFilter={setFilter} />
-      <div className="mt-3 space-y-2">
+      <div className="space-y-2">
        {filtered.length === 0 && <EmptyState total={items.length} />}
        {filtered.map((item) => renderItem(item, false))}
      </div>
--- a/src/app/admin/bookings/McRegistrationsTab.tsx
+++ b/src/app/admin/bookings/McRegistrationsTab.tsx
@@ -2,7 +2,7 @@

 import { useState, useEffect, useMemo } from "react";
 import { adminFetch } from "@/lib/csrf";
-import { type BaseBooking, type BookingGroup } from "./types";
+import { type BookingFilter, type BaseBooking, type BookingGroup } from "./types";
 import { LoadingSpinner } from "./BookingComponents";
 import { GenericBookingsList } from "./GenericBookingsList";

@@ -13,7 +13,7 @@ interface McRegistration extends BaseBooking {
 interface McSlot { date: string; startTime: string }
 interface McItem { title: string; slots: McSlot[] }

-export function McRegistrationsTab() {
+export function McRegistrationsTab({ filter }: { filter: BookingFilter }) {
  const [regs, setRegs] = useState<McRegistration[]>([]);
  const [mcDates, setMcDates] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(true);
@@ -73,6 +73,7 @@ export function McRegistrationsTab() {
    <GenericBookingsList<McRegistration>
      items={regs}
      endpoint="/api/admin/mc-registrations"
+      filter={filter}
      onItemsChange={setRegs}
      groups={groups}
    />
--- a/src/app/admin/bookings/OpenDayBookingsTab.tsx
+++ b/src/app/admin/bookings/OpenDayBookingsTab.tsx
@@ -2,7 +2,7 @@

 import { useState, useEffect, useMemo } from "react";
 import { adminFetch } from "@/lib/csrf";
-import { type BaseBooking, type BookingGroup } from "./types";
+import { type BookingFilter, type BaseBooking, type BookingGroup } from "./types";
 import { LoadingSpinner } from "./BookingComponents";
 import { GenericBookingsList } from "./GenericBookingsList";

@@ -17,7 +17,7 @@ interface OpenDayBooking extends BaseBooking {

 interface EventInfo { id: number; date: string; title?: string }

-export function OpenDayBookingsTab() {
+export function OpenDayBookingsTab({ filter }: { filter: BookingFilter }) {
  const [bookings, setBookings] = useState<OpenDayBooking[]>([]);
  const [events, setEvents] = useState<EventInfo[]>([]);
  const [loading, setLoading] = useState(true);
@@ -79,6 +79,7 @@ export function OpenDayBookingsTab() {
    <GenericBookingsList<OpenDayBooking>
      items={bookings}
      endpoint="/api/admin/open-day/bookings"
+      filter={filter}
      onItemsChange={setBookings}
      groups={groups}
    />
--- a/src/app/admin/bookings/SearchBar.tsx
+++ b/src/app/admin/bookings/SearchBar.tsx
@@ -1,14 +1,18 @@
 "use client";

 import { useState, useRef } from "react";
-import { Search, X } from "lucide-react";
+import { Search, X, Filter } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
-import type { SearchResult } from "./types";
+import { type BookingFilter, type SearchResult, BOOKING_STATUSES } from "./types";

 export function SearchBar({
+  filter,
+  onFilterChange,
  onResults,
  onClear,
 }: {
+  filter: BookingFilter;
+  onFilterChange: (f: BookingFilter) => void;
  onResults: (results: SearchResult[]) => void;
  onClear: () => void;
 }) {
@@ -35,20 +39,48 @@ export function SearchBar({
    onClear();
  }

+  const isSearching = query.trim().length >= 2;
+
  return (
-    <div className="relative">
-      <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500" />
-      <input
-        type="text"
-        value={query}
-        onChange={(e) => handleChange(e.target.value)}
-        placeholder="Поиск по имени или телефону..."
-        className="w-full rounded-lg border border-white/[0.08] bg-white/[0.04] py-2 pl-9 pr-8 text-sm text-white placeholder-neutral-500 outline-none focus:border-gold/40"
-      />
-      {query && (
-        <button onClick={clear} className="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-white">
-          <X size={14} />
-        </button>
+    <div className="space-y-2">
+      <div className="relative">
+        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500" />
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="Поиск по имени или телефону..."
+          className="w-full rounded-lg border border-white/[0.08] bg-white/[0.04] py-2 pl-9 pr-8 text-sm text-white placeholder-neutral-500 outline-none focus:border-gold/40"
+        />
+        {query && (
+          <button onClick={clear} className="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-white">
+            <X size={14} />
+          </button>
+        )}
+      </div>
+      {!isSearching && (
+        <div className="flex items-center gap-1.5">
+          <Filter size={12} className="text-neutral-600 shrink-0" />
+          <button
+            onClick={() => onFilterChange("all")}
+            className={`rounded-full px-2.5 py-1 text-[11px] font-medium transition-all ${
+              filter === "all" ? "bg-gold/20 text-gold border border-gold/40" : "text-neutral-500 hover:text-neutral-300"
+            }`}
+          >
+            Все
+          </button>
+          {BOOKING_STATUSES.map((s) => (
+            <button
+              key={s.key}
+              onClick={() => onFilterChange(filter === s.key ? "all" : s.key)}
+              className={`rounded-full px-2.5 py-1 text-[11px] font-medium transition-all ${
+                filter === s.key ? `${s.bg} ${s.color} border ${s.border}` : "text-neutral-500 hover:text-neutral-300"
+              }`}
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
      )}
    </div>
  );
--- a/src/app/admin/bookings/page.tsx
+++ b/src/app/admin/bookings/page.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Phone, Instagram, Send, ChevronDown, ChevronRight, Bell, CheckCircle2, XCircle, Clock, Star, Calendar, DoorOpen, X, Plus } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
-import { type BookingStatus, type SearchResult, BOOKING_STATUSES, SHORT_DAYS, fmtDate } from "./types";
+import { type BookingStatus, type BookingFilter, type SearchResult, BOOKING_STATUSES, SHORT_DAYS, fmtDate } from "./types";
 import { LoadingSpinner, ContactLinks, BookingCard, StatusBadge, StatusActions, DeleteBtn } from "./BookingComponents";
 import { GenericBookingsList } from "./GenericBookingsList";
 import { AddBookingModal } from "./AddBookingModal";
@@ -230,7 +230,7 @@ function ConfirmModal({
 interface ScheduleClassInfo { type: string; trainer: string; time: string; day: string; hall: string; address: string; groupId?: string }
 interface ScheduleLocation { name: string; address: string; days: { day: string; classes: { time: string; trainer: string; type: string; groupId?: string }[] }[] }

-function GroupBookingsTab() {
+function GroupBookingsTab({ filter }: { filter: BookingFilter }) {
  const [bookings, setBookings] = useState<GroupBooking[]>([]);
  const [allClasses, setAllClasses] = useState<ScheduleClassInfo[]>([]);
  const [loading, setLoading] = useState(true);
@@ -294,6 +294,7 @@ function GroupBookingsTab() {
      <GenericBookingsList<GroupBooking>
        items={bookings}
        endpoint="/api/admin/group-bookings"
+        filter={filter}
        onItemsChange={setBookings}
        onConfirm={(id) => setConfirmingId(id)}
        renderExtra={(b) => (
@@ -696,6 +697,7 @@ function BookingsPageInner() {
  const [tab, setTab] = useState<Tab>("reminders");
  const [addOpen, setAddOpen] = useState(false);
  const [searchResults, setSearchResults] = useState<SearchResult[] | null>(null);
+  const [statusFilter, setStatusFilter] = useState<BookingFilter>("all");
  const [newBookingsBanner, setNewBookingsBanner] = useState(false);
  const lastTotalRef = useRef<number | null>(null);
  const { showError } = useToast();
@@ -782,6 +784,8 @@ function BookingsPageInner() {
      {/* Search */}
      <div className="mt-3">
        <SearchBar
+          filter={statusFilter}
+          onFilterChange={setStatusFilter}
          onResults={setSearchResults}
          onClear={() => setSearchResults(null)}
        />
@@ -844,9 +848,9 @@ function BookingsPageInner() {
          {/* Tab content — no key={refreshKey}, banner handles new data */}
          <div className="mt-4">
            {tab === "reminders" && <RemindersTab />}
-            {tab === "classes" && <GroupBookingsTab />}
-            {tab === "master-classes" && <McRegistrationsTab />}
-            {tab === "open-day" && <OpenDayBookingsTab />}
+            {tab === "classes" && <GroupBookingsTab filter={statusFilter} />}
+            {tab === "master-classes" && <McRegistrationsTab filter={statusFilter} />}
+            {tab === "open-day" && <OpenDayBookingsTab filter={statusFilter} />}
          </div>
        </>
      )}