Connect frontend to real API — rooms, bookings, housekeeping, calendar
- src/lib/api.ts: central API client with JWT auto-refresh, snake_case→camelCase transform - src/contexts/AuthContext.tsx: real login via POST /api/auth/login - src/pages/RoomsPage.tsx: load rooms from API, create/update via API - src/pages/BookingsPage.tsx: load bookings + rooms from API - src/pages/HousekeepingPage.tsx: load today's tasks from API, update status via API - src/pages/CalendarPage.tsx: load rooms + bookings from API - src/types/index.ts: fix HousekeepingTask.priority to match DB (medium/urgent) - backend/src/routes/rooms.ts: update to use new column names (max_guests, base_rate) + all new fields - backend/src/routes/bookings.ts: update price_per_night→base_rate, add paid_amount to PATCH - backend/migrations/003_fix_constraints.sql: fix rooms.status values, add paid_amount, inquiry status, other source - public/robots.txt + index.html: noindex for SPA inner pages Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,44 +1,87 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { BookingCalendar } from '../components/calendar/BookingCalendar'
|
||||
import { MOCK_ROOMS, MOCK_BOOKINGS } from '../data/mockData'
|
||||
import { RENTAL_OBJECTS, MOCK_RENTAL_BOOKINGS } from '../data/rentalData'
|
||||
import { useModules } from '../contexts/ModulesContext'
|
||||
import type { Booking } from '../types'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { api } from '../lib/api'
|
||||
import type { Room, Booking } from '../types'
|
||||
import type { RentalBooking } from '../data/rentalData'
|
||||
|
||||
export function CalendarPage() {
|
||||
const { user } = useAuth()
|
||||
const slug = user?.hotelSlug ?? ''
|
||||
const { statuses } = useModules()
|
||||
const isRentalActive = statuses['rental'] === 'active' || statuses['rental'] === 'trial'
|
||||
|
||||
const [bookings, setBookings] = useState<Booking[]>(MOCK_BOOKINGS)
|
||||
const [rooms, setRooms] = useState<Room[]>([])
|
||||
const [bookings, setBookings] = useState<Booking[]>([])
|
||||
const [fadingBookings, setFadingBookings] = useState<Set<string>>(new Set())
|
||||
const [rentalBookings, setRentalBookings] = useState<RentalBooking[]>(MOCK_RENTAL_BOOKINGS)
|
||||
|
||||
const handleCreate = (data: Partial<Booking>) => {
|
||||
setBookings(prev => [...prev, data as Booking])
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!slug) return
|
||||
Promise.all([
|
||||
api.rooms.list(slug),
|
||||
api.bookings.list(slug),
|
||||
]).then(([r, b]) => {
|
||||
setRooms(r)
|
||||
setBookings(b)
|
||||
}).catch(console.error)
|
||||
}, [slug])
|
||||
|
||||
const handleUpdate = (id: string, data: Partial<Booking>) => {
|
||||
setBookings(prev => prev.map(b => b.id === id ? { ...b, ...data } : b))
|
||||
if (data.status === 'cancelled') {
|
||||
setFadingBookings(prev => new Set([...prev, id]))
|
||||
setTimeout(() => {
|
||||
setBookings(prev => prev.filter(b => b.id !== id))
|
||||
setFadingBookings(prev => {
|
||||
const next = new Set(prev)
|
||||
next.delete(id)
|
||||
return next
|
||||
})
|
||||
}, 900)
|
||||
const handleCreate = async (data: Partial<Booking>) => {
|
||||
try {
|
||||
const created = await api.bookings.create(slug, {
|
||||
roomId: data.roomId, guestName: data.guestName, guestEmail: data.guestEmail,
|
||||
checkIn: data.checkIn, checkOut: data.checkOut,
|
||||
adults: data.adults, children: data.children,
|
||||
status: data.status, source: data.source,
|
||||
totalAmount: data.totalAmount, notes: data.notes,
|
||||
})
|
||||
setBookings(prev => [...prev, created])
|
||||
} catch (err) {
|
||||
console.error('Failed to create booking:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkUpdate = (updates: Array<{ id: string; data: Partial<Booking> }>) => {
|
||||
setBookings(prev => {
|
||||
let next = [...prev]
|
||||
updates.forEach(u => { next = next.map(b => b.id === u.id ? { ...b, ...u.data } : b) })
|
||||
return next
|
||||
})
|
||||
const handleUpdate = async (id: string, data: Partial<Booking>) => {
|
||||
try {
|
||||
const updated = await api.bookings.update(slug, id, {
|
||||
guestName: data.guestName, guestEmail: data.guestEmail,
|
||||
checkIn: data.checkIn, checkOut: data.checkOut,
|
||||
adults: data.adults, children: data.children,
|
||||
status: data.status, source: data.source,
|
||||
totalAmount: data.totalAmount, notes: data.notes,
|
||||
})
|
||||
setBookings(prev => prev.map(b => b.id === id ? updated : b))
|
||||
if (data.status === 'cancelled') {
|
||||
setFadingBookings(prev => new Set([...prev, id]))
|
||||
setTimeout(() => {
|
||||
setBookings(prev => prev.filter(b => b.id !== id))
|
||||
setFadingBookings(prev => { const n = new Set(prev); n.delete(id); return n })
|
||||
}, 900)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to update booking:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkUpdate = async (updates: Array<{ id: string; data: Partial<Booking> }>) => {
|
||||
try {
|
||||
const results = await Promise.all(
|
||||
updates.map(u => api.bookings.update(slug, u.id, {
|
||||
status: u.data.status, checkIn: u.data.checkIn,
|
||||
checkOut: u.data.checkOut, roomId: u.data.roomId,
|
||||
})),
|
||||
)
|
||||
setBookings(prev => {
|
||||
let next = [...prev]
|
||||
results.forEach(r => { next = next.map(b => b.id === r.id ? r : b) })
|
||||
return next
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('Failed to bulk update bookings:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRentalCreate = (b: RentalBooking) => {
|
||||
@@ -49,7 +92,7 @@ export function CalendarPage() {
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<BookingCalendar
|
||||
rooms={MOCK_ROOMS}
|
||||
rooms={rooms}
|
||||
bookings={bookings}
|
||||
onBookingCreate={handleCreate}
|
||||
onBookingUpdate={handleUpdate}
|
||||
|
||||
Reference in New Issue
Block a user