@propriety/court-calendar 0.0.0

package/src/_components/Shared/FirstSecondChairIcons.tsx

@@ -0,0 +1,247 @@
+import { useState } from 'react';
+import { allUsers } from '@/helpers/people';
+import type { User } from '@/types';
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import Tooltip from '@mui/material/Tooltip';
+
+type ChairPosition = 'first' | 'second';
+
+export default function FirstSecondChairIcons({
+    user1ID,
+    user2ID,
+    onUpdateChair,
+}: {
+    user1ID: number | null;
+    user2ID: number | null;
+    onUpdateChair?: (position: ChairPosition, userId: number | null) => void;
+}) {
+    const firstChair = user1ID ? allUsers[user1ID] : null;
+    const secondChair = user2ID ? allUsers[user2ID] : null;
+
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+    const [activePosition, setActivePosition] = useState<ChairPosition | null>(null);
+    const [otherAnchorEl, setOtherAnchorEl] = useState<HTMLElement | null>(null);
+
+    const height = 30;
+    const width = 30;
+
+    const primaryUserIds = [1, 10, 22, 23, 24, 29];
+    const excludedUserLastnames = ['Import', 'Memos', 'Table', 'Note', 'Robot', 'Ingestion'];
+    const allFilteredUsers = Object.values(allUsers).filter(
+        (option) => option.UserLastName && !excludedUserLastnames.includes(option.UserLastName),
+    );
+    const primaryUsers = allFilteredUsers.filter((u) => primaryUserIds.includes(u.UserID));
+    const otherUsers = allFilteredUsers.filter((u) => !primaryUserIds.includes(u.UserID));
+
+    // #region Avatar helper functions
+    function stringToColor(string: string) {
+        let hash = 0;
+        let i;
+
+        /* eslint-disable no-bitwise */
+        for (i = 0; i < string.length; i += 1) {
+            hash = string.charCodeAt(i) + ((hash << 5) - hash);
+        }
+
+        let color = '#';
+
+        for (i = 0; i < 3; i += 1) {
+            const value = (hash >> (i * 8)) & 0xff;
+            color += `00${value.toString(16)}`.slice(-2);
+        }
+        /* eslint-enable no-bitwise */
+
+        return color;
+    }
+
+    function stringAvatar(name: string) {
+        return {
+            sx: {
+                backgroundColor: `${stringToColor(name)} !important`,
+            },
+            children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+        };
+    }
+
+    function decideIcon(user: User | null, position: ChairPosition) {
+        const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+            if (onUpdateChair) {
+                event.stopPropagation();
+                setAnchorEl(event.currentTarget);
+                setActivePosition(position);
+            }
+        };
+
+        const tooltipTitle = user ? `${user.UserFirstName} ${user.UserLastName}` : 'Unassigned';
+
+        if (!user) {
+            return (
+                <Tooltip title={tooltipTitle} arrow>
+                    <Avatar
+                        sx={{ width: width, height: height, cursor: onUpdateChair ? 'pointer' : 'default' }}
+                        onClick={handleClick}
+                        className='CCAvatarIcon'
+                    >
+                        ?
+                    </Avatar>
+                </Tooltip>
+            );
+        }
+        if (user.Picture) {
+            return (
+                <Tooltip title={tooltipTitle} arrow>
+                    <Avatar
+                        alt={`${user.UserFirstName} ${user.UserLastName}`}
+                        src={user.Picture}
+                        sx={{ width: width, height: height, cursor: onUpdateChair ? 'pointer' : 'default' }}
+                        onClick={handleClick}
+                        className='CCAvatarIcon'
+                    />
+                </Tooltip>
+            );
+        } else {
+            const avatarProps = stringAvatar(`${user.UserFirstName} ${user.UserLastName}`);
+            return (
+                <Tooltip title={tooltipTitle} arrow placement='top'>
+                    <Avatar
+                        sx={{
+                            ...avatarProps.sx,
+                            width: width,
+                            height: height,
+                            cursor: onUpdateChair ? 'pointer' : 'default',
+                        }}
+                        onClick={handleClick}
+                        className='CCAvatarIcon'
+                    >
+                        {avatarProps.children}
+                    </Avatar>
+                </Tooltip>
+            );
+        }
+    }
+    // #endregion
+
+    function handleMenuClose() {
+        setAnchorEl(null);
+        setActivePosition(null);
+        setOtherAnchorEl(null);
+    }
+
+    function handleUserSelect(userId: number | null) {
+        const position = activePosition;
+        // Close menu immediately for snappy UX
+        handleMenuClose();
+        // Defer update to next tick so menu close renders first
+        if (onUpdateChair && position) {
+            setTimeout(() => onUpdateChair(position, userId), 0);
+        }
+    }
+
+    return (
+        <>
+            <Stack
+                direction='row'
+                spacing={1}
+                alignItems='center'
+                mt={1.2}
+                justifyContent='center'
+                className='iconHolder'
+                onClick={onUpdateChair ? (e) => e.stopPropagation() : undefined}
+            >
+                {decideIcon(firstChair, 'first')}
+                {decideIcon(secondChair, 'second')}
+            </Stack>
+            <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleMenuClose}
+                onClick={(e) => e.stopPropagation()}
+                classes={{ paper: 'themed' }}
+                transitionDuration={200}
+            >
+                <MenuItem onClick={() => handleUserSelect(null)}>
+                    <ListItemAvatar>
+                        <Avatar sx={{ width: 24, height: 24, fontSize: 11 }}>?</Avatar>
+                    </ListItemAvatar>
+                    <ListItemText primary='Unassign' />
+                </MenuItem>
+                {primaryUsers.map((user) => (
+                    <MenuItem key={user.UserID} onClick={() => handleUserSelect(user.UserID)}>
+                        <ListItemAvatar>
+                            {user.Picture ? (
+                                <Avatar
+                                    alt={`${user.UserFirstName} ${user.UserLastName}`}
+                                    src={user.Picture}
+                                    sx={{ width: 24, height: 24 }}
+                                />
+                            ) : (
+                                (() => {
+                                    const avatarProps = stringAvatar(`${user.UserFirstName} ${user.UserLastName}`);
+                                    return (
+                                        <Avatar sx={{ ...avatarProps.sx, width: 24, height: 24, fontSize: 11 }}>
+                                            {avatarProps.children}
+                                        </Avatar>
+                                    );
+                                })()
+                            )}
+                        </ListItemAvatar>
+                        <ListItemText primary={`${user.UserFirstName} ${user.UserLastName}`} />
+                    </MenuItem>
+                ))}
+                {otherUsers.length > 0 && (
+                    <MenuItem
+                        onMouseEnter={(e) => setOtherAnchorEl(e.currentTarget)}
+                        sx={{ justifyContent: 'space-between' }}
+                    >
+                        <ListItemText primary='Other' />
+                        <span style={{ fontSize: 12, marginLeft: 8 }}>&#9654;</span>
+                    </MenuItem>
+                )}
+            </Menu>
+            <Menu
+                anchorEl={otherAnchorEl}
+                open={Boolean(otherAnchorEl)}
+                onClose={() => setOtherAnchorEl(null)}
+                onClick={(e) => e.stopPropagation()}
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+                classes={{ paper: 'themed' }}
+                transitionDuration={150}
+                slotProps={{
+                    paper: {
+                        onMouseLeave: () => setOtherAnchorEl(null),
+                    },
+                }}
+            >
+                {otherUsers.map((user) => (
+                    <MenuItem key={user.UserID} onClick={() => handleUserSelect(user.UserID)}>
+                        <ListItemAvatar>
+                            {user.Picture ? (
+                                <Avatar
+                                    alt={`${user.UserFirstName} ${user.UserLastName}`}
+                                    src={user.Picture}
+                                    sx={{ width: 24, height: 24 }}
+                                />
+                            ) : (
+                                (() => {
+                                    const avatarProps = stringAvatar(`${user.UserFirstName} ${user.UserLastName}`);
+                                    return (
+                                        <Avatar sx={{ ...avatarProps.sx, width: 24, height: 24, fontSize: 11 }}>
+                                            {avatarProps.children}
+                                        </Avatar>
+                                    );
+                                })()
+                            )}
+                        </ListItemAvatar>
+                        <ListItemText primary={`${user.UserFirstName} ${user.UserLastName}`} />
+                    </MenuItem>
+                ))}
+            </Menu>
+        </>
+    );
+}

package/src/_components/Shared/FormRow.tsx

@@ -0,0 +1,37 @@
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+export default function FormRow({
+    children,
+    gap = 7,
+    header,
+    subheader,
+}: {
+    children: React.ReactNode;
+    gap?: number;
+    header?: string;
+    subheader?: string;
+}) {
+    return (
+        <>
+            <Stack direction='column' spacing={0.5} mb={header !== undefined ? 3 : 0}>
+                <Typography variant='h6'>{header}</Typography>
+                <Typography variant='body2' sx={{ opacity: 0.85 }}>
+                    {subheader}
+                </Typography>
+            </Stack>
+            <Box
+                marginTop={1}
+                marginBottom={1}
+                display='flex'
+                flexDirection='row'
+                alignItems={'center'}
+                justifyContent={'space-between'}
+                gap={gap}
+            >
+                {children}
+            </Box>
+        </>
+    );
+}

package/src/_components/Shared/MuniDropdown.tsx

@@ -0,0 +1,94 @@
+import { allMuniNames } from '@/helpers/munis';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { useState, useEffect, use } from 'react';
+import { isVillageDate } from '@/helpers/courtDates';
+
+// Normalize muni code to 5 digits (pad with "00" if needed)
+const normalizeMuniCode = (code: string): string => {
+    if (!code) return code;
+    return code.length < 5 ? code + '00' : code;
+};
+
+export default function MuniDropdown({
+    selectedMuni,
+    setSelectedMuni,
+    allowClear,
+    size,
+}: {
+    selectedMuni: string | null;
+    setSelectedMuni: (muni: string) => void;
+    allowClear: boolean;
+    size: 'small' | 'medium';
+}) {
+    const [muniOptions, setMuniOptions] = useState<string[]>([]);
+    const [selectedValue, setSelectedValue] = useState<string | null>(null);
+
+    useEffect(() => {
+        const options: string[] = [];
+        Object.keys(allMuniNames).forEach((key) => {
+            let muniName = key;
+            let isVillage = isVillageDate(muniName);
+            const village = isVillage
+                ? (allMuniNames[key].Village || '').replace(/\s+$/, '')
+                : (allMuniNames[key].Township || '').replace(/\s+$/, '');
+            options.push(`(${muniName}) ${village}, ${allMuniNames[key].County}`);
+        });
+        setMuniOptions(options);
+        const normalizedCode = normalizeMuniCode(selectedMuni || '');
+        setSelectedValue(normalizedCode ? options.find((option) => option.includes(`(${normalizedCode})`)) || null : null);
+    }, [allMuniNames]);
+
+    useEffect(() => {
+        const normalizedCode = normalizeMuniCode(selectedMuni || '');
+        setSelectedValue(
+            normalizedCode ? muniOptions.find((option) => option.includes(`(${normalizedCode})`)) || null : null,
+        );
+    }, [selectedMuni, muniOptions]);
+
+    function handleMuniChange(event: React.SyntheticEvent, value: string | null) {
+        setSelectedValue(value);
+        console.log('Selected Muni:', value);
+        const municode = value ? value.match(/\(([^)]+)\)/)?.[1] : '';
+        console.log('Muni Code:', municode);
+        setSelectedMuni(municode || '');
+    }
+
+    return (
+        <Autocomplete
+            options={muniOptions}
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    label='Muni Code'
+                    slotProps={{
+                        inputLabel: {
+                            sx: {
+                                paddingTop: size === 'small' ? '1.4px' : 'unset',
+                            },
+                        },
+                    }}
+                />
+            )}
+            onChange={handleMuniChange}
+            disableClearable={!allowClear}
+            fullWidth
+            value={selectedValue || ''}
+            size={size}
+            slotProps={{
+                paper: { className: 'themed' },
+            }}
+            sx={{
+                '& .MuiInputBase-root': {
+                    minHeight: size === 'small' ? '43.6px !important' : 'unset',
+                },
+                '& .MuiInputBase-root:hover': {
+                    backgroundColor: 'var(--fc-today-bg-color) !important',
+                },
+                '& button': {
+                    transition: 'none !important',
+                },
+            }}
+        />
+    );
+}

package/src/_components/Shared/SearchBar.tsx

@@ -0,0 +1,87 @@
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import CancelIcon from '@mui/icons-material/Cancel';
+import SearchIcon from '@mui/icons-material/Search';
+import IconButton from '@mui/material/IconButton';
+import { useState, useEffect, useRef } from 'react';
+
+export default function SearchBar({
+    searchTerm,
+    setSearchTerm,
+    width,
+}: {
+    searchTerm: string;
+    setSearchTerm: (term: string) => void;
+    width?: string | number;
+}) {
+    const [inputValue, setInputValue] = useState(searchTerm);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    // Keep local inputValue in sync with searchTerm prop
+    useEffect(() => {
+        setInputValue(searchTerm);
+    }, [searchTerm]);
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            if (inputValue !== searchTerm) {
+                setSearchTerm(inputValue);
+            }
+        }, 300);
+        return () => clearTimeout(handler);
+    }, [inputValue, searchTerm, setSearchTerm]);
+
+    return (
+        <TextField
+            aria-label='Search'
+            placeholder='Search...'
+            size='small'
+            variant='outlined'
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            fullWidth={width === undefined}
+            style={{ width: width ?? '100%' }}
+            sx={{
+                '& .MuiOutlinedInput-root:hover': {
+                    backgroundColor: 'var(--fc-today-bg-color) !important',
+                    '& .MuiInputAdornment-root': {
+                        backgroundColor: 'inherit !important',
+                    },
+                },
+            }}
+            slotProps={{
+                input: {
+                    ref: inputRef,
+                    sx: { paddingY: '2px' },
+                    startAdornment: (
+                        <InputAdornment
+                            position='start'
+                            onClick={() => inputRef.current?.focus()}
+                            sx={{ cursor: 'pointer' }}
+                        >
+                            <SearchIcon
+                                fontSize='small'
+                                sx={{
+                                    userSelect: 'none',
+                                    pointerEvents: 'none',
+                                }}
+                            />
+                        </InputAdornment>
+                    ),
+                    endAdornment: inputValue ? (
+                        <InputAdornment position='end'>
+                            <IconButton
+                                size='small'
+                                aria-label='Clear search'
+                                sx={{ marginRight: -0.75, paddingY: '2px' }}
+                                onClick={() => setInputValue('')}
+                            >
+                                <CancelIcon fontSize='small' />
+                            </IconButton>
+                        </InputAdornment>
+                    ) : null,
+                },
+            }}
+        />
+    );
+}

package/src/_components/Toolbar/CaseFilter.tsx

@@ -0,0 +1,77 @@
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import type { CalendarFilterCtx } from '@/types';
+import { useEffect, useState } from 'react';
+import ToggleButton from '@mui/material/ToggleButton';
+import Tooltip from '@mui/material/Tooltip';
+import PendingActionsIcon from '@mui/icons-material/PendingActions';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import ManageSearchIcon from '@mui/icons-material/ManageSearch';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function CaseFilter({
+    filterCtx,
+    setFilterCtx,
+    isFetchingCases,
+}: {
+    filterCtx: CalendarFilterCtx;
+    setFilterCtx: (ctx: CalendarFilterCtx) => void;
+    isFetchingCases: boolean;
+}) {
+    const [filters, setFilters] = useState<string[]>([]);
+
+    function updateFilters() {
+        const newFilters: string[] = [];
+        if (filterCtx.showOnlyUnsettled) newFilters.push('unsettled');
+        if (filterCtx.showOnlyWithoutEvidence) newFilters.push('noevidence');
+        if (filterCtx.showOnlyUnreviewed) newFilters.push('unreviewed');
+        setFilters(newFilters);
+    }
+
+    useEffect(() => {
+        updateFilters();
+    }, [filterCtx]);
+
+    useEffect(() => {
+        updateFilters();
+    }, []);
+
+    function handleFilterChange(e: React.MouseEvent<HTMLElement>, newValue: string[]) {
+        setFilterCtx({
+            ...filterCtx,
+            showOnlyUnsettled: newValue.includes('unsettled'),
+            showOnlyWithoutEvidence: newValue.includes('noevidence'),
+            showOnlyUnreviewed: newValue.includes('unreviewed'),
+        });
+    }
+
+    return (
+        <ToggleButtonGroup value={filters} onChange={handleFilterChange}>
+            <Tooltip title='Show Only Unsettled ' arrow placement='top'>
+                <ToggleButton value='unsettled'>
+                    <PendingActionsIcon fontSize='small' />
+                </ToggleButton>
+            </Tooltip>
+            <Tooltip title='Cases Without Evidence' arrow placement='top'>
+                <ToggleButton value='noevidence'>
+                    <WarningAmberIcon fontSize='small' />
+                </ToggleButton>
+            </Tooltip>
+            <Tooltip title='Show Only Unreviewed ' arrow placement='top'>
+                <ToggleButton value='unreviewed'>
+                    <ManageSearchIcon fontSize='small' />
+                </ToggleButton>
+            </Tooltip>
+            <Tooltip title={isFetchingCases ? 'Updating Cases...' : ''} arrow placement='top'>
+                <CircularProgress
+                    size={24}
+                    sx={{
+                        color: 'var(--text)',
+                        visibility: isFetchingCases ? 'visible' : 'hidden',
+                        marginLeft: '8px',
+                        marginTop: '8px',
+                    }}
+                />
+            </Tooltip>
+        </ToggleButtonGroup>
+    );
+}

package/src/_components/Toolbar/DateTypeFilter.tsx

@@ -0,0 +1,63 @@
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import type { CalendarFilterCtx } from '@/types';
+import { useEffect, useState } from 'react';
+import ToggleButton from '@mui/material/ToggleButton';
+import Tooltip from '@mui/material/Tooltip';
+import FileUploadIcon from '@mui/icons-material/FileUpload';
+import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+
+export default function DateTypeFilter({
+    filterCtx,
+    setFilterCtx,
+}: {
+    filterCtx: CalendarFilterCtx;
+    setFilterCtx: (ctx: CalendarFilterCtx) => void;
+}) {
+    const [filters, setFilters] = useState<string[]>([]);
+
+    function updateFilters() {
+        const newFilters: string[] = [];
+        if (filterCtx.showUploadDeadlines) newFilters.push('upload');
+        if (filterCtx.showAdjournmentDates) newFilters.push('adjournment');
+        if (filterCtx.showCourtDates) newFilters.push('courtdate');
+        setFilters(newFilters);
+    }
+
+    useEffect(() => {
+        updateFilters();
+    }, [filterCtx]);
+
+    useEffect(() => {
+        updateFilters();
+    }, []);
+
+    function handleFilterChange(e: React.MouseEvent<HTMLElement>, newValue: string[]) {
+        setFilterCtx({
+            ...filterCtx,
+            showUploadDeadlines: newValue.includes('upload'),
+            showAdjournmentDates: newValue.includes('adjournment'),
+            showCourtDates: newValue.includes('courtdate'),
+        });
+    }
+
+    return (
+        <ToggleButtonGroup value={filters} onChange={handleFilterChange}>
+            <Tooltip title='Court Dates' arrow placement='top'>
+                <ToggleButton value='courtdate'>
+                    <CalendarMonthIcon fontSize='small' />
+                </ToggleButton>
+            </Tooltip>
+            <Tooltip title='Adjournment Dates' arrow placement='top'>
+                <ToggleButton value='adjournment'>
+                    <HourglassEmptyIcon fontSize='small' />
+                </ToggleButton>
+            </Tooltip>
+            <Tooltip title='Upload Deadlines' arrow placement='top'>
+                <ToggleButton value='upload'>
+                    <FileUploadIcon fontSize='small' />
+                </ToggleButton>
+            </Tooltip>
+        </ToggleButtonGroup>
+    );
+}

package/src/_components/Toolbar/HearingTypeFilter.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import type { CalendarFilterCtx } from '@/types';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import ComputerIcon from '@mui/icons-material/Computer';
+import DriveEtaIcon from '@mui/icons-material/DriveEta';
+import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
+import Tooltip from '@mui/material/Tooltip';
+
+export default function HearingTypeFilter({
+    filterCtx,
+    setFilterCtx,
+}: {
+    filterCtx: CalendarFilterCtx;
+    setFilterCtx: (ctx: CalendarFilterCtx) => void;
+}) {
+    const [filters, setFilters] = useState<string[]>([]);
+
+    function updateFilters() {
+        const newFilters: string[] = [];
+        if (filterCtx.showVirtual) newFilters.push('virtual');
+        if (filterCtx.showInPerson) newFilters.push('inPerson');
+        if (filterCtx.showUnknown) newFilters.push('unknown');
+        setFilters(newFilters);
+    }
+
+    useEffect(() => {
+        updateFilters();
+    }, [filterCtx]);
+
+    useEffect(() => {
+        updateFilters();
+    }, []);
+
+    function handleFilterChange(e: React.MouseEvent<HTMLElement>, newValue: string[]) {
+        setFilterCtx({
+            ...filterCtx,
+            showVirtual: newValue.includes('virtual'),
+            showInPerson: newValue.includes('inPerson'),
+            showUnknown: newValue.includes('unknown'),
+        });
+    }
+
+    return (
+        <ToggleButtonGroup value={filters} onChange={handleFilterChange}>
+            <Tooltip title='Virtual Hearing' arrow placement='top'>
+                <ToggleButton value='virtual'>
+                    <ComputerIcon fontSize='small' sx={{ color: 'var(--fc-event-virtual-color)' }} />
+                </ToggleButton>
+            </Tooltip>
+            <Tooltip title='In Person Hearing' arrow placement='top'>
+                <ToggleButton value='inPerson'>
+                    <DriveEtaIcon fontSize='small' sx={{ color: 'var(--fc-event-inperson-color)' }} />
+                </ToggleButton>
+            </Tooltip>
+            <Tooltip title='Other Hearing Type' arrow placement='top'>
+                <ToggleButton value='unknown'>
+                    <QuestionMarkIcon fontSize='small' sx={{ color: 'var(--fc-event-unknown-color)' }} />
+                </ToggleButton>
+            </Tooltip>
+        </ToggleButtonGroup>
+    );
+}