@pisell/materials 1.8.41 → 1.8.43

package/lib/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendarDemo.js

@@ -1,3813 +0,0 @@
-const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
-const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
-const require_objectWithoutProperties = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
-const require_index = require("../../../pisellTimeNavigator/utils/index.js");
-const require_calendarPersistGuard = require("./calendarPersistGuard.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
-let antd = require("antd");
-let lucide_react = require("lucide-react");
-//#region src/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendarDemo.tsx
-const _excluded = [
-	"initial",
-	"animate",
-	"exit",
-	"transition",
-	"layoutId",
-	"layout",
-	"whileHover",
-	"whileTap",
-	"variants"
-], _excluded2 = [
-	"children",
-	"mode",
-	"initial"
-];
-/**
-* 日历原型曾用 framer-motion 做过渡/共享布局动画；低代码 Webpack4 无法稳定打包 framer-motion → motion-dom 的 ESM。
-* 此处用轻量 stub：去掉 motion 专用 props，保留 DOM 与交互（无 FLIP/退场动画）。
-*/
-function omitMotionOnlyProps(props) {
-	const { initial: _i, animate: _a, exit: _e, transition: _t, layoutId: _lid, layout: _lay, whileHover: _wh, whileTap: _wt, variants: _v } = props;
-	return require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
-}
-const motion = {
-	div: react.default.forwardRef((props, ref) => /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2({ ref }, omitMotionOnlyProps(props)))),
-	button: react.default.forwardRef((props, ref) => /* @__PURE__ */ react.default.createElement("button", require_objectSpread2._objectSpread2({ ref }, omitMotionOnlyProps(props))))
-};
-function LayoutGroup({ children }) {
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
-}
-function AnimatePresence(_ref) {
-	let { children, mode: _m, initial: _init } = _ref;
-	require_objectWithoutProperties._objectWithoutProperties(_ref, _excluded2);
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
-}
-const DEFAULT_COURTS = [
-	{
-		id: "vip1",
-		name: "VIP Court 1",
-		type: "VIP"
-	},
-	{
-		id: "vip2",
-		name: "VIP Court 2",
-		type: "VIP"
-	},
-	{
-		id: "vip3",
-		name: "VIP Court 3",
-		type: "VIP"
-	},
-	{
-		id: "vip4",
-		name: "VIP Court 4",
-		type: "VIP"
-	},
-	{
-		id: "normal1",
-		name: "Standard Court 1",
-		type: "Standard"
-	},
-	{
-		id: "normal2",
-		name: "Standard Court 2",
-		type: "Standard"
-	},
-	{
-		id: "normal3",
-		name: "Standard Court 3",
-		type: "Standard"
-	},
-	{
-		id: "normal4",
-		name: "Standard Court 4",
-		type: "Standard"
-	},
-	{
-		id: "normal5",
-		name: "Standard Court 5",
-		type: "Standard"
-	},
-	{
-		id: "normal6",
-		name: "Standard Court 6",
-		type: "Standard"
-	}
-];
-const monthNames = [
-	"Jan",
-	"Feb",
-	"Mar",
-	"Apr",
-	"May",
-	"Jun",
-	"Jul",
-	"Aug",
-	"Sep",
-	"Oct",
-	"Nov",
-	"Dec"
-];
-const weekdayNames = [
-	"Mon",
-	"Tue",
-	"Wed",
-	"Thu",
-	"Fri",
-	"Sat",
-	"Sun"
-];
-const weekdaysMap = [
-	1,
-	2,
-	3,
-	4,
-	5,
-	6,
-	0
-];
-const timeSliceMinutes = 60;
-/** 未传 timelineRange 时日历日列与演示数据对齐的默认营业日界钟 */
-const DEFAULT_CALENDAR_TIMELINE = {
-	start: "02:00",
-	end: "02:00"
-};
-const frozenColWidth = 132;
-const dayColWidth = 92;
-const dayRowHeight = 122;
-const groupRowHeight = 54;
-const dayHeaderHeight = 56;
-const demoNow = {
-	date: "2026-03-31",
-	hour: 17.25
-};
-const seedHourlyBookings = [
-	{
-		id: "b1",
-		courtId: "vip1",
-		date: "2026-03-29",
-		startHour: 9,
-		endHour: 12,
-		name: "Mr Zhang",
-		kind: "booking",
-		phone: "0412 111 111",
-		statusTag: "new"
-	},
-	{
-		id: "b2",
-		courtId: "vip1",
-		date: "2026-03-31",
-		startHour: 14,
-		endHour: 18,
-		name: "Ms Li",
-		kind: "booking",
-		phone: "0412 222 222",
-		statusTag: "change"
-	},
-	{
-		id: "b3",
-		courtId: "vip2",
-		date: "2026-03-30",
-		startHour: 10,
-		endHour: 13,
-		name: "Coach Wang",
-		kind: "booking",
-		phone: "0412 333 333",
-		statusTag: "checked_in"
-	},
-	{
-		id: "b4",
-		courtId: "vip2",
-		date: "2026-04-01",
-		startHour: 9,
-		endHour: 20,
-		name: "Maintenance",
-		kind: "block",
-		note: "Equipment maintenance",
-		blockBy: "Allen",
-		blockedAt: "2026-03-31"
-	},
-	{
-		id: "b5",
-		courtId: "vip3",
-		date: "2026-04-02",
-		startHour: 15,
-		endHour: 18,
-		name: "Group Booking",
-		kind: "booking",
-		phone: "0412 555 555"
-	},
-	{
-		id: "b6",
-		courtId: "vip4",
-		date: "2026-04-03",
-		startHour: 11,
-		endHour: 14,
-		name: "Ms Chen",
-		kind: "booking",
-		phone: "0412 666 666",
-		statusTag: "pending"
-	},
-	{
-		id: "b7",
-		courtId: "normal1",
-		date: "2026-03-29",
-		startHour: 9,
-		endHour: 11,
-		name: "Trial Class",
-		kind: "booking"
-	},
-	{
-		id: "b8",
-		courtId: "normal1",
-		date: "2026-03-31",
-		startHour: 18,
-		endHour: 20,
-		name: "Full Court",
-		kind: "booking",
-		statusTag: "checked_in"
-	},
-	{
-		id: "b9",
-		courtId: "normal2",
-		date: "2026-03-30",
-		startHour: 9,
-		endHour: 20,
-		name: "Blocked",
-		kind: "block",
-		note: "Internal event",
-		blockBy: "Allen",
-		blockedAt: "2026-03-30"
-	},
-	{
-		id: "b10",
-		courtId: "normal3",
-		date: "2026-03-31",
-		startHour: 9,
-		endHour: 10,
-		name: "Member A",
-		kind: "booking",
-		statusTag: "cancel"
-	},
-	{
-		id: "b11",
-		courtId: "normal3",
-		date: "2026-03-31",
-		startHour: 10,
-		endHour: 11,
-		name: "Member B",
-		kind: "booking"
-	},
-	{
-		id: "b12",
-		courtId: "normal3",
-		date: "2026-03-31",
-		startHour: 11,
-		endHour: 12,
-		name: "Member C",
-		kind: "booking"
-	},
-	{
-		id: "b13",
-		courtId: "normal3",
-		date: "2026-03-31",
-		startHour: 13,
-		endHour: 14,
-		name: "Member D",
-		kind: "booking"
-	},
-	{
-		id: "b14",
-		courtId: "normal3",
-		date: "2026-03-31",
-		startHour: 15,
-		endHour: 16,
-		name: "Member E",
-		kind: "booking"
-	},
-	{
-		id: "b15",
-		courtId: "normal4",
-		date: "2026-04-04",
-		startHour: 16,
-		endHour: 19,
-		name: "Match",
-		kind: "booking",
-		statusTag: "new"
-	},
-	{
-		id: "b16",
-		courtId: "normal5",
-		date: "2026-04-04",
-		startHour: 9,
-		endHour: 20,
-		name: "Repair",
-		kind: "block",
-		note: "All-day closure",
-		blockBy: "Allen",
-		blockedAt: "2026-04-01"
-	},
-	{
-		id: "b17",
-		courtId: "normal6",
-		date: "2026-04-01",
-		startHour: 13,
-		endHour: 16,
-		name: "Walk-in",
-		kind: "booking",
-		statusTag: "pending"
-	},
-	{
-		id: "b18",
-		courtId: "vip3",
-		date: "2026-04-02",
-		endDate: "2026-04-03",
-		startHour: 19,
-		endHour: 10,
-		name: "Overnight Booking",
-		kind: "booking",
-		phone: "0412 777 777",
-		statusTag: "change"
-	},
-	{
-		id: "b19",
-		courtId: "vip4",
-		date: "2026-03-31",
-		startHour: 12,
-		endHour: 14,
-		name: "Lunch Peak",
-		kind: "booking",
-		statusTag: "pending"
-	},
-	{
-		id: "b20",
-		courtId: "normal4",
-		date: "2026-03-31",
-		startHour: 10,
-		endHour: 12,
-		name: "Open Court A",
-		kind: "booking"
-	},
-	{
-		id: "b21",
-		courtId: "normal5",
-		date: "2026-03-31",
-		startHour: 12,
-		endHour: 15,
-		name: "Open Court B",
-		kind: "booking",
-		statusTag: "new"
-	},
-	{
-		id: "b22",
-		courtId: "vip2",
-		date: "2026-03-31",
-		startHour: 16,
-		endHour: 18,
-		name: "Practice Lesson",
-		kind: "booking",
-		statusTag: "pending"
-	},
-	{
-		id: "b23",
-		courtId: "normal1",
-		date: "2026-03-31",
-		startHour: 14,
-		endHour: 17,
-		name: "Team Event",
-		kind: "booking"
-	}
-];
-function fmtDate(date) {
-	return `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, "0")}-${`${date.getDate()}`.padStart(2, "0")}`;
-}
-function parseDate(str) {
-	const [y, m, d] = str.split("-").map(Number);
-	return new Date(y, m - 1, d);
-}
-function addDays(date, n) {
-	const next = new Date(date);
-	next.setDate(next.getDate() + n);
-	return next;
-}
-function startOfWeek(date) {
-	const d = new Date(date);
-	const day = d.getDay();
-	const diff = day === 0 ? -6 : 1 - day;
-	d.setDate(d.getDate() + diff);
-	d.setHours(0, 0, 0, 0);
-	return d;
-}
-function rangeDays(anchor) {
-	const start = startOfWeek(anchor);
-	return Array.from({ length: 7 }, (_, i) => addDays(start, i));
-}
-function isHourInTimelineSlots(hour, hourSlots) {
-	if (!(hourSlots === null || hourSlots === void 0 ? void 0 : hourSlots.length)) return false;
-	return hourSlots.some((x) => Math.abs(x - hour) < 1e-6);
-}
-function formatHourLabel(hour) {
-	const totalMin = Math.round(hour * 60);
-	const h = Math.floor(totalMin / 60);
-	const m = totalMin % 60;
-	const clockH = (h % 24 + 24) % 24;
-	return `${String(clockH).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
-}
-function buildTimeOptions(start = 8, end = 20, sliceMinutes = timeSliceMinutes) {
-	const out = [];
-	for (let m = start * 60; m <= end * 60; m += sliceMinutes) out.push(m / 60);
-	return out;
-}
-function monthGrid(date, bookings, courtsList = DEFAULT_COURTS, hourSlotsIn) {
-	const hourSlots = hourSlotsIn && hourSlotsIn.length ? hourSlotsIn : require_index.buildCalendarHourSlotsFromRange(DEFAULT_CALENDAR_TIMELINE, date);
-	const year = date.getFullYear();
-	const month = date.getMonth();
-	const start = startOfWeek(new Date(year, month, 1));
-	return Array.from({ length: 35 }, (_, i) => addDays(start, i)).map((day) => {
-		const key = fmtDate(day);
-		const dayBookings = bookings.filter((b) => b.date === key && b.kind === "booking");
-		const blocks = bookings.filter((b) => b.date === key && b.kind === "block");
-		const fullyBookedCourts = courtsList.filter((court) => {
-			var _hourSlots$length;
-			const items = bookings.filter((b) => b.courtId === court.id && b.date === key);
-			const occupied = /* @__PURE__ */ new Set();
-			items.forEach((b) => {
-				for (let h = b.startHour; h < b.endHour; h++) occupied.add(h);
-			});
-			const slotCount = (_hourSlots$length = hourSlots === null || hourSlots === void 0 ? void 0 : hourSlots.length) !== null && _hourSlots$length !== void 0 ? _hourSlots$length : 14;
-			return Array.from(occupied).filter((h) => isHourInTimelineSlots(h, hourSlots)).length >= slotCount;
-		}).length;
-		return {
-			date: day,
-			key,
-			inMonth: day.getMonth() === month,
-			bookingCount: dayBookings.length,
-			blockCount: blocks.length,
-			fullyBooked: fullyBookedCourts >= courtsList.length
-		};
-	});
-}
-function getBookingSegmentForDate(item, dateKey) {
-	if (!item.endDate || item.endDate === item.date) {
-		if (item.date !== dateKey) return null;
-		return {
-			startHour: item.startHour,
-			endHour: item.endHour,
-			continuesPrev: false,
-			continuesNext: false
-		};
-	}
-	if (dateKey < item.date || dateKey > item.endDate) return null;
-	if (dateKey === item.date) return {
-		startHour: item.startHour,
-		endHour: 24,
-		continuesPrev: false,
-		continuesNext: true
-	};
-	if (dateKey === item.endDate) return {
-		startHour: 0,
-		endHour: item.endHour,
-		continuesPrev: true,
-		continuesNext: false
-	};
-	return {
-		startHour: 0,
-		endHour: 24,
-		continuesPrev: true,
-		continuesNext: true
-	};
-}
-function dayOccupancy(courtId, dateKey, bookings, hourSlots) {
-	const items = bookings.filter((b) => b.courtId === courtId && getBookingSegmentForDate(b, dateKey));
-	const map = {};
-	(hourSlots || []).forEach((hour) => {
-		map[hour] = items.find((b) => {
-			const seg = getBookingSegmentForDate(b, dateKey);
-			return seg && seg.startHour < hour + 1 && seg.endHour > hour;
-		}) || null;
-	});
-	return map;
-}
-function groupSelectedSlots(slots) {
-	const sorted = [...slots].sort((a, b) => {
-		if (a.date !== b.date) return a.date.localeCompare(b.date);
-		if (a.courtId !== b.courtId) return a.courtId.localeCompare(b.courtId);
-		return a.hour - b.hour;
-	});
-	const groups = [];
-	sorted.forEach((slot) => {
-		const prev = groups[groups.length - 1];
-		if (prev && prev.courtId === slot.courtId && prev.date === slot.date && prev.endHour === slot.hour) prev.endHour = slot.hour + 1;
-		else groups.push({
-			courtId: slot.courtId,
-			date: slot.date,
-			startHour: slot.hour,
-			endHour: slot.hour + 1
-		});
-	});
-	return groups;
-}
-function hasConflict(bookings, courtId, date, startHour, endHour, ignoreId = null) {
-	return bookings.some((b) => {
-		if (b.id === ignoreId) return false;
-		if (b.kind !== "booking") return false;
-		if (b.courtId !== courtId || b.date !== date) return false;
-		return !(endHour <= b.startHour || startHour >= b.endHour);
-	});
-}
-function overlappingBookings(bookings, courtId, date, startHour, endHour) {
-	return bookings.filter((b) => {
-		if (b.kind !== "booking") return false;
-		if (b.courtId !== courtId || b.date !== date) return false;
-		return !(endHour <= b.startHour || startHour >= b.endHour);
-	});
-}
-function courtDaySummary(courtId, dateKey, bookings, hourSlots) {
-	var _hourSlots$length2;
-	const occ = dayOccupancy(courtId, dateKey, bookings, hourSlots);
-	const items = bookings.filter((b) => b.courtId === courtId && b.date === dateKey).sort((a, b) => a.startHour - b.startHour);
-	const occupiedHours = (hourSlots || []).filter((h) => occ[h] && isHourInTimelineSlots(h, hourSlots));
-	const hasBlock = occupiedHours.some((h) => {
-		var _occ$h;
-		return ((_occ$h = occ[h]) === null || _occ$h === void 0 ? void 0 : _occ$h.kind) === "block";
-	});
-	const slotCount = (_hourSlots$length2 = hourSlots === null || hourSlots === void 0 ? void 0 : hourSlots.length) !== null && _hourSlots$length2 !== void 0 ? _hourSlots$length2 : 0;
-	return {
-		occupiedHours,
-		hasBlock,
-		fullyBooked: slotCount > 0 && occupiedHours.length >= slotCount,
-		items
-	};
-}
-function sameSlot(a, b) {
-	return a.courtId === b.courtId && a.date === b.date && a.hour === b.hour;
-}
-function statusTagMeta(tag) {
-	switch (tag) {
-		case "cancel": return {
-			label: "Cancel",
-			className: "bg-red-600/88 text-white border border-red-300/35"
-		};
-		case "change": return {
-			label: "Change",
-			className: "bg-amber-500/88 text-white border border-amber-200/35"
-		};
-		case "checked_in": return {
-			label: "Checked-in",
-			className: "bg-zinc-500/88 text-white border border-zinc-300/30"
-		};
-		case "pending": return {
-			label: "Pending",
-			className: "bg-cyan-600/88 text-white border border-cyan-300/35"
-		};
-		case "new": return {
-			label: "New",
-			className: "bg-emerald-600/88 text-white border border-emerald-300/35"
-		};
-		case "late": return {
-			label: "Late",
-			className: "bg-amber-500/88 text-white border border-amber-200/35"
-		};
-		case "no_show": return {
-			label: "No-show",
-			className: "bg-red-700/92 text-white border border-red-300/35"
-		};
-		default: return null;
-	}
-}
-function getDisplayStatusTag(item, dateKey) {
-	if (item.kind !== "booking") return item.statusTag || null;
-	if (item.statusTag === "checked_in" || item.statusTag === "cancel") return item.statusTag;
-	if (dateKey !== demoNow.date) return item.statusTag || null;
-	const seg = getBookingSegmentForDate(item, dateKey);
-	if (!seg) return item.statusTag || null;
-	const lateThreshold = item.startHour + 5 / 60;
-	if (demoNow.hour > seg.endHour) return "no_show";
-	if (demoNow.hour > lateThreshold) return "late";
-	return item.statusTag || null;
-}
-function getBookingStateClasses(item, dateKey) {
-	const displayTag = getDisplayStatusTag(item, dateKey);
-	if (displayTag === "cancel") return "bg-zinc-700/55 border border-zinc-500/70 text-zinc-100 grayscale-[0.2]";
-	if (displayTag === "no_show") return "bg-zinc-700/55 border border-red-500/70 text-zinc-200 grayscale-[0.15]";
-	if (displayTag === "late") return "bg-violet-700/90 border border-amber-400/80 text-violet-50";
-	if (item.kind === "block") return "bg-red-700/70 text-red-100";
-	return "bg-violet-700/90 text-violet-50";
-}
-function getLateMinutes(item, dateKey) {
-	if (getDisplayStatusTag(item, dateKey) !== "late") return null;
-	const seg = getBookingSegmentForDate(item, dateKey);
-	if (!seg) return null;
-	const lateThreshold = seg.startHour + 5 / 60;
-	return Math.max(1, Math.floor((demoNow.hour - lateThreshold) * 60));
-}
-function currentTimeLabel() {
-	return `${String(Math.floor(demoNow.hour)).padStart(2, "0")}:${String(Math.floor(demoNow.hour % 1 * 60)).padStart(2, "0")}`;
-}
-function formatDateLoose(str) {
-	if (!str) return "";
-	const d = parseDate(str);
-	return `${d.getFullYear()} ${String(d.getMonth() + 1).padStart(2, "0")} ${String(d.getDate()).padStart(2, "0")}`;
-}
-function getBlockMetaLine(item) {
-	if (item.kind !== "block") return "";
-	const bits = [];
-	if (item.blockBy) bits.push(`by ${item.blockBy}`);
-	if (item.blockedAt) bits.push(formatDateLoose(item.blockedAt));
-	return bits.join(" · ");
-}
-function getDrawerStatusTheme(item, dateKey) {
-	const tag = getDisplayStatusTag(item, dateKey);
-	if (item.kind === "block") return "bg-red-700/88 border-b-4 border-red-300/55";
-	if (tag === "cancel") return "bg-zinc-700/88 border-b-4 border-zinc-400/45";
-	if (tag === "no_show") return "bg-zinc-700/88 border-b-4 border-red-400/75";
-	if (tag === "late") return "bg-violet-700/92 border-b-4 border-amber-400/95";
-	if (tag === "checked_in") return "bg-violet-700/92 border-b-4 border-zinc-300/45";
-	return "bg-violet-700/92 border-b-4 border-violet-300/30";
-}
-function getCompactBookingId(detail) {
-	const raw = String(detail.bookingId || detail.orderNumber || "B0000");
-	const numeric = raw.replace(/[^0-9]/g, "");
-	if (numeric) return `B${numeric.slice(-4).padStart(4, "0")}`;
-	return raw.startsWith("B") ? raw.slice(0, 5) : `B${raw.slice(-4).padStart(4, "0")}`;
-}
-function getFulfillmentDisplay(item, detail) {
-	var _detail$headerTags;
-	const guestCount = Number((detail === null || detail === void 0 ? void 0 : detail.guestCount) || 0);
-	const checkedInCount = Number((detail === null || detail === void 0 ? void 0 : detail.checkedInCount) || 0);
-	const tag = getDisplayStatusTag(item, item.date);
-	if (tag === "cancel") return "Cancelled";
-	if (tag === "no_show") return "No-show";
-	if (guestCount > 0) {
-		if (checkedInCount > 0) return "Arrived";
-		if (tag === "late") return "Late";
-	}
-	const raw = String((detail === null || detail === void 0 || (_detail$headerTags = detail.headerTags) === null || _detail$headerTags === void 0 ? void 0 : _detail$headerTags.fulfillmentTag) || "Open").toLowerCase();
-	if (raw.includes("complete")) return "Finished";
-	if (raw.includes("arriv")) return "Arrived";
-	return tag === "late" ? "Late" : "Arrived";
-}
-function getPaymentDisplay(detail) {
-	var _detail$paymentSummar, _detail$paymentSummar2;
-	const paid = Number(((_detail$paymentSummar = detail.paymentSummary) === null || _detail$paymentSummar === void 0 ? void 0 : _detail$paymentSummar.paidAmount) || 0);
-	const total = Number(((_detail$paymentSummar2 = detail.paymentSummary) === null || _detail$paymentSummar2 === void 0 ? void 0 : _detail$paymentSummar2.totalAmount) || 0);
-	if (String(detail.paymentStatus || "").toLowerCase().includes("refund")) return "Refunded";
-	if (paid <= 0) return "Unpaid";
-	if (total > 0 && paid < total) return "Partial paid";
-	return "Paid";
-}
-function paymentTagClass(label, isLight = false) {
-	switch (label) {
-		case "Paid": return isLight ? "theme-success-chip border" : "bg-emerald-500 text-white";
-		case "Partial paid": return isLight ? "theme-warning-chip border" : "bg-amber-500 text-white";
-		case "Refunded": return isLight ? "theme-info-chip border" : "bg-sky-500 text-white";
-		default: return isLight ? "theme-danger-chip border" : "bg-red-500 text-white";
-	}
-}
-function fulfillmentTagClass(label, isLight = false) {
-	switch (label) {
-		case "Finished": return isLight ? "theme-success-chip border" : "bg-emerald-600 text-white";
-		case "Arrived": return isLight ? "theme-info-chip border" : "bg-cyan-500 text-white";
-		case "Late": return isLight ? "theme-warning-chip border" : "bg-amber-500 text-white";
-		case "No-show": return isLight ? "theme-danger-chip border" : "bg-red-600 text-white";
-		case "Cancelled": return isLight ? "border border-[var(--border-strong)] bg-[var(--bg-input)] theme-text-soft" : "bg-zinc-600 text-white";
-		default: return isLight ? "border border-[var(--brand-light)] bg-[var(--brand-surface)] theme-brand-text" : "bg-violet-600 text-white";
-	}
-}
-const salesProtocolMockByBookingItemId = { b2: {
-	order_id: 1001,
-	order_number: "A00123",
-	shop_order_number: "A00123",
-	type: "appointment_booking",
-	business_code: "appointment_booking",
-	platform: "pos",
-	sales_channel: "my_pisel",
-	order_sales_channel: "pos",
-	status: "normal",
-	payment_status: "payment_processing",
-	shipping_status: "unfulfilled",
-	customer_id: 456,
-	customer_name: "Tina Wu",
-	country_calling_code: "+61",
-	phone: "0412888999",
-	email: "tina.wu@pisell.com",
-	is_price_include_tax: 1,
-	tax_title: "GST",
-	tax_country_code: "AU",
-	currency_code: "AUD",
-	currency_symbol: "$",
-	currency_format: "symbol_first",
-	is_deposit: 0,
-	deposit_amount: "0.00",
-	shop_discount: "0.00",
-	surcharge_fee: "10.00",
-	note: "Customer prefers a quieter court and may arrive slightly late.",
-	schedule_date: "2026-03-31 00:00:00",
-	created_at: "2026-03-18 10:00:00",
-	products: [{
-		order_detail_id: 789,
-		product_id: 101,
-		num: 1,
-		product_variant_id: 0,
-		product_option_item: [],
-		selling_price: "42.00",
-		original_price: "48.00",
-		payment_price: "42.00",
-		tax_fee: "4.20",
-		is_charge_tax: 1,
-		discount_list: [],
-		product_bundle: [],
-		metadata: { unique_identification_number: "local_prod_001" }
-	}],
-	bookings: [{
-		schedule_event_id: 301,
-		booking_id: "B20260318001",
-		appointment_status: "arrived",
-		start_date: "2026-03-31",
-		start_time: "14:00",
-		end_date: "2026-03-31",
-		end_time: "18:00",
-		select_date: "2026-03-31",
-		duration: 240,
-		arrived_at: null,
-		completed_at: null,
-		sub_type: "service",
-		like_status: "common",
-		number: 4,
-		resources: [{
-			form_id: 10,
-			relation_type: "form",
-			relation_id: 201,
-			capacity: 1,
-			like_status: "like",
-			metadata: null,
-			children: []
-		}],
-		product: {
-			order_detail_id: null,
-			product_id: 101,
-			num: 1,
-			discount_list: [],
-			product_bundle: [],
-			metadata: { unique_identification_number: "local_bk_prod_001" }
-		},
-		relation_products: [{
-			order_detail_id: 790,
-			product_id: 202,
-			num: 1,
-			product_variant_id: 0,
-			product_option_item: [],
-			selling_price: "8.00",
-			original_price: "8.00",
-			payment_price: "8.00",
-			tax_fee: "0.80",
-			is_charge_tax: 1,
-			discount_list: [],
-			product_bundle: [],
-			metadata: { unique_identification_number: "local_rel_001" }
-		}],
-		relation_forms: [],
-		holder: null,
-		metadata: { unique_identification_number: "local_booking_001" }
-	}],
-	payments: [{
-		order_payment_id: 501,
-		custom_payment_id: 1,
-		code: "card",
-		name: "Card",
-		type: "deposit",
-		voucher_id: null,
-		amount: "60.00",
-		origin_amount: "60.00",
-		rounding_amount: "0.00",
-		status: "paid",
-		payment_time: "2026-03-18 15:00:00",
-		service_charge: null,
-		wallet_pass_usage_unit: null,
-		wallet_pass_use_value: null,
-		metadata: { unique_payment_number: "local_pay_001" }
-	}, {
-		order_payment_id: 502,
-		custom_payment_id: 2,
-		code: "cash",
-		name: "Cash",
-		type: "balance",
-		voucher_id: null,
-		amount: "108.00",
-		origin_amount: "108.00",
-		rounding_amount: "0.00",
-		status: "paid",
-		payment_time: "2026-03-31 17:05:00",
-		service_charge: null,
-		wallet_pass_usage_unit: null,
-		wallet_pass_use_value: null,
-		metadata: { unique_payment_number: "local_pay_002" }
-	}],
-	surcharges: [{
-		order_surcharge_id: 701,
-		surcharge_id: 1,
-		type: "service_charge",
-		name: { en: "Service Charge" },
-		description: { en: "10% service charge" },
-		percentage: "0.10",
-		fixed: null,
-		amount: "10.00"
-	}],
-	discount_list: [],
-	relation_forms: [],
-	contacts: [],
-	contacts_info: [],
-	holder: null,
-	summary: {
-		product_quantity: 2,
-		product_original_amount: "56.00",
-		product_amount: "50.00",
-		product_expect_amount: "50.00",
-		product_tax_fee: "5.00",
-		shipping_fee: "0.00",
-		shipping_tax_fee: "0.00",
-		tax_fee: "5.00",
-		surcharge_fee: "10.00",
-		discount_amount: "6.00",
-		deposit_amount: "0.00",
-		expect_amount: "60.00",
-		total_amount: "168.00",
-		amount_gap: "0.00",
-		rounding_amount: "0.00",
-		pay_service_charge_amount: "0.00"
-	},
-	metadata: {}
-} };
-function fallbackSalesFromItem(item) {
-	return {
-		order_id: null,
-		order_number: item.id.toUpperCase(),
-		shop_order_number: item.id.toUpperCase(),
-		type: item.kind === "block" ? "court_block" : "appointment_booking",
-		business_code: item.kind === "block" ? "court_block" : "appointment_booking",
-		platform: "pos",
-		sales_channel: "my_pisel",
-		order_sales_channel: "pos",
-		status: "normal",
-		payment_status: "payment_processing",
-		shipping_status: "unfulfilled",
-		customer_id: null,
-		customer_name: item.kind === "block" ? item.blockBy || "Staff" : item.name,
-		country_calling_code: "+61",
-		phone: item.phone || "",
-		email: "",
-		is_price_include_tax: 1,
-		tax_title: "GST",
-		tax_country_code: "AU",
-		currency_code: "AUD",
-		currency_symbol: "$",
-		currency_format: "symbol_first",
-		is_deposit: 0,
-		deposit_amount: "0.00",
-		shop_discount: "0.00",
-		surcharge_fee: "0.00",
-		note: item.kind === "block" ? item.note || "Blocked by staff" : "No additional note.",
-		schedule_date: `${item.date} 00:00:00`,
-		created_at: `${item.date} 09:00:00`,
-		products: [],
-		bookings: [{
-			schedule_event_id: null,
-			booking_id: item.id.toUpperCase(),
-			appointment_status: item.kind === "block" ? "blocked" : "confirmed",
-			start_date: item.date,
-			start_time: formatHourLabel(item.startHour),
-			end_date: item.endDate || item.date,
-			end_time: formatHourLabel(item.endHour),
-			select_date: item.date,
-			duration: Math.max(60, (item.endHour - item.startHour) * 60),
-			arrived_at: null,
-			completed_at: null,
-			sub_type: item.kind === "block" ? "court_block" : "service",
-			like_status: "common",
-			number: 1,
-			resources: [{
-				form_id: 10,
-				relation_type: "form",
-				relation_id: 201,
-				capacity: 1,
-				like_status: "common",
-				metadata: null,
-				children: []
-			}],
-			product: null,
-			relation_products: [],
-			relation_forms: [],
-			holder: null,
-			metadata: { unique_identification_number: `local_${item.id}` }
-		}],
-		payments: [],
-		surcharges: [],
-		discount_list: [],
-		relation_forms: [],
-		contacts: [],
-		contacts_info: [],
-		holder: null,
-		summary: {
-			product_quantity: 0,
-			product_original_amount: "0.00",
-			product_amount: "0.00",
-			product_expect_amount: "0.00",
-			product_tax_fee: "0.00",
-			shipping_fee: "0.00",
-			shipping_tax_fee: "0.00",
-			tax_fee: "0.00",
-			surcharge_fee: "0.00",
-			discount_amount: "0.00",
-			deposit_amount: "0.00",
-			expect_amount: "0.00",
-			total_amount: "0.00",
-			amount_gap: "0.00",
-			rounding_amount: "0.00",
-			pay_service_charge_amount: "0.00"
-		},
-		metadata: {}
-	};
-}
-function buildResourceDisplay(resources = [], fallbackCourtName = "") {
-	const labels = resources.map((row) => {
-		const typeName = (row === null || row === void 0 ? void 0 : row.category_name) || (row === null || row === void 0 ? void 0 : row.resource_category_name) || (row === null || row === void 0 ? void 0 : row.type_name) || (row === null || row === void 0 ? void 0 : row.type) || (row === null || row === void 0 ? void 0 : row.relation_type_name) || (row === null || row === void 0 ? void 0 : row.relation_type_label) || (row === null || row === void 0 ? void 0 : row.relation_type) || "";
-		const resourceName = (row === null || row === void 0 ? void 0 : row.resource_name) || (row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : row.relation_name) || (row === null || row === void 0 ? void 0 : row.label) || (row === null || row === void 0 ? void 0 : row.title) || "";
-		const childNames = Array.isArray(row === null || row === void 0 ? void 0 : row.children) ? row.children.map((child) => (child === null || child === void 0 ? void 0 : child.resource_name) || (child === null || child === void 0 ? void 0 : child.name) || (child === null || child === void 0 ? void 0 : child.relation_name) || (child === null || child === void 0 ? void 0 : child.label)).filter(Boolean) : [];
-		const mainName = resourceName || childNames[0] || "";
-		if (typeName && mainName) return `${typeName}: ${mainName}`;
-		if (mainName) return mainName;
-		return "";
-	}).filter(Boolean);
-	if (labels.length > 0) return labels.join(", ");
-	return fallbackCourtName || "Court";
-}
-function mapSalesToDetail(sales, item, courtsList = DEFAULT_COURTS) {
-	var _sales$bookings, _sales$summary, _courtsList$find;
-	const booking = ((_sales$bookings = sales.bookings) === null || _sales$bookings === void 0 ? void 0 : _sales$bookings[0]) || {};
-	const bookingProduct = booking.product ? [booking.product] : [];
-	const rootProducts = sales.products || [];
-	const relationProducts = booking.relation_products || [];
-	const itemPresetByIndex = [
-		{
-			name: "Private lesson · Practice",
-			specs: "Coach session 2h · Court included · 2 rackets",
-			note: "Beginner drills · Need quieter court"
-		},
-		{
-			name: "Milk tea",
-			specs: "Large · Less sugar · Less ice",
-			note: "Serve after first hour"
-		},
-		{
-			name: "Snack combo",
-			specs: "Chicken wrap · Fries",
-			note: "No spicy seasoning"
-		}
-	];
-	const allItems = [
-		...bookingProduct,
-		...rootProducts,
-		...relationProducts
-	].map((row, index) => {
-		var _row$product_id, _row$product_variant_;
-		const qty = Number(row.num || 0);
-		const unitPrice = Number(row.payment_price || row.selling_price || 0);
-		const preset = itemPresetByIndex[index] || {
-			name: row.product_id ? `Product #${row.product_id}` : `Custom item #${index + 1}`,
-			specs: "Standard",
-			note: "No note"
-		};
-		return {
-			id: row.order_detail_id || `${sales.order_number || item.id}-item-${index}`,
-			name: preset.name,
-			specs: preset.specs,
-			note: preset.note,
-			price: unitPrice,
-			qty,
-			qtyLabel: `×${qty}`,
-			unitLabel: `${sales.currency_symbol || "$"}${unitPrice.toFixed(2)} each`,
-			total: unitPrice * qty,
-			productId: (_row$product_id = row.product_id) !== null && _row$product_id !== void 0 ? _row$product_id : null,
-			variantId: (_row$product_variant_ = row.product_variant_id) !== null && _row$product_variant_ !== void 0 ? _row$product_variant_ : null
-		};
-	});
-	const appointmentStatus = String(booking.appointment_status || "").toLowerCase();
-	const isArrivedBooking = [
-		"arrived",
-		"started",
-		"completed"
-	].includes(appointmentStatus) || Boolean(booking.arrived_at);
-	const guestCount = Number(booking.number || 0);
-	const guests = [
-		...Array.isArray(sales.contacts) ? sales.contacts : [],
-		...Array.isArray(sales.contacts_info) ? sales.contacts_info : [],
-		...Array.isArray(booking.contacts) ? booking.contacts : [],
-		...Array.isArray(booking.contacts_info) ? booking.contacts_info : [],
-		...Array.isArray(booking.guests) ? booking.guests : []
-	].map((row, index) => {
-		const checked = Boolean((row === null || row === void 0 ? void 0 : row.checked_in) || (row === null || row === void 0 ? void 0 : row.checkedIn) || (row === null || row === void 0 ? void 0 : row.arrived_at) || (row === null || row === void 0 ? void 0 : row.arrivedAt) || (row === null || row === void 0 ? void 0 : row.is_checked_in));
-		return {
-			id: (row === null || row === void 0 ? void 0 : row.guest_id) || (row === null || row === void 0 ? void 0 : row.contact_id) || (row === null || row === void 0 ? void 0 : row.id) || `${sales.order_number || item.id}-guest-${index}`,
-			name: (row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : row.customer_name) || (row === null || row === void 0 ? void 0 : row.full_name) || (row === null || row === void 0 ? void 0 : row.nickname) || `Guest ${index + 1}`,
-			note: [row === null || row === void 0 ? void 0 : row.phone, row === null || row === void 0 ? void 0 : row.email].filter(Boolean).join(" · ") || "",
-			checkedIn: checked,
-			noShow: Boolean((row === null || row === void 0 ? void 0 : row.no_show) || (row === null || row === void 0 ? void 0 : row.noShow)),
-			removed: Boolean(row === null || row === void 0 ? void 0 : row.removed)
-		};
-	});
-	const checkedInCount = guests.length > 0 ? guests.filter((g) => g.checkedIn).length : isArrivedBooking ? guestCount : 0;
-	const topRelationForms = Array.isArray(sales.relation_forms) ? sales.relation_forms : [];
-	const bookingRelationForms = Array.isArray(booking.relation_forms) ? booking.relation_forms : [];
-	const files = {
-		form: [...topRelationForms, ...bookingRelationForms].map((row, index) => ({
-			id: (row === null || row === void 0 ? void 0 : row.id) || `${sales.order_number || item.id}-form-${index}`,
-			name: (row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : row.title) || `Form ${index + 1}`,
-			time: (row === null || row === void 0 ? void 0 : row.updated_at) || (row === null || row === void 0 ? void 0 : row.created_at) || sales.created_at || "",
-			type: (row === null || row === void 0 ? void 0 : row.relation_type) || "form"
-		})),
-		uploaded: (Array.isArray(sales.uploaded_files) ? sales.uploaded_files : []).map((row, index) => ({
-			id: (row === null || row === void 0 ? void 0 : row.id) || `${sales.order_number || item.id}-uploaded-${index}`,
-			name: (row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : row.file_name) || `Upload ${index + 1}`,
-			time: (row === null || row === void 0 ? void 0 : row.updated_at) || (row === null || row === void 0 ? void 0 : row.created_at) || sales.created_at || "",
-			type: (row === null || row === void 0 ? void 0 : row.type) || "uploaded"
-		})),
-		invoice: (Array.isArray(sales.invoices) ? sales.invoices : []).map((row, index) => ({
-			id: (row === null || row === void 0 ? void 0 : row.id) || `${sales.order_number || item.id}-invoice-${index}`,
-			name: (row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : row.invoice_number) || `Invoice ${index + 1}`,
-			time: (row === null || row === void 0 ? void 0 : row.updated_at) || (row === null || row === void 0 ? void 0 : row.created_at) || sales.created_at || "",
-			type: (row === null || row === void 0 ? void 0 : row.type) || "invoice"
-		}))
-	};
-	const orderNotes = sales.note ? [{
-		id: `${sales.order_number || item.id}-note-order`,
-		label: "Order note",
-		text: sales.note
-	}] : [];
-	const noteGroups = {
-		internal: Array.isArray(sales.internal_notes) ? sales.internal_notes.map((row, index) => ({
-			id: (row === null || row === void 0 ? void 0 : row.id) || `${sales.order_number || item.id}-note-internal-${index}`,
-			label: (row === null || row === void 0 ? void 0 : row.label) || "Internal note",
-			text: (row === null || row === void 0 ? void 0 : row.text) || (row === null || row === void 0 ? void 0 : row.note) || ""
-		})) : [],
-		order: orderNotes,
-		item: allItems.filter((row) => row.note).map((row, index) => ({
-			id: `${row.id}-item-note-${index}`,
-			label: row.name,
-			text: row.note,
-			qtyLabel: row.qtyLabel,
-			itemId: row.id
-		}))
-	};
-	const payments = (sales.payments || []).map((payment, index) => ({
-		id: payment.order_payment_id || `${sales.order_number || item.id}-payment-${index}`,
-		label: payment.type === "deposit" ? "Deposit" : payment.type === "balance" ? "Balance" : payment.name || payment.code || payment.type || `Payment ${index + 1}`,
-		amount: Number(payment.amount || 0),
-		method: payment.code === "card" ? "Card •••• 1234" : payment.name || payment.code || "Unknown",
-		time: payment.payment_time || "",
-		status: payment.status || "unknown",
-		type: payment.type || "",
-		code: payment.code || ""
-	}));
-	const history = [
-		sales.created_at ? {
-			id: `${sales.order_number || item.id}-history-created`,
-			actor: "System",
-			text: "Order created",
-			time: sales.created_at,
-			kind: "system"
-		} : null,
-		...payments.filter((row) => row.time).map((row, index) => ({
-			id: `${row.id}-history-${index}`,
-			actor: row.method || "Payment",
-			text: `${row.label} ${sales.currency_symbol || "$"}${row.amount.toFixed(2)}`,
-			time: row.time,
-			kind: "payment"
-		})),
-		booking.arrived_at ? {
-			id: `${sales.order_number || item.id}-history-arrived`,
-			actor: "System",
-			text: "Guest arrived",
-			time: booking.arrived_at,
-			kind: "status"
-		} : null,
-		booking.completed_at ? {
-			id: `${sales.order_number || item.id}-history-completed`,
-			actor: "System",
-			text: "Booking completed",
-			time: booking.completed_at,
-			kind: "status"
-		} : null
-	].filter(Boolean);
-	const itemCount = allItems.length;
-	const itemQtyTotal = allItems.reduce((sum, row) => sum + Number(row.qty || 0), 0);
-	const totalAmount = Number(((_sales$summary = sales.summary) === null || _sales$summary === void 0 ? void 0 : _sales$summary.total_amount) || 0);
-	const paidAmount = payments.filter((row) => String(row.status).toLowerCase() === "paid").reduce((sum, row) => sum + Number(row.amount || 0), 0);
-	const balanceAmount = Math.max(0, totalAmount - paidAmount);
-	const resourceLabel = buildResourceDisplay(booking.resources || [], ((_courtsList$find = courtsList.find((c) => c.id === item.courtId)) === null || _courtsList$find === void 0 ? void 0 : _courtsList$find.name) || "");
-	const paymentTag = paidAmount <= 0 ? "Unpaid" : balanceAmount > 0 ? "Partial paid" : "Paid";
-	const fulfillmentTag = appointmentStatus === "completed" ? "Finished" : isArrivedBooking ? "Arrived" : appointmentStatus === "cancelled" ? "Cancelled" : "Arrived";
-	const hasNote = orderNotes.length > 0;
-	return {
-		rawSales: sales,
-		bookingId: booking.booking_id || sales.order_number || item.id.toUpperCase(),
-		orderNumber: sales.order_number || item.id.toUpperCase(),
-		shopOrderNumber: sales.shop_order_number || sales.order_number || item.id.toUpperCase(),
-		orderStatus: sales.status || "normal",
-		appointmentStatus: booking.appointment_status || "new",
-		paymentStatus: sales.payment_status || "payment_processing",
-		customer: {
-			id: sales.customer_id,
-			name: sales.customer_name || "Unknown customer",
-			email: sales.email || "",
-			phone: `${sales.country_calling_code || ""} ${sales.phone || ""}`.trim()
-		},
-		guestCount,
-		checkedInCount,
-		guests,
-		schedule: {
-			startDate: booking.start_date || item.date,
-			startTime: booking.start_time || formatHourLabel(item.startHour),
-			endDate: booking.end_date || item.endDate || item.date,
-			endTime: booking.end_time || formatHourLabel(item.endHour),
-			duration: booking.duration || (item.endHour - item.startHour) * 60,
-			arrivedAt: booking.arrived_at,
-			completedAt: booking.completed_at
-		},
-		resources: booking.resources || [],
-		summaryItems: allItems,
-		items: allItems,
-		note: sales.note || "",
-		files,
-		payments,
-		history,
-		summary: sales.summary || {},
-		paymentSummary: {
-			totalAmount,
-			paidAmount,
-			balanceAmount,
-			currencySymbol: sales.currency_symbol || "$",
-			isFullyPaid: balanceAmount <= 0 && totalAmount > 0
-		},
-		itemSummary: {
-			itemCount,
-			itemQtyTotal
-		},
-		headerSummary: {
-			customerName: sales.customer_name || "Unknown customer",
-			guestCount,
-			checkedInCount,
-			timeLabel: `${booking.start_date || item.date} · ${booking.start_time || formatHourLabel(item.startHour)} - ${booking.end_time || formatHourLabel(item.endHour)}`,
-			resourceLabel
-		},
-		headerTags: {
-			paymentTag,
-			fulfillmentTag,
-			hasNote,
-			paymentStatus: sales.payment_status || "payment_processing",
-			orderStatus: sales.status || "normal"
-		},
-		fileCount: files.form.length + files.uploaded.length + files.invoice.length,
-		canChangeCustomer: true,
-		noteCount: noteGroups.order.length,
-		noteGroups,
-		metaFlags: {
-			itemsChanged: false,
-			paymentsChanged: false,
-			guestChanged: false,
-			filesChanged: false,
-			notesChanged: false,
-			formChanged: false,
-			uploadedChanged: false,
-			invoiceChanged: false,
-			historyChanged: false
-		},
-		actions: []
-	};
-}
-function getNoteValue(noteOverrides, noteId, fallback) {
-	var _noteOverrides$noteId;
-	return (_noteOverrides$noteId = noteOverrides[noteId]) !== null && _noteOverrides$noteId !== void 0 ? _noteOverrides$noteId : fallback;
-}
-function formatTimelineStamp(value) {
-	if (!value) return {
-		date: "--",
-		time: "--"
-	};
-	const [date = "--", time = "--"] = String(value).replace("T", " ").split(" ");
-	return {
-		date,
-		time: time.slice(0, 5) || "--"
-	};
-}
-const customerPickerMock = [
-	{
-		id: "c1",
-		name: "Olivia Rhye",
-		registeredAt: "2025/07/01",
-		phone: "0487654321",
-		email: "olivia@untitledui.com",
-		membership: "Gold"
-	},
-	{
-		id: "c2",
-		name: "Phoenix Baker",
-		registeredAt: "2025/06/23",
-		phone: "0487654321",
-		email: "phoenix@untitledui.com",
-		membership: "Silver"
-	},
-	{
-		id: "c3",
-		name: "Liam Carter",
-		registeredAt: "2025/06/18",
-		phone: "0487654321",
-		email: "liam@untitledui.com",
-		membership: "Bronze"
-	},
-	{
-		id: "c4",
-		name: "Zoe Patel",
-		registeredAt: "2025/06/15",
-		phone: "0487654321",
-		email: "zoe@untitledui.com",
-		membership: "Platinum"
-	},
-	{
-		id: "c5",
-		name: "Noah Kim",
-		registeredAt: "2025/05/30",
-		phone: "0487654321",
-		email: "noah@untitledui.com",
-		membership: "Titanium"
-	}
-];
-function getBookingDetailData(item, courtsList = DEFAULT_COURTS) {
-	return mapSalesToDetail(salesProtocolMockByBookingItemId[item.id] || fallbackSalesFromItem(item), item, courtsList);
-}
-function tabMeta(tab) {
-	switch (tab) {
-		case "summary": return {
-			label: "Summary",
-			icon: lucide_react.CircleEllipsis
-		};
-		case "items": return {
-			label: "Items",
-			icon: lucide_react.Receipt
-		};
-		case "guest": return {
-			label: "Guests",
-			icon: lucide_react.Users
-		};
-		case "files": return {
-			label: "Files / Notes",
-			icon: lucide_react.FileText
-		};
-		case "payments": return {
-			label: "Payments",
-			icon: lucide_react.CreditCard
-		};
-		case "history": return {
-			label: "History",
-			icon: lucide_react.History
-		};
-		default: return {
-			label: tab,
-			icon: lucide_react.CircleEllipsis
-		};
-	}
-}
-function tabBadgeValue(tab, detail) {
-	var _detail$items;
-	if (tab === "guest") return String(detail.guestCount || 0);
-	if (tab === "items") return String(((_detail$items = detail.items) === null || _detail$items === void 0 ? void 0 : _detail$items.length) || 0);
-	if (tab === "files") return String((detail.fileCount || 0) + (detail.noteCount || 0));
-	if (tab === "payments") {
-		var _detail$paymentSummar3, _detail$paymentSummar4;
-		const total = Number(((_detail$paymentSummar3 = detail.paymentSummary) === null || _detail$paymentSummar3 === void 0 ? void 0 : _detail$paymentSummar3.totalAmount) || 0);
-		const paid = Number(((_detail$paymentSummar4 = detail.paymentSummary) === null || _detail$paymentSummar4 === void 0 ? void 0 : _detail$paymentSummar4.paidAmount) || 0);
-		if (total <= 0) return "0%";
-		if (paid >= total) return "✓";
-		return `${Math.round(paid / total * 100)}%`;
-	}
-	return "";
-}
-function tabHasChanges(tab, detail) {
-	var _detail$metaFlags, _detail$metaFlags2, _detail$metaFlags3, _detail$metaFlags4, _detail$metaFlags5, _detail$metaFlags6;
-	if (tab === "summary") return false;
-	if (tab === "items") return Boolean((_detail$metaFlags = detail.metaFlags) === null || _detail$metaFlags === void 0 ? void 0 : _detail$metaFlags.itemsChanged);
-	if (tab === "payments") return Boolean((_detail$metaFlags2 = detail.metaFlags) === null || _detail$metaFlags2 === void 0 ? void 0 : _detail$metaFlags2.paymentsChanged);
-	if (tab === "guest") return Boolean((_detail$metaFlags3 = detail.metaFlags) === null || _detail$metaFlags3 === void 0 ? void 0 : _detail$metaFlags3.guestChanged);
-	if (tab === "files") return Boolean(((_detail$metaFlags4 = detail.metaFlags) === null || _detail$metaFlags4 === void 0 ? void 0 : _detail$metaFlags4.filesChanged) || ((_detail$metaFlags5 = detail.metaFlags) === null || _detail$metaFlags5 === void 0 ? void 0 : _detail$metaFlags5.notesChanged));
-	if (tab === "history") return Boolean((_detail$metaFlags6 = detail.metaFlags) === null || _detail$metaFlags6 === void 0 ? void 0 : _detail$metaFlags6.historyChanged);
-	return false;
-}
-function tabBadgeClass(isUnread) {
-	return isUnread ? "bg-violet-500 text-white" : "border border-white/55 bg-[#2a2048] text-white";
-}
-function subtabHasChanges(subtab, detail) {
-	var _detail$metaFlags7, _detail$metaFlags8, _detail$metaFlags9, _detail$metaFlags10;
-	if (subtab === "notes") return Boolean((_detail$metaFlags7 = detail.metaFlags) === null || _detail$metaFlags7 === void 0 ? void 0 : _detail$metaFlags7.notesChanged);
-	if (subtab === "form") return Boolean((_detail$metaFlags8 = detail.metaFlags) === null || _detail$metaFlags8 === void 0 ? void 0 : _detail$metaFlags8.formChanged);
-	if (subtab === "uploaded") return Boolean((_detail$metaFlags9 = detail.metaFlags) === null || _detail$metaFlags9 === void 0 ? void 0 : _detail$metaFlags9.uploadedChanged);
-	if (subtab === "invoice") return Boolean((_detail$metaFlags10 = detail.metaFlags) === null || _detail$metaFlags10 === void 0 ? void 0 : _detail$metaFlags10.invoiceChanged);
-	return false;
-}
-function isMainTabUnread(tab, detail, viewedForDetail = {}, viewedSubtabsForDetail = {}) {
-	if (tab === "files") return [
-		"notes",
-		"form",
-		"uploaded",
-		"invoice"
-	].some((subtab) => subtabHasChanges(subtab, detail) && !viewedSubtabsForDetail[subtab]);
-	return tabHasChanges(tab, detail) && !viewedForDetail[tab];
-}
-function showQuickActionLimit(setter) {
-	setter("Maximum 12 quick actions. Please remove some before adding more.");
-	window.clearTimeout(window.__pisellQuickActionLimitTimer);
-	window.__pisellQuickActionLimitTimer = window.setTimeout(() => setter(""), 2200);
-}
-function createLongPressHandlers(callback, ms = 520) {
-	let timer = null;
-	let longPressed = false;
-	const start = () => {
-		longPressed = false;
-		timer = setTimeout(() => {
-			longPressed = true;
-			callback();
-		}, ms);
-	};
-	const clear = () => {
-		if (timer) clearTimeout(timer);
-		timer = null;
-	};
-	return {
-		onMouseDown: start,
-		onMouseUp: clear,
-		onMouseLeave: clear,
-		onTouchStart: start,
-		onTouchEnd: clear,
-		onTouchCancel: clear,
-		wasLongPress: () => longPressed
-	};
-}
-function getRemainingToneClass(ratio, isLight = false) {
-	if (ratio <= .2) return isLight ? "text-red-600" : "text-red-300";
-	if (ratio <= .4) return isLight ? "text-amber-600" : "text-amber-300";
-	return isLight ? "theme-text-muted" : "text-zinc-400";
-}
-function buildGroupedCourtRows(courts, collapsedGroups = {}) {
-	const predefined = ["VIP", "Standard"];
-	const rows = [];
-	const consumedIds = /* @__PURE__ */ new Set();
-	predefined.forEach((group) => {
-		const items = courts.filter((court) => court.type === group);
-		if (items.length === 0) return;
-		items.forEach((c) => consumedIds.add(c.id));
-		rows.push({
-			kind: "group",
-			id: `group-${group}`,
-			label: group,
-			count: items.length,
-			collapsed: !!collapsedGroups[group]
-		});
-		if (!collapsedGroups[group]) items.forEach((court) => rows.push(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ kind: "court" }, court), {}, { group })));
-	});
-	/** 低代码接入：桌位 type 多为 Resource / 自定义 groupType，不能只剩 VIP/Standard 两行否则日周视图为空 */
-	const remainder = courts.filter((c) => !consumedIds.has(c.id));
-	const byType = /* @__PURE__ */ new Map();
-	for (const court of remainder) {
-		const label = court.type && String(court.type).trim() !== "" ? String(court.type) : "Resource";
-		const list = byType.get(label) || [];
-		list.push(court);
-		byType.set(label, list);
-	}
-	for (const [label, items] of byType) {
-		if (!items.length) continue;
-		const idSafe = String(label).replace(/\s+/g, "-");
-		rows.push({
-			kind: "group",
-			id: `group-${idSafe}`,
-			label,
-			count: items.length,
-			collapsed: !!collapsedGroups[label]
-		});
-		if (!collapsedGroups[label]) items.forEach((court) => rows.push(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ kind: "court" }, court), {}, { group: label })));
-	}
-	return rows;
-}
-function buildOverlayBookings(visibleCourtRows, dayKey, bookings, rowTopMap = {}, hourSlots) {
-	const courtRowIndexMap = /* @__PURE__ */ new Map();
-	visibleCourtRows.forEach((row, index) => {
-		if (row.kind === "court") courtRowIndexMap.set(row.id, index);
-	});
-	const gridMin = (hourSlots === null || hourSlots === void 0 ? void 0 : hourSlots.length) ? hourSlots[0] : 0;
-	const gridMaxExclusive = (hourSlots === null || hourSlots === void 0 ? void 0 : hourSlots.length) ? hourSlots[hourSlots.length - 1] + 1 : 24;
-	return visibleCourtRows.flatMap((row) => {
-		if (row.kind !== "court") return [];
-		return bookings.filter((b) => b.courtId === row.id).map((item) => {
-			const seg = getBookingSegmentForDate(item, dayKey);
-			if (!seg) return null;
-			const start = Math.max(seg.startHour, gridMin);
-			const end = Math.min(seg.endHour, gridMaxExclusive);
-			if (end <= start) return null;
-			return {
-				item,
-				rowIndex: courtRowIndexMap.get(row.id) || 0,
-				rowTop: rowTopMap[row.id] || 0,
-				courtId: row.id,
-				start,
-				end,
-				span: end - start,
-				continuesNext: seg.continuesNext,
-				continuesPrev: seg.continuesPrev
-			};
-		}).filter(Boolean);
-	});
-}
-function BookingCard({ booking, dayKey, onOpenDetail, onDragStart, onJumpNext }) {
-	const { item, span, start, continuesNext } = booking;
-	const displayTag = getDisplayStatusTag(item, dayKey);
-	const lateMinutes = getLateMinutes(item, dayKey);
-	const stateClass = getBookingStateClasses(item, dayKey);
-	if (item.kind === "block") return /* @__PURE__ */ react.default.createElement("button", {
-		onClick: (e) => {
-			e.stopPropagation();
-			onOpenDetail(item);
-		},
-		className: `absolute inset-x-0 inset-y-0 rounded-2xl px-3 py-3 text-left overflow-hidden ${stateClass}`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "truncate text-sm font-medium" }, item.name), item.note && /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 truncate text-xs text-zinc-200/90" }, item.note), getBlockMetaLine(item) && /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 truncate text-[10px] text-zinc-300/80" }, getBlockMetaLine(item)));
-	return /* @__PURE__ */ react.default.createElement("button", {
-		draggable: true,
-		onDragStart: (e) => {
-			e.stopPropagation();
-			onDragStart(item);
-		},
-		onClick: (e) => {
-			e.stopPropagation();
-			onOpenDetail(item);
-		},
-		className: `absolute inset-x-0 inset-y-0 rounded-2xl px-4 py-3 text-left overflow-hidden ${stateClass}`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "pr-24" }, /* @__PURE__ */ react.default.createElement("div", { className: "truncate text-sm font-medium" }, item.name), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 text-xs opacity-90" }, formatHourLabel(start), " - ", formatHourLabel(start + span)), continuesNext && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: (e) => {
-			e.stopPropagation();
-			onJumpNext();
-		},
-		className: "mt-2 rounded-lg bg-white/10 px-2 py-1 text-[11px] text-violet-100 hover:bg-white/20 w-fit"
-	}, "→ Continues next day")), (displayTag || lateMinutes) && /* @__PURE__ */ react.default.createElement("div", { className: "absolute bottom-3 right-3 flex items-center gap-1.5" }, lateMinutes && displayTag === "late" && /* @__PURE__ */ react.default.createElement("span", { className: "rounded-md bg-black/25 px-2 py-0.5 text-[10px] font-semibold text-white/90 backdrop-blur-[2px] opacity-80" }, lateMinutes, "min"), displayTag && statusTagMeta(displayTag) && /* @__PURE__ */ react.default.createElement("span", { className: `rounded-lg px-2 py-0.5 text-[10px] font-semibold backdrop-blur-[2px] ${statusTagMeta(displayTag).className} ${lateMinutes ? "opacity-80" : ""}` }, statusTagMeta(displayTag).label)));
-}
-function BookingCalendarDemo(props = {}) {
-	var _hourSlots$, _groupSelectedSlots$, _groupSelectedSlots$2, _courts$find4, _checkinDraft$startHo, _checkinDraft$endHour2, _checkinDraft$startHo4, _checkinDraft$endHour3, _courts$find5;
-	const allowPersist = require_calendarPersistGuard.useCalendarPersist();
-	const courts = (0, react.useMemo)(() => {
-		const r = props.resources;
-		if (Array.isArray(r) && r.length > 0) return r.map((x) => ({
-			id: x.id,
-			name: x.name,
-			type: x.groupType && String(x.groupType).trim() !== "" ? String(x.groupType) : "Resource"
-		}));
-		return DEFAULT_COURTS;
-	}, [props.resources]);
-	/** 顶栏受控：有 props 用 props，无则回退本地 state（便于 Story 单测） */
-	const isLight = false;
-	const [internalView, setInternalView] = (0, react.useState)("month");
-	const [internalAnchor, setInternalAnchor] = (0, react.useState)(new Date(2026, 2, 31));
-	const view = props.calendarView != null ? props.calendarView : internalView;
-	const anchorDate = (0, react.useMemo)(() => {
-		if (props.anchorDate != null) return new Date(props.anchorDate);
-		return internalAnchor;
-	}, [props.anchorDate != null ? props.anchorDate.getTime() : null, internalAnchor]);
-	const commitView = (v) => {
-		var _props$onCalendarView;
-		(_props$onCalendarView = props.onCalendarViewChange) === null || _props$onCalendarView === void 0 || _props$onCalendarView.call(props, v);
-		if (!props.onCalendarViewChange) setInternalView(v);
-	};
-	const commitAnchor = (d) => {
-		var _props$onAnchorDateCh;
-		(_props$onAnchorDateCh = props.onAnchorDateChange) === null || _props$onAnchorDateCh === void 0 || _props$onAnchorDateCh.call(props, d);
-		if (!props.onAnchorDateChange) setInternalAnchor(d);
-	};
-	const [internalBookings, setBookings] = (0, react.useState)(seedHourlyBookings);
-	const bookings = props.bookings != null ? props.bookings : internalBookings;
-	(0, react.useEffect)(() => {
-		if (!props.onViewportChange) return;
-		const a = new Date(anchorDate);
-		let rangeStart;
-		let rangeEnd;
-		if (view === "month") {
-			rangeStart = new Date(a.getFullYear(), a.getMonth(), 1);
-			rangeEnd = new Date(a.getFullYear(), a.getMonth() + 1, 0);
-		} else if (view === "week") {
-			rangeStart = startOfWeek(a);
-			rangeEnd = addDays(rangeStart, 6);
-		} else {
-			rangeStart = new Date(a);
-			rangeEnd = new Date(a);
-		}
-		props.onViewportChange({
-			view,
-			anchorDate: a,
-			rangeStart,
-			rangeEnd
-		});
-	}, [
-		view,
-		anchorDate,
-		props.onViewportChange
-	]);
-	const [selectedFreeSlots, setSelectedFreeSlots] = (0, react.useState)([]);
-	const [selectedBlockSlots, setSelectedBlockSlots] = (0, react.useState)([]);
-	const [focusedCourtId, setFocusedCourtId] = (0, react.useState)(null);
-	const [showBlockPanel, setShowBlockPanel] = (0, react.useState)(false);
-	const [blockNote, setBlockNote] = (0, react.useState)("");
-	const [blockBy, setBlockBy] = (0, react.useState)("Allen");
-	const [blockMode, setBlockMode] = (0, react.useState)("single");
-	const [blockRangeStart, setBlockRangeStart] = (0, react.useState)("2026-03-31");
-	const [blockRangeEnd, setBlockRangeEnd] = (0, react.useState)("2026-04-30");
-	const [blockWeekdays, setBlockWeekdays] = (0, react.useState)([3]);
-	const [transitioningToDay, setTransitioningToDay] = (0, react.useState)(null);
-	const [navDirection, setNavDirection] = (0, react.useState)(0);
-	const [detailItem, setDetailItem] = (0, react.useState)(null);
-	const [detailMode, setDetailMode] = (0, react.useState)("quick");
-	const [detailTab, setDetailTab] = (0, react.useState)("summary");
-	const [filesSubtab, setFilesSubtab] = (0, react.useState)("notes");
-	const [preferDrawerOpen, setPreferDrawerOpen] = (0, react.useState)(false);
-	const [defaultDetailTab, setDefaultDetailTab] = (0, react.useState)("summary");
-	const [preferQuickPopup, setPreferQuickPopup] = (0, react.useState)(true);
-	const [calendarShiftedForDrawer, setCalendarShiftedForDrawer] = (0, react.useState)(false);
-	const [viewedTabState, setViewedTabState] = (0, react.useState)({});
-	const [viewedSubtabState, setViewedSubtabState] = (0, react.useState)({});
-	const [quickActionLimitMessage, setQuickActionLimitMessage] = (0, react.useState)("");
-	const [pinnedActionLabels, setPinnedActionLabels] = (0, react.useState)([
-		"Check in",
-		"Order detail",
-		"Reschedule",
-		"Pay now",
-		"Send reminder",
-		"Print receipt"
-	]);
-	const [overflowPopover, setOverflowPopover] = (0, react.useState)(null);
-	const [overflowListModal, setOverflowListModal] = (0, react.useState)(null);
-	const [draggingItem, setDraggingItem] = (0, react.useState)(null);
-	const [moveConfirm, setMoveConfirm] = (0, react.useState)(null);
-	const [moveDraft, setMoveDraft] = (0, react.useState)(null);
-	const [conflictPicker, setConflictPicker] = (0, react.useState)(null);
-	const [blockConflict, setBlockConflict] = (0, react.useState)(null);
-	const [checkinModal, setCheckinModal] = (0, react.useState)(null);
-	const [checkinDraft, setCheckinDraft] = (0, react.useState)(null);
-	const [summaryPayMenuOpen, setSummaryPayMenuOpen] = (0, react.useState)(false);
-	const [showActionsOverlay, setShowActionsOverlay] = (0, react.useState)(false);
-	const [guestRowMenu, setGuestRowMenu] = (0, react.useState)(null);
-	const [guestBulkActionOpen, setGuestBulkActionOpen] = (0, react.useState)(false);
-	const [guestMockRows, setGuestMockRows] = (0, react.useState)([]);
-	const [selectedFileIds, setSelectedFileIds] = (0, react.useState)([]);
-	const [filePreviewItem, setFilePreviewItem] = (0, react.useState)(null);
-	const [mergeOrderModal, setMergeOrderModal] = (0, react.useState)(null);
-	const [mergeOrderDraft, setMergeOrderDraft] = (0, react.useState)({
-		targetBookingId: "",
-		keepSourceOpen: false
-	});
-	const [customerPickerOpen, setCustomerPickerOpen] = (0, react.useState)(false);
-	const [customerSearch, setCustomerSearch] = (0, react.useState)("");
-	const [selectedCustomer, setSelectedCustomer] = (0, react.useState)(null);
-	const [detailPrefOpen, setDetailPrefOpen] = (0, react.useState)(false);
-	const [summaryChangeMenuOpen, setSummaryChangeMenuOpen] = (0, react.useState)(false);
-	const [noteOverrides, setNoteOverrides] = (0, react.useState)({});
-	const [noteEditor, setNoteEditor] = (0, react.useState)(null);
-	const [dayViewport, setDayViewport] = (0, react.useState)({
-		scrollLeft: 0,
-		scrollTop: 0,
-		clientWidth: 0,
-		clientHeight: 0
-	});
-	const [collapsedGroups, setCollapsedGroups] = (0, react.useState)({
-		VIP: false,
-		Standard: false
-	});
-	const [dayDragging, setDayDragging] = (0, react.useState)(false);
-	(0, react.useEffect)(() => {
-		if (!detailItem) return;
-		const detail = getBookingDetailData(detailItem, courts);
-		const baseCount = Math.max(detail.guestCount || 0, 3);
-		setGuestMockRows(Array.from({ length: baseCount }, (_, index) => {
-			var _detail$customer;
-			return {
-				id: `guest-mock-${detailItem.id}-${index + 1}`,
-				name: index === 0 ? ((_detail$customer = detail.customer) === null || _detail$customer === void 0 ? void 0 : _detail$customer.name) || `Guest ${index + 1}` : `Guest ${index + 1}`,
-				note: index === 0 ? "Primary booking guest" : "Guest list",
-				checkedIn: index < (detail.checkedInCount || 0),
-				noShow: false,
-				removed: false
-			};
-		}));
-		setGuestRowMenu(null);
-		setGuestBulkActionOpen(false);
-		setSummaryChangeMenuOpen(false);
-		setSelectedFileIds([]);
-		setFilePreviewItem(null);
-	}, [detailItem]);
-	(0, react.useEffect)(() => {
-		setSelectedFileIds([]);
-		setFilePreviewItem(null);
-	}, [filesSubtab]);
-	const dayScrollRef = (0, react.useRef)(null);
-	const dayDragRef = (0, react.useRef)({
-		dragging: false,
-		startX: 0,
-		startY: 0,
-		startLeft: 0,
-		startTop: 0,
-		moved: false
-	});
-	const blockPanelRef = (0, react.useRef)(null);
-	const detailPanelRef = (0, react.useRef)(null);
-	const guestBulkActionRef = (0, react.useRef)(null);
-	const overflowPanelRef = (0, react.useRef)(null);
-	const moveConfirmRef = (0, react.useRef)(null);
-	const conflictPickerRef = (0, react.useRef)(null);
-	const blockConflictRef = (0, react.useRef)(null);
-	const checkinModalRef = (0, react.useRef)(null);
-	const mergeOrderModalRef = (0, react.useRef)(null);
-	const customerPickerRef = (0, react.useRef)(null);
-	const detailPrefRef = (0, react.useRef)(null);
-	const summaryChangeMenuRef = (0, react.useRef)(null);
-	const noteEditorRef = (0, react.useRef)(null);
-	const blockStartInputRef = (0, react.useRef)(null);
-	const blockEndInputRef = (0, react.useRef)(null);
-	const visibleCourts = (0, react.useMemo)(() => courts, [courts]);
-	const visibleCourtRows = (0, react.useMemo)(() => buildGroupedCourtRows(visibleCourts, collapsedGroups), [visibleCourts, collapsedGroups]);
-	const dayRowHeights = (0, react.useMemo)(() => visibleCourtRows.map((row) => row.kind === "group" ? groupRowHeight : dayRowHeight), [visibleCourtRows]);
-	const dayRowTopMap = (0, react.useMemo)(() => {
-		let acc = 0;
-		const map = {};
-		visibleCourtRows.forEach((row, index) => {
-			map[row.id] = acc;
-			acc += dayRowHeights[index] || dayRowHeight;
-		});
-		return map;
-	}, [visibleCourtRows, dayRowHeights]);
-	const weekDays = (0, react.useMemo)(() => rangeDays(anchorDate), [anchorDate]);
-	(0, react.useMemo)(() => new Set(weekDays.map((d) => fmtDate(d))), [weekDays]);
-	const dayKey = fmtDate(anchorDate);
-	const hourSlots = (0, react.useMemo)(() => {
-		var _props$timelineRange;
-		return require_index.buildCalendarHourSlotsFromRange((_props$timelineRange = props.timelineRange) !== null && _props$timelineRange !== void 0 ? _props$timelineRange : DEFAULT_CALENDAR_TIMELINE, anchorDate);
-	}, [props.timelineRange, anchorDate]);
-	const firstTimelineHour = (_hourSlots$ = hourSlots[0]) !== null && _hourSlots$ !== void 0 ? _hourSlots$ : 0;
-	const endTimelineExclusive = hourSlots.length ? hourSlots[hourSlots.length - 1] + 1 : 24;
-	const isBusinessHour = (h) => isHourInTimelineSlots(h, hourSlots);
-	const monthDays = (0, react.useMemo)(() => monthGrid(anchorDate, bookings, courts, hourSlots), [
-		anchorDate,
-		bookings,
-		courts,
-		hourSlots
-	]);
-	const timeOptions = (0, react.useMemo)(() => {
-		var _hourSlots$2;
-		return buildTimeOptions((_hourSlots$2 = hourSlots[0]) !== null && _hourSlots$2 !== void 0 ? _hourSlots$2 : 8, hourSlots.length ? hourSlots[hourSlots.length - 1] + 1 : 20);
-	}, [hourSlots]);
-	const overlayBookings = (0, react.useMemo)(() => buildOverlayBookings(visibleCourtRows, dayKey, bookings, dayRowTopMap, hourSlots), [
-		visibleCourtRows,
-		dayKey,
-		bookings,
-		dayRowTopMap,
-		hourSlots
-	]);
-	const dayRowRemainingByCourt = (0, react.useMemo)(() => {
-		const total = hourSlots.length;
-		return Object.fromEntries(visibleCourtRows.filter((row) => row.kind === "court").map((court) => {
-			const occupied = hourSlots.filter((hour) => isBusinessHour(hour) && dayOccupancy(court.id, dayKey, bookings, hourSlots)[hour]).length;
-			const remaining = Math.max(0, total - occupied);
-			const ratio = total > 0 ? remaining / total : 0;
-			return [court.id, {
-				remaining,
-				total,
-				ratio
-			}];
-		}));
-	}, [
-		visibleCourtRows,
-		dayKey,
-		bookings,
-		hourSlots
-	]);
-	const dayHourRemaining = (0, react.useMemo)(() => {
-		const total = visibleCourtRows.filter((row) => row.kind === "court").length;
-		return Object.fromEntries(hourSlots.map((hour) => {
-			if (!isBusinessHour(hour)) return [hour, {
-				remaining: 0,
-				total,
-				ratio: 0
-			}];
-			const remaining = visibleCourtRows.filter((row) => row.kind === "court").filter((court) => !dayOccupancy(court.id, dayKey, bookings, hourSlots)[hour]).length;
-			return [hour, {
-				remaining,
-				total,
-				ratio: total > 0 ? remaining / total : 0
-			}];
-		}));
-	}, [
-		visibleCourtRows,
-		dayKey,
-		bookings,
-		hourSlots
-	]);
-	const dayContentWidth = frozenColWidth + hourSlots.length * dayColWidth;
-	const dayContentHeight = dayHeaderHeight + dayRowHeights.reduce((sum, h) => sum + h, 0);
-	const dayEdgeStats = (0, react.useMemo)(() => {
-		const viewportLeft = dayViewport.scrollLeft;
-		const viewportRight = dayViewport.scrollLeft + dayViewport.clientWidth;
-		const viewportTop = dayViewport.scrollTop;
-		const viewportBottom = dayViewport.scrollTop + dayViewport.clientHeight;
-		const stats = {
-			left: 0,
-			right: 0,
-			top: 0,
-			bottom: 0,
-			showLeft: false,
-			showRight: false,
-			showTop: false,
-			showBottom: false
-		};
-		if (!dayViewport.clientWidth || !dayViewport.clientHeight) return stats;
-		stats.showLeft = viewportLeft > 8;
-		stats.showRight = viewportRight < dayContentWidth - 8;
-		stats.showTop = viewportTop > 8;
-		stats.showBottom = viewportBottom < dayContentHeight - 8;
-		overlayBookings.forEach((booking) => {
-			const bookingLeft = frozenColWidth + (booking.start - firstTimelineHour) * dayColWidth;
-			const bookingRight = bookingLeft + booking.span * dayColWidth;
-			const bookingTop = booking.rowIndex * dayRowHeight + 10;
-			const bookingBottom = bookingTop + (dayRowHeight - 20);
-			if (stats.showLeft && bookingRight < viewportLeft) stats.left += 1;
-			if (stats.showRight && bookingLeft > viewportRight) stats.right += 1;
-			if (stats.showTop && bookingBottom < viewportTop) stats.top += 1;
-			if (stats.showBottom && bookingTop > viewportBottom) stats.bottom += 1;
-		});
-		return stats;
-	}, [
-		dayViewport,
-		overlayBookings,
-		dayContentWidth,
-		dayContentHeight,
-		firstTimelineHour
-	]);
-	(0, react.useEffect)(() => {
-		function handleOutside(e) {
-			var _target$closest;
-			const target = e.target;
-			const hasOverlayOpen = Boolean(noteEditor || customerPickerOpen || moveConfirm || conflictPicker || blockConflict || checkinModal || mergeOrderModal || filePreviewItem || overflowListModal || showActionsOverlay || guestBulkActionOpen);
-			if (showBlockPanel && blockPanelRef.current && !blockPanelRef.current.contains(target)) setShowBlockPanel(false);
-			if (showActionsOverlay) {
-				if (detailPanelRef.current && !detailPanelRef.current.contains(target) && !(noteEditorRef.current && noteEditorRef.current.contains(target))) setShowActionsOverlay(false);
-			} else if (detailItem && detailPanelRef.current && !detailPanelRef.current.contains(target) && !hasOverlayOpen && !(noteEditorRef.current && noteEditorRef.current.contains(target))) setDetailItem(null);
-			if (overflowPopover && overflowPanelRef.current && !overflowPanelRef.current.contains(target)) setOverflowPopover(null);
-			if (overflowListModal && overflowPanelRef.current && !overflowPanelRef.current.contains(target)) setOverflowListModal(null);
-			if (moveConfirm && moveConfirmRef.current && !moveConfirmRef.current.contains(target)) setMoveConfirm(null);
-			if (conflictPicker && conflictPickerRef.current && !conflictPickerRef.current.contains(target)) setConflictPicker(null);
-			if (blockConflict && blockConflictRef.current && !blockConflictRef.current.contains(target)) setBlockConflict(null);
-			if (checkinModal && checkinModalRef.current && !checkinModalRef.current.contains(target)) setCheckinModal(null);
-			if (mergeOrderModal && mergeOrderModalRef.current && !mergeOrderModalRef.current.contains(target)) setMergeOrderModal(null);
-			if (customerPickerOpen && customerPickerRef.current && !customerPickerRef.current.contains(target)) setCustomerPickerOpen(false);
-			if (detailPrefOpen && detailPrefRef.current && !detailPrefRef.current.contains(target)) setDetailPrefOpen(false);
-			if (summaryChangeMenuOpen && summaryChangeMenuRef.current && !summaryChangeMenuRef.current.contains(target)) setSummaryChangeMenuOpen(false);
-			if (guestBulkActionOpen && guestBulkActionRef.current && !guestBulkActionRef.current.contains(target)) setGuestBulkActionOpen(false);
-			if (guestRowMenu && !((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-guest-row-menu]"))) setGuestRowMenu(null);
-		}
-		document.addEventListener("mousedown", handleOutside);
-		return () => document.removeEventListener("mousedown", handleOutside);
-	}, [
-		showBlockPanel,
-		detailItem,
-		showActionsOverlay,
-		overflowPopover,
-		overflowListModal,
-		moveConfirm,
-		conflictPicker,
-		blockConflict,
-		checkinModal,
-		mergeOrderModal,
-		customerPickerOpen,
-		detailPrefOpen,
-		summaryChangeMenuOpen,
-		guestBulkActionOpen,
-		guestRowMenu,
-		noteEditor
-	]);
-	(0, react.useEffect)(() => {
-		if (view !== "day" || !focusedCourtId || !dayScrollRef.current) return;
-		const timer = setTimeout(() => {
-			var _dayScrollRef$current;
-			const el = (_dayScrollRef$current = dayScrollRef.current) === null || _dayScrollRef$current === void 0 ? void 0 : _dayScrollRef$current.querySelector(`[data-court-row="${focusedCourtId}"]`);
-			if (el) el.scrollIntoView({
-				behavior: "smooth",
-				block: "start"
-			});
-		}, 180);
-		return () => clearTimeout(timer);
-	}, [
-		view,
-		focusedCourtId,
-		anchorDate
-	]);
-	(0, react.useEffect)(() => {
-		if (!showBlockPanel) return;
-		setBlockRangeStart(dayKey);
-		setBlockRangeEnd(dayKey);
-	}, [showBlockPanel, dayKey]);
-	(0, react.useEffect)(() => {
-		if (!transitioningToDay) return;
-		const timer = setTimeout(() => setTransitioningToDay(null), 280);
-		return () => clearTimeout(timer);
-	}, [transitioningToDay]);
-	(0, react.useEffect)(() => {
-		if (view !== "day" || !dayScrollRef.current) return;
-		const el = dayScrollRef.current;
-		const update = () => setDayViewport({
-			scrollLeft: el.scrollLeft,
-			scrollTop: el.scrollTop,
-			clientWidth: el.clientWidth,
-			clientHeight: el.clientHeight
-		});
-		update();
-		el.addEventListener("scroll", update, { passive: true });
-		window.addEventListener("resize", update);
-		window.addEventListener("mousemove", handleDayMouseMove);
-		window.addEventListener("mouseup", handleDayMouseUp);
-		return () => {
-			el.removeEventListener("scroll", update);
-			window.removeEventListener("resize", update);
-			window.removeEventListener("mousemove", handleDayMouseMove);
-			window.removeEventListener("mouseup", handleDayMouseUp);
-		};
-	}, [
-		view,
-		anchorDate,
-		visibleCourts.length
-	]);
-	function isFreeSelected(courtId, hour) {
-		return selectedFreeSlots.some((slot) => slot.courtId === courtId && slot.date === dayKey && slot.hour === hour);
-	}
-	function isBlockSelected(courtId, hour) {
-		return selectedBlockSlots.some((slot) => slot.courtId === courtId && slot.date === dayKey && slot.hour === hour);
-	}
-	function goToDayFromCell(day, courtId, source) {
-		setNavDirection(day > anchorDate ? 1 : -1);
-		setTransitioningToDay({ source });
-		commitAnchor(day);
-		setFocusedCourtId(courtId || null);
-		commitView("day");
-	}
-	function openBookingDetail(item) {
-		var _props$onBookingClick;
-		if (((_props$onBookingClick = props.onBookingClick) === null || _props$onBookingClick === void 0 ? void 0 : _props$onBookingClick.call(props, item)) === true) return;
-		setDetailItem(item);
-		setOverflowPopover(null);
-		setDetailTab(defaultDetailTab);
-		setFilesSubtab("notes");
-		const nextMode = preferDrawerOpen && !preferQuickPopup ? "drawer" : "quick";
-		setDetailMode(nextMode);
-		setCalendarShiftedForDrawer(nextMode === "drawer");
-		const key = item.id || item.bookingId || item.orderNumber;
-		const initialTab = defaultDetailTab;
-		setViewedTabState((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [key]: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev[key] || {}), {}, { [initialTab]: true }) }));
-		setViewedSubtabState((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [key]: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev[key] || {}), {}, { form: true }) }));
-	}
-	function toggleSlot(courtId, hour) {
-		const existing = dayOccupancy(courtId, dayKey, bookings, hourSlots)[hour];
-		const court = courts.find((c) => c.id === courtId);
-		const slot = {
-			courtId,
-			court: court === null || court === void 0 ? void 0 : court.name,
-			date: dayKey,
-			hour
-		};
-		if (!existing) {
-			setSelectedFreeSlots((prev) => prev.some((s) => sameSlot(s, slot)) ? prev.filter((s) => !sameSlot(s, slot)) : [...prev, slot]);
-			return;
-		}
-		if (existing.kind === "block") setSelectedBlockSlots((prev) => prev.some((s) => sameSlot(s, slot)) ? prev.filter((s) => !sameSlot(s, slot)) : [...prev, slot]);
-	}
-	function deselectAll() {
-		setSelectedFreeSlots([]);
-		setSelectedBlockSlots([]);
-	}
-	function createBookingFromSelection() {
-		if (!allowPersist("createBooking")) return;
-		if (selectedFreeSlots.length === 0) return;
-		const newBookings = groupSelectedSlots(selectedFreeSlots).map((slot, idx) => ({
-			id: `new-${slot.courtId}-${slot.date}-${slot.startHour}-${idx}`,
-			courtId: slot.courtId,
-			date: slot.date,
-			startHour: slot.startHour,
-			endHour: slot.endHour,
-			name: "New Booking",
-			kind: "booking"
-		}));
-		setBookings((prev) => [...newBookings, ...prev]);
-		setSelectedFreeSlots([]);
-	}
-	function openSelectedBlocks() {
-		if (!allowPersist("removeBlocks")) return;
-		if (selectedBlockSlots.length === 0) return;
-		const selectedSet = new Set(selectedBlockSlots.map((s) => `${s.courtId}-${s.date}-${s.hour}`));
-		setBookings((prev) => prev.filter((item) => {
-			if (item.kind !== "block") return true;
-			getBookingSegmentForDate(item, item.date);
-			return !Array.from({ length: item.endHour - item.startHour }, (_, i) => item.startHour + i).some((h) => selectedSet.has(`${item.courtId}-${item.date}-${h}`));
-		}));
-		setSelectedBlockSlots([]);
-	}
-	function toggleBlockWeekday(day) {
-		setBlockWeekdays((prev) => prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]);
-	}
-	function createBlockFromSelection() {
-		if (selectedFreeSlots.length === 0) return;
-		const baseGroups = groupSelectedSlots(selectedFreeSlots);
-		const nextBlocks = [];
-		if (blockMode === "single") baseGroups.forEach((slot, idx) => {
-			nextBlocks.push({
-				id: `block-single-${slot.courtId}-${slot.date}-${slot.startHour}-${idx}`,
-				courtId: slot.courtId,
-				date: slot.date,
-				startHour: slot.startHour,
-				endHour: slot.endHour,
-				name: blockNote || "Block",
-				note: blockNote || "",
-				blockBy,
-				blockedAt: dayKey,
-				kind: "block"
-			});
-		});
-		else {
-			const start = parseDate(blockRangeStart);
-			const end = parseDate(blockRangeEnd);
-			const baseByKey = /* @__PURE__ */ new Map();
-			baseGroups.forEach((slot) => baseByKey.set(`${slot.courtId}-${slot.startHour}-${slot.endHour}`, slot));
-			for (let d = new Date(start); d <= end; d = addDays(d, 1)) {
-				if (!blockWeekdays.includes(d.getDay())) continue;
-				const dateKey = fmtDate(d);
-				baseByKey.forEach((slot) => {
-					nextBlocks.push({
-						id: `block-repeat-${slot.courtId}-${dateKey}-${slot.startHour}-${slot.endHour}`,
-						courtId: slot.courtId,
-						date: dateKey,
-						startHour: slot.startHour,
-						endHour: slot.endHour,
-						name: blockNote || "Block",
-						note: blockNote || "",
-						blockBy,
-						blockedAt: dayKey,
-						kind: "block"
-					});
-				});
-			}
-		}
-		const conflicts = nextBlocks.flatMap((blk) => overlappingBookings(bookings, blk.courtId, blk.date, blk.startHour, blk.endHour));
-		if (conflicts.length > 0) {
-			setBlockConflict({
-				nextBlocks,
-				conflicts
-			});
-			return;
-		}
-		if (!allowPersist("createBlock")) return;
-		setBookings((prev) => [...nextBlocks, ...prev]);
-		setSelectedFreeSlots([]);
-		setShowBlockPanel(false);
-		setBlockNote("");
-	}
-	function confirmBlockWithUnsetCourts() {
-		if (!blockConflict) return;
-		if (!allowPersist("confirmBlockWithConflicts")) return;
-		const conflictIds = new Set(blockConflict.conflicts.map((b) => b.id));
-		setBookings((prev) => [...blockConflict.nextBlocks, ...prev.map((b) => conflictIds.has(b.id) ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, b), {}, {
-			courtId: null,
-			name: `${b.name}（待重新指定资源）`
-		}) : b)]);
-		setBlockConflict(null);
-		setSelectedFreeSlots([]);
-		setShowBlockPanel(false);
-	}
-	function handleDropMove(targetCourtId, targetDate, targetHour) {
-		if (!draggingItem) return;
-		const duration = draggingItem.endHour - draggingItem.startHour;
-		const nextStart = targetHour;
-		const nextEnd = targetHour + duration;
-		if (!isBusinessHour(nextStart) || nextEnd > endTimelineExclusive) return;
-		const targetCourt = targetCourtId !== null && targetCourtId !== void 0 ? targetCourtId : draggingItem.courtId;
-		if (hasConflict(bookings, targetCourt, targetDate, nextStart, nextEnd, draggingItem.id)) {
-			setConflictPicker({
-				item: draggingItem,
-				targetCourtId: targetCourt,
-				targetDate,
-				targetHour
-			});
-			setDraggingItem(null);
-			return;
-		}
-		setMoveConfirm({
-			item: draggingItem,
-			targetCourtId: targetCourt,
-			targetDate,
-			targetHour
-		});
-		setMoveDraft({
-			targetCourtId: targetCourt,
-			targetDate,
-			targetHour
-		});
-		setDraggingItem(null);
-	}
-	function handleGridDropMove(targetDate, targetCourtId = null) {
-		if (!draggingItem || draggingItem.kind === "block") return;
-		handleDropMove(targetCourtId !== null && targetCourtId !== void 0 ? targetCourtId : draggingItem.courtId, targetDate, draggingItem.startHour);
-	}
-	function confirmMove() {
-		if (!moveConfirm || !moveDraft) return;
-		if (!allowPersist("moveBooking")) return;
-		const { item } = moveConfirm;
-		const { targetCourtId, targetDate, targetHour } = moveDraft;
-		const duration = item.endHour - item.startHour;
-		setBookings((prev) => prev.map((b) => b.id === item.id ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, b), {}, {
-			courtId: targetCourtId,
-			date: targetDate,
-			startHour: targetHour,
-			endHour: targetHour + duration
-		}) : b));
-		setMoveConfirm(null);
-		setMoveDraft(null);
-	}
-	function applyConflictMove(newCourtId, newHour) {
-		if (!conflictPicker) return;
-		if (!allowPersist("applyConflictMove")) return;
-		const { item, targetDate } = conflictPicker;
-		const duration = item.endHour - item.startHour;
-		setBookings((prev) => prev.map((b) => b.id === item.id ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, b), {}, {
-			courtId: newCourtId,
-			date: targetDate,
-			startHour: newHour,
-			endHour: newHour + duration
-		}) : b));
-		setConflictPicker(null);
-	}
-	function handleDayMouseDown(e) {
-		if (!dayScrollRef.current) return;
-		if (e.target.closest("button, input, select, textarea, a, label")) return;
-		const el = dayScrollRef.current;
-		dayDragRef.current = {
-			dragging: true,
-			startX: e.clientX,
-			startY: e.clientY,
-			startLeft: el.scrollLeft,
-			startTop: el.scrollTop,
-			moved: false
-		};
-		setDayDragging(true);
-		e.preventDefault();
-	}
-	function handleDayMouseMove(e) {
-		if (!dayDragRef.current.dragging || !dayScrollRef.current) return;
-		const dx = e.clientX - dayDragRef.current.startX;
-		const dy = e.clientY - dayDragRef.current.startY;
-		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dayDragRef.current.moved = true;
-		dayScrollRef.current.scrollLeft = dayDragRef.current.startLeft - dx;
-		dayScrollRef.current.scrollTop = dayDragRef.current.startTop - dy;
-	}
-	function handleDayMouseUp() {
-		dayDragRef.current.dragging = false;
-		setDayDragging(false);
-	}
-	function scrollDayBy(dx, dy) {
-		if (!dayScrollRef.current) return;
-		dayScrollRef.current.scrollBy({
-			left: dx,
-			top: dy,
-			behavior: "smooth"
-		});
-	}
-	(0, react.useEffect)(() => {
-		if (!detailItem || detailMode !== "drawer") return;
-		const key = detailItem.id;
-		setViewedTabState((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [key]: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev[key] || {}), {}, { [detailTab]: true }) }));
-	}, [
-		detailItem,
-		detailMode,
-		detailTab
-	]);
-	(0, react.useEffect)(() => {
-		if (!detailItem || detailMode !== "drawer" || detailTab !== "files") return;
-		const key = detailItem.id;
-		setViewedSubtabState((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [key]: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev[key] || {}), {}, { [filesSubtab]: true }) }));
-	}, [
-		detailItem,
-		detailMode,
-		detailTab,
-		filesSubtab
-	]);
-	return /* @__PURE__ */ react.default.createElement(antd.Spin, {
-		spinning: Boolean(props.loading),
-		wrapperClassName: "pisell-rb-cal-spin-wrap flex min-h-0 flex-1 flex-col"
-	}, /* @__PURE__ */ react.default.createElement(LayoutGroup, null, /* @__PURE__ */ react.default.createElement("style", null, `
-        .pisell-scroll-hidden {
-          scrollbar-width: none;
-          -ms-overflow-style: none;
-        }
-        .pisell-scroll-hidden::-webkit-scrollbar {
-          width: 0;
-          height: 0;
-          display: none;
-        }
-
-        /* RecordBoard 嵌入：Spin 包装须把 flex-1/min-h-0 传到 theme-root */
-        .pisell-rb-cal-spin-wrap {
-          flex: 1 1 0%;
-          min-height: 0;
-          display: flex;
-          flex-direction: column;
-        }
-        .pisell-rb-cal-spin-wrap .pisell-lowcode-spin-container,
-        .pisell-rb-cal-spin-wrap .ant-spin-container {
-          flex: 1 1 0%;
-          min-height: 0;
-          display: flex;
-          flex-direction: column;
-        }
-
-        .theme-root {
-          --bg-app: #060913;
-          --bg-shell: #080D1B;
-          --bg-header: #10172A;
-          --bg-toolbar: #0D1325;
-          --bg-panel: #0D1325;
-          --bg-panel-soft: #10172A;
-          --bg-panel-alt: #10172A;
-          --bg-elevated: #09101D;
-          --bg-grid-cell: #0A0F1D;
-          --bg-grid-muted: #080D1B;
-          --bg-sticky: #09101D;
-          --bg-input: #0D1325;
-          --border-soft: rgba(255,255,255,0.10);
-          --border-strong: rgba(255,255,255,0.16);
-          --text-main: #FFFFFF;
-          --text-soft: rgba(255,255,255,0.72);
-          --text-muted: rgba(255,255,255,0.45);
-          --text-faint: rgba(255,255,255,0.15);
-          --shadow-heavy: 0 24px 80px rgba(0,0,0,0.42);
-          --brand-primary: #7F56DA;
-          --brand-deep: #6941C6;
-          --brand-light: #B692F6;
-          --brand-surface: rgba(127, 86, 218, 0.12);
-          --success-text: #32D583;
-          --success-surface: rgba(18, 183, 106, 0.10);
-          --success-border: rgba(50, 213, 131, 0.22);
-          --warning-text: #FDB022;
-          --warning-surface: rgba(247, 144, 9, 0.10);
-          --warning-border: rgba(253, 176, 34, 0.22);
-          --danger-text: #F97066;
-          --danger-surface: rgba(240, 68, 56, 0.10);
-          --danger-border: rgba(240, 68, 56, 0.22);
-          --info-text: #53B1FD;
-          --info-surface: rgba(46, 144, 250, 0.10);
-          --info-border: rgba(83, 177, 253, 0.24);
-          --pickup-text: #F670C7;
-          --pickup-surface: rgba(238, 70, 188, 0.10);
-          --pickup-border: rgba(246, 112, 199, 0.24);
-          --disabled-value: rgba(255,255,255,0.15);
-          --side-brand-bg: #2B165C;
-          --side-brand-border: rgba(182, 146, 246, 0.26);
-        }
-
-        .theme-root.theme-light {
-          --bg-app: #E9EEF5;
-          --bg-shell: #F8FAFC;
-          --bg-header: #E2E8F4;
-          --bg-toolbar: #F8FAFC;
-          --bg-panel: #FFFFFF;
-          --bg-panel-soft: #FFFFFF;
-          --bg-panel-alt: #F2F5F9;
-          --bg-elevated: #EEF3F8;
-          --bg-grid-cell: #FFFFFF;
-          --bg-grid-muted: #F8FAFC;
-          --bg-sticky: #EEF3F8;
-          --bg-input: #F2F5F9;
-          --border-soft: #CBD5E1;
-          --border-strong: #B8C4D3;
-          --text-main: #101828;
-          --text-soft: #344054;
-          --text-muted: #667085;
-          --text-faint: #98A2B3;
-          --shadow-heavy: 0 18px 48px rgba(89, 61, 132, 0.08);
-          --brand-primary: #7F56DA;
-          --brand-deep: #6941C6;
-          --brand-light: #B692F6;
-          --brand-surface: #F4EBFF;
-          --success-text: #067647;
-          --success-surface: #D1FADF;
-          --success-border: #A6F4C5;
-          --warning-text: #B54708;
-          --warning-surface: #FEF0C7;
-          --warning-border: #FEDF89;
-          --danger-text: #B42318;
-          --danger-surface: #FEE4E2;
-          --danger-border: #F04438;
-          --info-text: #175CD3;
-          --info-surface: #D1E9FF;
-          --info-border: #2E90FA;
-          --pickup-text: #C11574;
-          --pickup-surface: #FCCEEE;
-          --pickup-border: #EE46BC;
-          --disabled-value: #98A2B3;
-          --side-brand-bg: #6941C6;
-          --side-brand-border: rgba(127, 86, 218, 0.32);
-        }
-
-        .theme-app { background: var(--bg-app); color: var(--text-main); }
-        .theme-shell { background: var(--bg-shell); color: var(--text-main); border-color: var(--border-soft); box-shadow: var(--shadow-heavy); }
-        .theme-header { background: var(--bg-header); border-color: var(--border-soft); }
-        .theme-toolbar { background: var(--bg-toolbar); border-color: var(--border-soft); }
-        .theme-panel { background: var(--bg-panel); border-color: var(--border-soft); }
-        .theme-panel-soft { background: var(--bg-panel-soft); border-color: var(--border-soft); }
-        .theme-panel-alt { background: var(--bg-panel-alt); border-color: var(--border-soft); }
-        .theme-elevated { background: var(--bg-elevated); }
-        .theme-grid-cell { background: var(--bg-grid-cell); }
-        .theme-grid-muted { background: var(--bg-grid-muted); }
-        .theme-sticky { background: var(--bg-sticky); }
-        .theme-input { background: var(--bg-input); border-color: var(--border-strong); color: var(--text-main); }
-        .theme-text { color: var(--text-main); }
-        .theme-text-soft { color: var(--text-soft); }
-        .theme-text-muted { color: var(--text-muted); }
-        .theme-text-faint { color: var(--text-faint); }
-        .theme-border { border-color: var(--border-soft); }
-        .theme-border-strong { border-color: var(--border-strong); }
-        .theme-brand-surface { background: var(--brand-surface); }
-        .theme-brand-text { color: var(--brand-deep); }
-        .theme-success-chip { color: var(--success-text); background: var(--success-surface); border-color: var(--success-border); }
-        .theme-warning-chip { color: var(--warning-text); background: var(--warning-surface); border-color: var(--warning-border); }
-        .theme-danger-chip { color: var(--danger-text); background: var(--danger-surface); border-color: var(--danger-border); }
-        .theme-info-chip { color: var(--info-text); background: var(--info-surface); border-color: var(--info-border); }
-        .theme-pickup-chip { color: var(--pickup-text); background: var(--pickup-surface); border-color: var(--pickup-border); }
-        .theme-disabled-value { color: var(--disabled-value); }
-        .theme-light .soft-shadow { box-shadow: 0 12px 34px rgba(15,23,42,0.08); }
-        .btn-brand { background: var(--brand-primary); color: #fff; border: 1px solid var(--brand-primary); }
-        .btn-brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
-        .btn-neutral { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-strong); }
-        .btn-neutral:hover { background: var(--bg-panel-alt); }
-        .btn-success { background: var(--success-surface); color: var(--success-text); border: 1px solid var(--success-border); }
-        .btn-warning { background: var(--warning-surface); color: var(--warning-text); border: 1px solid var(--warning-border); }
-        .btn-danger { background: var(--danger-surface); color: var(--danger-text); border: 1px solid var(--danger-border); }
-        .btn-info { background: var(--info-surface); color: var(--info-text); border: 1px solid var(--info-border); }
-        .surface-muted { background: var(--bg-panel-alt); border: 1px solid var(--border-soft); }
-        .surface-card { background: var(--bg-panel); border: 1px solid var(--border-soft); }
-        .text-disabled-token { color: var(--disabled-value); }
-        .btn-pill-active { background: var(--brand-primary); color: #fff; border: 1px solid var(--brand-primary); }
-        .btn-pill-active:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
-        .btn-pill-neutral { background: var(--bg-input); color: var(--text-soft); border: 1px solid var(--border-strong); }
-        .btn-pill-neutral:hover { background: var(--bg-panel-alt); color: var(--text-main); }
-        .surface-overlay { background: color-mix(in srgb, var(--bg-panel) 88%, transparent); border: 1px solid var(--border-soft); }
-        .panel-dark-adapt { background: var(--bg-panel); border: 1px solid var(--border-soft); color: var(--text-main); }
-        .panel-soft-adapt { background: var(--bg-panel-alt); border: 1px solid var(--border-soft); color: var(--text-main); }
-        .input-adapt { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-main); }
-        .caption-adapt { color: var(--text-muted); }
-        .ghost-adapt:hover { background: var(--bg-panel-alt); }
-        .surface-brand-side { background: var(--side-brand-bg); color: #fff; border-color: var(--side-brand-border); }
-        .surface-brand-side-muted { background: color-mix(in srgb, var(--side-brand-bg) 88%, white 12%); color: #fff; border-color: var(--side-brand-border); }
-        .badge-brand-dot { background: var(--brand-primary); color: #fff; }
-      `), /* @__PURE__ */ react.default.createElement("div", { className: `theme-root theme-app flex h-full min-h-0 flex-col p-2 md:p-3 theme-dark` }, /* @__PURE__ */ react.default.createElement("div", {
-		className: "theme-shell soft-shadow mx-0 flex h-full min-h-0 w-full max-w-none flex-1 flex-col rounded-[28px] border overflow-hidden transition-[padding-right] duration-200",
-		style: { paddingRight: 0 }
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ react.default.createElement(AnimatePresence, {
-		mode: "wait",
-		initial: false
-	}, view === "month" && /* @__PURE__ */ react.default.createElement(motion.div, {
-		key: `month-${anchorDate.getFullYear()}-${anchorDate.getMonth()}`,
-		className: "flex min-h-0 flex-1 flex-col",
-		initial: {
-			x: navDirection > 0 ? 36 : -36,
-			opacity: .78
-		},
-		animate: {
-			x: 0,
-			opacity: 1
-		},
-		exit: {
-			x: navDirection > 0 ? -36 : 36,
-			opacity: .78
-		},
-		transition: {
-			duration: .22,
-			ease: [
-				.22,
-				.8,
-				.22,
-				1
-			]
-		}
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "p-2 md:p-4 relative flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ react.default.createElement("div", { className: "theme-panel rounded-3xl border min-w-[980px] min-h-0 max-h-none flex-1 overflow-auto" }, /* @__PURE__ */ react.default.createElement("div", { className: "theme-panel-alt sticky top-0 z-20 grid grid-cols-7 border-b theme-border shadow-[0_6px_12px_rgba(0,0,0,0.08)]" }, weekdayNames.map((d, i) => /* @__PURE__ */ react.default.createElement("div", {
-		key: d,
-		className: `px-4 py-3 text-center font-medium ${i >= 5 ? "bg-violet-900" : ""}`
-	}, d))), /* @__PURE__ */ react.default.createElement("div", { className: "grid grid-cols-7 auto-rows-[255px]" }, monthDays.map((day) => {
-		const allItems = bookings.filter((b) => b.date === day.key);
-		const dayItems = allItems.slice(0, 3);
-		const moreItems = allItems.slice(3);
-		const moreCount = moreItems.length;
-		const showMoreTile = moreCount > 0 && dayItems.length > 0;
-		return /* @__PURE__ */ react.default.createElement(motion.button, {
-			layoutId: `zoom-month-${day.key}`,
-			key: day.key,
-			onClick: () => goToDayFromCell(day.date, null, `month-${day.key}`),
-			onDragOver: (e) => e.preventDefault(),
-			onDrop: (e) => {
-				e.preventDefault();
-				handleGridDropMove(day.key);
-			},
-			className: `relative flex flex-col justify-start border-r border-b theme-border p-3 text-left align-top ${day.inMonth ? "bg-[#1a1b21]" : "bg-[#111217] text-zinc-600"} hover:bg-zinc-900`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `absolute left-3 top-3 text-4xl font-semibold leading-none ` }, day.date.getDate()), /* @__PURE__ */ react.default.createElement("div", { className: "absolute right-3 top-3 flex gap-1 pt-1" }, day.bookingCount > 0 && /* @__PURE__ */ react.default.createElement("span", { className: "h-3 w-3 rounded-full bg-violet-500" }), (day.blockCount > 0 || day.fullyBooked) && /* @__PURE__ */ react.default.createElement("span", { className: "h-3 w-3 rounded-full bg-red-500" })), /* @__PURE__ */ react.default.createElement("div", { className: "mt-10 flex flex-col items-start gap-1.5 w-full" }, dayItems.map((item, i) => {
-			const isLastVisible = i === dayItems.length - 1;
-			const shrinkForMore = showMoreTile && isLastVisible;
-			const displayTag = getDisplayStatusTag(item, day.key);
-			return /* @__PURE__ */ react.default.createElement("div", {
-				key: i,
-				className: "flex w-full items-stretch gap-2"
-			}, /* @__PURE__ */ react.default.createElement("button", {
-				draggable: item.kind !== "block",
-				onDragStart: (e) => {
-					if (item.kind !== "block") {
-						e.stopPropagation();
-						setDraggingItem(item);
-					}
-				},
-				onClick: (e) => {
-					e.stopPropagation();
-					openBookingDetail(item);
-				},
-				className: `block rounded-md px-2 py-2 text-xs text-left ${getBookingStateClasses(item, day.key)} ${shrinkForMore ? "flex-1 min-w-0" : "w-full"}`
-			}, /* @__PURE__ */ react.default.createElement("div", { className: "truncate" }, item.name), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 opacity-80" }, formatHourLabel(item.startHour), " -", " ", formatHourLabel(item.endHour)), displayTag && statusTagMeta(displayTag) && /* @__PURE__ */ react.default.createElement("div", { className: "mt-2 flex justify-end" }, /* @__PURE__ */ react.default.createElement("span", { className: `rounded-lg px-2 py-0.5 text-[10px] font-semibold ${statusTagMeta(displayTag).className} backdrop-blur-[2px]` }, statusTagMeta(displayTag).label))), shrinkForMore && /* @__PURE__ */ react.default.createElement("div", {
-				className: "relative h-[52px] w-[52px] shrink-0",
-				ref: (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === day.key ? overflowPanelRef : null
-			}, /* @__PURE__ */ react.default.createElement("button", {
-				onMouseEnter: (e) => {
-					e.stopPropagation();
-					setOverflowPopover({
-						courtId: "month",
-						date: day.key,
-						items: moreItems,
-						pinned: false
-					});
-				},
-				onClick: (e) => {
-					e.stopPropagation();
-					setOverflowPopover(null);
-					setOverflowListModal((prev) => prev && prev.scope === "month" && prev.date === day.key ? null : {
-						scope: "month",
-						date: day.key,
-						title: `${day.key} 预约列表`,
-						items: allItems.filter((x) => x.kind === "booking")
-					});
-				},
-				className: "flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-violet-700/90 text-sm font-semibold text-white"
-			}, "+", moreCount), (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === day.key && !overflowListModal && /* @__PURE__ */ react.default.createElement("div", {
-				onMouseLeave: () => {
-					if (!(overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.pinned)) setOverflowPopover(null);
-				},
-				className: `absolute right-0 top-[60px] z-20 min-w-[240px] rounded-xl border p-3 shadow-2xl border-zinc-700 bg-[#111218]`
-			}, /* @__PURE__ */ react.default.createElement("div", { className: `mb-3 text-xs font-semibold text-zinc-300` }, "Bookings for this day"), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-2.5" }, overflowPopover.items.map((extraItem, moreIdx) => /* @__PURE__ */ react.default.createElement("button", {
-				key: moreIdx,
-				onClick: (e) => {
-					e.stopPropagation();
-					openBookingDetail(extraItem);
-				},
-				className: `block w-full shrink-0 rounded-lg px-3 py-2.5 text-xs text-left ${extraItem.kind === "block" ? "bg-red-700/70 text-red-100" : "bg-violet-700/90 text-violet-50"}`
-			}, /* @__PURE__ */ react.default.createElement("div", { className: "truncate" }, extraItem.name), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 opacity-80" }, formatHourLabel(extraItem.startHour), " ", "-", " ", formatHourLabel(extraItem.endHour))))))));
-		})));
-	}))))), view === "week" && /* @__PURE__ */ react.default.createElement(motion.div, {
-		key: `week-${fmtDate(weekDays[0])}`,
-		className: "flex min-h-0 flex-1 flex-col",
-		initial: {
-			x: navDirection > 0 ? 36 : -36,
-			opacity: .78
-		},
-		animate: {
-			x: 0,
-			opacity: 1
-		},
-		exit: {
-			x: navDirection > 0 ? -36 : 36,
-			opacity: .78
-		},
-		transition: {
-			duration: .22,
-			ease: [
-				.22,
-				.8,
-				.22,
-				1
-			]
-		}
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "p-2 md:p-4 relative flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ react.default.createElement("div", { className: "theme-panel rounded-3xl border min-w-[980px] min-h-0 max-h-none flex-1 overflow-auto" }, /* @__PURE__ */ react.default.createElement("div", {
-		className: "grid",
-		style: { gridTemplateColumns: `${frozenColWidth}px repeat(${weekDays.length}, minmax(150px, 1fr))` }
-	}, /* @__PURE__ */ react.default.createElement("div", {
-		className: "grid sticky top-0 z-50",
-		style: {
-			gridColumn: "1 / -1",
-			gridTemplateColumns: `${frozenColWidth}px repeat(${weekDays.length}, minmax(150px, 1fr))`,
-			isolation: "isolate"
-		}
-	}, /* @__PURE__ */ react.default.createElement("div", { className: `sticky left-0 z-30 w-[132px] min-w-[132px] max-w-[132px] px-3 py-4 font-semibold border-b shadow-[8px_0_16px_rgba(0,0,0,0.08)] bg-[#241d40] border-zinc-800` }, "Court / Date"), weekDays.map((day, i) => {
-		const key = fmtDate(day);
-		const dayItems = bookings.filter((b) => b.date === key);
-		const fullyBooked = courts.every((court) => hourSlots.filter(isBusinessHour).every((h) => dayOccupancy(court.id, key, bookings, hourSlots)[h]));
-		return /* @__PURE__ */ react.default.createElement("div", {
-			key,
-			className: `relative z-20 border-b border-l p-3 text-center shadow-[0_8px_16px_rgba(0,0,0,0.06)] border-zinc-800 ${i >= 5 ? "bg-violet-900" : "bg-[#1a1a22]"}`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `text-sm text-zinc-400` }, weekdayNames[i]), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 text-3xl font-semibold" }, day.getDate()), /* @__PURE__ */ react.default.createElement("div", { className: "mt-2 flex items-center justify-center gap-1" }, dayItems.some((b) => b.kind === "booking") && /* @__PURE__ */ react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (dayItems.some((b) => b.kind === "block") || fullyBooked) && /* @__PURE__ */ react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" })));
-	})), visibleCourtRows.map((row) => /* @__PURE__ */ react.default.createElement(react.default.Fragment, { key: row.id }, row.kind === "group" ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: `sticky left-0 z-20 w-[132px] min-w-[132px] max-w-[132px] border-b px-2.5 py-2 shadow-[8px_0_16px_rgba(0,0,0,0.08)] border-zinc-800/80 bg-gradient-to-b from-[#252038] to-[#1a1628]` }, /* @__PURE__ */ react.default.createElement("button", {
-		type: "button",
-		"aria-expanded": !row.collapsed,
-		onClick: () => setCollapsedGroups((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [row.label]: !prev[row.label] })),
-		className: `flex w-full items-center gap-2 rounded-lg px-1 py-1 text-left transition-colors hover:bg-white/[0.04] active:bg-white/[0.07]`
-	}, /* @__PURE__ */ react.default.createElement(lucide_react.ChevronDown, {
-		size: 15,
-		strokeWidth: 2.25,
-		className: `shrink-0 transition-transform duration-200 text-zinc-500 ${row.collapsed ? "-rotate-90" : "rotate-0"}`,
-		"aria-hidden": true
-	}), /* @__PURE__ */ react.default.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-1.5" }, /* @__PURE__ */ react.default.createElement("span", { className: `truncate text-[13px] font-semibold leading-snug text-zinc-100` }, row.label), /* @__PURE__ */ react.default.createElement("span", { className: `shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tabular-nums bg-zinc-800/90 text-zinc-300 ring-1 ring-zinc-600/40` }, row.count)))), weekDays.map((day) => {
-		const key = fmtDate(day);
-		const groupCourts = visibleCourts.filter((court) => court.type === row.label);
-		/** 分子：当日时间轴上无任何占用（无预约、无锁台）的资源数；分母：该类型下资源总数 */
-		const idleCount = groupCourts.filter((court) => {
-			return courtDaySummary(court.id, key, bookings, hourSlots).occupiedHours.length === 0;
-		}).length;
-		const ratio = groupCourts.length > 0 ? idleCount / groupCourts.length : 0;
-		return /* @__PURE__ */ react.default.createElement("div", {
-			key: `${row.id}-${key}`,
-			className: `border-b border-l p-3 text-center border-zinc-800 bg-[#151a2f]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs font-semibold ${getRemainingToneClass(ratio, isLight)}` }, idleCount, "/", groupCourts.length));
-	})) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: `sticky left-0 z-20 w-[132px] min-w-[132px] max-w-[132px] border-b px-3 py-3 align-top shadow-[8px_0_16px_rgba(0,0,0,0.06)] border-zinc-800 bg-[#1a1a22]` }, /* @__PURE__ */ react.default.createElement("div", { className: "font-semibold text-[16px] leading-tight break-all" }, row.name)), weekDays.map((day) => {
-		const key = fmtDate(day);
-		const summary = courtDaySummary(row.id, key, bookings, hourSlots);
-		const previewItems = summary.items.slice(0, 3);
-		const moreItems = summary.items.slice(3);
-		const moreCount = moreItems.length;
-		const showMoreTile = moreCount > 0 && previewItems.length > 0;
-		return /* @__PURE__ */ react.default.createElement(motion.button, {
-			layoutId: `zoom-week-${row.id}-${key}`,
-			key: `${row.id}-${key}`,
-			onClick: () => goToDayFromCell(day, row.id, `week-${row.id}-${key}`),
-			onDragOver: (e) => e.preventDefault(),
-			onDrop: (e) => {
-				e.preventDefault();
-				handleGridDropMove(key, row.id);
-			},
-			className: `relative flex flex-col justify-start min-h-[148px] border-b border-l p-3 text-left align-top transition  ${summary.fullyBooked ? "bg-zinc-800 text-zinc-500" : summary.hasBlock ? "bg-red-950/30 border-red-800/40" : summary.occupiedHours.length > 0 ? "bg-[#1c1630] hover:bg-[#241c3f]" : "bg-zinc-900 hover:bg-zinc-800"}`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "absolute left-3 top-3 text-[13px] text-zinc-400" }, key), /* @__PURE__ */ react.default.createElement("div", { className: "absolute right-3 top-3 flex gap-1" }, summary.occupiedHours.length > 0 && /* @__PURE__ */ react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (summary.hasBlock || summary.fullyBooked) && /* @__PURE__ */ react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" })), summary.fullyBooked ? /* @__PURE__ */ react.default.createElement("div", { className: "mt-8 rounded-lg bg-zinc-700/70 px-2 py-1 text-xs" }, "Fully booked") : summary.items.length > 0 ? /* @__PURE__ */ react.default.createElement("div", { className: "mt-8 flex flex-col items-start gap-1.5 w-full" }, previewItems.map((item, idx) => {
-			const isLastVisible = idx === previewItems.length - 1;
-			const shrinkForMore = showMoreTile && isLastVisible;
-			const displayTag = getDisplayStatusTag(item, key);
-			return /* @__PURE__ */ react.default.createElement("div", {
-				key: idx,
-				className: "flex w-full items-stretch gap-2"
-			}, /* @__PURE__ */ react.default.createElement("button", {
-				onClick: (e) => {
-					e.stopPropagation();
-					openBookingDetail(item);
-				},
-				className: `rounded-lg px-3 py-2 text-xs text-left ${getBookingStateClasses(item, key)} ${shrinkForMore ? "flex-1 min-w-0" : "w-full"}`
-			}, /* @__PURE__ */ react.default.createElement("div", { className: "truncate" }, item.name), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 opacity-80" }, formatHourLabel(item.startHour), " ", "-", " ", formatHourLabel(item.endHour)), displayTag && statusTagMeta(displayTag) && /* @__PURE__ */ react.default.createElement("div", { className: "mt-2 flex justify-end" }, /* @__PURE__ */ react.default.createElement("span", { className: `rounded-lg px-2 py-0.5 text-[10px] font-semibold ${statusTagMeta(displayTag).className} backdrop-blur-[2px]` }, statusTagMeta(displayTag).label))), shrinkForMore && /* @__PURE__ */ react.default.createElement("div", {
-				className: "relative h-[52px] w-[52px] shrink-0",
-				ref: (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === row.id && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === key ? overflowPanelRef : null
-			}, /* @__PURE__ */ react.default.createElement("button", {
-				onMouseEnter: (e) => {
-					e.stopPropagation();
-					setOverflowPopover({
-						courtId: row.id,
-						date: key,
-						items: moreItems,
-						pinned: false
-					});
-				},
-				onClick: (e) => {
-					e.stopPropagation();
-					setOverflowPopover(null);
-					setOverflowListModal((prev) => prev && prev.scope === row.id && prev.date === key ? null : {
-						scope: row.id,
-						date: key,
-						title: `${key} All bookings`,
-						items: summary.items.filter((x) => x.kind === "booking")
-					});
-				},
-				className: "flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-violet-700/90 text-sm font-semibold text-white"
-			}, "+", moreCount)));
-		})) : /* @__PURE__ */ react.default.createElement("div", { className: "mt-8 rounded-lg border border-dashed border-zinc-700 px-2 py-2 text-xs text-zinc-500" }, "Available"));
-	})))))))), view === "day" && /* @__PURE__ */ react.default.createElement(motion.div, {
-		key: `day-${dayKey}`,
-		className: "flex min-h-0 flex-1 flex-col",
-		initial: {
-			x: navDirection > 0 ? 36 : -36,
-			opacity: .78
-		},
-		animate: {
-			x: 0,
-			opacity: 1
-		},
-		exit: {
-			x: navDirection > 0 ? -36 : 36,
-			opacity: .78
-		},
-		transition: {
-			duration: .22,
-			ease: [
-				.22,
-				.8,
-				.22,
-				1
-			]
-		}
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		layoutId: transitioningToDay ? `zoom-${transitioningToDay.source}` : void 0,
-		transition: { layout: {
-			duration: .2,
-			ease: [
-				.2,
-				.85,
-				.2,
-				1
-			]
-		} },
-		className: "p-2 md:p-4 relative flex min-h-0 flex-1 flex-col"
-	}, /* @__PURE__ */ react.default.createElement("div", {
-		ref: dayScrollRef,
-		onMouseDown: handleDayMouseDown,
-		onMouseMove: handleDayMouseMove,
-		onMouseUp: handleDayMouseUp,
-		onMouseLeave: handleDayMouseUp,
-		className: `pisell-scroll-hidden relative rounded-3xl border min-h-0 max-h-none flex-1 overflow-auto overscroll-contain touch-pan-x touch-pan-y select-none border-zinc-800 bg-[#121217] ${dayDragging ? "cursor-grabbing" : "cursor-grab"}`
-	}, /* @__PURE__ */ react.default.createElement("div", { style: {
-		minWidth: `${frozenColWidth + hourSlots.length * dayColWidth}px`,
-		minHeight: `${dayContentHeight}px`
-	} }, dayEdgeStats.showTop && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => scrollDayBy(0, -dayRowHeight * 2),
-		className: "absolute left-1/2 top-3 z-[45] -translate-x-1/2 rounded-full border border-white/10 bg-black/35 px-3 py-1.5 text-xs text-white backdrop-blur-md hover:bg-black/50"
-	}, "↑", dayEdgeStats.top > 0 ? ` ${dayEdgeStats.top}` : ""), dayEdgeStats.showBottom && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => scrollDayBy(0, dayRowHeight * 2),
-		className: "absolute bottom-3 left-1/2 z-[45] -translate-x-1/2 rounded-full border border-white/10 bg-black/35 px-3 py-1.5 text-xs text-white backdrop-blur-md hover:bg-black/50"
-	}, "↓", dayEdgeStats.bottom > 0 ? ` ${dayEdgeStats.bottom}` : ""), dayEdgeStats.showLeft && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => scrollDayBy(-dayColWidth * 3, 0),
-		className: "absolute left-[144px] top-1/2 z-[45] -translate-y-1/2 rounded-full border border-white/10 bg-black/35 px-3 py-1.5 text-xs text-white backdrop-blur-md hover:bg-black/50"
-	}, "←", dayEdgeStats.left > 0 ? ` ${dayEdgeStats.left}` : ""), dayEdgeStats.showRight && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => scrollDayBy(dayColWidth * 3, 0),
-		className: "absolute right-3 top-1/2 z-[45] -translate-y-1/2 rounded-full border border-white/10 bg-black/35 px-3 py-1.5 text-xs text-white backdrop-blur-md hover:bg-black/50"
-	}, dayEdgeStats.right > 0 ? `${dayEdgeStats.right} ` : "", "→"), /* @__PURE__ */ react.default.createElement("div", {
-		className: "grid sticky top-0 z-50",
-		style: { gridTemplateColumns: `${frozenColWidth}px repeat(${hourSlots.length}, ${dayColWidth}px)` }
-	}, /* @__PURE__ */ react.default.createElement("div", { className: `sticky left-0 top-0 z-[60] w-[132px] min-w-[132px] max-w-[132px] px-3 py-4 font-semibold border-b shadow-[8px_0_16px_rgba(0,0,0,0.08)] bg-[#241d40] border-zinc-800` }, anchorDate.getFullYear(), "年", " ", monthNames[anchorDate.getMonth()], " ", anchorDate.getDate(), "日"), hourSlots.map((hour) => /* @__PURE__ */ react.default.createElement("div", {
-		key: hour,
-		className: `border-b border-l px-2 py-2.5 text-center text-sm font-medium border-zinc-800 ${isBusinessHour(hour) ? "bg-[#1a1a22] text-zinc-300" : "bg-zinc-800/80 text-zinc-500"}`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center justify-center gap-1" }, /* @__PURE__ */ react.default.createElement(lucide_react.Clock3, { size: 14 }), " ", formatHourLabel(hour)), isBusinessHour(hour) && dayHourRemaining[hour] && /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[11px] font-semibold ${getRemainingToneClass(dayHourRemaining[hour].ratio, isLight)}` }, dayHourRemaining[hour].remaining, "/", dayHourRemaining[hour].total, " free")))), dayKey === demoNow.date && /* @__PURE__ */ react.default.createElement("div", {
-		className: "pointer-events-none absolute inset-y-0 z-20",
-		style: { left: `${frozenColWidth + (demoNow.hour - firstTimelineHour) * dayColWidth}px` }
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "relative h-full" }, /* @__PURE__ */ react.default.createElement("div", { className: "absolute inset-y-0 w-[2px] bg-emerald-400/95 shadow-[0_0_10px_rgba(16,185,129,0.65)]" }), /* @__PURE__ */ react.default.createElement("div", { className: "sticky top-2 z-30 -translate-x-1/2 rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-semibold text-white shadow-lg w-fit" }, currentTimeLabel()))), /* @__PURE__ */ react.default.createElement("div", {
-		className: "grid relative",
-		style: {
-			gridTemplateColumns: `${frozenColWidth}px repeat(${hourSlots.length}, ${dayColWidth}px)`,
-			gridTemplateRows: dayRowHeights.map((h) => `${h}px`).join(" ")
-		}
-	}, visibleCourtRows.map((row) => /* @__PURE__ */ react.default.createElement(react.default.Fragment, { key: row.id }, row.kind === "group" ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: `sticky left-0 z-30 w-[132px] min-w-[132px] max-w-[132px] border-b px-2.5 py-2 shadow-[8px_0_16px_rgba(0,0,0,0.08)] border-zinc-800/80 bg-gradient-to-b from-[#252038] to-[#1a1628]` }, /* @__PURE__ */ react.default.createElement("button", {
-		type: "button",
-		"aria-expanded": !row.collapsed,
-		onClick: () => setCollapsedGroups((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [row.label]: !prev[row.label] })),
-		className: `flex w-full items-center gap-2 rounded-lg px-1 py-1 text-left transition-colors hover:bg-white/[0.04] active:bg-white/[0.07]`
-	}, /* @__PURE__ */ react.default.createElement(lucide_react.ChevronDown, {
-		size: 15,
-		strokeWidth: 2.25,
-		className: `shrink-0 transition-transform duration-200 text-zinc-500 ${row.collapsed ? "-rotate-90" : "rotate-0"}`,
-		"aria-hidden": true
-	}), /* @__PURE__ */ react.default.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-1.5" }, /* @__PURE__ */ react.default.createElement("span", { className: `truncate text-[13px] font-semibold leading-snug text-zinc-100` }, row.label), /* @__PURE__ */ react.default.createElement("span", { className: `shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tabular-nums bg-zinc-800/90 text-zinc-300 ring-1 ring-zinc-600/40` }, row.count)))), hourSlots.map((hour) => {
-		const groupCourts = visibleCourts.filter((court) => court.type === row.label);
-		const remaining = groupCourts.filter((court) => !dayOccupancy(court.id, dayKey, bookings, hourSlots)[hour]).length;
-		const ratio = groupCourts.length > 0 ? remaining / groupCourts.length : 0;
-		const outsideBusiness = !isBusinessHour(hour);
-		return /* @__PURE__ */ react.default.createElement("div", {
-			key: `${row.id}-${hour}`,
-			className: `border-b border-l px-2 py-1.5 text-center text-sm font-medium border-zinc-800 ${outsideBusiness ? "bg-zinc-800/80 text-zinc-500" : "bg-[#151a2f] text-zinc-300"}`
-		}, outsideBusiness ? /* @__PURE__ */ react.default.createElement("div", { className: "text-xs opacity-60" }, "—") : /* @__PURE__ */ react.default.createElement("div", { className: `text-xs font-semibold ${getRemainingToneClass(ratio, isLight)}` }, remaining, "/", groupCourts.length, " free"));
-	})) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
-		"data-court-row": row.id,
-		className: `sticky left-0 z-30 w-[132px] min-w-[132px] max-w-[132px] border-b px-3 py-3 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${focusedCourtId === row.id ? "ring-2 ring-violet-400/70 bg-violet-900/20 border-zinc-800" : "bg-[#1a1a22] border-zinc-800"}`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "font-semibold text-base leading-tight break-all" }, row.name), dayRowRemainingByCourt[row.id] && /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-xs font-semibold ${getRemainingToneClass(dayRowRemainingByCourt[row.id].ratio, isLight)}` }, dayRowRemainingByCourt[row.id].remaining, "/", dayRowRemainingByCourt[row.id].total, " ", "slots free")), hourSlots.map((hour) => {
-		const item = dayOccupancy(row.id, dayKey, bookings, hourSlots)[hour];
-		const isBlock = (item === null || item === void 0 ? void 0 : item.kind) === "block";
-		const isOccupied = !!item;
-		const freeSelected = isFreeSelected(row.id, hour);
-		const blockSelected = isBlockSelected(row.id, hour);
-		const outsideBusiness = !isBusinessHour(hour);
-		return /* @__PURE__ */ react.default.createElement("button", {
-			key: `${row.id}-${hour}`,
-			onClick: () => !outsideBusiness && toggleSlot(row.id, hour),
-			onDragOver: (e) => {
-				if (!outsideBusiness) e.preventDefault();
-			},
-			onDrop: (e) => {
-				if (!outsideBusiness) {
-					e.preventDefault();
-					handleDropMove(row.id, dayKey, hour);
-				}
-			},
-			className: `relative h-[${dayRowHeight}px] min-h-[${dayRowHeight}px] p-2 text-left transition outline-none ${isOccupied && !outsideBusiness ? "border-l-transparent border-b-transparent" : `border-b border-l border-zinc-700`} ${outsideBusiness ? "bg-zinc-800/80 text-zinc-500 border-zinc-700" : isBlock ? blockSelected ? "bg-red-500/25 border-red-400 ring-2 ring-red-400/60" : "bg-red-900/50 border-red-700/50" : isOccupied ? "bg-transparent" : freeSelected ? "bg-white/10 border-violet-400 ring-2 ring-violet-400/60" : "bg-zinc-900 border-zinc-700 hover:bg-zinc-800"}`
-		}, outsideBusiness ? /* @__PURE__ */ react.default.createElement("div", { className: "flex h-full items-center justify-center rounded-xl border border-dashed border-zinc-700 text-xs text-zinc-500" }, "Outside hours") : (item === null || item === void 0 ? void 0 : item.kind) === "block" ? /* @__PURE__ */ react.default.createElement("div", { className: "flex h-full w-full flex-col justify-center rounded-xl px-3 text-sm font-medium" }, /* @__PURE__ */ react.default.createElement("div", { className: "truncate" }, blockSelected ? "Selected Block" : item.name), item.note && /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 text-xs text-zinc-300/90 truncate" }, item.note), getBlockMetaLine(item) && /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-400 truncate" }, getBlockMetaLine(item))) : !item ? /* @__PURE__ */ react.default.createElement("div", { className: `flex h-full items-center justify-center rounded-xl border border-dashed border-zinc-600 text-zinc-500 hover:border-violet-500 hover:text-violet-300` }, freeSelected ? "Selected" : "Tap to select") : null);
-	})))), overlayBookings.map((booking) => {
-		const left = frozenColWidth + (booking.start - firstTimelineHour) * dayColWidth;
-		const width = booking.span * dayColWidth;
-		const top = booking.rowTop + 10;
-		const height = dayRowHeight - 20;
-		return /* @__PURE__ */ react.default.createElement("div", {
-			key: `${booking.item.id}-${dayKey}`,
-			className: "absolute z-20",
-			style: {
-				left,
-				top,
-				width,
-				height
-			}
-		}, /* @__PURE__ */ react.default.createElement(BookingCard, {
-			booking,
-			dayKey,
-			onOpenDetail: openBookingDetail,
-			onDragStart: setDraggingItem,
-			onJumpNext: () => {
-				const nextDay = parseDate(dayKey);
-				nextDay.setDate(nextDay.getDate() + 1);
-				setNavDirection(1);
-				commitAnchor(nextDay);
-				setFocusedCourtId(booking.courtId);
-			}
-		}));
-	})))), (selectedFreeSlots.length > 0 || selectedBlockSlots.length > 0) && /* @__PURE__ */ react.default.createElement("div", { className: "fixed bottom-6 left-1/2 z-50 -translate-x-1/2" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap items-center justify-center gap-3 rounded-2xl border border-white/10 bg-black/55 px-4 py-3 backdrop-blur-xl shadow-2xl shadow-black/40 max-w-[92vw]" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: deselectAll,
-		className: "rounded-xl bg-red-500/85 px-4 py-2 text-sm font-semibold text-white hover:bg-red-500"
-	}, "Deselect All"), selectedBlockSlots.length > 0 && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: openSelectedBlocks,
-		className: "rounded-xl bg-zinc-500/90 px-5 py-3 text-sm font-semibold text-white hover:bg-zinc-400"
-	}, "Open Slot"), selectedFreeSlots.length > 0 && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setShowBlockPanel(true),
-		className: "rounded-xl bg-zinc-500/90 px-5 py-3 text-sm font-semibold text-white hover:bg-zinc-400"
-	}, "Block"), selectedFreeSlots.length > 0 && /* @__PURE__ */ react.default.createElement("button", {
-		onClick: createBookingFromSelection,
-		className: "rounded-xl bg-violet-600 px-6 py-3 text-sm font-semibold text-white hover:bg-violet-500"
-	}, "Create a Booking")))))))), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, showBlockPanel && selectedFreeSlots.length > 0 && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-sm flex items-end md:items-center justify-center p-2 md:p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: blockPanelRef,
-		initial: {
-			scale: .96,
-			y: 10
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 10
-		},
-		className: `w-full max-w-[720px] max-h-[92vh] overflow-y-auto rounded-t-3xl md:rounded-3xl border p-4 md:p-6 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "mb-4 flex items-center justify-between" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: "text-xl font-semibold" }, "Block settings"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, "Selected time range:", " ", selectedFreeSlots.length > 0 ? `${formatHourLabel((_groupSelectedSlots$ = groupSelectedSlots(selectedFreeSlots)[0]) === null || _groupSelectedSlots$ === void 0 ? void 0 : _groupSelectedSlots$.startHour)} - ${formatHourLabel((_groupSelectedSlots$2 = groupSelectedSlots(selectedFreeSlots)[0]) === null || _groupSelectedSlots$2 === void 0 ? void 0 : _groupSelectedSlots$2.endHour)}` : "-")), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setShowBlockPanel(false),
-		className: `rounded-xl px-3 py-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, "Close")), /* @__PURE__ */ react.default.createElement("div", { className: "mb-5 grid gap-3 md:gap-4 md:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setBlockMode("single"),
-		className: `rounded-2xl border p-4 text-left ${blockMode === "single" ? "border-violet-500 bg-violet-500/10" : "border-zinc-700 bg-[#171820]"}`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "font-semibold" }, "Only selected date"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, "Create a block only for the currently selected date and time range.")), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setBlockMode("repeat"),
-		className: `rounded-2xl border p-4 text-left ${blockMode === "repeat" ? "border-violet-500 bg-violet-500/10" : "border-zinc-700 bg-[#171820]"}`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "font-semibold" }, "Every matching date"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, "Create repeating blocks by date range and weekday rules."))), /* @__PURE__ */ react.default.createElement("div", { className: `space-y-4 rounded-2xl border p-4 border-zinc-700 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("div", { className: "grid gap-3 md:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "Block note"), /* @__PURE__ */ react.default.createElement("input", {
-		value: blockNote,
-		onChange: (e) => setBlockNote(e.target.value),
-		placeholder: "For example: Team event",
-		className: `w-full rounded-xl px-3 py-2 outline-none border border-zinc-700 bg-[#111218] text-white`
-	})), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "Blocked by"), /* @__PURE__ */ react.default.createElement("input", {
-		value: blockBy,
-		onChange: (e) => setBlockBy(e.target.value),
-		placeholder: "For example: Allen",
-		className: "w-full rounded-xl border border-zinc-700 bg-[#111218] px-3 py-2 text-white outline-none"
-	}))), blockMode === "repeat" && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "grid gap-3 md:gap-4 md:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "Date range - start"), /* @__PURE__ */ react.default.createElement("div", { className: `flex items-center gap-2 rounded-xl border px-3 py-2 border-zinc-700 bg-[#111218]` }, /* @__PURE__ */ react.default.createElement("input", {
-		ref: blockStartInputRef,
-		type: "date",
-		value: blockRangeStart,
-		onChange: (e) => setBlockRangeStart(e.target.value),
-		className: "w-full bg-transparent outline-none"
-	}), /* @__PURE__ */ react.default.createElement("button", {
-		type: "button",
-		onClick: () => {
-			var _blockStartInputRef$c;
-			return (_blockStartInputRef$c = blockStartInputRef.current) === null || _blockStartInputRef$c === void 0 ? void 0 : _blockStartInputRef$c.focus();
-		},
-		className: "rounded-lg p-1 hover:bg-zinc-800"
-	}, /* @__PURE__ */ react.default.createElement(lucide_react.CalendarDays, {
-		size: 18,
-		className: "text-zinc-400"
-	})))), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "Date range - end"), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2 rounded-xl border border-zinc-700 bg-[#111218] px-3 py-2" }, /* @__PURE__ */ react.default.createElement("input", {
-		ref: blockEndInputRef,
-		type: "date",
-		value: blockRangeEnd,
-		onChange: (e) => setBlockRangeEnd(e.target.value),
-		className: "w-full bg-transparent outline-none"
-	}), /* @__PURE__ */ react.default.createElement("button", {
-		type: "button",
-		onClick: () => {
-			var _blockEndInputRef$cur;
-			return (_blockEndInputRef$cur = blockEndInputRef.current) === null || _blockEndInputRef$cur === void 0 ? void 0 : _blockEndInputRef$cur.focus();
-		},
-		className: "rounded-lg p-1 hover:bg-zinc-800"
-	}, /* @__PURE__ */ react.default.createElement(lucide_react.CalendarDays, {
-		size: 18,
-		className: "text-zinc-400"
-	}))))), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "Weekdays in range"), /* @__PURE__ */ react.default.createElement("div", { className: "grid grid-cols-2 gap-2 sm:flex sm:flex-wrap" }, weekdayNames.map((name, idx) => /* @__PURE__ */ react.default.createElement("button", {
-		key: name,
-		onClick: () => toggleBlockWeekday(weekdaysMap[idx]),
-		className: `rounded-xl px-4 py-2 text-sm ${blockWeekdays.includes(weekdaysMap[idx]) ? "btn-pill-active" : "bg-zinc-800 text-zinc-300"}`
-	}, name)))), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-xl px-3 py-3 text-sm bg-zinc-900/80 text-zinc-300` }, "Example: choose 1 Sep to 1 Oct, then select every Wednesday. The chosen time range will be blocked on all matching Wednesdays."))), /* @__PURE__ */ react.default.createElement("div", { className: "mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setShowBlockPanel(false),
-		className: `rounded-xl px-4 py-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, "Cancel"), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: createBlockFromSelection,
-		className: `rounded-xl px-5 py-3 text-sm font-semibold bg-zinc-500/90 text-white hover:bg-zinc-400`
-	}, "Confirm block"))))), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, overflowListModal && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[69] bg-black/45 backdrop-blur-sm flex items-center justify-center p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: overflowPanelRef,
-		initial: {
-			scale: .96,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 8
-		},
-		className: `w-full max-w-[520px] max-h-[72vh] overflow-auto rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "mb-4 flex items-start justify-between" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: "text-xl font-semibold" }, "Bookings for this day"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 text-sm text-zinc-400" }, overflowListModal.title)), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setOverflowListModal(null),
-		className: "rounded-xl border border-zinc-700 px-3 py-2 text-zinc-300 hover:bg-zinc-800"
-	}, "Close")), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-3" }, overflowListModal.items.map((extraItem, idx) => {
-		const displayTag = getDisplayStatusTag(extraItem, overflowListModal.date);
-		return /* @__PURE__ */ react.default.createElement("button", {
-			key: `${extraItem.id}-${idx}`,
-			onClick: () => {
-				setOverflowListModal(null);
-				openBookingDetail(extraItem);
-			},
-			className: `block w-full shrink-0 rounded-xl px-4 py-3 text-left text-white hover:bg-violet-600 ${getBookingStateClasses(extraItem, overflowListModal.date)}`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "font-medium" }, extraItem.name), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1 text-sm opacity-85" }, formatHourLabel(extraItem.startHour), " -", " ", formatHourLabel(extraItem.endHour)), displayTag && statusTagMeta(displayTag) && /* @__PURE__ */ react.default.createElement("div", { className: "mt-2 flex justify-end" }, /* @__PURE__ */ react.default.createElement("span", { className: `rounded-lg px-2 py-0.5 text-[10px] font-semibold ${statusTagMeta(displayTag).className} backdrop-blur-[2px]` }, statusTagMeta(displayTag).label)));
-	}))))), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, detailItem && detailMode === "quick" && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[70] flex items-center justify-center bg-black/35 p-4 backdrop-blur-sm"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: {
-			scale: .97,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .97,
-			y: 8
-		},
-		className: `w-full max-w-[520px] rounded-[28px] border p-4 shadow-2xl border-zinc-700 bg-[#121217]`,
-		ref: detailPanelRef
-	}, (() => {
-		const detail = getBookingDetailData(detailItem, courts);
-		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "mb-4 flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `flex items-center gap-2 text-[11px] text-zinc-500` }, /* @__PURE__ */ react.default.createElement("span", null, getCompactBookingId(detail)), /* @__PURE__ */ react.default.createElement("span", null, "·"), /* @__PURE__ */ react.default.createElement("span", null, detail.headerSummary.customerName)), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-lg font-semibold leading-none text-white` }, detail.headerSummary.customerName), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, detail.headerSummary.resourceLabel), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, detail.headerSummary.timeLabel)), /* @__PURE__ */ react.default.createElement("div", { className: "flex shrink-0 flex-col items-end gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setDetailItem(null),
-			className: `rounded-2xl border p-2 border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-		}, /* @__PURE__ */ react.default.createElement(lucide_react.X, { size: 16 })), /* @__PURE__ */ react.default.createElement("label", { className: `inline-flex cursor-pointer items-center gap-2 rounded-2xl border px-2.5 py-2 text-xs whitespace-nowrap border-zinc-700 bg-white/5 text-zinc-200` }, /* @__PURE__ */ react.default.createElement("input", {
-			type: "checkbox",
-			checked: preferDrawerOpen && !preferQuickPopup,
-			onChange: (e) => {
-				const checked = e.target.checked;
-				setPreferDrawerOpen(checked);
-				setPreferQuickPopup(!checked);
-			}
-		}), /* @__PURE__ */ react.default.createElement("span", null, "Full details next time")))), /* @__PURE__ */ react.default.createElement("div", { className: "grid grid-cols-[1.02fr_1fr] gap-2" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setCheckinModal(detailItem);
-				setCheckinDraft(null);
-			},
-			className: `row-span-2 min-h-[110px] rounded-3xl border px-4 py-3 text-left text-[18px] font-semibold border-emerald-500/40 bg-emerald-600/20 text-white hover:bg-emerald-600/30`
-		}, /* @__PURE__ */ react.default.createElement("div", null, "Check-in")), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setShowActionsOverlay(false);
-				setDetailMode("drawer");
-				setCalendarShiftedForDrawer(true);
-			},
-			className: `min-h-[52px] rounded-3xl border px-3 py-2.5 text-left text-[16px] font-semibold border-amber-500/40 bg-amber-500/20 text-white hover:bg-amber-500/30`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center justify-between gap-2" }, /* @__PURE__ */ react.default.createElement("span", null, "Detail"), /* @__PURE__ */ react.default.createElement(lucide_react.ExternalLink, {
-			size: 15,
-			className: "opacity-85"
-		}))), /* @__PURE__ */ react.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				var _visibleCourts$, _visibleCourts$2;
-				setMoveConfirm({
-					item: detailItem,
-					targetCourtId: detailItem.courtId || ((_visibleCourts$ = visibleCourts[0]) === null || _visibleCourts$ === void 0 ? void 0 : _visibleCourts$.id) || courts[0].id,
-					targetDate: detailItem.date,
-					targetHour: detailItem.startHour
-				});
-				setMoveDraft({
-					targetCourtId: detailItem.courtId || ((_visibleCourts$2 = visibleCourts[0]) === null || _visibleCourts$2 === void 0 ? void 0 : _visibleCourts$2.id) || courts[0].id,
-					targetDate: detailItem.date,
-					targetHour: detailItem.startHour
-				});
-			},
-			className: `min-h-[52px] rounded-3xl border px-3 py-2.5 text-left text-[14px] font-semibold border-cyan-500/40 bg-cyan-500/20 text-white hover:bg-cyan-500/30`
-		}, /* @__PURE__ */ react.default.createElement("div", null, "Move")), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setShowActionsOverlay(true);
-			},
-			className: `min-h-[52px] rounded-3xl border px-3 py-2.5 text-left text-[14px] font-semibold border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center justify-between gap-2" }, /* @__PURE__ */ react.default.createElement("span", null, "More"), /* @__PURE__ */ react.default.createElement(lucide_react.CircleEllipsis, {
-			size: 15,
-			className: "opacity-85"
-		}))))));
-	})())), detailItem && showActionsOverlay && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[86] flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: {
-			scale: .97,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .97,
-			y: 8
-		},
-		className: `relative z-[87] flex max-h-[90vh] w-full max-w-[760px] flex-col rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`,
-		ref: detailPanelRef
-	}, (() => {
-		const allActions = [
-			{
-				label: "Order detail",
-				icon: lucide_react.FileText,
-				section: "Info"
-			},
-			{
-				label: "View customer",
-				icon: lucide_react.User,
-				section: "Info"
-			},
-			{
-				label: "View venue / court detail",
-				icon: lucide_react.MapPinned,
-				section: "Info"
-			},
-			{
-				label: "Check in",
-				icon: lucide_react.CheckCircle2,
-				section: "Status"
-			},
-			{
-				label: "Mark as complete",
-				icon: lucide_react.BadgeCheck,
-				section: "Status"
-			},
-			{
-				label: "Mark no-show",
-				icon: lucide_react.AlertCircle,
-				section: "Status"
-			},
-			{
-				label: "Reopen booking",
-				icon: lucide_react.History,
-				section: "Status"
-			},
-			{
-				label: "Cancel booking",
-				icon: lucide_react.X,
-				section: "Status"
-			},
-			{
-				label: "Edit detail",
-				icon: lucide_react.NotebookPen,
-				section: "Change"
-			},
-			{
-				label: "Reschedule",
-				icon: lucide_react.CalendarDays,
-				section: "Change"
-			},
-			{
-				label: "Extend booking",
-				icon: lucide_react.Clock4,
-				section: "Change"
-			},
-			{
-				label: "Change item",
-				icon: lucide_react.Receipt,
-				section: "Change"
-			},
-			{
-				label: "Move item",
-				icon: lucide_react.Receipt,
-				section: "Change"
-			},
-			{
-				label: "Transfer item to another booking",
-				icon: lucide_react.ExternalLink,
-				section: "Change"
-			},
-			{
-				label: "Change customer",
-				icon: lucide_react.User,
-				section: "Change"
-			},
-			{
-				label: "Change booking customer",
-				icon: lucide_react.User,
-				section: "Change"
-			},
-			{
-				label: "Change guest",
-				icon: lucide_react.Users,
-				section: "Change"
-			},
-			{
-				label: "Change venue / court",
-				icon: lucide_react.MapPinned,
-				section: "Change"
-			},
-			{
-				label: "Change staff",
-				icon: lucide_react.Wand2,
-				section: "Change"
-			},
-			{
-				label: "Pay now",
-				icon: lucide_react.CreditCard,
-				section: "Pay"
-			},
-			{
-				label: "Send payment link",
-				icon: lucide_react.ExternalLink,
-				section: "Pay"
-			},
-			{
-				label: "Refund",
-				icon: lucide_react.Wallet,
-				section: "Pay"
-			},
-			{
-				label: "Mark as paid",
-				icon: lucide_react.BadgeCheck,
-				section: "Pay"
-			},
-			{
-				label: "Merge order",
-				icon: lucide_react.GitMerge,
-				section: "More"
-			},
-			{
-				label: "Send confirmation",
-				icon: lucide_react.FileText,
-				section: "Communication"
-			},
-			{
-				label: "Send reminder",
-				icon: lucide_react.AlertCircle,
-				section: "Communication"
-			},
-			{
-				label: "Print receipt",
-				icon: lucide_react.Printer,
-				section: "Print"
-			},
-			{
-				label: "Print receipt",
-				icon: lucide_react.Receipt,
-				section: "Print"
-			},
-			{
-				label: "Print invoice",
-				icon: lucide_react.FileText,
-				section: "Print"
-			},
-			{
-				label: "Print wristband",
-				icon: lucide_react.Printer,
-				section: "Print"
-			},
-			{
-				label: "Print drink voucher",
-				icon: lucide_react.Printer,
-				section: "Print"
-			},
-			{
-				label: "Duplicate booking",
-				icon: lucide_react.CircleEllipsis,
-				section: "More"
-			}
-		];
-		const pinnedActions = pinnedActionLabels.map((label) => allActions.find((action) => action.label === label)).filter(Boolean).slice(0, 12);
-		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "mb-4 flex shrink-0 items-start justify-between gap-4" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `text-[11px] uppercase tracking-[0.18em] text-zinc-500` }, "All actions")), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setShowActionsOverlay(false),
-			className: `rounded-xl p-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-		}, /* @__PURE__ */ react.default.createElement(lucide_react.X, { size: 16 })))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-scroll-hidden flex-1 overflow-y-auto pr-1 relative" }, /* @__PURE__ */ react.default.createElement("div", { className: "space-y-4 pb-10" }, /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-4 border-violet-500/35 bg-violet-500/8` }, /* @__PURE__ */ react.default.createElement("div", { className: "mb-3 flex items-center justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs font-semibold uppercase tracking-[0.16em] text-violet-300` }, "Quick actions"), /* @__PURE__ */ react.default.createElement("div", { className: `inline-flex items-center gap-1.5 text-xs font-medium text-violet-300/95` }, /* @__PURE__ */ react.default.createElement(lucide_react.Hand, {
-			size: 12,
-			className: "opacity-80"
-		}), /* @__PURE__ */ react.default.createElement("span", null, "Long press to pin here or unpin"))), /* @__PURE__ */ react.default.createElement("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-3" }, pinnedActions.map((action) => {
-			const Icon = action.icon;
-			const handlers = createLongPressHandlers(() => {
-				setPinnedActionLabels((prev) => prev.filter((label) => label !== action.label));
-			});
-			return /* @__PURE__ */ react.default.createElement("button", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ key: `quick-${action.label}` }, handlers), {}, { className: `flex items-center justify-between gap-3 rounded-xl border px-3 py-3 text-left text-sm border-zinc-700 bg-white/5 text-white hover:bg-white/10` }), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ react.default.createElement(Icon, {
-				size: 16,
-				className: "text-zinc-300"
-			}), /* @__PURE__ */ react.default.createElement("span", null, action.label)), /* @__PURE__ */ react.default.createElement(lucide_react.Pin, {
-				size: 14,
-				className: "text-violet-300"
-			}));
-		}))), [
-			{ label: "Info" },
-			{ label: "Status" },
-			{ label: "Change" },
-			{ label: "Pay" },
-			{ label: "Communication" },
-			{ label: "Print" },
-			{ label: "More" }
-		].map((section) => {
-			const sectionItems = allActions.filter((action) => action.section === section.label);
-			return /* @__PURE__ */ react.default.createElement("div", {
-				key: section.label,
-				className: `rounded-2xl border p-4 border-zinc-800 bg-[#171820]`
-			}, /* @__PURE__ */ react.default.createElement("div", { className: `mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500` }, section.label), /* @__PURE__ */ react.default.createElement("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-2" }, sectionItems.map((action) => {
-				const Icon = action.icon;
-				const isPinned = pinnedActionLabels.includes(action.label);
-				const handlers = createLongPressHandlers(() => {
-					setPinnedActionLabels((prev) => {
-						if (prev.includes(action.label)) return prev.filter((label) => label !== action.label);
-						if (prev.length >= 12) {
-							showQuickActionLimit(setQuickActionLimitMessage);
-							return prev;
-						}
-						return [...prev, action.label];
-					});
-				});
-				return /* @__PURE__ */ react.default.createElement("button", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ key: action.label }, handlers), {}, {
-					onClick: () => {
-						if (action.label === "Merge order") {
-							var _candidates$;
-							const candidates = bookings.filter((b) => b.kind === "booking" && b.id !== detailItem.id);
-							setMergeOrderDraft({
-								targetBookingId: ((_candidates$ = candidates[0]) === null || _candidates$ === void 0 ? void 0 : _candidates$.id) || "",
-								keepSourceOpen: false
-							});
-							setMergeOrderModal({
-								item: detailItem,
-								candidates
-							});
-						}
-					},
-					className: `flex items-center justify-between gap-3 rounded-xl border px-3 py-3 text-left text-sm border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-				}), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ react.default.createElement(Icon, {
-					size: 16,
-					className: "text-zinc-300"
-				}), /* @__PURE__ */ react.default.createElement("span", null, action.label)), /* @__PURE__ */ react.default.createElement(lucide_react.Pin, {
-					size: 14,
-					className: isPinned ? "text-violet-300" : "text-zinc-500"
-				}));
-			})));
-		}))));
-	})())), detailItem && detailMode === "drawer" && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-y-4 right-4 z-[71] w-[min(520px,calc(100vw-32px))] bg-transparent pointer-events-none"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { x: 420 },
-		animate: { x: 0 },
-		exit: { x: 420 },
-		transition: { duration: .18 },
-		className: `absolute right-0 top-0 h-full w-full max-w-[520px] rounded-[28px] border shadow-2xl pointer-events-auto overflow-hidden border-zinc-800 bg-[#0f121b]`,
-		ref: detailPanelRef
-	}, (() => {
-		var _detail$noteGroups, _detail$noteGroups2, _detail$noteGroups3, _detail$customer2, _detail$customer3, _detail$customer4, _detail$history, _detail$history2, _detail$history3, _detail$noteGroups4, _detail$noteGroups5, _detail$noteGroups6, _detail$itemSummary, _detail$itemSummary2, _detail$itemSummary3;
-		const detail = getBookingDetailData(detailItem, courts);
-		const detailWithNoteOverrides = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, detail), {}, { noteGroups: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, detail.noteGroups), {}, {
-			internal: (((_detail$noteGroups = detail.noteGroups) === null || _detail$noteGroups === void 0 ? void 0 : _detail$noteGroups.internal) || []).map((note) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, note), {}, { text: getNoteValue(noteOverrides, note.id, note.text) })),
-			order: (((_detail$noteGroups2 = detail.noteGroups) === null || _detail$noteGroups2 === void 0 ? void 0 : _detail$noteGroups2.order) || []).map((note) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, note), {}, { text: getNoteValue(noteOverrides, note.id, note.text) })),
-			item: (((_detail$noteGroups3 = detail.noteGroups) === null || _detail$noteGroups3 === void 0 ? void 0 : _detail$noteGroups3.item) || []).map((note) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, note), {}, { text: getNoteValue(noteOverrides, note.id, note.text) }))
-		}) });
-		selectedCustomer || (!((_detail$customer2 = detail.customer) === null || _detail$customer2 === void 0) && _detail$customer2.name || detail.headerSummary.customerName, (((_detail$customer3 = detail.customer) === null || _detail$customer3 === void 0 ? void 0 : _detail$customer3.phone) || "").split(" ").slice(-1)[0], !((_detail$customer4 = detail.customer) === null || _detail$customer4 === void 0) && _detail$customer4.email, (((_detail$history = detail.history) === null || _detail$history === void 0 || (_detail$history = _detail$history[0]) === null || _detail$history === void 0 ? void 0 : _detail$history.time) || "2026-03-18").slice(0, 10).split("-").join("/"));
-		const tabs = [
-			"summary",
-			"items",
-			"payments",
-			"guest",
-			"files",
-			"history"
-		];
-		const detailKey = detailItem.id;
-		const viewedForDetail = viewedTabState[detailKey] || {};
-		const viewedSubtabsForDetail = viewedSubtabState[detailKey] || {};
-		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: `relative px-4 py-3 ${getDrawerStatusTheme(detailItem, detailItem.date)}` }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setDetailItem(null);
-				setCalendarShiftedForDrawer(false);
-			},
-			className: `absolute -left-16 top-4 flex h-12 w-12 items-center justify-center rounded-full border shadow-xl border-white/25 bg-[#101117] text-white hover:bg-[#1a1d29]`
-		}, /* @__PURE__ */ react.default.createElement(lucide_react.X, { size: 20 })), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-4 pr-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1 pr-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[11px] font-medium uppercase tracking-[0.18em] text-white/50` }, "Booking ID"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-0.5 flex flex-wrap items-end gap-x-3 gap-y-1 leading-none" }, /* @__PURE__ */ react.default.createElement("span", { className: "text-[36px] font-semibold text-white" }, getCompactBookingId(detail)), /* @__PURE__ */ react.default.createElement("span", { className: `pb-[3px] text-[22px] font-medium text-white/88` }, "· ", detail.headerSummary.resourceLabel)), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1.5 text-[15px] text-white/82` }, detail.headerSummary.timeLabel), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-sm text-white/84` }, /* @__PURE__ */ react.default.createElement("div", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.User, {
-			size: 14,
-			className: "text-white/50"
-		}), /* @__PURE__ */ react.default.createElement("span", null, detail.headerSummary.customerName)), /* @__PURE__ */ react.default.createElement("div", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.Users, {
-			size: 14,
-			className: "text-white/50"
-		}), /* @__PURE__ */ react.default.createElement("span", null, detail.headerSummary.guestCount, " guests")))), /* @__PURE__ */ react.default.createElement("div", { className: "flex shrink-0 items-center justify-end gap-2 pt-[14px]" }, /* @__PURE__ */ react.default.createElement("span", { className: `rounded-full px-3 py-1 text-[16px] leading-none font-semibold shadow-lg ${paymentTagClass(getPaymentDisplay(detail), isLight)}` }, getPaymentDisplay(detail)), /* @__PURE__ */ react.default.createElement("span", { className: `rounded-full px-3 py-1 text-[16px] leading-none font-semibold shadow-lg ${fulfillmentTagClass(getFulfillmentDisplay(detailItem, detail), isLight)}` }, getFulfillmentDisplay(detailItem, detail), detail.guestCount > 0 ? ` ${detail.checkedInCount}/${detail.guestCount}` : ""))), /* @__PURE__ */ react.default.createElement("div", { className: `pointer-events-none absolute bottom-2 right-4 text-[11px] text-white/48` }, "Last updated ", ((_detail$history2 = detail.history) === null || _detail$history2 === void 0 || (_detail$history2 = _detail$history2[0]) === null || _detail$history2 === void 0 ? void 0 : _detail$history2.time) || "--")), /* @__PURE__ */ react.default.createElement("div", { className: "grid h-[calc(100%-88px)] grid-cols-[78px_1fr]" }, /* @__PURE__ */ react.default.createElement("div", { className: `border-r px-2 py-3 border-zinc-800 bg-[#11162a]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex h-full flex-col gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-3" }, tabs.map((tab) => {
-			const meta = tabMeta(tab);
-			const Icon = meta.icon;
-			const badge = tabBadgeValue(tab, detail);
-			const unread = isMainTabUnread(tab, detail, viewedForDetail, viewedSubtabsForDetail);
-			return /* @__PURE__ */ react.default.createElement("button", {
-				key: tab,
-				onClick: () => setDetailTab(tab),
-				className: `flex flex-col items-center gap-2 rounded-2xl px-2 py-3 text-center text-xs ${detailTab === tab ? "bg-violet-600/20 text-white ring-1 ring-violet-400/40" : "text-zinc-400 hover:bg-zinc-800"}`
-			}, /* @__PURE__ */ react.default.createElement("div", { className: `relative flex h-11 w-11 items-center justify-center rounded-full ${detailTab === tab ? "bg-violet-600/25 border border-violet-400/40" : "bg-zinc-800 border border-zinc-700"}` }, /* @__PURE__ */ react.default.createElement(Icon, { size: 18 }), badge && /* @__PURE__ */ react.default.createElement("span", { className: `absolute -right-2 -top-1 min-w-[18px] rounded-full px-1.5 py-0.5 text-[10px] font-semibold ${tabBadgeClass(unread)}` }, badge)), /* @__PURE__ */ react.default.createElement("span", null, meta.label));
-		})), /* @__PURE__ */ react.default.createElement("div", {
-			className: "mt-auto relative",
-			ref: detailPrefRef
-		}, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setDetailPrefOpen((v) => !v),
-			className: `flex w-full items-center justify-center rounded-2xl px-2 py-3 ${detailPrefOpen ? "bg-violet-600/20 text-white ring-1 ring-violet-400/40" : "text-zinc-400 hover:bg-zinc-800"}`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `flex h-11 w-11 items-center justify-center rounded-full ${detailPrefOpen ? "bg-violet-600/25 border border-violet-400/40" : "bg-zinc-800 border border-zinc-700"}` }, /* @__PURE__ */ react.default.createElement(lucide_react.Settings2, { size: 18 }))), detailPrefOpen && /* @__PURE__ */ react.default.createElement("div", { className: `absolute bottom-[calc(100%+10px)] left-0 z-30 w-[300px] rounded-2xl border p-3 shadow-2xl border-zinc-700 bg-[#121217]` }, /* @__PURE__ */ react.default.createElement("div", { className: `mb-2 text-xs uppercase tracking-[0.14em] text-zinc-500` }, "Detail preferences"), /* @__PURE__ */ react.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `mb-2 text-[11px] uppercase tracking-[0.12em] text-zinc-500` }, "Default open mode"), /* @__PURE__ */ react.default.createElement("div", { className: `inline-flex w-full rounded-2xl border p-1 border-zinc-700 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setPreferQuickPopup(true);
-				setPreferDrawerOpen(false);
-			},
-			className: `flex-1 rounded-xl px-3 py-2 text-xs font-medium ${preferQuickPopup ? "bg-violet-600 text-white" : "text-zinc-400"}`
-		}, "Pop-up express window"), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setPreferQuickPopup(false);
-				setPreferDrawerOpen(true);
-			},
-			className: `flex-1 rounded-xl px-3 py-2 text-xs font-medium ${preferDrawerOpen ? "bg-violet-600 text-white" : "text-zinc-400"}`
-		}, "Detail first"))), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `mb-2 text-[11px] uppercase tracking-[0.12em] text-zinc-500` }, "Default tab"), /* @__PURE__ */ react.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, [
-			["summary", "Summary"],
-			["items", "Items"],
-			["payments", "Payments"],
-			["guest", "Guests"],
-			["files", "Files"],
-			["history", "History"]
-		].map(([key, label]) => /* @__PURE__ */ react.default.createElement("button", {
-			key,
-			onClick: () => setDefaultDetailTab(key),
-			className: `rounded-xl px-3 py-2 text-xs font-medium ${defaultDetailTab === key ? "bg-violet-600 text-white" : "border border-zinc-700 bg-white/5 text-zinc-300"}`
-		}, label))))))))), /* @__PURE__ */ react.default.createElement("div", { className: "flex h-full flex-col overflow-hidden" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-scroll-hidden flex-1 overflow-y-auto px-4 py-4 pb-6" }, detailTab === "summary" && /* @__PURE__ */ react.default.createElement("div", { className: "space-y-3 pb-2" }, /* @__PURE__ */ react.default.createElement("div", { className: `w-full rounded-3xl border p-4 text-left border-zinc-800 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs uppercase tracking-[0.14em] text-zinc-500` }, "Booking"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-xl font-semibold text-white` }, detail.headerSummary.customerName), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 space-y-1.5 text-sm text-zinc-300` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1" }, /* @__PURE__ */ react.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.CalendarDays, { size: 14 }), " ", detail.schedule.startDate), /* @__PURE__ */ react.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.Clock4, { size: 14 }), " ", detail.schedule.startTime, " -", " ", detail.schedule.endTime)), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1" }, /* @__PURE__ */ react.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.MapPinned, { size: 14 }), " ", detail.headerSummary.resourceLabel), /* @__PURE__ */ react.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.Users, { size: 14 }), " ", detail.guestCount, " guests")), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1" }, detail.customer.phone && /* @__PURE__ */ react.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.Phone, { size: 14 }), " ", detail.customer.phone), detail.customer.email && /* @__PURE__ */ react.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(lucide_react.User, { size: 14 }), " ", detail.customer.email)))), /* @__PURE__ */ react.default.createElement("div", { className: "flex shrink-0 flex-col items-end gap-2 text-right" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: (e) => {
-				var _visibleCourts$3, _visibleCourts$4;
-				e.stopPropagation();
-				setMoveConfirm({
-					item: detailItem,
-					targetCourtId: detailItem.courtId || ((_visibleCourts$3 = visibleCourts[0]) === null || _visibleCourts$3 === void 0 ? void 0 : _visibleCourts$3.id) || courts[0].id,
-					targetDate: detailItem.date,
-					targetHour: detailItem.startHour
-				});
-				setMoveDraft({
-					targetCourtId: detailItem.courtId || ((_visibleCourts$4 = visibleCourts[0]) === null || _visibleCourts$4 === void 0 ? void 0 : _visibleCourts$4.id) || courts[0].id,
-					targetDate: detailItem.date,
-					targetHour: detailItem.startHour
-				});
-			},
-			className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Change"), /* @__PURE__ */ react.default.createElement("div", { className: `text-xs text-zinc-500` }, "Last updated"), /* @__PURE__ */ react.default.createElement("div", { className: `text-xs text-zinc-400` }, ((_detail$history3 = detail.history) === null || _detail$history3 === void 0 || (_detail$history3 = _detail$history3[0]) === null || _detail$history3 === void 0 ? void 0 : _detail$history3.time) || "--")))), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setDetailTab("files");
-				setFilesSubtab("notes");
-			},
-			className: `w-full rounded-3xl border p-4 text-left border-zinc-800 bg-[#151822] hover:bg-[#1a1d29]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs uppercase tracking-[0.14em] text-zinc-500` }, "Notes"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm leading-6 text-zinc-300` }, detail.note || "No order note.")), /* @__PURE__ */ react.default.createElement("div", { className: "flex shrink-0 items-center gap-2" }, /* @__PURE__ */ react.default.createElement("div", { className: `rounded-full px-2.5 py-1 text-xs font-semibold bg-violet-600/20 text-violet-200` }, "+", (((_detail$noteGroups4 = detail.noteGroups) === null || _detail$noteGroups4 === void 0 || (_detail$noteGroups4 = _detail$noteGroups4.internal) === null || _detail$noteGroups4 === void 0 ? void 0 : _detail$noteGroups4.length) || 0) + (((_detail$noteGroups5 = detail.noteGroups) === null || _detail$noteGroups5 === void 0 || (_detail$noteGroups5 = _detail$noteGroups5.order) === null || _detail$noteGroups5 === void 0 ? void 0 : _detail$noteGroups5.length) || 0) + (((_detail$noteGroups6 = detail.noteGroups) === null || _detail$noteGroups6 === void 0 || (_detail$noteGroups6 = _detail$noteGroups6.item) === null || _detail$noteGroups6 === void 0 ? void 0 : _detail$noteGroups6.length) || 0)), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: (e) => {
-				e.stopPropagation();
-				setDetailTab("files");
-				setFilesSubtab("notes");
-			},
-			className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Change")))), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setDetailTab("items"),
-			className: `w-full rounded-3xl border p-4 text-left border-zinc-800 bg-[#151822] hover:bg-[#1a1d29]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "mb-3 flex items-center justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs uppercase tracking-[0.14em] text-zinc-500` }, "Items"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, ((_detail$itemSummary = detail.itemSummary) === null || _detail$itemSummary === void 0 ? void 0 : _detail$itemSummary.itemCount) || 0, " ", "items ·", " ", ((_detail$itemSummary2 = detail.itemSummary) === null || _detail$itemSummary2 === void 0 ? void 0 : _detail$itemSummary2.itemQtyTotal) || 0, " ", "qty")), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: (e) => {
-				e.stopPropagation();
-				setDetailTab("items");
-			},
-			className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Change")), /* @__PURE__ */ react.default.createElement("div", { className: "space-y-3" }, detail.items.slice(0, 4).map((row) => /* @__PURE__ */ react.default.createElement("div", {
-			key: row.id,
-			className: `rounded-2xl border px-3 py-3 border-zinc-700 bg-[#101117]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "relative h-16 w-16 shrink-0 overflow-hidden rounded-2xl border border-black/5 bg-[linear-gradient(135deg,#8B5CF6,#6941C6)] text-white" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex h-full w-full items-center justify-center text-lg font-semibold" }, String(row.name || "I").slice(0, 1).toUpperCase()), /* @__PURE__ */ react.default.createElement("div", { className: "absolute -left-1 -top-1 flex h-7 min-w-7 items-center justify-center rounded-full bg-[var(--brand-primary)] px-1.5 text-xs font-semibold text-white shadow-lg" }, row.qty)), /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `truncate text-[17px] font-semibold text-white` }, row.name), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, row.specs || row.unitLabel), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 line-clamp-2 text-sm text-zinc-300` }, row.note)), /* @__PURE__ */ react.default.createElement("div", { className: "shrink-0 text-right" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[17px] font-semibold text-white` }, detail.paymentSummary.currencySymbol, row.total.toFixed(2)))))), detail.items.length > 4 && /* @__PURE__ */ react.default.createElement("div", { className: `text-sm text-zinc-400` }, "+", detail.items.length - 4, " more items")))), detailTab === "items" && /* @__PURE__ */ react.default.createElement("div", { className: `space-y-3 rounded-3xl border p-3 border-zinc-800 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: `overflow-hidden rounded-[22px] border border-zinc-700 bg-[#101117]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start gap-3 px-4 py-4" }, /* @__PURE__ */ react.default.createElement("div", { className: `h-20 w-20 shrink-0 overflow-hidden rounded-2xl bg-zinc-800` }, /* @__PURE__ */ react.default.createElement("img", {
-			src: "https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=300&q=80",
-			alt: "booking item",
-			className: "h-full w-full object-cover"
-		})), /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[15px] font-semibold leading-tight text-white` }, "Private Lesson Package"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[14px] font-semibold leading-none text-white` }, "$30"), /* @__PURE__ */ react.default.createElement("button", { className: "mt-2 inline-flex items-center gap-2 text-[14px] font-semibold text-blue-500" }, /* @__PURE__ */ react.default.createElement(lucide_react.NotebookPen, { size: 16 }), " Edit")), /* @__PURE__ */ react.default.createElement("button", { className: `rounded-xl p-1.5 text-zinc-400 hover:bg-zinc-800` }, /* @__PURE__ */ react.default.createElement(lucide_react.X, { size: 18 }))), /* @__PURE__ */ react.default.createElement("div", { className: `mx-4 border-t border-zinc-700` }), /* @__PURE__ */ react.default.createElement("div", { className: "space-y-2.5 px-4 py-3.5" }, /* @__PURE__ */ react.default.createElement("div", { className: `flex items-center justify-between rounded-2xl border px-3.5 py-3 border-zinc-700 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("span", { className: `text-[14px] text-zinc-200` }, "14:00 2026/03/31 ~ 16:00 2026/03/31"), /* @__PURE__ */ react.default.createElement(lucide_react.CalendarDays, {
-			size: 17,
-			className: "text-zinc-500"
-		})), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap gap-2.5" }, /* @__PURE__ */ react.default.createElement("div", { className: `inline-flex items-center gap-2 rounded-full border px-3.5 py-2 text-[14px] border-zinc-700 bg-[#151822] text-zinc-200` }, "Jack; Ami", " ", /* @__PURE__ */ react.default.createElement(lucide_react.ChevronRight, {
-			size: 15,
-			className: "rotate-90"
-		}))), /* @__PURE__ */ react.default.createElement("div", { className: "grid gap-2.5" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex gap-2.5" }, /* @__PURE__ */ react.default.createElement("button", { className: `h-12 w-12 shrink-0 rounded-2xl border text-[18px] border-zinc-700 bg-[#151822] text-pink-400` }, "❤"), /* @__PURE__ */ react.default.createElement("div", { className: `flex flex-1 items-center justify-between rounded-2xl border px-3.5 py-3 text-[14px] border-zinc-700 bg-[#151822] text-zinc-200` }, /* @__PURE__ */ react.default.createElement("span", null, "VIP Court 1"), /* @__PURE__ */ react.default.createElement(lucide_react.ChevronRight, {
-			size: 15,
-			className: "rotate-90"
-		}))), /* @__PURE__ */ react.default.createElement("div", { className: "flex gap-2.5" }, /* @__PURE__ */ react.default.createElement("button", { className: `h-12 w-12 shrink-0 rounded-2xl border text-[18px] border-zinc-700 bg-[#151822] text-zinc-400` }, "♡"), /* @__PURE__ */ react.default.createElement("div", { className: `flex flex-1 items-center justify-between rounded-2xl border px-3.5 py-3 text-[14px] border-zinc-700 bg-[#151822] text-zinc-200` }, /* @__PURE__ */ react.default.createElement("span", null, "Coach Joey"), /* @__PURE__ */ react.default.createElement(lucide_react.ChevronRight, {
-			size: 15,
-			className: "rotate-90"
-		}))))), /* @__PURE__ */ react.default.createElement("div", { className: `mx-4 border-t border-zinc-700` }), /* @__PURE__ */ react.default.createElement("div", { className: "px-4 py-3.5" }, /* @__PURE__ */ react.default.createElement("div", { className: `mb-2.5 text-[15px] font-semibold text-white` }, "Items in package"), /* @__PURE__ */ react.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-3.5 border-zinc-700 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[15px] font-semibold leading-tight text-zinc-100` }, "2-Hours (Private Coaching)"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[13px] leading-snug text-zinc-400` }, "Shuttle rental $10 × 1")), /* @__PURE__ */ react.default.createElement("div", { className: `text-right text-[13px] leading-snug text-zinc-300` }, /* @__PURE__ */ react.default.createElement("div", null, "$30"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1" }, "$10"))), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2.5 flex items-center justify-between border-t pt-2.5 border-zinc-700` }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[16px] font-semibold text-zinc-300` }, "$40"), /* @__PURE__ */ react.default.createElement("div", { className: `text-[16px] font-semibold text-zinc-400` }, "×4"), /* @__PURE__ */ react.default.createElement("div", { className: `text-[18px] font-semibold text-white` }, "$160.00"))), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-3.5 border-zinc-700 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[15px] font-semibold leading-tight text-zinc-100` }, "Lesson package + equipment"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[13px] leading-snug text-zinc-400` }, "Coach: Joey; Court: VIP Court 1; SKU: PR-2H"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[13px] leading-snug text-zinc-400` }, "Shuttle rental $10 × 1"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[13px] leading-snug text-zinc-400` }, "Racket rental $10 × 2")), /* @__PURE__ */ react.default.createElement("div", { className: `text-right text-[13px] leading-snug text-zinc-300` }, /* @__PURE__ */ react.default.createElement("div", null, "$30"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1" }, "$10"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-1" }, "$20"))), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2.5 flex items-center justify-between border-t pt-2.5 border-zinc-700` }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `text-[16px] font-semibold text-zinc-300` }, "$40"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-0.5 text-[13px] line-through text-zinc-500` }, "$48")), /* @__PURE__ */ react.default.createElement("div", { className: `text-[16px] font-semibold text-zinc-400` }, "×4"), /* @__PURE__ */ react.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[18px] font-semibold text-white` }, "$160.00"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-0.5 text-[13px] line-through text-zinc-500` }, "$178.00")))))), /* @__PURE__ */ react.default.createElement("div", { className: `mx-4 border-t border-zinc-700` }), /* @__PURE__ */ react.default.createElement("div", { className: "px-4 py-3.5" }, /* @__PURE__ */ react.default.createElement("div", { className: `mb-2.5 text-[15px] font-semibold text-white` }, "Sales"), /* @__PURE__ */ react.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-3.5 border-zinc-700 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-zinc-800` }, /* @__PURE__ */ react.default.createElement("img", {
-			src: "https://images.unsplash.com/photo-1551024601-bec78aea704b?auto=format&fit=crop&w=300&q=80",
-			alt: "milk tea",
-			className: "h-full w-full object-cover"
-		})), /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[15px] font-semibold leading-tight text-white` }, "Night Market Drinks"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[14px] font-semibold leading-none text-white` }, "$30")), /* @__PURE__ */ react.default.createElement("button", { className: `shrink-0 rounded-xl p-1.5 text-zinc-400 hover:bg-zinc-800` }, /* @__PURE__ */ react.default.createElement(lucide_react.X, { size: 18 }))), /* @__PURE__ */ react.default.createElement("div", { className: "mt-2 space-y-0.5" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `min-w-0 flex-1 text-[13px] leading-snug text-zinc-400` }, "Red bean $10 × 1"), /* @__PURE__ */ react.default.createElement("div", { className: `shrink-0 text-[13px] leading-snug text-zinc-300` }, "$10")), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `min-w-0 flex-1 text-[13px] leading-snug text-zinc-400` }, "Pearl $10 × 1"), /* @__PURE__ */ react.default.createElement("div", { className: `shrink-0 text-[13px] leading-snug text-zinc-300` }, "$10")), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `min-w-0 flex-1 text-[13px] leading-snug text-zinc-400` }, "Boba mochi $5 × 2"), /* @__PURE__ */ react.default.createElement("div", { className: `shrink-0 text-[13px] leading-snug text-zinc-300` }, "$10")), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `min-w-0 flex-1 text-[13px] leading-snug text-zinc-400` }, "Matcha lid with a very long custom name to show wrapping"), /* @__PURE__ */ react.default.createElement("div", { className: `shrink-0 text-[13px] leading-snug text-zinc-300` }, "$10"))), /* @__PURE__ */ react.default.createElement("button", { className: "mt-2 inline-flex items-center gap-2 text-[14px] font-semibold text-blue-500" }, /* @__PURE__ */ react.default.createElement(lucide_react.NotebookPen, { size: 16 }), " Edit"))), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2.5 border-t pt-2.5 border-zinc-700` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-end justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `text-[16px] font-semibold text-zinc-300` }, "$40"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-0.5 text-[13px] line-through text-zinc-500` }, "$48")), /* @__PURE__ */ react.default.createElement("div", { className: `text-[16px] font-semibold text-zinc-400` }, "×4"), /* @__PURE__ */ react.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[18px] font-semibold text-white` }, "$160.00"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-0.5 text-[13px] line-through text-zinc-500` }, "$178.00")))))), /* @__PURE__ */ react.default.createElement("button", { className: `mt-3.5 w-full rounded-2xl border px-4 py-2.5 text-[15px] font-semibold border-zinc-700 bg-[#151822] text-zinc-200` }, "Add time")))), detailTab === "payments" && /* @__PURE__ */ react.default.createElement("div", { className: `rounded-3xl border p-4 border-zinc-800 bg-[#151822]` }, detail.payments.length === 0 ? /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl p-4 text-sm bg-[#101117] text-zinc-400` }, "No payments yet.") : /* @__PURE__ */ react.default.createElement("div", { className: "space-y-4" }, detail.payments.map((pay, index) => {
-			const stamp = formatTimelineStamp(pay.time);
-			return /* @__PURE__ */ react.default.createElement("div", {
-				key: pay.id,
-				className: "grid grid-cols-[92px_20px_1fr] gap-3 items-start"
-			}, /* @__PURE__ */ react.default.createElement("div", { className: "pt-1 text-right" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[11px] font-semibold text-violet-300` }, stamp.time), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[11px] text-zinc-500` }, stamp.date)), /* @__PURE__ */ react.default.createElement("div", { className: "relative flex justify-center pt-1" }, index !== detail.payments.length - 1 && /* @__PURE__ */ react.default.createElement("div", { className: `absolute top-5 bottom-[-22px] left-1/2 w-px -translate-x-1/2 bg-zinc-700` }), /* @__PURE__ */ react.default.createElement("div", { className: `relative z-10 h-3.5 w-3.5 rounded-full bg-violet-400 ring-4 ring-[#151822]` })), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-4 border-zinc-700 bg-[#101117]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `font-semibold text-white` }, pay.label), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-300` }, pay.method)), /* @__PURE__ */ react.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ react.default.createElement("div", { className: `font-semibold text-violet-200` }, detail.paymentSummary.currencySymbol, pay.amount.toFixed(2)), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold ${pay.status === "paid" ? "bg-emerald-500/20 text-emerald-300" : "bg-amber-500/20 text-amber-300"}` }, pay.status)))));
-		}))), detailTab === "guest" && /* @__PURE__ */ react.default.createElement("div", { className: `space-y-3 rounded-3xl border p-4 border-zinc-800 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs uppercase tracking-[0.14em] text-zinc-500` }, "Guests"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, guestMockRows.filter((row) => row.checkedIn).length, " ", "/ ", detail.guestCount, " checked-in")), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setGuestBulkActionOpen(true),
-			className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Check-in All")), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-4 border-zinc-700 bg-[#101117]` }), guestMockRows.map((guest) => /* @__PURE__ */ react.default.createElement("div", {
-			key: guest.id,
-			className: `rounded-2xl p-4 bg-[#101117]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `font-semibold text-white` }, guest.name), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, guest.note)), /* @__PURE__ */ react.default.createElement("div", { className: "flex shrink-0 items-center gap-2" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setGuestMockRows((prev) => prev.map((row) => row.id === guest.id ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, row), {}, {
-					checkedIn: !row.checkedIn,
-					noShow: false
-				}) : row));
-			},
-			className: `rounded-2xl px-3 py-2 text-sm font-medium ${guest.checkedIn ? "border border-amber-500/35 bg-amber-500/15 text-white" : "border border-violet-500/35 bg-violet-600/15 text-white"}`
-		}, guest.checkedIn ? "Un-checkin" : "Check-in"), guest.checkedIn && /* @__PURE__ */ react.default.createElement("div", { className: `inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-emerald-500/35 bg-emerald-500/15 text-emerald-300` }, /* @__PURE__ */ react.default.createElement(lucide_react.CheckCircle2, { size: 18 })), /* @__PURE__ */ react.default.createElement("div", {
-			className: "relative",
-			"data-guest-row-menu": true
-		}, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setGuestRowMenu((prev) => prev === guest.id ? null : guest.id),
-			className: `rounded-2xl px-3 py-2 text-sm font-semibold border border-zinc-700 bg-white/5 text-white`
-		}, "⋮"), guestRowMenu === guest.id && /* @__PURE__ */ react.default.createElement("div", { className: `absolute right-0 top-[calc(100%+8px)] z-20 min-w-[150px] rounded-2xl border p-2 shadow-xl border-zinc-700 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setGuestMockRows((prev) => prev.map((row) => row.id === guest.id ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, row), {}, {
-					noShow: !row.noShow,
-					checkedIn: false
-				}) : row));
-				setGuestRowMenu(null);
-			},
-			className: `mb-1 block w-full rounded-xl px-3 py-2 text-left text-sm text-zinc-200 hover:bg-white/5`
-		}, "No-show"), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setGuestMockRows((prev) => prev.filter((row) => row.id !== guest.id));
-				setGuestRowMenu(null);
-			},
-			className: `block w-full rounded-xl px-3 py-2 text-left text-sm text-red-300 hover:bg-red-500/10`
-		}, "Remove"))))))), guestBulkActionOpen && /* @__PURE__ */ react.default.createElement("div", { className: "fixed inset-0 z-[76] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm" }, /* @__PURE__ */ react.default.createElement("div", {
-			ref: guestBulkActionRef,
-			className: `w-full max-w-[420px] rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `text-lg font-semibold text-white` }, "Check-in All"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, "Choose how to apply bulk check-in for all guests in this booking."), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 grid gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setGuestMockRows((prev) => prev.map((row) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, row), {}, {
-					checkedIn: true,
-					noShow: false
-				})));
-				setGuestBulkActionOpen(false);
-			},
-			className: `rounded-2xl px-4 py-3 text-left text-sm font-semibold border border-violet-500/35 bg-violet-600/15 text-white hover:bg-violet-600/25`
-		}, "Check-in all"), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setGuestMockRows((prev) => prev.map((row) => row.noShow ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, row), {}, { checkedIn: false }) : require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, row), {}, { checkedIn: true })));
-				setGuestBulkActionOpen(false);
-			},
-			className: `rounded-2xl px-4 py-3 text-left text-sm font-semibold border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Check-in all except no-show")), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 flex justify-end" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setGuestBulkActionOpen(false),
-			className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Close"))))), detailTab === "files" && /* @__PURE__ */ react.default.createElement("div", { className: `rounded-3xl border p-4 border-zinc-800 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: "mb-3 flex flex-wrap gap-2" }, [
-			["notes", "Notes"],
-			["form", "Forms"],
-			["uploaded", "Uploaded"],
-			["invoice", "Invoice"]
-		].map(([key, label]) => /* @__PURE__ */ react.default.createElement("button", {
-			key,
-			onClick: () => setFilesSubtab(key),
-			className: `rounded-2xl px-3 py-2 text-sm ${filesSubtab === key ? "bg-violet-600 text-white" : "border border-zinc-700 bg-white/5 text-zinc-300"}`
-		}, label))), filesSubtab === "notes" ? /* @__PURE__ */ react.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap items-center gap-2" }, [
-			["internal-notes", "Internal"],
-			["order-notes", "Order"],
-			["item-notes", "Item"]
-		].map(([anchor, label]) => /* @__PURE__ */ react.default.createElement("a", {
-			key: anchor,
-			href: `#${anchor}`,
-			className: `rounded-2xl px-3 py-2 text-sm border border-zinc-700 bg-white/5 text-zinc-200`
-		}, label))), /* @__PURE__ */ react.default.createElement("div", {
-			id: "internal-notes",
-			className: `rounded-2xl border p-4 border-zinc-700 bg-[#101117]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `mb-3 text-xs uppercase tracking-[0.12em] text-zinc-500` }, "Internal notes"), detailWithNoteOverrides.noteGroups.internal.length === 0 ? /* @__PURE__ */ react.default.createElement("div", { className: `text-sm text-zinc-400` }, "No internal notes.") : detailWithNoteOverrides.noteGroups.internal.map((note) => /* @__PURE__ */ react.default.createElement("div", {
-			key: note.id,
-			className: `mb-2 rounded-xl px-3 py-3 last:mb-0 bg-[#151822]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `min-w-0 flex-1 text-sm text-zinc-300` }, note.text), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setNoteEditor({
-				id: note.id,
-				text: note.text,
-				title: "Edit internal note"
-			}),
-			className: `shrink-0 rounded-xl px-3 py-1.5 text-xs font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Edit"))))), /* @__PURE__ */ react.default.createElement("div", {
-			id: "order-notes",
-			className: `rounded-2xl border p-4 border-zinc-700 bg-[#101117]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `mb-3 text-xs uppercase tracking-[0.12em] text-zinc-500` }, "Order notes"), detailWithNoteOverrides.noteGroups.order.length === 0 ? /* @__PURE__ */ react.default.createElement("div", { className: `text-sm text-zinc-400` }, "No order notes.") : detailWithNoteOverrides.noteGroups.order.map((note) => /* @__PURE__ */ react.default.createElement("div", {
-			key: note.id,
-			className: `mb-2 rounded-xl px-3 py-3 last:mb-0 bg-[#151822]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: `min-w-0 flex-1 text-sm text-zinc-300` }, note.text), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setNoteEditor({
-				id: note.id,
-				text: note.text,
-				title: "Edit order note"
-			}),
-			className: `shrink-0 rounded-xl px-3 py-1.5 text-xs font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Edit"))))), /* @__PURE__ */ react.default.createElement("div", {
-			id: "item-notes",
-			className: `rounded-2xl border p-4 border-zinc-700 bg-[#101117]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `mb-3 text-xs uppercase tracking-[0.12em] text-zinc-500` }, "Item notes"), detailWithNoteOverrides.noteGroups.item.length === 0 ? /* @__PURE__ */ react.default.createElement("div", { className: `text-sm text-zinc-400` }, "No item notes.") : detailWithNoteOverrides.noteGroups.item.map((note) => /* @__PURE__ */ react.default.createElement("div", {
-			key: note.id,
-			onClick: () => setDetailTab("items"),
-			className: `mb-2 cursor-pointer rounded-xl px-3 py-3 last:mb-0 bg-[#151822] hover:bg-[#1b2030]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `flex items-center justify-between gap-3 text-sm font-medium text-white` }, /* @__PURE__ */ react.default.createElement("span", null, note.label), /* @__PURE__ */ react.default.createElement("span", null, note.qtyLabel || "×1")), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-300` }, note.text)), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: (e) => {
-				e.stopPropagation();
-				setNoteEditor({
-					id: note.id,
-					text: note.text,
-					title: `Edit ${note.label} note`
-				});
-			},
-			className: `shrink-0 rounded-xl px-3 py-1.5 text-xs font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Edit")))))) : /* @__PURE__ */ react.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-2" }, /* @__PURE__ */ react.default.createElement("label", { className: `inline-flex items-center gap-2 rounded-2xl px-3 py-2 text-sm border border-zinc-700 bg-white/5 text-zinc-200` }, /* @__PURE__ */ react.default.createElement("input", {
-			type: "checkbox",
-			checked: (detail.files[filesSubtab] || []).length > 0 && selectedFileIds.length === (detail.files[filesSubtab] || []).length,
-			onChange: (e) => setSelectedFileIds(e.target.checked ? (detail.files[filesSubtab] || []).map((file) => file.id) : [])
-		}), /* @__PURE__ */ react.default.createElement("span", null, "Select all")), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-zinc-200` }, "Send"), /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-zinc-200` }, "Print"), /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl px-3 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-zinc-200` }, "Download"))), (detail.files[filesSubtab] || []).length === 0 ? /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl p-4 text-sm bg-[#101117] text-zinc-400` }, "No files in this section.") : (detail.files[filesSubtab] || []).map((file) => /* @__PURE__ */ react.default.createElement("button", {
-			key: file.id,
-			onClick: () => setFilePreviewItem(file),
-			className: `block w-full rounded-2xl p-4 text-left bg-[#101117] hover:bg-[#151822]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ react.default.createElement("input", {
-			type: "checkbox",
-			checked: selectedFileIds.includes(file.id),
-			onChange: (e) => {
-				e.stopPropagation();
-				setSelectedFileIds((prev) => e.target.checked ? [...prev, file.id] : prev.filter((id) => id !== file.id));
-			},
-			onClick: (e) => e.stopPropagation(),
-			className: "mt-1"
-		}), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `font-semibold text-white` }, file.name), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, file.type, " ·", " ", file.time || "--"))), /* @__PURE__ */ react.default.createElement("div", { className: `text-sm text-violet-200` }, "Open")))), filePreviewItem && /* @__PURE__ */ react.default.createElement("div", { className: "fixed inset-0 z-[88] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm" }, /* @__PURE__ */ react.default.createElement("div", { className: `w-full max-w-[520px] rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `text-lg font-semibold text-white` }, filePreviewItem.name), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, filePreviewItem.type, " ·", " ", filePreviewItem.time || "--")), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setFilePreviewItem(null),
-			className: `rounded-xl p-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-		}, /* @__PURE__ */ react.default.createElement(lucide_react.X, { size: 16 }))), /* @__PURE__ */ react.default.createElement("div", { className: `mt-4 rounded-2xl border p-6 text-center text-sm border-zinc-700 bg-[#101117] text-zinc-400` }, "File preview window"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 grid grid-cols-3 gap-3" }, /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl px-4 py-3 text-sm font-medium border border-zinc-700 bg-white/5 text-zinc-200` }, "Send"), /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl px-4 py-3 text-sm font-medium border border-zinc-700 bg-white/5 text-zinc-200` }, "Print"), /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl px-4 py-3 text-sm font-medium border border-zinc-700 bg-white/5 text-zinc-200` }, "Download")))))), detailTab === "history" && /* @__PURE__ */ react.default.createElement("div", { className: `rounded-3xl border p-4 border-zinc-800 bg-[#151822]` }, /* @__PURE__ */ react.default.createElement("div", { className: "space-y-4" }, detail.history.map((row, index) => {
-			const stamp = formatTimelineStamp(row.time);
-			return /* @__PURE__ */ react.default.createElement("div", {
-				key: row.id,
-				className: "grid grid-cols-[92px_20px_1fr] gap-3 items-start"
-			}, /* @__PURE__ */ react.default.createElement("div", { className: "pt-1 text-right" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[11px] font-semibold text-violet-300` }, stamp.time), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-[11px] text-zinc-500` }, stamp.date)), /* @__PURE__ */ react.default.createElement("div", { className: "relative flex justify-center pt-1" }, index !== detail.history.length - 1 && /* @__PURE__ */ react.default.createElement("div", { className: `absolute top-5 bottom-[-22px] left-1/2 w-px -translate-x-1/2 bg-zinc-700` }), /* @__PURE__ */ react.default.createElement("div", { className: `relative z-10 h-3.5 w-3.5 rounded-full bg-violet-400 ring-4 ring-[#151822]` })), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-4 border-zinc-700 bg-[#101117]` }, /* @__PURE__ */ react.default.createElement("div", { className: `font-semibold text-white` }, row.actor), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-300` }, row.text)));
-		})))), /* @__PURE__ */ react.default.createElement("div", { className: `shrink-0 border-t px-4 py-3 backdrop-blur-md border-zinc-800 bg-[rgba(15,18,27,0.96)]` }, /* @__PURE__ */ react.default.createElement("div", { className: "mb-3 grid grid-cols-[4fr_2fr_1fr] gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setDetailTab("guest"),
-			className: `rounded-2xl px-4 py-3 text-left text-sm font-semibold border border-violet-500/35 bg-violet-600/15 text-white hover:bg-violet-600/25`
-		}, "Check-in"), /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl px-4 py-3 text-left text-sm font-semibold border border-zinc-700 bg-white/5 text-white hover:bg-white/10` }, "Print"), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setShowActionsOverlay(true),
-			className: `rounded-2xl px-4 py-3 text-center text-sm font-semibold border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "More")), ![
-			"guest",
-			"files",
-			"history"
-		].includes(detailTab) && /* @__PURE__ */ react.default.createElement("div", { className: `rounded-3xl border p-4 border-violet-500/30 bg-[#101117] shadow-[0_0_0_1px_rgba(139,92,246,0.08)]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ react.default.createElement("div", { className: `inline-flex rounded-full px-3 py-1 text-sm font-semibold ${paymentTagClass(getPaymentDisplay(detail), isLight)}` }, getPaymentDisplay(detail)), /* @__PURE__ */ react.default.createElement("div", { className: `mt-3 text-xs uppercase tracking-[0.16em] text-zinc-500` }, "Total"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, ((_detail$itemSummary3 = detail.itemSummary) === null || _detail$itemSummary3 === void 0 ? void 0 : _detail$itemSummary3.itemCount) || 0, " items")), /* @__PURE__ */ react.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-[46px] font-semibold leading-none text-violet-200` }, detail.paymentSummary.currencySymbol, detail.paymentSummary.totalAmount.toFixed(2)))))))));
-	})()))), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, moveConfirm && (() => {
-		var _detail$customer5, _detail$customer6, _detail$customer7, _courts$find, _courts$find2, _moveDraft$targetHour;
-		const detail = getBookingDetailData(moveConfirm.item, courts);
-		const currentCustomer = selectedCustomer || {
-			name: ((_detail$customer5 = detail.customer) === null || _detail$customer5 === void 0 ? void 0 : _detail$customer5.name) || detail.headerSummary.customerName,
-			phone: ((_detail$customer6 = detail.customer) === null || _detail$customer6 === void 0 ? void 0 : _detail$customer6.phone) || "",
-			email: ((_detail$customer7 = detail.customer) === null || _detail$customer7 === void 0 ? void 0 : _detail$customer7.email) || ""
-		};
-		const originalCourtName = ((_courts$find = courts.find((c) => c.id === moveConfirm.item.courtId)) === null || _courts$find === void 0 ? void 0 : _courts$find.name) || detail.headerSummary.resourceLabel || "Court";
-		const nextCourtName = ((_courts$find2 = courts.find((c) => c.id === ((moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId))) === null || _courts$find2 === void 0 ? void 0 : _courts$find2.name) || "Court";
-		const originalDate = moveConfirm.item.date;
-		const originalStart = formatHourLabel(moveConfirm.item.startHour);
-		const originalEnd = formatHourLabel(moveConfirm.item.endHour);
-		const nextDate = (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate;
-		const nextStartHour = (_moveDraft$targetHour = moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetHour) !== null && _moveDraft$targetHour !== void 0 ? _moveDraft$targetHour : moveConfirm.targetHour;
-		const duration = moveConfirm.item.endHour - moveConfirm.item.startHour;
-		const nextEndHour = nextStartHour + duration;
-		const changed = originalDate !== nextDate || moveConfirm.item.courtId !== ((moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId) || moveConfirm.item.startHour !== nextStartHour;
-		const isDragScenario = moveConfirm.item.date !== moveConfirm.targetDate || moveConfirm.item.startHour !== moveConfirm.targetHour || moveConfirm.item.courtId !== moveConfirm.targetCourtId;
-		return /* @__PURE__ */ react.default.createElement(motion.div, {
-			initial: { opacity: 0 },
-			animate: { opacity: 1 },
-			exit: { opacity: 0 },
-			className: "fixed inset-0 z-[72] bg-black/45 backdrop-blur-sm flex items-center justify-center p-4"
-		}, /* @__PURE__ */ react.default.createElement(motion.div, {
-			ref: moveConfirmRef,
-			initial: {
-				scale: .96,
-				y: 8
-			},
-			animate: {
-				scale: 1,
-				y: 0
-			},
-			exit: {
-				scale: .96,
-				y: 8
-			},
-			className: `w-full max-w-[980px] rounded-3xl border p-6 shadow-2xl border-zinc-700 bg-[#121217]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "text-[22px] font-semibold" }, "Booking information"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, "Update customer, court, date and time for this booking."), /* @__PURE__ */ react.default.createElement("div", { className: "mt-5 space-y-4" }, /* @__PURE__ */ react.default.createElement("div", { className: `rounded-3xl border p-5 border-zinc-700 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ react.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs uppercase tracking-[0.14em] text-zinc-500` }, "Customer"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-3 text-[20px] font-semibold text-white` }, currentCustomer.name), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, currentCustomer.phone || "No phone"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, currentCustomer.email || "No email")), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => setCustomerPickerOpen(true),
-			className: `shrink-0 rounded-2xl px-4 py-2.5 text-sm font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-		}, "Change"))), /* @__PURE__ */ react.default.createElement("div", { className: "grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "Court"), /* @__PURE__ */ react.default.createElement("select", {
-			value: (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId,
-			onChange: (e) => setMoveDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev || {}), {}, { targetCourtId: e.target.value })),
-			className: `w-full rounded-2xl px-4 py-4 outline-none border border-zinc-700 bg-[#171820] text-white`
-		}, visibleCourts.map((court) => /* @__PURE__ */ react.default.createElement("option", {
-			key: court.id,
-			value: court.id
-		}, court.name)))), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "New date"), /* @__PURE__ */ react.default.createElement("input", {
-			type: "date",
-			value: (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate,
-			onChange: (e) => setMoveDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev || {}), {}, { targetDate: e.target.value })),
-			className: `w-full rounded-2xl px-4 py-4 outline-none border border-zinc-700 bg-[#171820] text-white`
-		}))), /* @__PURE__ */ react.default.createElement("div", { className: "grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "New start time"), /* @__PURE__ */ react.default.createElement("select", {
-			value: nextStartHour,
-			onChange: (e) => setMoveDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev || {}), {}, { targetHour: Number(e.target.value) })),
-			className: `w-full rounded-2xl px-4 py-4 outline-none border border-zinc-700 bg-[#171820] text-white`
-		}, hourSlots.filter(isBusinessHour).map((hour) => {
-			const targetCourtId = (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId;
-			const targetDate = (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate;
-			const disabled = hour + duration > endTimelineExclusive || hasConflict(bookings, targetCourtId, targetDate, hour, hour + duration, moveConfirm.item.id);
-			return /* @__PURE__ */ react.default.createElement("option", {
-				key: hour,
-				value: hour,
-				disabled
-			}, disabled ? `⛔ ${formatHourLabel(hour)}` : formatHourLabel(hour));
-		}))), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "New end time"), /* @__PURE__ */ react.default.createElement("select", {
-			value: nextEndHour,
-			onChange: (e) => {
-				const nextEnd = Number(e.target.value);
-				setMoveDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev || {}), {}, { targetHour: nextEnd - duration }));
-			},
-			className: `w-full rounded-2xl px-4 py-4 outline-none border border-zinc-700 bg-[#171820] text-white`
-		}, hourSlots.filter(isBusinessHour).map((hour) => {
-			const startHour = hour - duration;
-			const targetCourtId = (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId;
-			const targetDate = (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate;
-			const disabled = startHour < firstTimelineHour || hasConflict(bookings, targetCourtId, targetDate, startHour, hour, moveConfirm.item.id);
-			return /* @__PURE__ */ react.default.createElement("option", {
-				key: `end-${hour}`,
-				value: hour,
-				disabled
-			}, disabled ? `⛔ ${formatHourLabel(hour)}` : formatHourLabel(hour));
-		})))), changed && /* @__PURE__ */ react.default.createElement("div", { className: `rounded-3xl border p-5 border-zinc-700 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs uppercase tracking-[0.14em] text-zinc-500` }, "Previous booking info"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-3 grid gap-3 md:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl p-4 bg-[#101117]` }, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs text-zinc-500` }, "Original"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-300` }, originalCourtName), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-300` }, originalDate), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-300` }, originalStart, " - ", originalEnd)), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl p-4 bg-violet-600/10 border border-violet-500/30` }, /* @__PURE__ */ react.default.createElement("div", { className: `text-xs text-violet-300` }, isDragScenario ? "Drop target" : "Updated"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-white` }, nextCourtName), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-white` }, nextDate), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-white` }, formatHourLabel(nextStartHour), " -", " ", formatHourLabel(nextEndHour)))))), hasConflict(bookings, (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId, (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate, nextStartHour, nextEndHour, moveConfirm.item.id) && /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200" }, "The selected date, court, or time range is unavailable. Please choose an available option."), /* @__PURE__ */ react.default.createElement("div", { className: "mt-6 flex justify-end gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-			onClick: () => {
-				setMoveConfirm(null);
-				setMoveDraft(null);
-			},
-			className: `rounded-2xl px-5 py-3 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-		}, "Cancel"), /* @__PURE__ */ react.default.createElement("button", {
-			onClick: confirmMove,
-			disabled: hasConflict(bookings, (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId, (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate, nextStartHour, nextEndHour, moveConfirm.item.id),
-			className: "rounded-2xl bg-violet-600 px-6 py-3 font-semibold text-white hover:bg-violet-500 disabled:cursor-not-allowed disabled:bg-zinc-700 disabled:text-zinc-400"
-		}, "Confirm"))));
-	})()), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, conflictPicker && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[73] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: conflictPickerRef,
-		initial: {
-			scale: .96,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 8
-		},
-		className: `w-full max-w-[760px] rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "text-xl font-semibold" }, "Target time is unavailable"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, conflictPicker.targetDate, " The target court is unavailable. Please choose another available slot on the same day."), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 grid gap-3 md:grid-cols-2" }, visibleCourts.map((court) => {
-		dayOccupancy(court.id, conflictPicker.targetDate, bookings, hourSlots);
-		return /* @__PURE__ */ react.default.createElement("div", {
-			key: court.id,
-			className: `rounded-2xl border p-3 border-zinc-700 bg-[#171820]`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "mb-2 font-medium" }, court.name), /* @__PURE__ */ react.default.createElement("div", { className: "grid grid-cols-4 gap-2" }, hourSlots.filter(isBusinessHour).map((hour) => {
-			const duration = conflictPicker.item.endHour - conflictPicker.item.startHour;
-			const canUse = hour + duration <= endTimelineExclusive && !hasConflict(bookings, court.id, conflictPicker.targetDate, hour, hour + duration, conflictPicker.item.id);
-			return /* @__PURE__ */ react.default.createElement("button", {
-				key: hour,
-				disabled: !canUse,
-				onClick: () => applyConflictMove(court.id, hour),
-				className: `rounded-lg px-2 py-2 text-xs ${canUse ? "bg-violet-700/80 text-white hover:bg-violet-600" : "bg-zinc-800 text-zinc-600 cursor-not-allowed"}`
-			}, formatHourLabel(hour));
-		})));
-	})), /* @__PURE__ */ react.default.createElement("div", { className: "mt-5 flex justify-end" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setConflictPicker(null),
-		className: `rounded-xl px-4 py-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, "Close"))))), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, blockConflict && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[74] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: blockConflictRef,
-		initial: {
-			scale: .96,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 8
-		},
-		className: `w-full max-w-[620px] rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "text-xl font-semibold" }, "Bookings exist inside block range"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, "There are already bookings inside the selected block range. Do you want to clear their assigned court and leave them unassigned for later reassignment?"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-4 max-h-[240px] overflow-auto space-y-2 rounded-2xl border p-3 border-zinc-700 bg-[#171820]` }, blockConflict.conflicts.map((item) => {
-		var _courts$find3;
-		return /* @__PURE__ */ react.default.createElement("div", {
-			key: item.id,
-			className: `rounded-xl px-3 py-3 text-sm bg-zinc-900/80 text-zinc-200`
-		}, item.name, " · ", item.date, " ·", " ", formatHourLabel(item.startHour), "-", formatHourLabel(item.endHour), " ·", " ", ((_courts$find3 = courts.find((c) => c.id === item.courtId)) === null || _courts$find3 === void 0 ? void 0 : _courts$find3.name) || "Unassigned");
-	})), /* @__PURE__ */ react.default.createElement("div", { className: "mt-5 flex justify-end gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setBlockConflict(null),
-		className: `rounded-xl px-4 py-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, "Cancel"), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: confirmBlockWithUnsetCourts,
-		className: "btn-brand rounded-xl px-5 py-2.5 font-semibold text-white"
-	}, "Clear court assignment and continue"))))), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, checkinModal && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[75] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: checkinModalRef,
-		initial: {
-			scale: .96,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 8
-		},
-		className: `w-full max-w-[620px] rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: "text-xl font-semibold" }, getDisplayStatusTag(checkinModal, checkinModal.date) === "no_show" ? "Backfill check-in" : "Check-in"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, checkinModal.name, " ·", " ", ((_courts$find4 = courts.find((c) => c.id === checkinModal.courtId)) === null || _courts$find4 === void 0 ? void 0 : _courts$find4.name) || "Unassigned")), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setCheckinModal(null),
-		className: `rounded-xl px-3 py-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, "Close")), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 space-y-3 text-sm" }, /* @__PURE__ */ react.default.createElement("div", { className: `rounded-xl px-4 py-3 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("span", { className: "text-zinc-400" }, "Scheduled time:", " "), formatHourLabel(checkinModal.startHour), " -", " ", formatHourLabel(checkinModal.endHour)), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-xl px-4 py-3 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("span", { className: "text-zinc-400" }, "Current time:", " "), currentTimeLabel())), /* @__PURE__ */ react.default.createElement("div", { className: "mt-5 grid gap-3 md:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => {
-			if (!allowPersist("checkin")) return;
-			setBookings((prev) => prev.map((b) => b.id === checkinModal.id ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, b), {}, { statusTag: "checked_in" }) : b));
-			setCheckinModal(null);
-			setDetailItem(null);
-		},
-		className: `rounded-2xl border p-4 text-left border-zinc-700 bg-[#171820] hover:border-emerald-400 hover:bg-emerald-500/10`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "font-semibold" }, getDisplayStatusTag(checkinModal, checkinModal.date) === "no_show" ? "Backfill check-in" : "Check-in as scheduled"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, formatHourLabel(checkinModal.startHour), " -", " ", formatHourLabel(checkinModal.endHour))), /* @__PURE__ */ react.default.createElement("div", { className: `rounded-2xl border p-4 border-zinc-700 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("div", { className: "font-semibold" }, "Reschedule check-in"), /* @__PURE__ */ react.default.createElement("div", { className: "mt-3 grid gap-3 sm:grid-cols-2" }, /* @__PURE__ */ react.default.createElement("select", {
-		value: (_checkinDraft$startHo = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.startHour) !== null && _checkinDraft$startHo !== void 0 ? _checkinDraft$startHo : checkinModal.startHour,
-		onChange: (e) => {
-			var _checkinDraft$endHour, _checkinDraft$startHo2;
-			const nextStart = Number(e.target.value);
-			const duration = ((_checkinDraft$endHour = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.endHour) !== null && _checkinDraft$endHour !== void 0 ? _checkinDraft$endHour : checkinModal.endHour) - ((_checkinDraft$startHo2 = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.startHour) !== null && _checkinDraft$startHo2 !== void 0 ? _checkinDraft$startHo2 : checkinModal.startHour);
-			const nextEnd = Math.min(endTimelineExclusive, nextStart + duration);
-			setCheckinDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev || {}), {}, {
-				startHour: nextStart,
-				endHour: nextEnd
-			}));
-		},
-		className: `rounded-xl px-3 py-2 outline-none border border-zinc-700 bg-[#101117] text-white`
-	}, timeOptions.filter((hour) => hour >= firstTimelineHour && hour < endTimelineExclusive).map((hour) => /* @__PURE__ */ react.default.createElement("option", {
-		key: hour,
-		value: hour
-	}, formatHourLabel(hour)))), /* @__PURE__ */ react.default.createElement("select", {
-		value: (_checkinDraft$endHour2 = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.endHour) !== null && _checkinDraft$endHour2 !== void 0 ? _checkinDraft$endHour2 : checkinModal.endHour,
-		onChange: (e) => setCheckinDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev || {}), {}, { endHour: Number(e.target.value) })),
-		className: `rounded-xl px-3 py-2 outline-none border border-zinc-700 bg-[#101117] text-white`
-	}, timeOptions.filter((hour) => {
-		var _checkinDraft$startHo3;
-		return hour > ((_checkinDraft$startHo3 = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.startHour) !== null && _checkinDraft$startHo3 !== void 0 ? _checkinDraft$startHo3 : checkinModal.startHour) && hour <= endTimelineExclusive;
-	}).map((hour) => /* @__PURE__ */ react.default.createElement("option", {
-		key: hour,
-		value: hour
-	}, formatHourLabel(hour))))), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, "Suggested time:", " ", formatHourLabel((_checkinDraft$startHo4 = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.startHour) !== null && _checkinDraft$startHo4 !== void 0 ? _checkinDraft$startHo4 : checkinModal.startHour), " ", "-", " ", formatHourLabel((_checkinDraft$endHour3 = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.endHour) !== null && _checkinDraft$endHour3 !== void 0 ? _checkinDraft$endHour3 : checkinModal.endHour)), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => {
-			if (!allowPersist("checkinReschedule")) return;
-			setBookings((prev) => prev.map((b) => {
-				var _checkinDraft$startHo5, _checkinDraft$endHour4;
-				return b.id === checkinModal.id ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, b), {}, {
-					startHour: (_checkinDraft$startHo5 = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.startHour) !== null && _checkinDraft$startHo5 !== void 0 ? _checkinDraft$startHo5 : b.startHour,
-					endHour: (_checkinDraft$endHour4 = checkinDraft === null || checkinDraft === void 0 ? void 0 : checkinDraft.endHour) !== null && _checkinDraft$endHour4 !== void 0 ? _checkinDraft$endHour4 : b.endHour,
-					statusTag: "checked_in"
-				}) : b;
-			}));
-			setCheckinModal(null);
-			setDetailItem(null);
-		},
-		className: "mt-3 w-full btn-brand rounded-xl px-4 py-2.5 text-sm font-semibold text-white"
-	}, "Confirm reschedule and check-in")))))), /* @__PURE__ */ react.default.createElement(AnimatePresence, null, mergeOrderModal && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[76] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: mergeOrderModalRef,
-		initial: {
-			scale: .96,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 8
-		},
-		className: `w-full max-w-[640px] rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: "text-xl font-semibold" }, "Merge order"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, "Merge this booking into another booking / table.")), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setMergeOrderModal(null),
-		className: `rounded-xl px-3 py-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, "Close")), /* @__PURE__ */ react.default.createElement("div", { className: `mt-4 rounded-2xl border p-4 border-zinc-700 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("div", { className: `text-sm text-zinc-400` }, "Current booking"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 font-semibold text-white` }, mergeOrderModal.item.name, " ·", " ", ((_courts$find5 = courts.find((c) => c.id === mergeOrderModal.item.courtId)) === null || _courts$find5 === void 0 ? void 0 : _courts$find5.name) || "Unassigned")), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ react.default.createElement("label", { className: `mb-2 block text-sm text-zinc-400` }, "Merge into"), /* @__PURE__ */ react.default.createElement("select", {
-		value: mergeOrderDraft.targetBookingId,
-		onChange: (e) => setMergeOrderDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { targetBookingId: e.target.value })),
-		className: `w-full rounded-xl px-4 py-3 outline-none border border-zinc-700 bg-[#171820] text-white`
-	}, mergeOrderModal.candidates.map((candidate) => {
-		var _courts$find6;
-		return /* @__PURE__ */ react.default.createElement("option", {
-			key: candidate.id,
-			value: candidate.id
-		}, candidate.name, " ·", " ", ((_courts$find6 = courts.find((c) => c.id === candidate.courtId)) === null || _courts$find6 === void 0 ? void 0 : _courts$find6.name) || "Unassigned", " ", "· ", candidate.date, " ", formatHourLabel(candidate.startHour), "-", formatHourLabel(candidate.endHour));
-	}))), /* @__PURE__ */ react.default.createElement("div", { className: `mt-4 rounded-2xl border p-4 border-zinc-700 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement("div", { className: "font-semibold" }, "After merge"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-2 text-sm text-zinc-400` }, "Choose whether the current table should be cleared immediately, or kept until the target order is confirmed."), /* @__PURE__ */ react.default.createElement("label", { className: `mt-3 flex items-start gap-3 rounded-2xl border p-3 border-zinc-700 bg-[#101117]` }, /* @__PURE__ */ react.default.createElement("input", {
-		type: "radio",
-		name: "merge-order-mode",
-		checked: !mergeOrderDraft.keepSourceOpen,
-		onChange: () => setMergeOrderDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { keepSourceOpen: false })),
-		className: "mt-1"
-	}), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `font-medium text-white` }, "Merge and clear this table"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, "After merge, this booking is cleared and the current table / court is released."))), /* @__PURE__ */ react.default.createElement("label", { className: `mt-3 flex items-start gap-3 rounded-2xl border p-3 border-zinc-700 bg-[#101117]` }, /* @__PURE__ */ react.default.createElement("input", {
-		type: "radio",
-		name: "merge-order-mode",
-		checked: mergeOrderDraft.keepSourceOpen,
-		onChange: () => setMergeOrderDraft((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { keepSourceOpen: true })),
-		className: "mt-1"
-	}), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: `font-medium text-white` }, "Merge but keep this table for now"), /* @__PURE__ */ react.default.createElement("div", { className: `mt-1 text-sm text-zinc-400` }, "Keep the current table until the target booking / table is fully confirmed.")))), /* @__PURE__ */ react.default.createElement("div", { className: "mt-5 flex justify-end gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setMergeOrderModal(null),
-		className: `rounded-xl px-4 py-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, "Cancel"), /* @__PURE__ */ react.default.createElement("button", { className: "btn-brand rounded-xl px-5 py-2.5 font-semibold text-white" }, "Confirm merge order")))), customerPickerOpen && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[77] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: customerPickerRef,
-		initial: {
-			scale: .96,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 8
-		},
-		className: `w-full max-w-[1120px] rounded-3xl border p-6 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ react.default.createElement("div", { className: `text-2xl font-semibold text-white` }, "Select customer"), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setCustomerPickerOpen(false),
-		className: `rounded-xl p-2 border border-zinc-700 text-zinc-300 hover:bg-zinc-800`
-	}, /* @__PURE__ */ react.default.createElement(lucide_react.X, { size: 18 }))), /* @__PURE__ */ react.default.createElement("div", { className: "mt-5 flex items-center gap-3" }, /* @__PURE__ */ react.default.createElement("button", { className: "btn-pill-active rounded-2xl px-5 py-3 text-base font-semibold" }, "New Client"), /* @__PURE__ */ react.default.createElement("div", { className: "ml-auto flex items-center gap-3 text-emerald-500" }, /* @__PURE__ */ react.default.createElement("div", { className: "h-9 w-9 rounded-full border border-current/20 flex items-center justify-center" }, "✓"), /* @__PURE__ */ react.default.createElement("div", { className: "h-9 w-9 rounded-full border border-current/20 flex items-center justify-center" }, "✓"), /* @__PURE__ */ react.default.createElement("div", { className: "h-9 w-9 rounded-full border border-current/20 flex items-center justify-center" }, "✓"))), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 flex items-center gap-3" }, /* @__PURE__ */ react.default.createElement("button", { className: `rounded-2xl p-4 border border-violet-500/35 bg-violet-600/20 text-white` }, /* @__PURE__ */ react.default.createElement(lucide_react.Eye, { size: 24 })), /* @__PURE__ */ react.default.createElement("div", { className: `flex flex-1 items-center gap-3 rounded-2xl border px-4 py-4 border-zinc-700 bg-[#171820]` }, /* @__PURE__ */ react.default.createElement(Search, {
-		size: 28,
-		className: "text-zinc-400"
-	}), /* @__PURE__ */ react.default.createElement("input", {
-		value: customerSearch,
-		onChange: (e) => setCustomerSearch(e.target.value),
-		placeholder: "WalletPass Code / Name / Mobile / Email",
-		className: "w-full bg-transparent text-lg outline-none"
-	})), /* @__PURE__ */ react.default.createElement("button", { className: "btn-pill-active rounded-2xl px-8 py-4 text-xl font-semibold" }, "Search")), /* @__PURE__ */ react.default.createElement("div", { className: `mt-5 overflow-hidden rounded-2xl border border-zinc-700` }, /* @__PURE__ */ react.default.createElement("div", { className: `grid grid-cols-[1.2fr_1.2fr_1.1fr_1.6fr_.8fr] px-6 py-4 text-sm font-semibold bg-[#171820] text-zinc-300` }, /* @__PURE__ */ react.default.createElement("div", null, "Name"), /* @__PURE__ */ react.default.createElement("div", null, "Registration Time"), /* @__PURE__ */ react.default.createElement("div", null, "Phone Number"), /* @__PURE__ */ react.default.createElement("div", null, "Email address"), /* @__PURE__ */ react.default.createElement("div", null, "Membership")), customerPickerMock.filter((row) => {
-		const q = customerSearch.trim().toLowerCase();
-		if (!q) return true;
-		return [
-			row.name,
-			row.phone,
-			row.email,
-			row.membership
-		].join(" ").toLowerCase().includes(q);
-	}).map((row) => /* @__PURE__ */ react.default.createElement("button", {
-		key: row.id,
-		onClick: () => {
-			setSelectedCustomer(row);
-			setCustomerPickerOpen(false);
-		},
-		className: `grid w-full grid-cols-[1.2fr_1.2fr_1.1fr_1.6fr_.8fr] items-center gap-4 border-t px-6 py-5 text-left border-zinc-700 bg-[#121217] text-white hover:bg-[#171820]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "text-[17px] font-semibold" }, row.name), /* @__PURE__ */ react.default.createElement("div", { className: "text-zinc-400" }, row.registeredAt), /* @__PURE__ */ react.default.createElement("div", { className: "text-zinc-300" }, row.phone), /* @__PURE__ */ react.default.createElement("div", { className: "text-zinc-300" }, row.email), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("span", { className: `rounded-full border px-3 py-1 text-sm border-amber-400/35 bg-amber-400/10 text-amber-300` }, row.membership))))))), noteEditor && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: "fixed inset-0 z-[89] bg-black/45 backdrop-blur-sm flex items-center justify-center p-4"
-	}, /* @__PURE__ */ react.default.createElement(motion.div, {
-		ref: noteEditorRef,
-		initial: {
-			scale: .96,
-			y: 8
-		},
-		animate: {
-			scale: 1,
-			y: 0
-		},
-		exit: {
-			scale: .96,
-			y: 8
-		},
-		className: `w-full max-w-[520px] rounded-3xl border p-5 shadow-2xl border-zinc-700 bg-[#121217]`
-	}, /* @__PURE__ */ react.default.createElement("div", { className: `text-lg font-semibold text-white` }, noteEditor.title || "Edit note"), /* @__PURE__ */ react.default.createElement("textarea", {
-		value: noteEditor.text,
-		onChange: (e) => setNoteEditor((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { text: e.target.value })),
-		className: `mt-4 min-h-[160px] w-full rounded-2xl px-4 py-3 outline-none border border-zinc-700 bg-[#171820] text-white`
-	}), /* @__PURE__ */ react.default.createElement("div", { className: "mt-4 flex justify-end gap-3" }, /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => setNoteEditor(null),
-		className: `rounded-2xl px-4 py-2 text-sm font-medium border border-zinc-700 bg-white/5 text-white hover:bg-white/10`
-	}, "Cancel"), /* @__PURE__ */ react.default.createElement("button", {
-		onClick: () => {
-			setNoteOverrides((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [noteEditor.id]: noteEditor.text }));
-			setDetailMode("drawer");
-			setDetailTab("files");
-			setFilesSubtab("notes");
-			setCalendarShiftedForDrawer(true);
-			setNoteEditor(null);
-		},
-		className: "rounded-2xl bg-violet-600 px-4 py-2 text-sm font-semibold text-white hover:bg-violet-500"
-	}, "Save")))), quickActionLimitMessage && /* @__PURE__ */ react.default.createElement(motion.div, {
-		initial: {
-			opacity: 0,
-			y: -10,
-			scale: .98
-		},
-		animate: {
-			opacity: 1,
-			y: 0,
-			scale: 1
-		},
-		exit: {
-			opacity: 0,
-			y: -10,
-			scale: .98
-		},
-		className: "fixed left-1/2 top-6 z-[90] -translate-x-1/2 rounded-2xl border border-amber-400/35 bg-[#1a1510]/90 px-4 py-3 text-sm font-medium text-amber-200 shadow-2xl backdrop-blur-md"
-	}, quickActionLimitMessage), transitioningToDay && /* @__PURE__ */ react.default.createElement(motion.div, {
-		layoutId: `zoom-${transitioningToDay.source}`,
-		className: "fixed inset-6 z-[60] rounded-[28px] border border-violet-400/20 bg-[#151220] pointer-events-none",
-		initial: {
-			opacity: .1,
-			scale: 1
-		},
-		animate: {
-			opacity: 0,
-			scale: 1
-		},
-		exit: { opacity: 0 },
-		transition: {
-			duration: .18,
-			ease: [
-				.18,
-				.9,
-				.22,
-				1
-			]
-		}
-	})))));
-}
-//#endregion
-exports.default = BookingCalendarDemo;