@propriety/court-calendar 0.0.0

package/src/_components/CCalendar.tsx

@@ -0,0 +1,726 @@
+// #region imports
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin, { type DateClickArg } from '@fullcalendar/interaction';
+import listPlugin from '@fullcalendar/list';
+import { useEffect, useRef, useState, useMemo } from 'react';
+import './CCalendar.css';
+import Toolbar from './Toolbar/Toolbar';
+import { Calendar, type EventMountArg, type EventSourceInput, type EventClickArg } from '@fullcalendar/core/index.js';
+import {
+    HearingType,
+    Lifecycle,
+    ModalMode,
+    SourceType,
+    Status,
+    type CalendarFilterCtx,
+    type Case,
+    type CourtDate,
+} from '@/types';
+import { Tooltip } from 'react-tooltip';
+import Modal from './Modal/Modal';
+import { getAllDates, isVillageDate, updateCourtDate } from '@/helpers/courtDates';
+import { getTownshipName } from '@/helpers/munis';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import {
+    fetchAllCasesPaginated,
+    fetchCasesByCourtDate,
+    isCaseMissingEvidence,
+    isCaseSettled,
+    searchByCaseTerm,
+} from '@/helpers/cases';
+import {
+    getCachedCases,
+    removeCasesCache,
+    updateCasesCache,
+    getCourtDatesCache,
+    setCourtDatesCache,
+} from '@/helpers/cache';
+import CalendarList from './List/CalendarList';
+// #endregion
+export default function CCalendar({ apiKey, activeUser }: { apiKey: string; activeUser: number }) {
+    // #region state
+    const [calendarApi, setCalendarApi] = useState<Calendar | null>(null);
+    const [courtDates, setCourtDates] = useState<Array<CourtDate>>([]);
+    const [events, setEvents] = useState<EventSourceInput>([]);
+    const [eventHash, setEventHash] = useState<string>('');
+    const [modalIsOpen, setIsOpen] = useState(false);
+    const [selectedCourtDate, setSelectedCourtDate] = useState<CourtDate | null>(null);
+    const calendarRef = useRef<FullCalendar | null>(null);
+    const [filterCtx, setFilterCtx] = useState<CalendarFilterCtx>({
+        showInPerson: true,
+        showVirtual: true,
+        showUnknown: true,
+        showOnlyAssignedToUser: null,
+        showUploadDeadlines: false,
+        showAdjournmentDates: true,
+        showCourtDates: true,
+        searchTerm: '',
+        municode: null,
+        user: null,
+        showOnlyUnsettled: false,
+        showOnlyWithoutEvidence: false,
+        showOnlyUnreviewed: false,
+    });
+    const [currentView, setCurrentView] = useState('dayGridMonth');
+    const [currentDate, setCurrentDate] = useState<Date>(new Date());
+    const [modalMode, setModalMode] = useState<ModalMode>(ModalMode.DETAILS);
+    const [scrollbarClicked, setScrollbarClicked] = useState(false);
+    const [allCases, setAllCases] = useState<Record<string, Case[]>>({});
+    const [selectedCases, setSelectedCases] = useState<Case[]>([]);
+    const [isFetchingCases, setIsFetchingCases] = useState<boolean>(false);
+    const [searchedDateIDs, setSearchedDateIDs] = useState<Array<number>>([]);
+    // Track previously rendered event IDs to avoid reanimating unchanged events
+    const prevEventIdsRef = useRef<Set<string>>(new Set());
+    // Track previous view to detect actual view changes vs calendarApi remounts
+    const prevViewRef = useRef<string>(currentView);
+    // #endregion
+
+    // #region initializer
+    async function getAllCourtDates(apiKey: string) {
+        // Try to load from IndexedDB cache
+        const cachedDates = await getCourtDatesCache();
+        if (cachedDates) {
+            setCourtDates(cachedDates);
+        } else {
+            getAllDates(apiKey)
+                .then(async (dates) => {
+                    setCourtDates(dates);
+                    await setCourtDatesCache(dates);
+                })
+                .catch((error) => {
+                    console.error('Failed to fetch court dates:', error);
+                });
+        }
+    }
+
+    useEffect(() => {
+        getAllCourtDates(apiKey);
+    }, []);
+    // #endregion
+
+    // #region callbacks
+    function updateCourtDateInMemory(updatedDate: CourtDate, del?: boolean) {
+        setCourtDates((prevDates) => {
+            const index = prevDates.findIndex((date) => date.CourtDateID === updatedDate.CourtDateID);
+            let newDates;
+            if (index !== -1) {
+                newDates = [...prevDates];
+                if (del) {
+                    newDates.splice(index, 1);
+                } else {
+                    newDates[index] = updatedDate;
+                }
+            } else {
+                newDates = [...prevDates, updatedDate];
+            }
+            // Defer cache update to not block render
+            queueMicrotask(() => setCourtDatesCache(newDates));
+            return newDates;
+        });
+    }
+
+    function handleUpdateChair(courtDateId: number, position: 'first' | 'second', userId: number | null) {
+        const courtDate = courtDates.find((d) => d.CourtDateID === courtDateId);
+        if (!courtDate) return;
+
+        const updatedData: Partial<CourtDate> = position === 'first' ? { FirstChair: userId } : { SecondChair: userId };
+        const updatedCourtDate = { ...courtDate, ...updatedData };
+
+        // Optimistic update - update UI immediately
+        updateCourtDateInMemory(updatedCourtDate);
+
+        // Then persist to API in background
+        updateCourtDate(courtDateId, updatedData, apiKey).then((success) => {
+            if (!success) {
+                // Revert on failure
+                updateCourtDateInMemory(courtDate);
+                console.error('Failed to update chair assignment, reverted');
+            }
+        });
+    }
+
+    // #endregion
+
+    // #region case fetching
+    // there will be 3 sources for data, in order of priority:
+    // 1. memory (allCases)
+    // 2. localStorage cache
+    // 3. fetch from API
+    // whenever we fetch from a place lower in priority, we update the higher places accordingly
+
+    // FETCHING ALL:
+    // fetching all cases for all court dates at once can be heavy, so we will fetch individually as needed
+    // when we fetch all cases, we will always check memory first since it is likely up to date and free
+    // if not in memory, we will check localStorage cache next
+    // if its in cache and not expired, we will use that
+    // if not in cache or expired, we will fetch from API
+
+    // FETCHING INDIVIDUAL:
+    // when fetching cases for a single court date (when clicked), we will always fetch from API to ensure up to date data
+    // but we will still update memory and cache accordingly
+    async function getCases(
+        courtDateIDs: number[],
+        skipMemory: boolean,
+        skipCache: boolean,
+    ): Promise<Record<string, Case[]>> {
+        console.log(`Looking for ${courtDateIDs.length} court dates' cases...`);
+        setIsFetchingCases(true);
+        const memoryCasesByCourtDate: Record<string, Case[]> = {};
+        const memoryMissingIDs: string[] = [];
+
+        const cachedCasesByCourtDate: Record<string, Case[]> = {};
+        const cachedMissingIDs: string[] = [];
+
+        const fetchedCasesByCourtDate: Record<string, Case[]> = {};
+        const fetchedMissingIDs: string[] = [];
+
+        // try memory
+        courtDateIDs.forEach((id) => {
+            const key = id.toString();
+            if (!skipMemory && allCases[key]) {
+                memoryCasesByCourtDate[key] = allCases[key];
+            } else {
+                memoryMissingIDs.push(key);
+            }
+        });
+
+        // try cache for missing memory cases
+        console.log(
+            `Found ${memoryMissingIDs.length} missing from memory, checking cache for ${memoryMissingIDs.length} cases...`,
+        );
+        // Use for...of to await sequentially so cachedMissingIDs is correct
+        for (const id of memoryMissingIDs) {
+            const cached = !skipCache ? await getCachedCases(id.toString()) : null;
+            if (cached) {
+                cachedCasesByCourtDate[id] = cached;
+            } else {
+                cachedMissingIDs.push(id);
+            }
+        }
+
+        await addPartialCasesToMemoryAndCache(cachedCasesByCourtDate, true); // skip cache since these are from cache
+
+        // fetch from API for missing cache cases
+        console.log(
+            `Found ${cachedMissingIDs.length} missing from cache, fetching ${cachedMissingIDs.length} cases from API...`,
+        );
+        // if all more than 10 are missing, call the batched fetch function
+        if (cachedMissingIDs.length > 10) {
+            for await (const fetched of fetchAllCasesPaginated(apiKey)) {
+                Object.entries(fetched).forEach(([courtDateIDStr, cases]) => {
+                    if (cachedMissingIDs.includes(courtDateIDStr)) {
+                        fetchedCasesByCourtDate[courtDateIDStr] = cases;
+                    }
+                });
+                // need to update memory and stuff within the loop since this is a generator
+                await addPartialCasesToMemoryAndCache(fetchedCasesByCourtDate, false);
+            }
+        } else {
+            // fetch individually
+            await Promise.all(
+                cachedMissingIDs.map(async (id) => {
+                    const fetched = await fetchCasesByCourtDate(id, apiKey);
+                    if (fetched && fetched.length > 0) {
+                        fetchedCasesByCourtDate[id] = fetched;
+                    } else {
+                        fetchedMissingIDs.push(id);
+                    }
+                    await addPartialCasesToMemoryAndCache(fetchedCasesByCourtDate, false);
+                }),
+            );
+        }
+
+        // if there are any missing IDs after all that, throw an error
+        if (fetchedMissingIDs.length > 0) {
+            console.error('Failed to fetch cases for court date IDs:', fetchedMissingIDs);
+        }
+        setIsFetchingCases(false);
+        // log number of cases fetched from each source
+        console.log(
+            `Cases fetched - Memory: ${Object.keys(memoryCasesByCourtDate).length}, Cache: ${Object.keys(cachedCasesByCourtDate).length}, Fetched: ${Object.keys(fetchedCasesByCourtDate).length}`,
+        );
+
+        // Return combined cases from all sources
+        return { ...memoryCasesByCourtDate, ...cachedCasesByCourtDate, ...fetchedCasesByCourtDate };
+    }
+
+    // add partial cases to memory without overwriting existing ones
+    async function addPartialCasesToMemoryAndCache(cases: Record<string, Case[]>, skipCache: boolean) {
+        // Update memory with any newly fetched or cached cases
+        console.log(
+            `Adding ${Object.keys(cases).length} partial cases to ${skipCache ? 'memory only' : 'memory and cache'}...`,
+        );
+
+        setAllCases((prev) => {
+            const newCases = { ...prev };
+            Object.entries(cases).forEach(([courtDateID, cases]) => {
+                newCases[courtDateID.toString()] = cases;
+            });
+
+            return newCases;
+        });
+
+        // Update cache with any newly fetched cases
+        if (skipCache) return;
+        await Promise.all(Object.entries(cases).map(([courtDateID, cases]) => updateCasesCache(courtDateID, cases)));
+    }
+
+    async function deleteCaseMemoryAndCache(courtDateID: string) {
+        setAllCases((prev) => {
+            const newCases = { ...prev };
+            delete newCases[courtDateID];
+            return newCases;
+        });
+        await removeCasesCache(courtDateID);
+    }
+
+    // ALL DATES
+    useEffect(() => {
+        if (courtDates.length === 0) return;
+        // fetch cases for all court dates in memory and cache
+        (async () => {
+            await getCases(
+                courtDates.map((cd) => cd.CourtDateID),
+                false, // dont skip memory
+                false, // dont skip cache
+            );
+        })();
+    }, [courtDates]);
+
+    // SELECTED DATE
+    useEffect(() => {
+        if (!selectedCourtDate) return;
+        // Skip fetch for new court dates (negative ID means it hasn't been created yet)
+        if (selectedCourtDate.CourtDateID < 0) {
+            setSelectedCases([]);
+            return;
+        }
+        // fetch cases for selected court date
+        (async () => {
+            const fetchedCases = await getCases(
+                [selectedCourtDate.CourtDateID],
+                true, // skip memory
+                true, // skip cache
+            );
+            // Use the returned cases directly to avoid stale closure
+            setSelectedCases(fetchedCases[selectedCourtDate.CourtDateID.toString()] || []);
+        })();
+    }, [selectedCourtDate]);
+
+    // #endregion
+
+    // #region click event handlers
+    useEffect(() => {
+        // --- Scrollbar click detection ---
+        const handler = (e: MouseEvent) => {
+            // Only check for left click
+            if (e.button !== 0) return;
+            // Look for scrollable event area
+            const target = e.target as HTMLElement;
+            if (target && target.classList.contains('fc-daygrid-day-events')) {
+                const { offsetWidth, clientWidth, offsetHeight, clientHeight } = target;
+                // Vertical scrollbar
+                console.log(offsetWidth, clientWidth, offsetHeight, clientHeight);
+                if (offsetWidth > clientWidth - 10) {
+                    const scrollbarX = clientWidth;
+                    if (e.offsetX >= scrollbarX - 10) {
+                        setScrollbarClicked(true);
+                        return;
+                    }
+                }
+            }
+            setScrollbarClicked(false);
+        };
+        document.addEventListener('mousedown', handler, true);
+
+        return () => {
+            document.removeEventListener('mousedown', handler, true);
+        };
+    }, []);
+
+    function handleDateClick(dateClickInfo: DateClickArg) {
+        if (scrollbarClicked) {
+            setScrollbarClicked(false);
+            return;
+        }
+        console.log('Date clicked:', dateClickInfo.dateStr);
+        setCurrentView('listDay');
+        setCurrentDate(dateClickInfo.date);
+        if (calendarApi) {
+            calendarApi.gotoDate(dateClickInfo.date);
+        }
+    }
+
+    function createCourtDate(dateClickInfo: Date) {
+        console.log('Date clicked:', dateClickInfo?.toISOString());
+        setSelectedCourtDate({
+            CourtDateID: -1,
+            CourtDate: dateClickInfo || null,
+            MuniCode: '',
+            Lifecycle: Lifecycle.SCHEDULED,
+            CourtCases: 0,
+            UploadDeadline: null,
+            HearingTime: '',
+            HearingLink: null,
+            Source: SourceType.MANUAL,
+            Type: HearingType.UNKNOWN,
+            FirstChair: null,
+            SecondChair: null,
+            HearingOfficer: null,
+            EnterDate: new Date(),
+            LastUpdateDate: new Date(),
+            AdjournmentDate: null,
+            IsAdjourned: false,
+            Notes: null,
+            NoticeFile: null,
+        });
+        setModalMode(ModalMode.CREATE);
+        setIsOpen(true);
+    }
+
+    function handleEventClick(clickInfo: EventClickArg) {
+        const courtDate = clickInfo.event.extendedProps as CourtDate;
+        clickCallback(courtDate);
+    }
+
+    function clickCallback(date: CourtDate) {
+        setSelectedCourtDate(date);
+        setIsOpen(true);
+    }
+    // #endregion
+
+    // #region search
+    useEffect(() => {
+        setSearchedDateIDs([]);
+        if (filterCtx.searchTerm.trim() === '') return;
+        (async () => {
+            for await (const result of searchByCaseTerm(filterCtx.searchTerm, apiKey)) {
+                setSearchedDateIDs((prev) => [...prev, ...result]);
+            }
+        })();
+    }, [filterCtx.searchTerm]);
+    // #endregion
+
+    // #region filtering
+    const filteredDates = useMemo(() => {
+        return courtDates
+            .filter((date) => {
+                if (searchedDateIDs.length === 0 || filterCtx.searchTerm.trim() === '') return true;
+                return searchedDateIDs.includes(date.CourtDateID);
+            })
+            .filter((date) => {
+                if (!filterCtx.showInPerson) {
+                    return date.Type !== HearingType.IN_PERSON;
+                }
+                return true;
+            })
+            .filter((date) => {
+                if (!filterCtx.showVirtual) {
+                    return date.Type !== HearingType.VIRTUAL;
+                }
+                return true;
+            })
+            .filter((date) => {
+                if (!filterCtx.showUnknown) {
+                    return date.Type !== HearingType.UNKNOWN && date.Type !== null;
+                }
+                return true;
+            })
+            .filter((date) => {
+                if (filterCtx.showOnlyAssignedToUser !== null) {
+                    return (
+                        date.FirstChair === filterCtx.showOnlyAssignedToUser ||
+                        date.SecondChair === filterCtx.showOnlyAssignedToUser
+                    );
+                }
+                return true;
+            })
+            .filter((date) => {
+                if (filterCtx.municode) {
+                    return date.MuniCode === filterCtx.municode;
+                }
+                return true;
+            })
+            .filter((date) => {
+                if (filterCtx.showOnlyUnsettled) {
+                    for (const c of allCases[date.CourtDateID.toString()] || []) {
+                        if (!isCaseSettled(c, isVillageDate(date.MuniCode))) {
+                            return true; // has at least one unsettled case
+                        }
+                    }
+                    return false; // all cases are settled, exclude
+                }
+                return true;
+            })
+            .filter((date) => {
+                if (filterCtx.showOnlyWithoutEvidence) {
+                    for (const c of allCases[date.CourtDateID.toString()] || []) {
+                        if (isCaseMissingEvidence(c)) {
+                            return true; // has at least one case missing evidence
+                        }
+                    }
+                    return false; // all cases have evidence, exclude
+                }
+                return true;
+            })
+            .filter((date) => {
+                if (filterCtx.showOnlyUnreviewed) {
+                    for (const c of allCases[date.CourtDateID.toString()] || []) {
+                        if (!c.DateCompleted) {
+                            return true; // has at least one unreviewed case
+                        }
+                    }
+                    return false; // all cases reviewed, exclude
+                }
+                return true;
+            });
+    }, [courtDates, filterCtx, activeUser, allCases, searchedDateIDs]);
+
+    const cdates = useMemo(() => {
+        if (!filterCtx.showCourtDates) return [];
+        return filteredDates
+            .filter((date) => date.CourtDate !== null)
+            .filter((date) => !date.IsAdjourned)
+            .map((date) => ({
+                id: date.CourtDateID.toString(),
+                title: `${getTownshipName(date.MuniCode)} (${date.MuniCode}) x${date.CourtCases}`,
+                start: date.CourtDate,
+                allDay: false,
+                extendedProps: date,
+                classNames: ['courtdate-event', date.Type?.toString().toLowerCase() || 'unknown'],
+            }));
+    }, [filteredDates, filterCtx]);
+
+    const deadlines = useMemo(() => {
+        if (!filterCtx.showUploadDeadlines) return [];
+        return filteredDates
+            .filter((date) => date.UploadDeadline !== null)
+            .map((date) => ({
+                id: `deadline-${date.CourtDateID}`,
+                title: `Upload ${getTownshipName(date.MuniCode)} (${date.MuniCode})`,
+                start: date.UploadDeadline!,
+                allDay: true,
+                extendedProps: date,
+                classNames: [
+                    'deadline-event',
+                    date.Type?.toString().toLowerCase() || 'unknown',
+                    date.IsAdjourned && !date.AdjournmentDate ? 'adjourned-no-date' : '',
+                    date.Lifecycle === Lifecycle.UPLOADED
+                        ? 'status-uploaded'
+                        : date.Lifecycle === Lifecycle.ASSIGNED
+                          ? 'status-assigned'
+                          : 'status-unknown',
+                ],
+            }));
+    }, [filteredDates, filterCtx]);
+
+    const adates = useMemo(() => {
+        if (!filterCtx.showAdjournmentDates) return [];
+        return filteredDates
+            .filter((date) => date.IsAdjourned)
+            .map((date) => ({
+                id: `adjournment-${date.CourtDateID}`,
+                title: `Adjournment - ${date.MuniCode}`,
+                start: date.AdjournmentDate ?? date.CourtDate,
+                allDay: false,
+                extendedProps: date,
+                classNames: [
+                    'adjournment-event',
+                    date.Type?.toString().toLowerCase() || 'unknown',
+                    date.IsAdjourned && !date.AdjournmentDate ? 'adjourned-no-date' : '',
+                ],
+            }));
+    }, [filteredDates, filterCtx]);
+
+    useEffect(() => {
+        if (modalIsOpen) {
+            return;
+        }
+        setEvents([...cdates, ...deadlines, ...adates]);
+        setEventHash(JSON.stringify([...cdates, ...deadlines, ...adates]));
+    }, [cdates, deadlines, adates, modalIsOpen]);
+    // #endregion
+
+    // #region calendar view management
+    const handleCalendarRef = (el: FullCalendar | null) => {
+        if (el) {
+            calendarRef.current = el;
+            setCalendarApi(el.getApi() as Calendar);
+        }
+    };
+
+    useEffect(() => {
+        if (currentView === 'tableView') {
+            if (calendarApi) {
+                calendarApi.changeView('dayGridMonth');
+            }
+            prevViewRef.current = currentView;
+            return;
+        }
+        if (calendarApi) {
+            calendarApi.changeView(currentView);
+        }
+        // Only reset to today when actually switching TO dayGridMonth, not on calendarApi remount
+        if (currentView === 'dayGridMonth' && prevViewRef.current !== 'dayGridMonth') {
+            setCurrentDate(new Date());
+            if (calendarApi) {
+                calendarApi.gotoDate(new Date());
+            }
+        }
+        prevViewRef.current = currentView;
+    }, [currentView, calendarApi]);
+    // #endregion
+
+    // #region Event Mounting (Tooltips & Animations)
+    function handleEventMount(info: EventMountArg) {
+        // biome-ignore lint/suspicious/noExplicitAny: i dont know the type
+        let newVisibleEvents: any[] = [];
+        let newEventIndex = 0;
+        let viewStart: Date | null = null;
+        let viewEnd: Date | null = null;
+        if (calendarApi) {
+            viewStart = calendarApi.view.activeStart;
+            viewEnd = calendarApi.view.activeEnd;
+        }
+
+        // Helper to check if event is visible in current view
+        // biome-ignore lint/suspicious/noExplicitAny: i dont know the type
+        function isEventVisible(ev: any) {
+            if (!viewStart || !viewEnd) return true;
+            const evStart = new Date(ev.start);
+            // For allDay events, treat as visible if any overlap
+            if (ev.allDay) {
+                return evStart >= viewStart && evStart < viewEnd;
+            }
+            return evStart >= viewStart && evStart < viewEnd;
+        }
+
+        if (Array.isArray(events)) {
+            // Only consider NEW events (not previously rendered) for animation delay calculation
+            newVisibleEvents = events.filter(isEventVisible).filter((e) => {
+                const id = e.id?.toString();
+                return id && !prevEventIdsRef.current.has(id);
+            });
+            newEventIndex = newVisibleEvents.findIndex((e) => e.id === info.event.id);
+        }
+
+        // Only animate if this event is new (not in previous set)
+        const eventId = info.event.id?.toString();
+        if (eventId && !prevEventIdsRef.current.has(eventId)) {
+            info.el.classList.add('pop-in-ccalendar-event');
+            info.el.style.animationDelay = `${30 * (newEventIndex >= 0 ? newEventIndex : 0)}ms`;
+        } else {
+            info.el.classList.remove('pop-in-ccalendar-event');
+            info.el.style.animationDelay = '0ms';
+        }
+
+        // Tooltip logic
+        const tooltipContent = `
+                        <div><strong>${info.event.title}</strong><br/>
+                        <em>Court Date:</em> ${info.event.start?.toLocaleString()}<br/>
+                        ${info.event.extendedProps.IsAdjourned && !info.event.extendedProps.AdjournmentDate ? '<strong>Adjourned - No Adjournment Date Set!</strong><br/>' : ''}
+                        <em>Upload Deadline:</em> ${info.event.extendedProps.UploadDeadline}<br/>
+                        <em>Court Cases:</em> ${info.event.extendedProps.CourtCases}<br/>
+                        <em>Status:</em> ${info.event.extendedProps.Status}<br />
+                        <em>First Chair:</em> ${info.event.extendedProps.FirstChair ?? 'Unassigned'}<br/>
+                        <em>Click for more details</em>
+                        </div>
+                    `;
+        info.el.setAttribute('data-tooltip-id', 'event-tooltip');
+        info.el.setAttribute('data-tooltip-html', tooltipContent);
+    }
+    // Update the set of visible event IDs after each render of events, but defer so eventDidMount runs first
+    useEffect(() => {
+        if (Array.isArray(events)) {
+            const ids = new Set(events.map((e: any) => e.id?.toString()).filter(Boolean));
+            // Defer update so eventDidMount runs first
+            const timeout = setTimeout(() => {
+                prevEventIdsRef.current = ids;
+            }, 0);
+            return () => clearTimeout(timeout);
+        }
+    }, [events, eventHash]);
+    // #endregion
+
+    // #region render
+    return (
+        <div id='ccalendar-container'>
+            <Toolbar
+                calendarApi={calendarApi}
+                filterCtx={filterCtx}
+                setFilterCtx={setFilterCtx}
+                handleCreateClick={() => createCourtDate(calendarApi?.getDate() || currentDate || new Date())}
+                currentView={currentView}
+                setCurrentView={setCurrentView}
+                currentDate={currentDate}
+                setCurrentDate={setCurrentDate}
+                activeUser={activeUser}
+                isFetchingCases={isFetchingCases}
+            />
+            {currentView === 'listDay' && (
+                <Stack spacing={2} direction={'column'} px={1} mb={1}>
+                    {Object.values(events)
+                        .filter((event) => new Date(event.start).toDateString() === currentDate.toDateString())
+                        .filter((event) => event.extendedProps.Notes && event.extendedProps.Notes !== '')
+                        .map((event) => (
+                            <Typography key={event.id}>{`${event.title} - ${event.extendedProps.Notes}`}</Typography>
+                        ))}
+                </Stack>
+            )}
+            {currentView !== 'tableView' && (
+                <FullCalendar
+                    plugins={[dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]}
+                    key={eventHash}
+                    initialView={currentView}
+                    initialDate={currentDate}
+                    height='auto'
+                    dayCellClassNames={['month-day-cell']}
+                    viewClassNames={['court-calendar']}
+                    allDayClassNames={['day-cell-allday']}
+                    dayHeaderClassNames={['day-header']}
+                    eventClassNames={['court-event']}
+                    headerToolbar={false}
+                    ref={handleCalendarRef}
+                    events={events}
+                    eventClick={handleEventClick}
+                    dateClick={handleDateClick}
+                    datesSet={(dateInfo) => setCurrentDate(dateInfo.start)}
+                    eventDidMount={(info) => {
+                        handleEventMount(info);
+                    }}
+                />
+            )}
+            {currentView === 'tableView' && (
+                <CalendarList
+                    filteredDates={filteredDates}
+                    setSelectedDate={clickCallback}
+                    currentDate={currentDate}
+                    onUpdateChair={handleUpdateChair}
+                    allCases={allCases}
+                />
+            )}
+            <Modal
+                modalIsOpen={modalIsOpen}
+                modalMode={modalMode}
+                setModalMode={setModalMode}
+                setIsOpen={setIsOpen}
+                selectedCourtDate={selectedCourtDate}
+                updateCourtDateInMemory={updateCourtDateInMemory}
+                filterCtx={filterCtx}
+                setFilterCtx={setFilterCtx}
+                selectedCases={selectedCases}
+                updateCases={(cases) => {
+                    addPartialCasesToMemoryAndCache(cases, false);
+                }}
+                deleteCases={deleteCaseMemoryAndCache}
+                isFetchingCases={isFetchingCases}
+                apiKey={apiKey}
+            />
+            <Tooltip id='event-tooltip' className='cc-tooltip' />
+        </div>
+    );
+    // #endregion
+}