{/* Ambient glow orbs */}

{/* Header */}

ChronoSync

Team Availability Tracker

{/* Stats bar */}

{[{ label: 'Team', value: (uniqueUsers || []).length, icon: '👥', color: '#00D4FF' }, { label: 'Away', value: (entries ?? []).filter(e => e?.startDate <= today && e?.endDate >= today).length, icon: '🌴', color: '#39FF14' }, { label: 'Upcoming', value: (entries ?? []).filter(e => e?.startDate > today).length, icon: '📅', color: '#BD00FF' }].map((stat, i) => (

{stat.icon}

{stat.value}

{stat.label}

))}

{/* Team Orbit Avatars */}

{(uniqueUsers || []).map((u) => { const isActive = filterUserId === u.id; const memberMatch = (memberList || []).find(m => m?.id === u.id); const avatarUrl = memberMatch?.avatarUrl; return ( ); })}

{/* Chrono-Grid */}

{(sortedEntries || []).length === 0 ? (

🌌

No entries{filterUserId ? ' for this person' : ' yet'}

Tap the orb below to add unavailability

) : (

{(sortedEntries || []).map((entry, idx) => { if (!entry) return null; const isToday = entry.startDate <= today && entry.endDate >= today; const isPast = entry.endDate < today; const isFuture = entry.startDate > today; const days = getDayCount(entry.startDate, entry.endDate); const entryColor = entry.color || getColorForUser(entry.userId); const isJustAdded = justAddedId === entry.id; const isOwn = entry.userId === (user?.id || 'me'); return (

setSelectedEntry(entry)} style={{ padding: 16, borderRadius: 18, cursor: 'pointer', background: isJustAdded ? `linear-gradient(135deg, ${entryColor}22, ${entryColor}11)` : 'rgba(255,255,255,0.03)', border: `1px solid ${isJustAdded ? entryColor + '66' : isToday ? entryColor + '44' : 'rgba(255,255,255,0.06)'}`, backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)', transform: isJustAdded ? 'scale(1.02)' : 'scale(1)', boxShadow: isJustAdded ? `0 0 30px ${entryColor}33, 0 4px 20px rgba(0,0,0,0.3)` : isToday ? `0 0 20px ${entryColor}22, 0 2px 10px rgba(0,0,0,0.2)` : '0 2px 8px rgba(0,0,0,0.15)', opacity: isPast ? 0.5 : 1, position: 'relative', overflow: 'hidden', }} > {/* Holographic shimmer line */}

{/* Color indicator + avatar */}

{entry.isDemo ? '✦' : (isOwn ? '🫵' : (entry.userName?.[0] || '?'))}

{entry.isDemo && DEMO} {isOwn ? 'You' : (entry.userName || 'Unknown')} {isToday && ( AWAY NOW )} {isPast && ( PAST )}

{entry.reason || 'Away'}

📅 {formatDateRange(entry.startDate, entry.endDate)} {days} day{days !== 1 ? 's' : ''}

{/* Chevron */}

›

); })}

)}

{/* Floating Add Button (Aether Orb) */}

{/* Orb glow ring */}

{/* Detail Panel (Bottom Sheet) */} {selectedEntry && (

setSelectedEntry(null)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(5,5,16,0.7)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', }} >

e.stopPropagation()} style={{ width: '100%', maxWidth: 480, background: 'linear-gradient(180deg, rgba(15,15,40,0.98), rgba(10,10,30,0.99))', borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)', paddingLeft: 20, paddingRight: 20, border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none', boxShadow: '0 -8px 40px rgba(0,0,0,0.5)', }} > {/* Drag handle */}

{(() => { const ec = selectedEntry.color || getColorForUser(selectedEntry.userId); const days = getDayCount(selectedEntry.startDate, selectedEntry.endDate); const isOwn = selectedEntry.userId === (user?.id || 'me'); return (

{/* Holographic header bar */}

{isOwn ? '🫵' : (selectedEntry.userName?.[0] || '?')}

{isOwn ? 'You' : (selectedEntry.userName || 'Unknown')}

{selectedEntry.isDemo ? 'Demo Entry' : 'Team Member'}

Reason

{selectedEntry.reason || 'Away'}

From

{formatDate(selectedEntry.startDate)}

Until

{formatDate(selectedEntry.endDate)}

{days}

day{days !== 1 ? 's' : ''}

{isOwn && !selectedEntry.isDemo && ( )} {!isOwn && selectedEntry.userId && (() => { const m = (memberList || []).find(x => x?.id === selectedEntry.userId); return m?.handle ? ( ) : null; })()}

); })()}

)} {/* Add Modal (Aether Portal) */} {showAddModal && (

{ setShowAddModal(false); setDissolving(false); }} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(5,5,16,0.7)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', }} >

{/* Holographic top bar */}

🌀

Add Unavailability

When are you away?

Start Date setNewEntry({ ...newEntry, startDate: e.target.value })} min={today} style={{ width: '100%', height: 52, fontSize: 16, padding: '0 16px', borderRadius: 14, border: '1px solid rgba(0,212,255,0.25)', background: 'rgba(0,212,255,0.06)', color: '#e0e8ff', outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit', transition: 'border-color 0.3s, box-shadow 0.3s', }} onFocus={(e) => { e.target.style.borderColor = '#00D4FF'; e.target.style.boxShadow = '0 0 15px rgba(0,212,255,0.2)'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(0,212,255,0.25)'; e.target.style.boxShadow = 'none'; }} />

End Date setNewEntry({ ...newEntry, endDate: e.target.value })} min={newEntry.startDate || today} style={{ width: '100%', height: 52, fontSize: 16, padding: '0 16px', borderRadius: 14, border: '1px solid rgba(189,0,255,0.25)', background: 'rgba(189,0,255,0.06)', color: '#e0e8ff', outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit', transition: 'border-color 0.3s, box-shadow 0.3s', }} onFocus={(e) => { e.target.style.borderColor = '#BD00FF'; e.target.style.boxShadow = '0 0 15px rgba(189,0,255,0.2)'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(189,0,255,0.25)'; e.target.style.boxShadow = 'none'; }} />

Reason (optional) setNewEntry({ ...newEntry, reason: e.target.value })} placeholder="Vacation, conference, personal day..." style={{ width: '100%', height: 52, fontSize: 16, padding: '0 16px', borderRadius: 14, border: '1px solid rgba(57,255,20,0.2)', background: 'rgba(57,255,20,0.04)', color: '#e0e8ff', outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit', transition: 'border-color 0.3s, box-shadow 0.3s', }} onFocus={(e) => { e.target.style.borderColor = '#39FF14'; e.target.style.boxShadow = '0 0 15px rgba(57,255,20,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(57,255,20,0.2)'; e.target.style.boxShadow = 'none'; }} />

{/* Preview */} {newEntry.startDate && newEntry.endDate && (

✨

{formatDateRange(newEntry.startDate, newEntry.endDate)}

{getDayCount(newEntry.startDate, newEntry.endDate)} day{getDayCount(newEntry.startDate, newEntry.endDate) !== 1 ? 's' : ''} away {newEntry.reason ? ` • ${newEntry.reason}` : ''}

)}

); }