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

feat: visual overlay for maintenance/blocked rooms in calendar

Browse Source 
- Diagonal stripe overlay on date cells: orange tint for maintenance,
  grey for blocked
- Room number and name dimmed when maintenance/blocked
- Show 🧹 dirty/cleaning indicator under room number (when not in maintenance)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-23 14:38:36 +03:00
parent fd50e02be0
commit 7bcc1ca0ab
1 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/calendar/BookingCalendar.tsx
View File

@@ -453,8 +453,13 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
>
<div>
<div className="flex items-center gap-1.5">
<span className="text-sm font-bold text-slate-900 dark:text-slate-100">{room.number}</span>
{room.name && !isMobile && <span className="text-xs text-slate-500 dark:text-slate-400">{room.name}</span>}
<span className={cn(
'text-sm font-bold',
room.status === 'maintenance' || room.status === 'blocked'
? 'text-slate-400 dark:text-slate-500'
: 'text-slate-900 dark:text-slate-100',
)}>{room.number}</span>
{room.name && !isMobile && <span className="text-xs text-slate-400 dark:text-slate-500">{room.name}</span>}
</div>
{room.status === 'maintenance' && (
<span className="text-[10px] text-orange-500 font-medium leading-none">🔧 ремонт</span>
@@ -462,11 +467,31 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
{room.status === 'blocked' && (
<span className="text-[10px] text-slate-400 font-medium leading-none">🔒 закрыт</span>
)}
{room.status !== 'maintenance' && room.status !== 'blocked' &&
(room.housekeepingStatus === 'dirty' || room.housekeepingStatus === 'cleaning') && (
<span className="text-[10px] text-red-500 dark:text-red-400 font-medium leading-none">
{room.housekeepingStatus === 'dirty' ? '🧹 грязный' : '🧹 убирается'}
</span>
)}
</div>
</div>
{/* Day cells + booking blocks */}
<div className="relative flex-1">
{/* Maintenance / blocked overlay */}
{(room.status === 'maintenance' || room.status === 'blocked') && (
<div
className="absolute inset-0 z-[1] pointer-events-none"
style={{
background: room.status === 'maintenance'
? 'repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(251,146,60,0.12) 6px, rgba(251,146,60,0.12) 12px)'
: 'repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(148,163,184,0.15) 6px, rgba(148,163,184,0.15) 12px)',
backgroundColor: room.status === 'maintenance'
? 'rgba(251,146,60,0.05)'
: 'rgba(148,163,184,0.08)',
}}
/>
)}
<div className="flex h-full">
{dates.map((date, i) => {
const isWe = date.getDay() === 0 || date.getDay() === 6
@@ -476,8 +501,8 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
key={i}
className={cn(
'shrink-0 h-full border-r border-slate-200 dark:border-slate-700 cursor-crosshair',
isWe && 'bg-slate-50 dark:bg-slate-800/60',
isTod && 'bg-brand-50/50 dark:bg-brand-900/10',
isWe && !room.status.match(/maintenance|blocked/) && 'bg-slate-50 dark:bg-slate-800/60',
isTod && !room.status.match(/maintenance|blocked/) && 'bg-brand-50/50 dark:bg-brand-900/10',
)}
style={{ width: CELL_WIDTH }}
onMouseDown={(e) => handleCellMouseDown(room.id, i, e)}