Improve UX with navigation, attendance management, and calendar fixes

## Quick Wins
- **AdminSidebar**: Move "View Public Site" to clickable logo area
- **Plans**: Fix layout to center single plan, dynamic grid for multiple
- **AdminGallery**: Add empty state message with "Create Event" button

## Event Attendance Enhancement
- **NEW: AdminEventAttendance page** with full-featured table view:
  - Tab filters (All/Yes/No/Maybe RSVPs)
  - Search by name/email
  - Bulk selection with Select All
  - Individual attendance toggle buttons (merged column)
  - CSV export functionality (client requirement)
  - Summary statistics cards
- **AdminEvents**: Navigate to new attendance page instead of dialog
- **App.js**: Add /admin/events/:eventId/attendance route

## Calendar Fixes
- **MemberCalendar**: Add state management for navigation (date/view)
  - Fix non-functional buttons (Today/Back/Next/Month/Week/Day/Agenda)
  - Add onNavigate and onView handlers
- **NEW: MemberCalendar.css**: Extract styles from broken jsx syntax
  - Fix toolbar button styling and interactivity

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/members/MemberCalendar.css

@@ -0,0 +1,93 @@
+/* Member Calendar Custom Styles */
+
+.member-calendar .rbc-header {
+  padding: 12px 6px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 600;
+  color: #422268;
+  background-color: #f9f7fc;
+  border-bottom: 2px solid #ddd8eb;
+}
+
+.member-calendar .rbc-today {
+  background-color: #f1eef9;
+}
+
+.member-calendar .rbc-off-range-bg {
+  background-color: #fafafa;
+}
+
+.member-calendar .rbc-event {
+  border-radius: 6px;
+  padding: 2px 6px;
+}
+
+.member-calendar .rbc-event:hover {
+  opacity: 0.85;
+  cursor: pointer;
+}
+
+.member-calendar .rbc-toolbar button {
+  color: #664fa3;
+  border-color: #ddd8eb;
+  font-family: 'Nunito Sans', sans-serif;
+  padding: 6px 12px;
+  background-color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.member-calendar .rbc-toolbar button:hover {
+  background-color: #f1eef9;
+  border-color: #664fa3;
+}
+
+.member-calendar .rbc-toolbar button:active,
+.member-calendar .rbc-toolbar button.rbc-active {
+  background-color: #664fa3;
+  color: white;
+}
+
+.member-calendar .rbc-month-view {
+  border: 1px solid #ddd8eb;
+  border-radius: 8px;
+}
+
+.member-calendar .rbc-day-bg {
+  border-color: #ddd8eb;
+}
+
+.member-calendar .rbc-date-cell {
+  padding: 8px;
+  font-family: 'Nunito Sans', sans-serif;
+}
+
+/* Ensure toolbar buttons are clickable */
+.member-calendar .rbc-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.member-calendar .rbc-toolbar button {
+  outline: none;
+  border: 1px solid #ddd8eb;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.member-calendar .rbc-btn-group button {
+  margin: 0 2px;
+}
+
+.member-calendar .rbc-btn-group button:first-child {
+  margin-left: 0;
+}
+
+.member-calendar .rbc-btn-group button:last-child {
+  margin-right: 0;
+}

src/pages/members/MemberCalendar.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { Calendar, momentLocalizer } from 'react-big-calendar';
 import moment from 'moment';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
+import './MemberCalendar.css';
 import api from '../../utils/api';
 import Navbar from '../../components/Navbar';
 import MemberFooter from '../../components/MemberFooter';
@@ -26,6 +27,8 @@ export default function MemberCalendar() {
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [rsvpLoading, setRsvpLoading] = useState(false);
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [currentView, setCurrentView] = useState('month');
 
   useEffect(() => {
     fetchEvents();
@@ -58,6 +61,14 @@ export default function MemberCalendar() {
     setIsDialogOpen(true);
   };
 
+  const handleNavigate = (newDate) => {
+    setCurrentDate(newDate);
+  };
+
+  const handleViewChange = (newView) => {
+    setCurrentView(newView);
+  };
+
   const handleRSVP = async (status) => {
     if (!selectedEvent) return;
 
@@ -171,10 +182,13 @@ export default function MemberCalendar() {
             startAccessor="start"
             endAccessor="end"
             style={{ height: 700 }}
+            date={currentDate}
+            view={currentView}
+            onNavigate={handleNavigate}
+            onView={handleViewChange}
             onSelectEvent={handleSelectEvent}
             eventPropGetter={eventStyleGetter}
             views={['month', 'week', 'day', 'agenda']}
-            defaultView="month"
             popup
             className="member-calendar"
           />
@@ -320,64 +334,6 @@ export default function MemberCalendar() {
         </Dialog>
       </div>
 
-      <style jsx global>{`
-        .member-calendar .rbc-header {
-          padding: 12px 6px;
-          font-family: 'Inter', sans-serif;
-          font-weight: 600;
-          color: #422268;
-          background-color: #f9f7fc;
-          border-bottom: 2px solid #ddd8eb;
-        }
-
-        .member-calendar .rbc-today {
-          background-color: #f1eef9;
-        }
-
-        .member-calendar .rbc-off-range-bg {
-          background-color: #fafafa;
-        }
-
-        .member-calendar .rbc-event {
-          border-radius: 6px;
-          padding: 2px 6px;
-        }
-
-        .member-calendar .rbc-event:hover {
-          opacity: 0.85;
-          cursor: pointer;
-        }
-
-        .member-calendar .rbc-toolbar button {
-          color: #664fa3;
-          border-color: #ddd8eb;
-          font-family: 'Nunito Sans', sans-serif;
-        }
-
-        .member-calendar .rbc-toolbar button:hover {
-          background-color: #f1eef9;
-          border-color: #664fa3;
-        }
-
-        .member-calendar .rbc-toolbar button.rbc-active {
-          background-color: #664fa3;
-          color: white;
-        }
-
-        .member-calendar .rbc-month-view {
-          border: 1px solid #ddd8eb;
-          border-radius: 8px;
-        }
-
-        .member-calendar .rbc-day-bg {
-          border-color: #ddd8eb;
-        }
-
-        .member-calendar .rbc-date-cell {
-          padding: 8px;
-          font-family: 'Nunito Sans', sans-serif;
-        }
-      `}</style>
       <MemberFooter />
     </div>
   );