@pisell/materials 1.8.38 → 1.8.41

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

@@ -0,0 +1,3813 @@
+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;