golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Connect frontend to real API — rooms, bookings, housekeeping, calendar

Browse Source 
- 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:
HotelSync
2026-03-17 13:49:30 +03:00
parent 17dbf629a2
commit 728b20417a
10 changed files with 678 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/pages/BookingsPage.tsx
View File

@@ -1,9 +1,10 @@
import { useState, useMemo } from 'react'
import { Search, Plus, ArrowUp, ArrowDown, ArrowUpDown, Clock, Pencil } from 'lucide-react'
import { MOCK_BOOKINGS, MOCK_ROOMS } from '../data/mockData'
import { useState, useMemo, useEffect } from 'react'
import { Search, Plus, ArrowUp, ArrowDown, ArrowUpDown, Clock, Pencil, Loader2 } from 'lucide-react'
import { RENTAL_OBJECTS, MOCK_RENTAL_BOOKINGS } from '../data/rentalData'
import { useModules } from '../contexts/ModulesContext'
import type { Booking, BookingStatus } from '../types'
import { useAuth } from '../contexts/AuthContext'
import { api } from '../lib/api'
import type { Booking, BookingStatus, Room } from '../types'
import type { RentalBooking } from '../data/rentalData'
import { RentalBookingModal } from '../components/rental/RentalBookingModal'
import { cn, BOOKING_STATUS_BADGE, BOOKING_STATUS_LABELS, SOURCE_COLORS, SOURCE_LABELS, formatCurrency, nightsCount } from '../lib/utils'
@@ -37,11 +38,15 @@ const COLUMNS: { key: SortKey | null; label: string }[] = [
type Tab = 'rooms' | 'rental'
export function BookingsPage() {
const { user } = useAuth()
const slug = user?.hotelSlug ?? ''
const { statuses } = useModules()
const isRentalActive = statuses['rental'] === 'active' || statuses['rental'] === 'trial'
const [tab, setTab] = useState<Tab>('rooms')
const [bookings, setBookings] = useState<Booking[]>(MOCK_BOOKINGS)
const [rooms, setRooms] = useState<Room[]>([])
const [bookings, setBookings] = useState<Booking[]>([])
const [loading, setLoading] = useState(true)
const [rentalBookings, setRentalBookings] = useState<RentalBooking[]>(MOCK_RENTAL_BOOKINGS)
const [newRentalStep, setNewRentalStep] = useState<'idle' | 'pick'>('idle')
const [rentalPickObj, setRentalPickObj] = useState(RENTAL_OBJECTS[0]?.id ?? '')
@@ -54,6 +59,14 @@ export function BookingsPage() {
const [sortKey, setSortKey] = useState<SortKey | null>(null)
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
useEffect(() => {
if (!slug) return
Promise.all([api.rooms.list(slug), api.bookings.list(slug)])
.then(([r, b]) => { setRooms(r); setBookings(b) })
.catch(console.error)
.finally(() => setLoading(false))
}, [slug])
const handleSort = (key: SortKey) => {
if (sortKey === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc')
else { setSortKey(key); setSortDir('asc') }
@@ -89,9 +102,65 @@ export function BookingsPage() {
b.guestPhone.includes(search)
})
const room = (id: string) => MOCK_ROOMS.find(r => r.id === id)
const room = (id: string) => rooms.find(r => r.id === id)
const rentalObj = (id: string) => RENTAL_OBJECTS.find(o => o.id === id)
const handleCreateBooking = 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])
setShowCreateModal(false)
} catch (err) {
console.error('Failed to create booking:', err)
}
}
const handleUpdateBooking = 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, paidAmount: data.paidAmount, notes: data.notes,
})
setBookings(prev => prev.map(b => b.id === id ? updated : b))
setSelected(null)
} 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 })),
)
setBookings(prev => {
let next = [...prev]
results.forEach(r => { next = next.map(b => b.id === r.id ? r : b) })
return next
})
setSelected(null)
} catch (err) {
console.error('Failed to bulk update bookings:', err)
}
}
if (loading) {
return (
<div className="flex items-center justify-center h-64">
<Loader2 size={24} className="animate-spin text-brand-600" />
</div>
)
}
return (
<div className="p-4 md:p-6 space-y-4">
{/* Header */}
@@ -285,9 +354,7 @@ export function BookingsPage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/40">
{[
'Гость', 'Объект', 'Дата', 'Время', 'Сумма', 'Статус', '',
].map((h, i) => (
{['Гость', 'Объект', 'Дата', 'Время', 'Сумма', 'Статус', ''].map((h, i) => (
<th key={i} className="text-left px-4 py-3 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">
{h}
</th>
@@ -336,7 +403,6 @@ export function BookingsPage() {
<button
onClick={() => setShowRentalModal({ obj, date: b.date, editBooking: b })}
className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 transition-colors"
title="Редактировать"
>
<Pencil size={13} />
</button>
@@ -356,21 +422,18 @@ export function BookingsPage() {
</div>
)}
{/* Create modal */}
{showCreateModal && (
{/* Create booking modal */}
{showCreateModal && rooms.length > 0 && (
<BookingModal
open
draft={{
roomId: MOCK_ROOMS[0].id,
roomId: rooms[0].id,
checkIn: format(new Date(), 'yyyy-MM-dd'),
checkOut: format(addDays(new Date(), 1), 'yyyy-MM-dd'),
}}
rooms={MOCK_ROOMS}
rooms={rooms}
onClose={() => setShowCreateModal(false)}
onSave={(data) => {
setBookings(prev => [...prev, data as Booking])
setShowCreateModal(false)
}}
onSave={handleCreateBooking}
/>
)}
@@ -379,25 +442,15 @@ export function BookingsPage() {
<BookingDetailPanel
booking={selected}
room={room(selected.roomId)}
rooms={MOCK_ROOMS}
rooms={rooms}
allBookings={bookings}
onClose={() => setSelected(null)}
onUpdate={(id, data) => {
setBookings(prev => prev.map(b => b.id === id ? { ...b, ...data } : b))
setSelected(null)
}}
onBulkUpdate={(updates) => {
setBookings(prev => {
let next = [...prev]
updates.forEach(u => { next = next.map(b => b.id === u.id ? { ...b, ...u.data } : b) })
return next
})
setSelected(null)
}}
onUpdate={handleUpdateBooking}
onBulkUpdate={handleBulkUpdate}
/>
)}
{/* New rental — step 1: pick object + date */}
{/* New rental — step 1 */}
{newRentalStep === 'pick' && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
<div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-sm p-6 space-y-4">
@@ -412,11 +465,7 @@ export function BookingsPage() {
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Дата</label>
<input
type="date" className="input"
value={rentalPickDate}
onChange={e => setRentalPickDate(e.target.value)}
/>
<input type="date" className="input" value={rentalPickDate} onChange={e => setRentalPickDate(e.target.value)} />
</div>
<div className="flex gap-2 justify-end">
<button onClick={() => setNewRentalStep('idle')} className="btn-secondary">Отмена</button>
@@ -434,7 +483,7 @@ export function BookingsPage() {
</div>
)}
{/* New rental — step 2: booking form */}
{/* New rental — step 2 */}
{showRentalModal && (
<RentalBookingModal
obj={showRentalModal.obj}