From 1047b71abe25a58253fa57f6540709bc365c9f94 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 24 Mar 2026 23:11:53 +0300
Subject: [PATCH] feat: auto-focus and scroll to newly created class in Open
 Day schedule

---
 src/app/admin/open-day/page.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/open-day/page.tsx b/src/app/admin/open-day/page.tsx
index 9e99d9d..2c62e3b 100644
--- a/src/app/admin/open-day/page.tsx
+++ b/src/app/admin/open-day/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import {
   Plus, X, Loader2, Calendar, Trash2, Ban, CheckCircle2, RotateCcw, Sparkles,
 } from "lucide-react";
@@ -186,6 +186,7 @@ function ClassCell({
   minBookings,
   trainers,
   styles,
+  autoEdit,
   onUpdate,
   onDelete,
   onCancel,
@@ -194,13 +195,21 @@ function ClassCell({
   minBookings: number;
   trainers: string[];
   styles: string[];
+  autoEdit?: boolean;
   onUpdate: (id: number, data: Partial<OpenDayClass>) => void;
   onDelete: (id: number) => void;
   onCancel: (id: number) => void;
 }) {
-  const [editing, setEditing] = useState(false);
+  const [editing, setEditing] = useState(!!autoEdit);
   const [trainer, setTrainer] = useState(cls.trainer);
   const [style, setStyle] = useState(cls.style);
+  const cellRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (autoEdit && cellRef.current) {
+      cellRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [autoEdit]);
   const [endTime, setEndTime] = useState(cls.endTime);
 
   const atRisk = cls.bookingCount < minBookings && !cls.cancelled;
@@ -216,7 +225,7 @@ function ClassCell({
 
   if (editing) {
     return (
-      <div className="p-2 space-y-1.5">
+      <div ref={cellRef} className="p-2 space-y-1.5 ring-1 ring-gold/30 rounded-lg">
         <select value={style} onChange={(e) => setStyle(e.target.value)} className={selectCls}>
           <option value="">Стиль...</option>
           {styles.map((s) => <option key={s} value={s}>{s}</option>)}
@@ -332,6 +341,8 @@ function ScheduleGrid({
     return counts;
   }, [classes, halls]);
 
+  const [newClassTime, setNewClassTime] = useState<string | null>(null);
+
   async function addClass(startTime: string) {
     const endTime = addHour(startTime);
     await adminFetch("/api/admin/open-day/classes", {
@@ -339,6 +350,7 @@ function ScheduleGrid({
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ eventId, hall: selectedHall, startTime, endTime, trainer: "—", style: "—" }),
     });
+    setNewClassTime(startTime);
     onClassesChange();
   }
 
@@ -406,7 +418,8 @@ function ScheduleGrid({
                         minBookings={minBookings}
                         trainers={trainers}
                         styles={styles}
-                        onUpdate={updateClass}
+                        autoEdit={cls.startTime === newClassTime}
+                        onUpdate={(id, data) => { setNewClassTime(null); updateClass(id, data); }}
                         onDelete={deleteClass}
                         onCancel={cancelClass}
                       />