fix: dashboard counters refresh after status changes
When a booking status is changed, confirmed, or deleted in any tab, the dashboard summary cards re-fetch to show updated counts. Previously the dashboard was stale until page reload.
This commit is contained in:
@@ -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({ filter }: { filter: BookingFilter }) {
|
||||
function GroupBookingsTab({ filter, onDataChange }: { filter: BookingFilter; onDataChange?: () => void }) {
|
||||
const [bookings, setBookings] = useState<GroupBooking[]>([]);
|
||||
const [allClasses, setAllClasses] = useState<ScheduleClassInfo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -284,6 +284,7 @@ function GroupBookingsTab({ filter }: { filter: BookingFilter }) {
|
||||
}) : Promise.resolve(),
|
||||
]);
|
||||
setConfirmingId(null);
|
||||
onDataChange?.();
|
||||
}
|
||||
|
||||
if (loading) return <LoadingSpinner />;
|
||||
@@ -296,6 +297,7 @@ function GroupBookingsTab({ filter }: { filter: BookingFilter }) {
|
||||
endpoint="/api/admin/group-bookings"
|
||||
filter={filter}
|
||||
onItemsChange={setBookings}
|
||||
onDataChange={onDataChange}
|
||||
onConfirm={(id) => setConfirmingId(id)}
|
||||
renderExtra={(b) => (
|
||||
<>
|
||||
@@ -700,6 +702,8 @@ function BookingsPageInner() {
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[] | null>(null);
|
||||
const [statusFilter, setStatusFilter] = useState<BookingFilter>("all");
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [dashboardKey, setDashboardKey] = useState(0);
|
||||
const refreshDashboard = useCallback(() => setDashboardKey((k) => k + 1), []);
|
||||
const lastTotalRef = useRef<number | null>(null);
|
||||
const { showError } = useToast();
|
||||
|
||||
@@ -814,7 +818,7 @@ function BookingsPageInner() {
|
||||
) : (
|
||||
<>
|
||||
{/* Dashboard — what needs attention */}
|
||||
<DashboardSummary key={refreshKey} onNavigate={setTab} />
|
||||
<DashboardSummary key={`dash-${dashboardKey}-${refreshKey}`} onNavigate={setTab} />
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mt-5 flex border-b border-white/10">
|
||||
@@ -839,9 +843,9 @@ function BookingsPageInner() {
|
||||
{/* Tab content — auto-refreshes when new bookings detected */}
|
||||
<div className="mt-4" key={`tab-${refreshKey}`}>
|
||||
{tab === "reminders" && <RemindersTab />}
|
||||
{tab === "classes" && <GroupBookingsTab filter={statusFilter} />}
|
||||
{tab === "master-classes" && <McRegistrationsTab filter={statusFilter} />}
|
||||
{tab === "open-day" && <OpenDayBookingsTab filter={statusFilter} />}
|
||||
{tab === "classes" && <GroupBookingsTab filter={statusFilter} onDataChange={refreshDashboard} />}
|
||||
{tab === "master-classes" && <McRegistrationsTab filter={statusFilter} onDataChange={refreshDashboard} />}
|
||||
{tab === "open-day" && <OpenDayBookingsTab filter={statusFilter} onDataChange={refreshDashboard} />}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user