[V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", dark: "#c4151c", //Kept existing values }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", dark: "#e6c200", //Kept existing values }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", dark: "#7b28a4", //Kept existing values }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]png:file="public/images/xuan-long-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logo-enYaQEURm6Og87a9WjhfzXLKFj41Oy.png" [V0_FILE]jpeg:file="public/images/event-poster.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_20250523173452.png-lqDp6lhp0hUa2GGoW8cWnQLymcYtlB.jpeg" [V0_FILE]png:file="public/images/xuan-long-logo-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%8E%84%E9%BE%99%E9%BB%91%E9%87%91LOGO-k39JXWGgvYXBfoz1fNNFimra6m2QLO.png" [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "国际玄龍體育總會 | International Xuan Long Sport Association", description: "3rd Anniversary of International Xuan Long Sport Association & 13th Anniversary of Malaysia Xuan Long Sport Association - Fundraising Dinner for New Headquarters", icons: { icon: "/images/xuan-long-logo-new.png", shortcut: "/images/xuan-long-logo-new.png", apple: "/images/xuan-long-logo-new.png", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/poster/page.tsx" import Image from "next/image" import Link from "next/link" import { ArrowLeft, Download } from "lucide-react" export default function PosterPage() { return (

{/* Black and gold background */}

{/* Stars background */}

{Array.from({ length: 80 }).map((_, i) => (

))}

{/* Header */}

{/* Main content */}

返回活动详情 | Back to Event Details 下载海报 | Download Poster

玄龍大軍熱血上演 | Xuan Long Grand Performance

活动详情 | Event Details

国际玄龍體育總會三週年 | 馬來西亞玄龍體育總會十三週年

3rd Anniversary of International Xuan Long Sport Association | 13th Anniversary of Malaysia Xuan Long Sport Association

日期与时间 | Date & Time

2025年8月1日晚上7:00

August 1, 2025 at 7:00 PM

地点 | Venue

王岳海银星宴会厅

GALAXY BANQUET HALL

查看更多详情 | View More Details

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/contact/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import Image from "next/image" import Link from "next/link" export default function Home() { return (

{/* Black and gold background */}

{/* Stars background */}

{Array.from({ length: 80 }).map((_, i) => (

))}

{/* Header */}

{/* Main content */}

{/* Chinese text */}

国际玄龍體育總會三週年

馬來西亞玄龙體育總會十三週年

籌募新會所基金晚宴

{/* English text */}

3rd Anniversary of INTERNATIONAL XUAN LONG SPORT ASSOCIATION

13th Anniversary of MALAYSIA XUAN LONG SPORT ASSOCIATION

Fundraising Dinner for New Headquarters

{/* Event date and venue */}

2025年8月1日星期五 | August 1, 2025 (Friday)

王岳海银星宴会厅 | GALAXY BANQUET HALL

晚上7:00 | 7:00 PM

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/schedule/page.tsx" isQuickEdit="true" import Image from "next/image" import Link from "next/link" export default function SchedulePage() { return (

{/* Black and gold background */}

{/* Stars background */}

{Array.from({ length: 80 }).map((_, i) => (

))}

{/* Header */}

{/* Main content */}

{/* Page title */}

节目流程

Program Schedule

{/* Program schedule */}

国际玄龍體育總會三週年及馬來西亞玄龍體育總會十三週年庆典活动流程
Program Schedule for the 3rd Anniversary of International Xuan Long Sport Association & 13th Anniversary of Malaysia Xuan Long Sport Association

7:00 PM

入席

Seating & Entry

7:30 PM

国内外玄龙队伍进场及VIP进场

Xuan Long Teams & VIP Entry

7:55 PM

奏国歌

National Anthem

8:00 PM

开幕仪式

Opening Ceremony

8:15 PM

致辞

Welcome Address

8:20 PM

颁发委任状

Presentation of Appointment Certificates

8:45 PM

开光帅旗

Blessing of Commander Flag

9:00 PM

开光龙，鼓，狮

Blessing of Dragon, Drums & Lions

10:00 PM

标福品

Blessing of Fortune Items

10:30 PM

大汇演

Grand Performance

11:00 PM

结束

Event Conclusion

* 节目时间可能因现场情况略有调整 | Program timing may be subject to minor adjustments

{/* Additional information */}

活动亮点 | Event Highlights

开光仪式

Blessing Ceremony

传统开光仪式将为龙、鼓、狮注入灵气，确保来年好运和成功。

Traditional blessing ceremony to imbue the dragon, drums, and lions with spiritual energy, ensuring good fortune and success in the coming year.

大汇演

Grand Performance

精彩的文化表演，包括醒狮、舞龙和传统鼓乐演奏。

Spectacular cultural performances including lion dance, dragon dance, and traditional drum performances.

{/* Back to event details button */}

返回活动详情 | Back to Event Details

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/event/page.tsx" isQuickEdit="true" import Image from "next/image" import Link from "next/link" import { Calendar, Clock, MapPin, Phone, Mail } from "lucide-react" export default function EventPage() { return (

{/* Black and gold background */}

{/* Stars background */}

{Array.from({ length: 80 }).map((_, i) => (

))}

{/* Header */}

{/* Main content */}

{/* Page title */}

籌募新會所基金晚宴

Fundraising Dinner for New Headquarters

{/* Event overview */}

活动概述 | Event Overview

为庆祝国际玄龍體育總會三週年及馬來西亞玄龍體育總會十三週年，我们诚挚邀请您参加这场意义非凡的筹款晚宴。

To celebrate the 3rd Anniversary of International Xuan Long Sport Association and 13th Anniversary of Malaysia Xuan Long Sport Association, we cordially invite you to this meaningful fundraising dinner.

筹款目标 | Fundraising Goal

此次筹款活动旨在为玄龍體育總會筹建新会所，为会员提供更好的训练和活动场所。

This fundraising event aims to establish a new headquarters for Xuan Long Sport Association, providing better training and activity facilities for our members.

{/* Event details */}

日期 | Date

2025年8月1日

August 1, 2025

星期五

Friday

时间 | Time

晚上7:00

7:00 PM

地点 | Venue

王岳海银星宴会厅

GALAXY BANQUET HALL

Jalan Peach Avenue, Kuala Lumpur

Waze 导航 | Get Directions

{/* Event Poster */}

活动海报 | Event Poster

点击查看完整海报 | Click to view full poster

{/* 福品竞标部分 */}

福品竞标 | Fortune Items Auction

现场将举行福品竞标活动，所得善款将用于新会所建设基金

Live auction of fortune items will be held, with proceeds going to the new headquarters fund

🐉

开光金龙

Blessed Golden Dragon

经过开光仪式的金龙摆件，寓意事业腾飞、财源广进

🦁

醒狮头

Lion Head

传统醒狮头，具有驱邪避凶、招财进宝的寓意

🥁

开光鼓

Blessed Drum

经过开光的传统鼓，象征着声势浩大、前程似锦

🏮

福灯

Fortune Lantern

传统福灯，寓意光明前程、家庭和睦

🎋

竹报平安

Bamboo Peace

竹制工艺品，象征节节高升、平安吉祥

💎

水晶摆件

Crystal Ornament

精美水晶摆件，寓意纯洁透明、事业成功

竞标须知 | Auction Guidelines

• 竞标将在晚宴现场进行，起标价将于活动当晚公布

• 竞标所得善款将全数用于新会所建设基金

• 成功竞标者将获得福品及感谢状

• Auction will be held during the dinner, starting prices announced on event night

• All proceeds will go towards the new headquarters fund

• Successful bidders will receive the item and a certificate of appreciation

{/* View program schedule button */}

查看完整节目流程 | View Complete Program Schedule

{/* Contact information */}

联系我们 | Contact Information

Master Andrew Yap 葉师傅

活动联系人 | Event Contact Person

电话 | Phone

+60 16-681 2728

邮箱 | Email

xuanlongsports.msia@gmail.com

WhatsApp 联系

{/* Footer */}

) } [V0_FILE]typescriptreact:file="services/data-service.ts" isFixed="true" isQuickEdit="true" // 定义数据类型 export interface Booking { id: string tableId: string attendees: string[] // Changed from 'name: string' to 'attendees: string[]' contactInfo: string tableType: "vvip" | "vip" | "regular" // Added 'vvip' type tableLocation: string bookingDate: string notes?: string status: "confirmed" | "pending" | "cancelled" } export interface SeatData { id: string type: "vvip" | "vip" | "regular" // Added 'vvip' type price: number available: boolean sponsor?: string // For VIP/VVIP tables location: string capacity: number // Added capacity for each table } // 定义初始数据 export const getInitialSeats = (): Record => { const initialSeats: Record = { VVIP: { id: "VVIP", type: "vvip", price: 12000, // Example price for VVIP available: true, sponsor: "特邀贵宾席", location: "舞台前方中央", capacity: 12, }, // VIP tables (assuming these are the ones from the previous version, now regular tables) // The image only shows numbered tables and one VVIP. // I will re-map the previous VIPs to regular tables if they are part of the 58. // Based on the image, there are no distinct "VIP" tables other than VVIP. // The previous VIP1-VIP6 will be removed or re-categorized if they are part of the 58. // For now, I'll assume all numbered tables are 'regular'. // The image shows tables 1-58 and 'R'. Let's assume 'R' is a special regular table. // The image has 29 tables on the left and 29 on the right (including R). // Left side: 1,2,3, 8,9,10, 14,15,16, 20,21,22, 26,27,28, 32,33,34, 38,39,40, 44,45,46, 49,50, 54,55,56 (29 tables) // Right side: 5,6,7, 11,12,13, 17,18,19, 23,24,25, 29,30,31, 35,36,37, 41,42,43, 47,48, 51,52,53, R,57,58 (29 tables) } // Generate regular tables (T1-T58, plus R) const tableNumbers = [ 1, 2, 3, 8, 9, 10, 14, 15, 16, 20, 21, 22, 26, 27, 28, 32, 33, 34, 38, 39, 40, 44, 45, 46, 49, 50, 54, 55, 56, // Left side 5, 6, 7, 11, 12, 13, 17, 18, 19, 23, 24, 25, 29, 30, 31, 35, 36, 37, 41, 42, 43, 47, 48, 51, 52, 53, 57, 58, // Right side ] tableNumbers.sort((a, b) => a - b) // Sort for consistent order tableNumbers.forEach((num) => { const id = `T${num}` let location = "" if (num >= 1 && num <= 3) location = "左侧前排" else if (num >= 5 && num <= 7) location = "右侧前排" else if (num >= 8 && num <= 10) location = "左侧中前排" else if (num >= 11 && num <= 13) location = "右侧中前排" else if (num >= 14 && num <= 16) location = "左侧中排" else if (num >= 17 && num <= 19) location = "右侧中排" else if (num >= 20 && num <= 22) location = "左侧中后排" else if (num >= 23 && num <= 25) location = "右侧中后排" else if (num >= 26 && num <= 28) location = "左侧后排" else if (num >= 29 && num <= 31) location = "右侧后排" else if (num >= 32 && num <= 34) location = "左侧更后排" else if (num >= 35 && num <= 37) location = "右侧更后排" else if (num >= 38 && num <= 40) location = "左侧最后排" else if (num >= 41 && num <= 43) location = "右侧最后排" else if (num >= 44 && num <= 46) location = "左侧角落" else if (num >= 47 && num <= 48) location = "右侧角落" else if (num >= 49 && num <= 50) location = "左侧入口附近" else if (num >= 51 && num <= 53) location = "右侧入口附近" else if (num >= 54 && num <= 56) location = "左侧出口附近" else if (num >= 57 && num <= 58) location = "右侧出口附近" else location = "未知区域" // Fallback initialSeats[id] = { id: id, type: "regular", price: 2500, available: true, location: location, capacity: 10, } }) // Add special 'R' table initialSeats["R"] = { id: "R", type: "regular", price: 2500, available: true, location: "右侧特殊区域", capacity: 10, } return initialSeats } export const getInitialBookings = (): Booking[] => { return [ { id: "b1", tableId: "VVIP", attendees: ["张伟", "李丽", "王明", "赵芳"], // Example attendees contactInfo: "+60 12-345-6789", tableType: "vvip", tableLocation: "舞台前方中央", bookingDate: "2024-12-20", status: "confirmed", notes: "特邀贵宾", }, { id: "b2", tableId: "T5", attendees: ["李娜", "陈刚", "刘红", "周杰", "吴迪", "郑凯", "孙悦", "马力", "高飞", "林静"], contactInfo: "+60 16-555-7890", tableType: "regular", tableLocation: "右侧前排", bookingDate: "2024-12-21", status: "confirmed", }, { id: "b3", tableId: "T12", attendees: ["刘强", "杨敏"], contactInfo: "+60 17-222-3333", tableType: "regular", tableLocation: "右侧中前排", bookingDate: "2024-12-22", status: "pending", }, ] } // 数据同步服务 export const DataService = { // 加载座位数据 getSeats: (): Record => { if (typeof window === "undefined") return getInitialSeats() try { const storedSeats = localStorage.getItem("xuan-long-seats") if (storedSeats) { const parsedSeats = JSON.parse(storedSeats) // 验证数据结构，确保包含新的字段 if (typeof parsedSeats === "object" && parsedSeats !== null) { // 检查并添加缺失的字段，例如 capacity const initial = getInitialSeats() for (const key in initial) { if (!parsedSeats[key]) { parsedSeats[key] = initial[key] // Add missing initial seats } else { // Ensure all properties exist, especially new ones like capacity parsedSeats[key] = { ...initial[key], ...parsedSeats[key] } } } // Remove seats that are no longer in initialSeats (e.g., old VIPs) for (const key in parsedSeats) { if (!initial[key]) { delete parsedSeats[key] } } return parsedSeats } } } catch (error) { console.error("Error loading seats data:", error) } // 如果没有存储的数据或数据无效，使用初始数据并保存 const initialSeats = getInitialSeats() if (typeof window !== "undefined") { try { localStorage.setItem("xuan-long-seats", JSON.stringify(initialSeats)) } catch (error) { console.error("Error saving initial seats data:", error) } } return initialSeats }, // 保存座位数据 saveSeats: (seats: Record): void => { if (typeof window === "undefined") return localStorage.setItem("xuan-long-seats", JSON.stringify(seats)) // 触发存储事件以通知其他页面 window.dispatchEvent(new Event("storage-update")) }, // 加载预订数据 getBookings: (): Booking[] => { if (typeof window === "undefined") return getInitialBookings() try { const storedBookings = localStorage.getItem("xuan-long-bookings") if (storedBookings) { const parsedBookings = JSON.parse(storedBookings) // 验证数据结构，确保包含新的字段 if (Array.isArray(parsedBookings)) { // 转换旧的 'name' 字段到 'attendees' 数组 return parsedBookings.map((booking) => ({ ...booking, attendees: Array.isArray(booking.attendees) ? booking.attendees : booking.name ? [booking.name] : [], // Ensure tableType and tableLocation are correctly set based on current seat data // This might require fetching seats first, but for simplicity, assume they are correct or will be updated on save. })) } } } catch (error) { console.error("Error loading bookings data:", error) } // 如果没有存储的数据或数据无效，使用初始数据并保存 const initialBookings = getInitialBookings() if (typeof window !== "undefined") { try { localStorage.setItem("xuan-long-bookings", JSON.stringify(initialBookings)) } catch (error) { console.error("Error saving initial bookings data:", error) } } return initialBookings }, // 保存预订数据 saveBookings: (bookings: Booking[]): void => { if (typeof window === "undefined") return localStorage.setItem("xuan-long-bookings", JSON.stringify(bookings)) // 触发存储事件以通知其他页面 window.dispatchEvent(new Event("storage-update")) }, // 更新座位可用性 updateSeatAvailability: (): void => { if (typeof window === "undefined") return const seats = DataService.getSeats() const bookings = DataService.getBookings() // 首先将所有座位重置为可用 Object.keys(seats).forEach((seatId) => { seats[seatId].available = true }) // 然后根据预订数据更新座位可用性 bookings.forEach((booking) => { if (seats[booking.tableId] && booking.status !== "cancelled") { // A table is unavailable if it has any confirmed or pending booking seats[booking.tableId].available = false } }) DataService.saveSeats(seats) }, // 添加一个新方法来重置数据到初始状态 resetToInitialData: (): void => { if (typeof window === "undefined") return try { const initialSeats = getInitialSeats() const initialBookings = getInitialBookings() localStorage.setItem("xuan-long-seats", JSON.stringify(initialSeats)) localStorage.setItem("xuan-long-bookings", JSON.stringify(initialBookings)) // 触发存储事件以通知其他页面 window.dispatchEvent(new Event("storage-update")) } catch (error) { console.error("Error resetting data:", error) } }, } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(135deg, #000000 0%, #111111 40%, #222222 100%); min-height: 100vh; } .poster-bg { background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(17, 17, 17, 0.9) 40%, rgba(34, 34, 34, 0.95) 100%); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -10; } .stars-container { position: fixed; width: 100%; height: 100%; z-index: -5; } .star { position: absolute; background-color: gold; border-radius: 50%; opacity: 0.6; animation: twinkle 3s infinite ease-in-out; box-shadow: 0 0 6px rgba(255, 215, 0, 0.8); } @keyframes twinkle { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.8); } } .animate-pulse-slow { animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse-slow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.9; transform: scale(0.98); } } .text-yellow-400 { text-shadow: 0 0 10px rgba(250, 204, 21, 0.5); } .text-white\/80 { text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); } /* Elegant black and gold effects */ .dramatic-bg { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%); } .golden-glow { box-shadow: 0 0 20px rgba(218, 165, 32, 0.2); } .red-glow { box-shadow: 0 0 15px rgba(220, 20, 60, 0.2); } .green-glow { box-shadow: 0 0 15px rgba(0, 255, 0, 0.2); } /* Content backgrounds with better readability */ .content-card { background-color: rgba(0, 0, 0, 0.7); border: 1px solid rgba(218, 165, 32, 0.3); backdrop-filter: blur(5px); } /* Custom animation for highlight */ @keyframes pulse-highlight { 0%, 100% { box-shadow: 0 0 15px rgba(250, 204, 21, 0.8); } 50% { box-shadow: 0 0 25px rgba(250, 204, 21, 1); } } .animate-pulse-highlight { animation: pulse-highlight 1.5s infinite ease-in-out; } /* 移动端优化 */ @media (max-width: 640px) { .content-card { margin: 0 8px; padding: 16px !important; } .stars-container .star { width: 2px !important; height: 2px !important; } /* 确保文本在小屏幕上可读 */ .text-responsive { font-size: 14px; line-height: 1.4; } /* 优化按钮在移动端的显示 */ .mobile-button { padding: 12px 16px; font-size: 14px; min-height: 44px; /* 符合触摸目标最小尺寸 */ } /* 优化表格在移动端的显示 */ .mobile-table { font-size: 12px; } .mobile-table th, .mobile-table td { padding: 8px 4px; } } /* 平板端优化 */ @media (min-width: 641px) and (max-width: 1024px) { .content-card { padding: 24px !important; } } /* 确保图片在所有设备上都能正确显示 */ .responsive-image { width: 100%; height: auto; max-width: 100%; } /* 优化导航在移动端的显示 */ @media (max-width: 640px) { nav { padding: 16px !important; } nav a { font-size: 13px; padding: 8px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); } } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import { useState, useEffect, useMemo } from "react" import Image from "next/image" import Link from "next/link" import { Search, MapPin, Phone, Mail, Users, Calendar, Clock, ArrowUp } from "lucide-react" import { DataService, type Booking, type SeatData } from "@/services/data-service" export default function ContactPage() { const [searchTerm, setSearchTerm] = useState("") const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("") const [suggestions, setSuggestions] = useState([]) const [showSuggestions, setShowSuggestions] = useState(false) const [foundBooking, setFoundBooking] = useState(null) const [highlightedTable, setHighlightedTable] = useState(null) const [bookings, setBookings] = useState([]) const [seats, setSeats] = useState>({}) // Load initial data and set up storage listeners useEffect(() => { const loadData = () => { setBookings(DataService.getBookings()) setSeats(DataService.getSeats()) DataService.updateSeatAvailability() // Ensure availability is up-to-date } loadData() const handleStorageUpdate = () => { loadData() } window.addEventListener("storage-update", handleStorageUpdate) window.addEventListener("storage", handleStorageUpdate) return () => { window.removeEventListener("storage-update", handleStorageUpdate) window.removeEventListener("storage", handleStorageUpdate) } }, []) // Debounce search term for suggestions useEffect(() => { const handler = setTimeout(() => { setDebouncedSearchTerm(searchTerm) }, 300) // 300ms debounce delay return () => { clearTimeout(handler) } }, [searchTerm]) // Generate suggestions based on debounced search term useEffect(() => { if (debouncedSearchTerm.trim()) { const searchTermLower = debouncedSearchTerm.toLowerCase().trim() const matchingNames = new Set() bookings.forEach((booking) => { if (booking.status !== "cancelled") { booking.attendees.forEach((name) => { if (name.toLowerCase().includes(searchTermLower)) { matchingNames.add(name) } }) } }) setSuggestions(Array.from(matchingNames).sort()) setShowSuggestions(true) } else { setSuggestions([]) setShowSuggestions(false) setFoundBooking(null) // Clear previous search result if search term is empty setHighlightedTable(null) } }, [debouncedSearchTerm, bookings]) // Function to handle clicking a suggestion const handleSuggestionClick = (attendeeName: string) => { setSearchTerm(attendeeName) // Set input value to the clicked suggestion setShowSuggestions(false) // Hide suggestions const booking = bookings.find((b) => b.attendees.includes(attendeeName) && b.status !== "cancelled") if (booking) { setFoundBooking(booking) setHighlightedTable(booking.tableId) } else { setFoundBooking(null) setHighlightedTable(null) } } // Memoize table data for rendering, structured by rows for better layout control const tableLayout = useMemo(() => { const layout: { left: { id: string; type: "regular" | "vvip" }[][] right: { id: string; type: "regular" | "vvip" }[][] vvip: { id: string; type: "regular" | "vvip" } } = { left: [], right: [], vvip: { id: "VVIP", type: "vvip" }, } // Left side tables (grouped by rows as per image) const leftTableRows = [ [1, 2, 3], [8, 9, 10], [14, 15, 16], [20, 21, 22], [26, 27, 28], [32, 33, 34], [38, 39, 40], [44, 45, 46], [49, 50], // This row has 2 tables [54, 55, 56], ] leftTableRows.forEach((rowTables) => { layout.left.push( rowTables.map((tableNum) => ({ id: `T${tableNum}`, type: "regular", })), ) }) // Right side tables (grouped by rows as per image) const rightTableRows = [ [5, 6, 7], [11, 12, 13], [17, 18, 19], [23, 24, 25], [29, 30, 31], [35, 36, 37], [41, 42, 43], [47, 48], // This row has 2 tables [51, 52, 53], ["R", 57, 58], // 'R' is a string ID ] rightTableRows.forEach((rowTables) => { layout.right.push( rowTables.map((tableId) => ({ id: typeof tableId === "number" ? `T${tableId}` : String(tableId), type: "regular", })), ) }) return layout }, []) const getTableClass = (seatId: string) => { const isHighlighted = highlightedTable === seatId const seat = seats[seatId] const isBooked = seat ? !seat.available : false // A seat is booked if not available let baseClasses = "relative flex items-center justify-center rounded-full border-2 transition-all duration-300 ease-in-out text-xs sm:text-sm font-medium" let colorClasses = "" if (seatId === "VVIP") { baseClasses = "relative flex items-center justify-center rounded-full border-2 transition-all duration-300 ease-in-out font-bold text-base sm:text-lg" colorClasses = isHighlighted ? "border-red-500 bg-red-500/30 text-red-400 animate-pulse-highlight" : isBooked ? "border-red-700 bg-red-700/20 text-red-300" : "border-red-500/50 bg-red-500/10 text-red-400" } else { colorClasses = isHighlighted ? "border-yellow-400 bg-yellow-400/30 text-yellow-400 animate-pulse-highlight" : isBooked ? "border-gray-600 bg-gray-800/50 text-gray-400" : "border-white/30 bg-black/50 text-white/70" } return `${baseClasses} ${colorClasses}` } return (

setShowSuggestions(false)}> {/* Black and gold background */}

{/* Stars background */}

{Array.from({ length: 80 }).map((_, i) => (

))}

{/* Header */}

{/* Main content */}

{/* Page title */}

座位查询

Find Your Table

{/* Search section */}

查找您的座位 | Find Your Seat

请输入预订人姓名查询座位位置
Please enter the booking name to find your table location

setSearchTerm(e.target.value)} onFocus={() => searchTerm.trim() && suggestions.length > 0 && setShowSuggestions(true)} className="w-full pl-10 pr-4 py-2 sm:py-3 bg-black/50 border border-yellow-400/30 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-400/20 text-sm sm:text-base" /> {showSuggestions && suggestions.length > 0 && (

{ e.stopPropagation() // Prevent hiding suggestions immediately handleSuggestionClick(name) }} > {name}

)}

{/* Search results */} {foundBooking && (

找到您的座位！

{foundBooking.attendees.join(", ")} 的座位在{" "} {foundBooking.tableId}

位置: {foundBooking.tableLocation}

座位图中已高亮显示您的座位位置

)} {/* No results message - only show if search term is present and no booking found and no suggestions */} {searchTerm.trim() && !foundBooking && suggestions.length === 0 && (

未找到匹配的预订人姓名，请检查拼写或联系工作人员

No matching booking name found. Please check spelling or contact staff.

)} {/* Add reset data button - only in development */} {process.env.NODE_ENV === "development" && (

)}

{/* Seating Chart */}

座位平面图 | Seating Chart

{/* Stage */}

舞台 | STAGE

{/* Top Green/Red Dots */}

{Array.from({ length: 20 }).map((_, i) => (

))}

{/* VVIP Table */}

VVIP

12PAX

{/* Lion Dance Aisle (Vertical path, horizontal text) */}

Lion Dance {/* Arrow pointing up */}

{/* Main Entrance */}

入口处 | Main Entrance

{/* Left Side Tables */}

{tableLayout.left.map((row, rowIndex) => (

{row.map((table) => (

{table.id.replace("T", "")}

))}

{/* Right Side Tables */}

{tableLayout.right.map((row, rowIndex) => (

{row.map((table) => (

{table.id.replace("T", "")}

))}

{/* Legend */}

已选择 | Selected

已预订 | Booked

可用 | Available

VVIP

{/* Contact information */}

联系我们 | Contact Information

Master Andrew Yap 葉师傅

活动联系人 | Event Contact Person

电话 | Phone

+60 16-681 2728

邮箱 | Email

xuanlongsports.msia@gmail.com

地点 | Venue

王岳海银星宴会厅
Galaxy Banquet Hall

WhatsApp 联系发送邮件 | Send Email

{/* Event info summary */}

活动信息 | Event Information

2025年8月1日

August 1, 2025 (Friday)

晚上7:00

7:00 PM

座位有限

Limited Seating

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Save, Edit, Check, X, LogOut, Lock, Plus, Trash2, FileText } from "lucide-react" import { DataService, type Booking, type SeatData } from "@/services/data-service" // Simple authentication state management interface AuthState { isAuthenticated: boolean username: string | null } export default function AdminPage() { const [auth, setAuth] = useState({ isAuthenticated: false, username: null, }) const [loginForm, setLoginForm] = useState({ username: "", password: "", }) const [loginError, setLoginError] = useState(null) const [bookings, setBookings] = useState([]) const [seats, setSeats] = useState>({}) const [editMode, setEditMode] = useState(null) const [editForm, setEditForm] = useState(null) const [showAddForm, setShowAddForm] = useState(false) const [newBookingForm, setNewBookingForm] = useState>({ attendees: [], // Changed to array contactInfo: "", tableId: "", notes: "", status: "confirmed", }) const [searchTerm, setSearchTerm] = useState("") const [currentView, setCurrentView] = useState<"bookings" | "seats">("bookings") const [seatEditMode, setSeatEditMode] = useState(null) const [seatEditForm, setSeatEditForm] = useState(null) useEffect(() => { const loadData = () => { setBookings(DataService.getBookings()) setSeats(DataService.getSeats()) DataService.updateSeatAvailability() // Ensure availability is up-to-date } loadData() const handleStorageUpdate = () => { loadData() } window.addEventListener("storage-update", handleStorageUpdate) window.addEventListener("storage", handleStorageUpdate) return () => { window.removeEventListener("storage-update", handleStorageUpdate) window.removeEventListener("storage", handleStorageUpdate) } }, []) const handleLogin = (e: React.FormEvent) => { e.preventDefault() if (loginForm.username === "admin" && loginForm.password === "password") { setAuth({ isAuthenticated: true, username: loginForm.username, }) setLoginError(null) } else { setLoginError("用户名或密码错误") } } const handleLogout = () => { setAuth({ isAuthenticated: false, username: null, }) } const startEdit = (bookingId: string) => { const booking = bookings.find((b) => b.id === bookingId) if (booking) { setEditMode(bookingId) setEditForm({ ...booking }) } } const cancelEdit = () => { setEditMode(null) setEditForm(null) } const saveEdit = () => { if (editForm && editMode) { const updatedBookings = bookings.map((booking) => (booking.id === editMode ? { ...editForm } : booking)) setBookings(updatedBookings) DataService.saveBookings(updatedBookings) DataService.updateSeatAvailability() // Re-sync seat availability after booking changes setEditMode(null) setEditForm(null) } } const addNewBooking = () => { if ( newBookingForm.attendees && newBookingForm.attendees.length > 0 && newBookingForm.contactInfo && newBookingForm.tableId ) { const seatInfo = seats[newBookingForm.tableId] if (!seatInfo) { alert("请选择一个有效的桌号。") return } const newBooking: Booking = { id: `b${Date.now()}`, attendees: newBookingForm.attendees, contactInfo: newBookingForm.contactInfo, tableId: newBookingForm.tableId, tableType: seatInfo.type, tableLocation: seatInfo.location, bookingDate: new Date().toISOString().split("T")[0], status: newBookingForm.status as "confirmed" | "pending" | "cancelled", notes: newBookingForm.notes, } const updatedBookings = [...bookings, newBooking] setBookings(updatedBookings) DataService.saveBookings(updatedBookings) DataService.updateSeatAvailability() // Re-sync seat availability after booking changes setNewBookingForm({ attendees: [], contactInfo: "", tableId: "", notes: "", status: "confirmed", }) setShowAddForm(false) } else { alert("请填写所有必填项 (预订人姓名, 联系方式, 桌号)。") } } const deleteBooking = (bookingId: string) => { const booking = bookings.find((b) => b.id === bookingId) if (booking && window.confirm(`确定要删除 ${booking.attendees.join(", ")} 的预订吗？`)) { const updatedBookings = bookings.filter((b) => b.id !== bookingId) setBookings(updatedBookings) DataService.saveBookings(updatedBookings) DataService.updateSeatAvailability() // Re-sync seat availability after booking changes } } const handleEditChange = (e: React.ChangeEvent) => { if (!editForm) return const { name, value } = e.target if (name === "attendees") { setEditForm((prev) => prev ? { ...prev, attendees: value .split(",") .map((s) => s.trim()) .filter((s) => s), } : null, ) } else { setEditForm((prev) => (prev ? { ...prev, [name]: value } : null)) } } const handleNewBookingChange = (e: React.ChangeEvent) => { const { name, value } = e.target if (name === "attendees") { setNewBookingForm((prev) => ({ ...prev, attendees: value .split(",") .map((s) => s.trim()) .filter((s) => s), })) } else { setNewBookingForm((prev) => ({ ...prev, [name]: value })) } } const startEditSeat = (seatId: string) => { const seat = seats[seatId] if (seat) { setSeatEditMode(seatId) setSeatEditForm({ ...seat }) } } const cancelEditSeat = () => { setSeatEditMode(null) setSeatEditForm(null) } const saveEditSeat = () => { if (seatEditForm && seatEditMode) { const updatedSeats = { ...seats, [seatEditMode]: { ...seatEditForm } } setSeats(updatedSeats) DataService.saveSeats(updatedSeats) setSeatEditMode(null) setSeatEditForm(null) } } const handleSeatEditChange = (e: React.ChangeEvent) => { if (!seatEditForm) return const { name, value, type } = e.target as HTMLInputElement if (type === "number") { setSeatEditForm((prev) => (prev ? { ...prev, [name]: Number.parseFloat(value) } : null)) } else { setSeatEditForm((prev) => (prev ? { ...prev, [name]: value } : null)) } } const exportBookingsToCSV = () => { const headers = ["预订ID", "预订人姓名", "联系方式", "桌号", "人数", "桌位类型", "位置", "预订日期", "状态", "备注"] const bookingRows = bookings.map((booking) => [ booking.id, booking.attendees.join("; "), // Join attendees with semicolon for CSV booking.contactInfo, booking.tableId, booking.attendees.length.toString(), // Number of attendees booking.tableType === "vvip" ? "VVIP" : booking.tableType === "vip" ? "VIP" : "普通", booking.tableLocation, booking.bookingDate, booking.status === "confirmed" ? "已确认" : booking.status === "pending" ? "待确认" : "已取消", booking.notes || "", ]) const csvContent = [ headers.join(","), ...bookingRows.map((row) => row.map((cell) => `"${cell.replace(/"/g, '""')}"`).join(",")), ].join("\n") const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) const link = document.createElement("a") const url = URL.createObjectURL(blob) link.setAttribute("href", url) link.setAttribute("download", `预订数据_${new Date().toISOString().split("T")[0]}.csv`) link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) } const saveAllChanges = () => { DataService.updateSeatAvailability() alert("数据已保存并同步！") } const resetAllData = () => { if (window.confirm("确定要重置所有数据到初始状态吗？这将清除所有更改。")) { DataService.resetToInitialData() alert("数据已重置到初始状态！") window.location.reload() } } const filteredBookings = bookings.filter( (booking) => booking.attendees.some((name) => name.toLowerCase().includes(searchTerm.toLowerCase())) || booking.tableId.toLowerCase().includes(searchTerm.toLowerCase()) || booking.contactInfo.toLowerCase().includes(searchTerm.toLowerCase()), ) const availableSeats = Object.values(seats).filter((seat) => seat.available) if (!auth.isAuthenticated) { return (

{Array.from({ length: 80 }).map((_, i) => (

))}

座位管理系统

{loginError && (

{loginError}

)}

用户名 setLoginForm((prev) => ({ ...prev, username: e.target.value }))} className="w-full px-3 sm:px-4 py-2 sm:py-3 bg-black/50 border border-yellow-400/30 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-400/20 text-sm sm:text-base" placeholder="输入管理员用户名" required />

密码 setLoginForm((prev) => ({ ...prev, password: e.target.value }))} className="w-full px-3 sm:px-4 py-2 sm:py-3 bg-black/50 border border-yellow-400/30 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-400/20 text-sm sm:text-base" placeholder="输入密码" required />

返回主页

) } return (

{Array.from({ length: 80 }).map((_, i) => (

))}

{/* Header */}

座位管理系统

欢迎, {auth.username}

{/* Navigation Tabs */}

{/* Main content */}

{currentView === "bookings" ? ( <> {/* Booking Management View */}

setSearchTerm(e.target.value)} className="w-full pl-4 pr-4 py-2 bg-black/50 border border-yellow-400/30 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-400/20" />

总预订: {bookings.length}

已确认: {bookings.filter((b) => b.status === "confirmed").length}

待确认: {bookings.filter((b) => b.status === "pending").length}

{/* Add New Booking Form */} {showAddForm && (

新增预订

预订人姓名 (逗号分隔)

</div>
                    <div>
                      <label className="block text-white font-medium mb-2">联系方式</label>
                      <input
                        type="text"
                        name="contactInfo"
                        value={newBookingForm.contactInfo || ""}
                        onChange={handleNewBookingChange}
                        className="w-full px-3 py-2 bg-black/50 border border-yellow-400/30 rounded text-white"
                        placeholder="输入联系方式"
                      />
                    </div>
                    <div>
                      <label className="block text-white font-medium mb-2">选择座位</label>
                      <select
                        name="tableId"
                        value={newBookingForm.tableId || ""}
                        onChange={handleNewBookingChange}
                        className="w-full px-3 py-2 bg-black/50 border border-yellow-400/30 rounded text-white"
                      >
                        <option value="">选择座位</option>
                        {availableSeats.map((seat) => (
                          <option key={seat.id} value={seat.id}>
                            {seat.id} - {seat.type === "vvip" ? seat.sponsor : seat.location} (RM {seat.price})
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="block text-white font-medium mb-2">状态</label>
                      <select
                        name="status"
                        value={newBookingForm.status || "confirmed"}
                        onChange={handleNewBookingChange}
                        className="w-full px-3 py-2 bg-black/50 border border-yellow-400/30 rounded text-white"
                      >
                        <option value="confirmed">已确认</option>
                        <option value="pending">待确认</option>
                        <option value="cancelled">已取消</option>
                      </select>
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-white font-medium mb-2">备注</label>
                      <textarea
                        name="notes"
                        value={newBookingForm.notes || ""}
                        onChange={handleNewBookingChange}
                        className="w-full px-3 py-2 bg-black/50 border border-yellow-400/30 rounded text-white"
                        rows={3}
                        placeholder="输入备注信息"
                      />
                    </div>
                  </div>
                  <div className="mt-4 flex justify-end space-x-2">
                    <button
                      onClick={() => setShowAddForm(false)}
                      className="bg-gray-500/20 text-white px-4 py-2 rounded hover:bg-gray-500/40"
                    >
                      取消
                    </button>
                    <button
                      onClick={addNewBooking}
                      className="bg-green-500/20 text-green-400 px-4 py-2 rounded hover:bg-green-500/40"
                    >
                      保存
                    </button>
                  </div>
                </div>
              )}

{/* Booking Table */}
              <div className="content-card rounded-lg p-6 border border-yellow-400/30 golden-glow overflow-x-auto">
                <div className="flex justify-between items-center mb-4">
                  <h2 className="text-xl font-bold text-yellow-400">预订管理</h2>
                  <button
                    onClick={exportBookingsToCSV}
                    className="bg-blue-500/20 text-blue-400 px-4 py-2 rounded hover:bg-blue-500/40 flex items-center space-x-2"
                  >
                    <FileText className="w-5 h-5" />
                    <span>导出数据</span>
                  </button>
                </div>
                <table className="w-full text-white">
                  <thead className="border-b border-yellow-400/30">
                    <tr>
                      <th className="py-3 px-4 text-left">预订人</th>
                      <th className="py-3 px-4 text-left">桌号</th>
                      <th className="py-3 px-4 text-left">联系方式</th>
                      <th className="py-3 px-4 text-left">人数</th>
                      <th className="py-3 px-4 text-left">预订日期</th>
                      <th className="py-3 px-4 text-left">状态</th>
                      <th className="py-3 px-4 text-left">备注</th>
                      <th className="py-3 px-4 text-right">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredBookings.map((booking) => (
                      <tr key={booking.id} className="border-b border-white/10 hover:bg-white/5">
                        {editMode === booking.id ? (
                          // Edit mode
                          <>
                            <td className="py-3 px-4">
                              <textarea
                                name="attendees"
                                value={editForm?.attendees?.join(", ") || ""}
                                onChange={handleEditChange}
                                className="w-full px-2 py-1 bg-black/50 border border-yellow-400/30 rounded text-white"
                                rows={1}
                              />
                            </td>
                            <td className="py-3 px-4">
                              <select
                                name="tableId"
                                value={editForm?.tableId || ""}
                                onChange={handleEditChange}
                                className="w-full px-2 py-1 bg-black/50 border border-yellow-400/30 rounded text-white"
                              >
                                <option value={booking.tableId}>{booking.tableId}</option>
                                {availableSeats.map((seat) => (
                                  <option key={seat.id} value={seat.id}>
                                    {seat.id}
                                  </option>
                                ))}
                              </select>
                            </td>
                            <td className="py-3 px-4">
                              <input
                                type="text"
                                name="contactInfo"
                                value={editForm?.contactInfo || ""}
                                onChange={handleEditChange}
                                className="w-full px-2 py-1 bg-black/50 border border-yellow-400/30 rounded text-white"
                              />
                            </td>
                            <td className="py-3 px-4">
                              <input
                                type="number"
                                name="seatCount" // This field is now derived, but kept for display/input consistency
                                value={editForm?.attendees?.length || 0}
                                onChange={() => {}} // Read-only
                                className="w-full px-2 py-1 bg-black/50 border border-yellow-400/30 rounded text-white"
                                disabled
                              />
                            </td>
                            <td className="py-3 px-4">
                              <input
                                type="date"
                                name="bookingDate"
                                value={editForm?.bookingDate || ""}
                                onChange={handleEditChange}
                                className="w-full px-2 py-1 bg-black/50 border border-yellow-400/30 rounded text-white"
                              />
                            </td>
                            <td className="py-3 px-4">
                              <select
                                name="status"
                                value={editForm?.status || ""}
                                onChange={handleEditChange}
                                className="w-full px-2 py-1 bg-black/50 border border-yellow-400/30 rounded text-white"
                              >
                                <option value="confirmed">已确认</option>
                                <option value="pending">待确认</option>
                                <option value="cancelled">已取消</option>
                              </select>
                            </td>
                            <td className="py-3 px-4">
                              <input
                                type="text"
                                name="notes"
                                value={editForm?.notes || ""}
                                onChange={handleEditChange}
                                className="w-full px-2 py-1 bg-black/50 border border-yellow-400/30 rounded text-white"
                              />
                            </td>
                            <td className="py-3 px-4 text-right">
                              <div className="flex justify-end space-x-2">
                                <button
                                  onClick={saveEdit}
                                  className="bg-green-500/20 text-green-400 p-1 rounded hover:bg-green-500/40"
                                  title="保存"
                                >
                                  <Check className="w-5 h-5" />
                                </button>
                                <button
                                  onClick={cancelEdit}
                                  className="bg-red-500/20 text-red-400 p-1 rounded hover:bg-red-500/40"
                                  title="取消"
                                >
                                  <X className="w-5 h-5" />
                                </button>
                              </div>
                            </td>
                          </>
                        ) : (
                          // View mode
                          <>
                            <td className="py-3 px-4">{booking.attendees.join(", ")}</td>
                            <td className="py-3 px-4">
                              <span
                                className={`px-2 py-1 rounded text-xs ${
                                  booking.tableType === "vvip"
                                    ? "bg-red-500/20 text-red-400"
                                    : booking.tableType === "vip"
                                      ? "bg-yellow-400/20 text-yellow-400"
                                      : "bg-white/10 text-white/70"
                                }`}
                              >
                                {booking.tableId}
                              </span>
                            </td>
                            <td className="py-3 px-4">{booking.contactInfo}</td>
                            <td className="py-3 px-4">{booking.attendees.length}</td>
                            <td className="py-3 px-4">{booking.bookingDate}</td>
                            <td className="py-3 px-4">
                              <span
                                className={`px-2 py-1 rounded text-xs ${
                                  booking.status === "confirmed"
                                    ? "bg-green-500/20 text-green-400"
                                    : booking.status === "pending"
                                      ? "bg-orange-500/20 text-orange-400"
                                      : "bg-red-500/20 text-red-400"
                                }`}
                              >
                                {booking.status === "confirmed"
                                  ? "已确认"
                                  : booking.status === "pending"
                                    ? "待确认"
                                    : "已取消"}
                              </span>
                            </td>
                            <td className="py-3 px-4">{booking.notes || "-"}</td>
                            <td className="py-3 px-4 text-right">
                              <div className="flex justify-end space-x-2">
                                <button
                                  onClick={() => startEdit(booking.id)}
                                  className="bg-blue-500/20 text-blue-400 p-1 rounded hover:bg-blue-500/40"
                                  title="编辑"
                                >
                                  <Edit className="w-5 h-5" />
                                </button>
                                <button
                                  onClick={() => deleteBooking(booking.id)}
                                  className="bg-red-500/20 text-red-400 p-1 rounded hover:bg-red-500/40"
                                  title="删除"
                                >
                                  <Trash2 className="w-5 h-5" />
                                </button>
                              </div>
                            </td>
                          </>
                        )}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </>
          ) : (
            <>
              {/* Seat Management View */}
              <div className="content-card rounded-lg p-6 border border-yellow-400/30 golden-glow">
                <h2 className="text-xl font-bold text-yellow-400 mb-4">座位状态概览</h2>
                <div className="grid md:grid-cols-4 gap-4 mb-6">
                  <div className="bg-black/50 border border-yellow-400/30 rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-yellow-400">{Object.keys(seats).length}</div>
                    <div className="text-white/70 text-sm">总座位数</div>
                  </div>
                  <div className="bg-black/50 border border-green-500/30 rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-green-400">{availableSeats.length}</div>
                    <div className="text-white/70 text-sm">可用座位</div>
                  </div>
                  <div className="bg-black/50 border border-red-500/30 rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-red-400">
                      {Object.values(seats).filter((seat) => !seat.available).length}
                    </div>
                    <div className="text-white/70 text-sm">已预订</div>
                  </div>
                  <div className="bg-black/50 border border-yellow-400/30 rounded-lg p-4 text-center">
                    <div className="text-2xl font-bold text-yellow-400">
                      RM{" "}
                      {bookings
                        .filter((b) => b.status === "confirmed")
                        .reduce((total, booking) => {
                          const seat = seats[booking.tableId]
                          return total + (seat ? seat.price : 0)
                        }, 0)
                        .toLocaleString()}
                    </div>
                    <div className="text-white/70 text-sm">总收入</div>
                  </div>
                </div>

{/* Seat Map Overview */}
                <div className="space-y-8">
                  {/* VVIP Area */}
                  <div>
                    <h3 className="text-lg font-semibold text-yellow-400 mb-4">VVIP 区域</h3>
                    <div className="grid grid-cols-1 gap-4">
                      {Object.values(seats)
                        .filter((seat) => seat.type === "vvip")
                        .map((seat) => {
                          const booking = bookings.find((b) => b.tableId === seat.id && b.status !== "cancelled")
                          return (
                            <div
                              key={seat.id}
                              className={`p-4 rounded-lg border-2 ${
                                seat.available
                                  ? "border-green-500/50 bg-green-500/10"
                                  : "border-red-500/50 bg-red-500/10"
                              }`}
                            >
                              <div className="text-center">
                                <div className="text-yellow-400 font-bold text-lg">{seat.id}</div>
                                <div className="text-white text-sm">{seat.sponsor}</div>
                                <div className="text-white/70 text-xs">RM {seat.price.toLocaleString()}</div>
                                {booking && (
                                  <div className="text-white text-xs mt-2 p-2 bg-black/50 rounded">
                                    预订人: {booking.attendees.join(", ")}
                                  </div>
                                )}
                                <div className="mt-2">
                                  <button
                                    onClick={() => startEditSeat(seat.id)}
                                    className="bg-blue-500/20 text-blue-400 px-2 py-1 rounded text-xs hover:bg-blue-500/40"
                                  >
                                    编辑座位信息
                                  </button>
                                </div>
                              </div>
                            </div>
                          )
                        })}
                    </div>
                  </div>

{/* Regular Area */}
                  <div>
                    <h3 className="text-lg font-semibold text-yellow-400 mb-4">普通区域</h3>
                    <div className="grid grid-cols-5 md:grid-cols-10 gap-2">
                      {Object.values(seats)
                        .filter((seat) => seat.type === "regular")
                        .map((seat) => {
                          const booking = bookings.find((b) => b.tableId === seat.id && b.status !== "cancelled")
                          return (
                            <div
                              key={seat.id}
                              className={`relative w-12 h-12 rounded-full border-2 flex items-center justify-center text-sm font-medium ${
                                seat.available
                                  ? "border-green-500/50 bg-green-500/10 text-green-400"
                                  : "border-red-500/50 bg-red-500/10 text-red-400"
                              }`}
                              title={booking ? `预订人: ${booking.attendees.join(", ")}` : "可用"}
                              onClick={() => startEditSeat(seat.id)}
                            >
                              {seat.id.replace("T", "")}
                            </div>
                          )
                        })}
                    </div>
                  </div>
                </div>

{/* Seat Edit Form */}
                {seatEditMode && seatEditForm && (
                  <div className="mt-8 p-6 border border-blue-400/30 rounded-lg bg-blue-500/10">
                    <h3 className="text-lg font-semibold text-blue-400 mb-4">编辑座位信息 - {seatEditMode}</h3>
                    <div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-white font-medium mb-2">座位类型</label>
                        <select
                          name="type"
                          value={seatEditForm.type}
                          onChange={handleSeatEditChange}
                          className="w-full px-3 py-2 bg-black/50 border border-blue-400/30 rounded text-white"
                          disabled
                        >
                          <option value="vvip">VVIP</option>
                          <option value="vip">VIP</option>
                          <option value="regular">普通</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-white font-medium mb-2">价格 (RM)</label>
                        <input
                          type="number"
                          name="price"
                          value={seatEditForm.price}
                          onChange={handleSeatEditChange}
                          className="w-full px-3 py-2 bg-black/50 border border-blue-400/30 rounded text-white"
                        />
                      </div>
                      <div>
                        <label className="block text-white font-medium mb-2">容量</label>
                        <input
                          type="number"
                          name="capacity"
                          value={seatEditForm.capacity}
                          onChange={handleSeatEditChange}
                          className="w-full px-3 py-2 bg-black/50 border border-blue-400/30 rounded text-white"
                        />
                      </div>
                      <div>
                        <label className="block text-white font-medium mb-2">位置</label>
                        <input
                          type="text"
                          name="location"
                          value={seatEditForm.location}
                          onChange={handleSeatEditChange}
                          className="w-full px-3 py-2 bg-black/50 border border-blue-400/30 rounded text-white"
                        />
                      </div>
                      {(seatEditForm.type === "vvip" || seatEditForm.type === "vip") && (
                        <div>
                          <label className="block text-white font-medium mb-2">赞助信息</label>
                          <input
                            type="text"
                            name="sponsor"
                            value={seatEditForm.sponsor || ""}
                            onChange={handleSeatEditChange}
                            className="w-full px-3 py-2 bg-black/50 border border-blue-400/30 rounded text-white"
                            placeholder="例如: 特邀贵宾席"
                          />
                        </div>
                      )}
                    </div>
                    <div className="mt-4 flex justify-end space-x-2">
                      <button
                        onClick={cancelEditSeat}
                        className="bg-gray-500/20 text-white px-4 py-2 rounded hover:bg-gray-500/40"
                      >
                        取消
                      </button>
                      <button
                        onClick={saveEditSeat}
                        className="bg-blue-500/20 text-blue-400 px-4 py-2 rounded hover:bg-blue-500/40"
                      >
                        保存
                      </button>
                    </div>
                  </div>
                )}
              </div>
            </>
          )}

{/* Save and Reset Buttons */}
          <div className="mt-6 flex justify-end space-x-4">
            <button
              onClick={resetAllData}
              className="bg-red-500/20 text-red-400 px-4 py-2 rounded-lg font-semibold hover:bg-red-500/40 transition-colors flex items-center space-x-2 border border-red-500/30"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="w-5 h-5"
              >
                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
                <path d="M3 3v5h5"></path>
              </svg>
              <span>重置数据</span>
            </button>
            <button
              onClick={saveAllChanges}
              className="bg-yellow-400 text-black px-4 py-2 rounded-lg font-semibold hover:bg-yellow-300 transition-colors flex items-center space-x-2"
            >
              <Save className="w-5 h-5" />
              <span>保存所有更改</span>
            </button>
          </div>

{/* Back link */}
          <div className="mt-8 text-center">
            <Link href="/" className="text-white/70 hover:text-yellow-400">
              返回主页
            </Link>
          </div>
        </div>
      </div>

{/* Footer */}
      <footer className="w-full py-4 text-center text-white/60 text-sm z-10 bg-black/30 border-t border-yellow-400/10">
        <p>© 2025 国际玄龍體育總會 | INTERNATIONAL XUAN LONG SPORT ASSOCIATION. All rights reserved.</p>
      </footer>
    </main>
  )
}</article></body></html>