refactor: dashboard cards with clickable status counts + tab bar restored

- Dashboard cards show all 4 statuses inline: new (gold), contacted (blue),
  confirmed (green), declined (red) — big numbers with consistent status colors
- Each number+label is clickable to filter the tab by that status
- Tab bar restored below dashboard
- Removed filter chips from SearchBar (dashboard handles filtering)
- Open Day card uses cyan border (distinct from blue contacted status)

src/app/admin/bookings/SearchBar.tsx

@@ -1,18 +1,14 @@
 "use client";
 
 import { useState, useRef } from "react";
-import { Search, X, Filter } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
-import { type BookingFilter, type SearchResult, BOOKING_STATUSES } from "./types";
+import type { SearchResult } from "./types";
 
 export function SearchBar({
-  filter,
-  onFilterChange,
   onResults,
   onClear,
 }: {
-  filter: BookingFilter;
-  onFilterChange: (f: BookingFilter) => void;
   onResults: (results: SearchResult[]) => void;
   onClear: () => void;
 }) {
@@ -40,45 +36,19 @@ export function SearchBar({
   }
 
   return (
-    <div className="space-y-2">
+    <div className="relative">
-      <div className="relative">
+      <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500" />
-        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500" />
+      <input
-        <input
+        type="text"
-          type="text"
+        value={query}
-          value={query}
+        onChange={(e) => handleChange(e.target.value)}
-          onChange={(e) => handleChange(e.target.value)}
+        placeholder="Поиск по имени или телефону..."
-          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"
-          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 && (
-        {query && (
+        <button onClick={clear} className="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-white">
-          <button onClick={clear} className="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-white">
+          <X size={14} />
-            <X size={14} />
+        </button>
-          </button>
-        )}
-      </div>
-      {(
-        <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>
   );

src/app/admin/bookings/page.tsx

@@ -2,10 +2,10 @@
 
 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 { Phone, Instagram, Send, Bell, CheckCircle2, XCircle, Clock, Star, Calendar, DoorOpen, X, Plus } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
 import { MS_PER_DAY } from "@/lib/constants";
-import { type BookingStatus, type BookingFilter, type SearchResult, BOOKING_STATUSES, SHORT_DAYS, fmtDate } from "./types";
+import { type BookingStatus, type BookingFilter, type SearchResult, SHORT_DAYS, fmtDate } from "./types";
 import { LoadingSpinner, ContactLinks, BookingCard, StatusBadge, StatusActions, DeleteBtn } from "./BookingComponents";
 import { GenericBookingsList } from "./GenericBookingsList";
 import { AddBookingModal } from "./AddBookingModal";
@@ -574,18 +574,28 @@ function RemindersTab() {
 
 // --- Dashboard Summary ---
 
+interface TabCounts { new: number; contacted: number; confirmed: number; declined: number }
+
 interface DashboardCounts {
-  classesNew: number;
+  classes: TabCounts;
-  classesContacted: number;
+  mc: TabCounts;
-  mcNew: number;
+  od: TabCounts;
-  mcContacted: number;
-  odNew: number;
-  odContacted: number;
   remindersToday: number;
   remindersTomorrow: number;
 }
 
-function DashboardSummary({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
+function countByStatus(items: { status: string }[]): TabCounts {
+  const c = { new: 0, contacted: 0, confirmed: 0, declined: 0 };
+  for (const i of items) if (i.status in c) c[i.status as keyof TabCounts]++;
+  return c;
+}
+
+
+function DashboardSummary({ statusFilter, onNavigate, onFilter }: {
+  statusFilter: BookingFilter;
+  onNavigate: (tab: Tab) => void;
+  onFilter: (f: BookingFilter) => void;
+}) {
   const [counts, setCounts] = useState<DashboardCounts | null>(null);
 
   useEffect(() => {
@@ -594,12 +604,10 @@ function DashboardSummary({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
 
     Promise.all([
       adminFetch("/api/admin/group-bookings").then((r) => r.json()),
-      // Fetch MC registrations + section data to filter out archived
       Promise.all([
         adminFetch("/api/admin/mc-registrations").then((r) => r.json()),
         adminFetch("/api/admin/sections/masterClasses").then((r) => r.json()),
       ]).then(([regs, mcData]: [{ status: string; masterClassTitle: string }[], { items?: { title: string; slots: { date: string }[] }[] }]) => {
-        // Build set of upcoming MC titles
         const upcomingTitles = new Set<string>();
         for (const mc of mcData.items || []) {
           const earliest = mc.slots?.reduce((min, s) => s.date < min ? s.date : min, mc.slots[0]?.date ?? "");
@@ -607,7 +615,6 @@ function DashboardSummary({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
         }
         return regs.filter((r) => upcomingTitles.has(r.masterClassTitle));
       }),
-      // Fetch Open Day — only upcoming events
       adminFetch("/api/admin/open-day").then((r) => r.json()).then(async (events: { id: number; date: string }[]) => {
         const active = events.find((e) => e.date >= today);
         if (!active) return [];
@@ -616,54 +623,57 @@ function DashboardSummary({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
       adminFetch("/api/admin/reminders").then((r) => r.json()).catch(() => []),
     ]).then(([gb, mc, od, rem]: [{ status: string }[], { status: string }[], { status: string }[], { eventDate: string }[]]) => {
       setCounts({
-        classesNew: gb.filter((b) => b.status === "new").length,
+        classes: countByStatus(gb),
-        classesContacted: gb.filter((b) => b.status === "contacted").length,
+        mc: countByStatus(mc),
-        mcNew: mc.filter((b) => b.status === "new").length,
+        od: countByStatus(od),
-        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(() => {}); // Dashboard is non-critical, silent fail OK
+    }).catch(() => {});
   }, []);
 
   if (!counts) return null;
 
-  const cards: { tab: Tab; label: string; urgent: number; urgentLabel: string; pending: number; pendingLabel: string; color: string; urgentColor: string }[] = [
+  const cards: { tab: Tab; label: string; counts: TabCounts | null; color: string; urgentColor: string }[] = [
-    {
+    { tab: "reminders", label: "Напоминания", counts: null, color: "border-amber-500/20", urgentColor: "text-amber-400" },
-      tab: "reminders", label: "Напоминания",
+    { tab: "classes", label: "Занятия", counts: counts.classes, color: "border-gold/20", urgentColor: "text-gold" },
-      urgent: counts.remindersToday, urgentLabel: "сегодня",
+    { tab: "master-classes", label: "Мастер-классы", counts: counts.mc, color: "border-purple-500/20", urgentColor: "text-purple-400" },
-      pending: counts.remindersTomorrow, pendingLabel: "завтра",
+    { tab: "open-day", label: "Open Day", counts: counts.od, color: "border-cyan-500/20", urgentColor: "text-cyan-400" },
-      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);
+  const hasWork = cards.some((c) => {
+    if (c.counts) return c.counts.new + c.counts.contacted + c.counts.confirmed + c.counts.declined > 0;
+    return counts.remindersToday + counts.remindersTomorrow > 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;
+        // Reminders card
+        if (c.tab === "reminders") {
+          const total = counts.remindersToday + counts.remindersTomorrow;
+          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">
+                {counts.remindersToday > 0 && <><span className={`text-lg font-bold ${c.urgentColor}`}>{counts.remindersToday}</span><span className="text-[10px] text-neutral-500">сегодня</span></>}
+                {counts.remindersTomorrow > 0 && <><span className="text-sm font-medium text-neutral-400">{counts.remindersTomorrow}</span><span className="text-[10px] text-neutral-500">завтра</span></>}
+              </div>
+            </button>
+          );
+        }
+
+        // Booking cards — big numbers for new/contacted, small chips for confirmed/declined
+        const tc = c.counts!;
+        const total = tc.new + tc.contacted + tc.confirmed + tc.declined;
         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>
@@ -671,24 +681,47 @@ function DashboardSummary({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
           </div>
         );
         return (
-          <button
+          <button key={c.tab} onClick={() => { onNavigate(c.tab); onFilter("all"); }}
-            key={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]`}>
-            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">
+            <div className="flex items-baseline gap-2 mt-1 flex-wrap">
-              {c.urgent > 0 && (
+              {tc.new > 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="inline-flex items-baseline gap-1 cursor-pointer hover:opacity-80 transition-opacity"
-                  <span className="text-sm font-medium text-neutral-400">{c.pending}</span>
+                    onClick={(e) => { e.stopPropagation(); onNavigate(c.tab); onFilter(statusFilter === "new" ? "all" : "new"); }}>
-                  <span className="text-[10px] text-neutral-500">{c.pendingLabel}</span>
+                    <span className="text-lg font-bold text-gold">{tc.new}</span>
+                    <span className="text-[10px] text-neutral-500">новых</span>
+                  </span>
+                </>
+              )}
+              {tc.contacted > 0 && (
+                <>
+                  {tc.new > 0 && <span className="text-neutral-700">·</span>}
+                  <span className="inline-flex items-baseline gap-1 cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={(e) => { e.stopPropagation(); onNavigate(c.tab); onFilter(statusFilter === "contacted" ? "all" : "contacted"); }}>
+                    <span className="text-sm font-medium text-blue-400">{tc.contacted}</span>
+                    <span className="text-[10px] text-neutral-500">в работе</span>
+                  </span>
+                </>
+              )}
+              {tc.confirmed > 0 && (
+                <>
+                  {(tc.new > 0 || tc.contacted > 0) && <span className="text-neutral-700">·</span>}
+                  <span className="inline-flex items-baseline gap-1 cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={(e) => { e.stopPropagation(); onNavigate(c.tab); onFilter(statusFilter === "confirmed" ? "all" : "confirmed"); }}>
+                    <span className="text-sm font-medium text-emerald-400">{tc.confirmed}</span>
+                    <span className="text-[10px] text-neutral-500">подтв.</span>
+                  </span>
+                </>
+              )}
+              {tc.declined > 0 && (
+                <>
+                  {(tc.new > 0 || tc.contacted > 0 || tc.confirmed > 0) && <span className="text-neutral-700">·</span>}
+                  <span className="inline-flex items-baseline gap-1 cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={(e) => { e.stopPropagation(); onNavigate(c.tab); onFilter(statusFilter === "declined" ? "all" : "declined"); }}>
+                    <span className="text-sm font-medium text-red-400">{tc.declined}</span>
+                    <span className="text-[10px] text-neutral-500">отказ</span>
+                  </span>
                 </>
               )}
             </div>
@@ -792,8 +825,6 @@ function BookingsPageInner() {
       {/* Search */}
       <div className="mt-3">
         <SearchBar
-          filter={statusFilter}
-          onFilterChange={setStatusFilter}
           onResults={setSearchResults}
           onClear={() => setSearchResults(null)}
         />
@@ -836,7 +867,7 @@ function BookingsPageInner() {
       ) : (
         <>
           {/* Dashboard — what needs attention */}
-          <DashboardSummary key={`dash-${dashboardKey}-${refreshKey}`} onNavigate={setTab} />
+          <DashboardSummary key={`dash-${dashboardKey}-${refreshKey}`} statusFilter={statusFilter} onNavigate={setTab} onFilter={setStatusFilter} />
 
           {/* Tabs */}
           <div className="mt-5 flex border-b border-white/10">
@@ -845,9 +876,7 @@ function BookingsPageInner() {
                 key={t.key}
                 onClick={() => setTab(t.key)}
                 className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
-                  tab === t.key
+                  tab === t.key ? "text-gold" : "text-neutral-400 hover:text-white"
-                    ? "text-gold"
-                    : "text-neutral-400 hover:text-white"
                 }`}
               >
                 {t.label}
@@ -858,7 +887,7 @@ function BookingsPageInner() {
             ))}
           </div>
 
-          {/* Tab content — auto-refreshes when new bookings detected */}
+          {/* Tab content */}
           <div className="mt-4" key={`tab-${refreshKey}`}>
             {tab === "reminders" && <RemindersTab />}
             {tab === "classes" && <GroupBookingsTab filter={statusFilter} onDataChange={refreshDashboard} />}