{/* HEADER */}

Club Hub

{(memberList || []).length} {(memberList || []).length === 1 ? 'Member' : 'Members'} • {isMultiplayer ? 'Online' : 'Solo Mode'}

{/* CONTENT AREA */}

{/* DASHBOARD TAB */} {activeTab === 'dashboard' && (

{/* NEXT MEETING CARD */}

NEXT UP 🗓️

{nextMeeting ? ( <>

{nextMeeting.title}

📍 {nextMeeting.location}

Starts In

{formatCountdown(nextMeeting.date)}

) : (

No upcoming meetings

)}

{/* Decorative shapes */}

{/* ANNOUNCEMENTS */}

Announcements

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

No announcements yet.

) : ( announcements .sort((a, b) => (b.pinned === a.pinned ? 0 : b.pinned ? 1 : -1)) .map(post => { const roleStyle = getRoleColor(post.authorRole); return (

{post.pinned && (

📌 PINNED

)}

👤

{post.authorName}

{post.authorRole && (

{post.authorRole}

)}

{new Date(post.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}

{post.text}

{/* Admin Actions */} {(post.createdBy === safeUser.id || getRole(safeUser.id) === 'President' || !isMultiplayer) && (

)}

); }) )}

)} {/* SCHEDULE TAB */} {activeTab === 'schedule' && (

Schedule

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

📅

No upcoming meetings.

) : ( (upcomingMeetings || []).map(m => (

{new Date(m.date).toLocaleDateString(undefined, { month: 'short' })} {new Date(m.date).getDate()}

{m.title}

🕒 {new Date(m.date).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })} 📍 {m.location}

)) )}

)} {/* DIRECTORY TAB */} {activeTab === 'members' && (

Member Directory

{(memberList || []).map(member => { const role = getRole(member.id); const style = getRoleColor(role); return (

member.handle && openProfile && openProfile(member.handle)} style={{ width: 44, height: 44, borderRadius: '50%', background: member.avatarUrl ? `url(${member.avatarUrl}) center/cover` : '#E5E7EB', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, cursor: 'pointer' }} > {!member.avatarUrl && '👤'}

member.handle && openProfile && openProfile(member.handle)} style={{ fontWeight: 600, color: '#111827', cursor: 'pointer' }} > {member.displayName}

{member.handle && member.id !== safeUser.id && startChat && ( )}

{role}

); })}

{/* Role Helper for Demo */}

💡 Tip: In a full app, admins could assign roles like President, VP, or Treasurer here.

)}

{/* BOTTOM NAVIGATION */}

{/* NEW POST MODAL (Bottom Sheet) */} {isPostModalOpen && (

setIsPostModalOpen(false)} />

New Announcement

setNewPostText(e.target.value)}
              placeholder="What's the update?"
              style={{ width: '100%', height: 100, padding: 12, borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16, fontFamily: 'inherit', resize: 'none', marginBottom: 16 }}
            />
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, color: '#374151', cursor: 'pointer' }}>
                <input 
                  type="checkbox" 
                  checked={isPinning} 
                  onChange={e => setIsPinning(e.target.checked)}
                  style={{ width: 18, height: 18, accentColor: '#F59E0B' }}
                />
                Pin to top 📌
              </label>
            </div>
            <button 
              onClick={handlePostAnnouncement}
              disabled={!newPostText.trim()}
              style={{ width: '100%', height: 50, background: '#1E3A8A', color: 'white', border: 'none', borderRadius: 14, fontSize: 16, fontWeight: 600, opacity: newPostText.trim() ? 1 : 0.5 }}
            >
              Post Update
            </button>
          </div>
        </div>
      )}

{/* NEW MEETING MODAL */}
      {isMeetingModalOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 100 }}>
          <div 
            style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(2px)' }}
            onClick={() => setIsMeetingModalOpen(false)}
          />
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            background: 'white', borderTopLeftRadius: 24, borderTopRightRadius: 24,
            padding: '20px 20px calc(20px + env(safe-area-inset-bottom, 20px))',
            boxShadow: '0 -10px 40px rgba(0,0,0,0.1)',
            maxWidth: 480, margin: '0 auto'
          }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h3 style={{ margin: 0 }}>Schedule Meeting</h3>
              <button onClick={() => setIsMeetingModalOpen(false)} style={{ border: 'none', background: '#F3F4F6', width: 28, height: 28, borderRadius: 14 }}>✕</button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input 
                placeholder="Event Title" 
                value={newMeeting.title} 
                onChange={e => setNewMeeting({...newMeeting, title: e.target.value})}
                style={{ width: '100%', height: 48, padding: '0 12px', borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16 }}
              />
              <input 
                placeholder="Location" 
                value={newMeeting.location} 
                onChange={e => setNewMeeting({...newMeeting, location: e.target.value})}
                style={{ width: '100%', height: 48, padding: '0 12px', borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16 }}
              />
              <div style={{ display: 'flex', gap: 12 }}>
                <input 
                  type="date" 
                  value={newMeeting.date} 
                  onChange={e => setNewMeeting({...newMeeting, date: e.target.value})}
                  style={{ flex: 1, height: 48, padding: '0 12px', borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16 }}
                />
                <input 
                  type="time" 
                  value={newMeeting.time} 
                  onChange={e => setNewMeeting({...newMeeting, time: e.target.value})}
                  style={{ flex: 0.5, height: 48, padding: '0 12px', borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16 }}
                />
              </div>
              <button 
                onClick={handleAddMeeting}
                disabled={!newMeeting.title || !newMeeting.date || !newMeeting.time}
                style={{ width: '100%', height: 50, background: '#1E3A8A', color: 'white', border: 'none', borderRadius: 14, fontSize: 16, fontWeight: 600, marginTop: 8, opacity: (newMeeting.title && newMeeting.date) ? 1 : 0.5 }}
              >
                Schedule
              </button>
            </div>
          </div>
        </div>
      )}
      
      <style>{`
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
      `}</style>
    </div>
  );
}</article></body></html>