@propriety/court-calendar 0.0.0

package/src/_components/Modal/CreateEdit/CreateEditCase.tsx

@@ -0,0 +1,241 @@
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import { HearingType, Lifecycle, ModalMode, Status, type Case, type CourtDate } from '@/types';
+import DateSelector from './DateSelector';
+import FormRow from '../../Shared/FormRow';
+import EnumDropdown from './EnumDropdown';
+import EditUserFieldDropdown from './EditUserFieldDropdown';
+import HearingOfficerDropdown from './HearingOfficerDropdown';
+import { TimePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import TextFieldList from './TextFieldList';
+import Switch from '@mui/material/Switch';
+import InputLabel from '@mui/material/InputLabel';
+import { memo, useState, useEffect, useMemo, useCallback } from 'react';
+import MuniDropdown from '@/_components/Shared/MuniDropdown';
+
+const CreateEditCase = memo(function CreateEditCase({
+    edited,
+    setEdited,
+    editedCases,
+    setEditedCases,
+    modalMode,
+}: {
+    edited: CourtDate | undefined;
+    setEdited: (data: CourtDate) => void;
+    editedCases: Case[];
+    setEditedCases: (cases: Case[]) => void;
+    modalMode: ModalMode;
+}) {
+    // Track which fields are toggled to Parcel ID (false = SCAR ID, true = Parcel ID)
+    const [isParcelIdMode, setIsParcelIdMode] = useState<boolean[]>(editedCases.map(() => false));
+
+    // Initialize toggle states based on editedCases length
+    useEffect(() => {
+        if (isParcelIdMode.length !== editedCases.length) {
+            const newToggles = editedCases.map((_, index) => isParcelIdMode[index] || false);
+            setIsParcelIdMode(newToggles);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editedCases.length]);
+
+    function setEditedInterrupt(data: CourtDate) {
+        setEdited({
+            ...data,
+            LastUpdateDate: new Date(),
+            HearingLink: data.Type === HearingType.VIRTUAL ? data.HearingLink : '',
+            Lifecycle:
+                data.Lifecycle !== Lifecycle.UPLOADED && data.FirstChair ? Lifecycle.ASSIGNED : Lifecycle.SCHEDULED,
+        });
+    }
+
+    // Memoize the textFields array to prevent unnecessary re-renders
+    const textFieldsArray = useMemo(
+        () => editedCases.map((c, index) => (isParcelIdMode[index] ? c.ParcelID : c.SCARIndexNumber)),
+        [editedCases, isParcelIdMode],
+    );
+
+    // Memoize the setTextFields callback to prevent unnecessary re-renders
+    const handleSetTextFields = useCallback(
+        (ids: string[], toggles?: boolean[]) => {
+            const updatedCases = ids.map((id, index) => {
+                const isParcelMode = toggles ? toggles[index] : isParcelIdMode[index];
+                return {
+                    ...editedCases[index],
+                    ...(isParcelMode ? { ParcelID: id } : { SCARIndexNumber: id }),
+                };
+            });
+            setEditedCases(updatedCases);
+        },
+        [editedCases, isParcelIdMode, setEditedCases],
+    );
+
+    if (!edited) return null;
+
+    return (
+        <Stack spacing={1.5}>
+            {/* Court Date Info */}
+            <Box>
+                <FormRow gap={7} header='Court Date Information' subheader='Basic details about the court case.'>
+                    <MuniDropdown
+                        selectedMuni={edited.MuniCode || ''}
+                        setSelectedMuni={(muni) => {
+                            setEditedInterrupt({
+                                ...edited,
+                                MuniCode: muni,
+                            });
+                        }}
+                        allowClear={false}
+                        size='medium'
+                    />
+                    {/* <EnumDropdown<typeof Lifecycle>
+                        edited={edited}
+                        setEdited={setEditedInterrupt}
+                        enumObject={Lifecycle}
+                        label='Lifecycle'
+                    /> */}
+                </FormRow>
+                <FormRow gap={7}>
+                    <EditUserFieldDropdown
+                        label='First Chair'
+                        edited={edited}
+                        setEdited={setEditedInterrupt}
+                        userPropertyName='FirstChair'
+                    />
+                    <EditUserFieldDropdown
+                        label='Second Chair'
+                        edited={edited}
+                        setEdited={setEditedInterrupt}
+                        userPropertyName='SecondChair'
+                    />
+                </FormRow>
+                <FormRow gap={7}>
+                    <TextField
+                        label='Notes'
+                        value={edited.Notes || ''}
+                        onChange={(e) =>
+                            setEditedInterrupt({
+                                ...edited,
+                                Notes: e.target.value,
+                            })
+                        }
+                        fullWidth
+                        multiline
+                        rows={2}
+                    />
+                </FormRow>
+            </Box>
+
+            <Divider />
+
+            {/* Dates */}
+            <Box>
+                <FormRow
+                    gap={7}
+                    header='Dates'
+                    subheader='Select the relevant dates for the court case. Upload date is set at 10 days before the court date (or ajournment date if applicable).'
+                >
+                    <DateSelector
+                        editing={edited}
+                        property='CourtDate'
+                        disabled={modalMode === ModalMode.EDIT}
+                        label='Court Date'
+                        setEdited={setEditedInterrupt}
+                    />
+                    <Stack direction='column' alignItems='center' spacing={1}>
+                        <InputLabel htmlFor='adjourned-switch'>Adjourned</InputLabel>
+                        <Switch
+                            checked={!!edited.IsAdjourned}
+                            onChange={(e) =>
+                                setEditedInterrupt({
+                                    ...edited,
+                                    IsAdjourned: e.target.checked,
+                                })
+                            }
+                            disabled={modalMode === ModalMode.CREATE}
+                        />
+                    </Stack>
+                    <DateSelector
+                        editing={edited}
+                        property='AdjournmentDate'
+                        disabled={modalMode === ModalMode.CREATE || !edited.IsAdjourned}
+                        label='Adjournment Date'
+                        setEdited={setEditedInterrupt}
+                    />
+                </FormRow>
+            </Box>
+
+            <Divider />
+
+            {/* Hearing Details */}
+            <Box>
+                <FormRow
+                    gap={7}
+                    header='Hearing Details'
+                    subheader='You can specify the hearing link if the hearing is virtual. '
+                >
+                    <TimePicker
+                        label='Hearing Time'
+                        onChange={(val) => {
+                            setEditedInterrupt({
+                                ...edited,
+                                HearingTime: val ? val.format('HH:mm') : '',
+                            });
+                        }}
+                        value={edited.HearingTime ? dayjs(`1970-01-01T${edited.HearingTime}:00`) : null}
+                        slotProps={{
+                            popper: { className: 'themed' },
+                            field: { style: { width: '100%' } },
+                        }}
+                    />
+                    <HearingOfficerDropdown label='Hearing Officer' edited={edited} setEdited={setEditedInterrupt} />
+                </FormRow>
+                <FormRow gap={7}>
+                    <EnumDropdown<typeof HearingType>
+                        edited={edited}
+                        setEdited={setEditedInterrupt}
+                        enumObject={HearingType}
+                        label='Type'
+                    />
+                    <TextField
+                        label='Hearing Link'
+                        fullWidth
+                        value={edited.HearingLink || ''}
+                        onChange={(e) =>
+                            setEditedInterrupt({
+                                ...edited,
+                                HearingLink: e.target.value,
+                            })
+                        }
+                        disabled={edited.Type !== HearingType.VIRTUAL}
+                        slotProps={{
+                            inputLabel: {
+                                className: edited.Type !== HearingType.VIRTUAL ? 'ccdisabled' : '',
+                            },
+                        }}
+                    />
+                </FormRow>
+            </Box>
+
+            <Divider />
+
+            {/* Scar IDs / Parcel IDs */}
+            <Box>
+                <TextFieldList
+                    label='Case IDs'
+                    textFields={textFieldsArray}
+                    setTextFields={handleSetTextFields}
+                    fieldLabelPrefix='SCAR ID'
+                    alternateFieldLabelPrefix='Parcel ID'
+                    toggleStates={isParcelIdMode}
+                    setToggleStates={setIsParcelIdMode}
+                    modalMode={modalMode}
+                />
+            </Box>
+        </Stack>
+    );
+});
+
+export default CreateEditCase;

package/src/_components/Modal/CreateEdit/DateSelector.tsx

@@ -0,0 +1,42 @@
+import { DatePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import type { CourtDate } from '@/types';
+
+export default function DateSelector({
+    editing,
+    property,
+    label,
+    setEdited,
+    disabled,
+}: {
+    editing: CourtDate | undefined;
+    property: keyof CourtDate;
+    label: string;
+    setEdited: (data: CourtDate) => void;
+    disabled: boolean;
+}) {
+    return (
+        <DatePicker
+            label={label}
+            disabled={disabled}
+            value={
+                editing && editing[property] && typeof editing[property] !== 'boolean'
+                    ? dayjs(editing[property] as string | number | Date)
+                    : null
+            }
+            onChange={(newValue) => {
+                setEdited({
+                    ...editing!,
+                    [property]: newValue!.toDate(),
+                });
+            }}
+            reduceAnimations
+            sx={{ width: '100%' }}
+            slotProps={{
+                popper: {
+                    className: 'themed',
+                },
+            }}
+        />
+    );
+}

package/src/_components/Modal/CreateEdit/EditUserFieldDropdown.tsx

@@ -0,0 +1,54 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { allUsers } from '@/helpers/people';
+import type { CourtDate } from '@/types';
+
+export default function EditUserFieldDropdown({
+    label,
+    edited,
+    setEdited,
+    userPropertyName,
+}: {
+    label: string;
+    edited: CourtDate;
+    setEdited: (edited: CourtDate) => void;
+    userPropertyName: keyof CourtDate;
+}) {
+    const excludedUserLastnames = ['Import', 'Memos', 'Table', 'Note', 'Robot', 'Ingestion'];
+
+    // Prepare filtered user options
+    const userOptions = Object.values(allUsers).filter(
+        (option) => option.UserLastName && !excludedUserLastnames.includes(option.UserLastName),
+    );
+
+    // Find the selected user object based on the value in edited
+    const selectedUser = userOptions.find((u) => u.UserID === edited[userPropertyName]) || null;
+
+    return (
+        <Autocomplete
+            options={userOptions}
+            getOptionLabel={(option) => `${option.UserFirstName} ${option.UserLastName}`}
+            value={selectedUser}
+            onChange={(_, newValue) =>
+                setEdited({
+                    ...edited,
+                    [userPropertyName]: newValue ? newValue.UserID : '',
+                })
+            }
+            isOptionEqualToValue={(option, value) => option.UserID === value.UserID}
+            renderInput={(params) => <TextField {...params} label={label} fullWidth />}
+            size='medium'
+            fullWidth
+            classes={{ paper: 'themed' }}
+            sx={{
+                minWidth: 120,
+                '& .MuiInputBase-root:hover': {
+                    backgroundColor: 'var(--fc-today-bg-color) !important',
+                },
+                '& button': {
+                    transition: 'none !important',
+                },
+            }}
+        />
+    );
+}

package/src/_components/Modal/CreateEdit/EnumDropdown.tsx

@@ -0,0 +1,54 @@
+import type { CourtDate } from '@/types';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+
+export default function EnumDropdown<T extends object>({
+    edited,
+    setEdited,
+    enumObject,
+    label,
+}: {
+    edited: CourtDate;
+    setEdited: (data: CourtDate) => void;
+    enumObject: T;
+    label: string;
+}) {
+    return (
+        <FormControl size='medium' sx={{ minWidth: 120 }} fullWidth>
+            <InputLabel id={`${label.replace(/\s+/g, '-').toLowerCase()}-select-label`}>{label}</InputLabel>
+            <Select
+                labelId={`${label.replace(/\s+/g, '-').toLowerCase()}-select-label`}
+                value={edited[label as keyof CourtDate] || ''}
+                label={label}
+                onChange={(e) =>
+                    setEdited({
+                        ...edited!,
+                        [label]: e.target.value,
+                    })
+                }
+                MenuProps={{
+                    MenuListProps: {
+                        className: 'themed',
+                    },
+                }}
+                sx={{
+                    '& .MuiSelect-icon': {
+                        color: 'var(--text)',
+                    },
+                }}
+            >
+                {Object.values(enumObject).map(
+                    (option) =>
+                        (option as unknown as string) &&
+                        option !== 'All' && (
+                            <MenuItem key={option} value={option}>
+                                {option}
+                            </MenuItem>
+                        ),
+                )}
+            </Select>
+        </FormControl>
+    );
+}

package/src/_components/Modal/CreateEdit/HearingOfficerDropdown.tsx

@@ -0,0 +1,48 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { allHearingOfficers } from '@/helpers/people';
+import type { CourtDate } from '@/types';
+
+export default function HearingOfficerDropdown({
+    label,
+    edited,
+    setEdited,
+}: {
+    label: string;
+    edited: CourtDate;
+    setEdited: (edited: CourtDate) => void;
+}) {
+    // Prepare filtered officer options
+    const officerOptions = Object.values(allHearingOfficers).filter((option) => !!option.OfficerName);
+
+    // Find the selected officer object based on the value in edited
+    const selectedOfficer = officerOptions.find((o) => o.OfficerID === edited.HearingOfficer) || null;
+
+    return (
+        <Autocomplete
+            options={officerOptions}
+            getOptionLabel={(option) => option.OfficerName}
+            value={selectedOfficer}
+            onChange={(_, newValue) =>
+                setEdited({
+                    ...edited,
+                    HearingOfficer: newValue ? newValue.OfficerID : null,
+                })
+            }
+            isOptionEqualToValue={(option, value) => option.OfficerID === value.OfficerID}
+            renderInput={(params) => <TextField {...params} label={label} fullWidth />}
+            size='medium'
+            fullWidth
+            classes={{ paper: 'themed' }}
+            sx={{
+                minWidth: 120,
+                '& .MuiInputBase-root:hover': {
+                    backgroundColor: 'var(--fc-today-bg-color) !important',
+                },
+                '& button': {
+                    transition: 'none !important',
+                },
+            }}
+        />
+    );
+}

package/src/_components/Modal/CreateEdit/TextFieldList.tsx

@@ -0,0 +1,186 @@
+import Stack from '@mui/material/Stack';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import TrashIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import TextField from '@mui/material/TextField';
+import Fab from '@mui/material/Fab';
+import Typography from '@mui/material/Typography';
+import { ModalMode } from '@/types';
+import ToggleableTextField from './ToggleableTextField';
+import Box from '@mui/material/Box';
+
+export default function TextFieldList({
+    textFields,
+    setTextFields,
+    label,
+    fieldLabelPrefix,
+    modalMode,
+    toggleStates,
+    setToggleStates,
+    alternateFieldLabelPrefix,
+}: {
+    textFields: string[];
+    setTextFields: (fields: string[], toggles?: boolean[]) => void;
+    label: string;
+    fieldLabelPrefix: string;
+    modalMode: ModalMode;
+    toggleStates?: boolean[];
+    setToggleStates?: (toggles: boolean[]) => void;
+    alternateFieldLabelPrefix?: string;
+}) {
+    const [numFields, setNumFields] = useState<number>(Math.max(textFields.length, 1));
+    // Local state for text values to avoid re-rendering parent on every keystroke
+    const [localFields, setLocalFields] = useState<string[]>(textFields);
+    const boxRef = useRef<HTMLDivElement>(null);
+
+    // Sync local state when textFields prop changes (e.g., on initial load or external updates)
+    useEffect(() => {
+        setLocalFields(textFields);
+    }, [textFields]);
+
+    // Sync numFields with textFields length when it changes
+    useEffect(() => {
+        setNumFields(Math.max(textFields.length, 1));
+    }, [textFields.length]);
+
+    const addField = useCallback(() => {
+        setNumFields((prev) => prev + 1);
+        setLocalFields((prev) => [...prev, '']);
+        // Add default toggle state (false) for new field if toggles are enabled
+        if (setToggleStates && toggleStates) {
+            const newToggles = [...toggleStates, false];
+            setToggleStates(newToggles);
+        }
+        // scroll to bottom to show new field
+        setTimeout(() => {
+            if (boxRef.current) {
+                boxRef.current.scrollTop = boxRef.current.scrollHeight;
+            }
+        }, 0);
+    }, [setToggleStates, toggleStates]);
+
+    const updateField = useCallback(
+        (index: number, value: string) => {
+            // Update local state immediately for responsive typing
+            setLocalFields((prev) => {
+                const newFields = [...prev];
+                newFields[index] = value;
+                return newFields;
+            });
+        },
+        [],
+    );
+
+    const syncToParent = useCallback(() => {
+        // Sync local state to parent on blur
+        const newToggles = toggleStates ? [...toggleStates] : [];
+        setTextFields(localFields, newToggles);
+    }, [localFields, toggleStates, setTextFields]);
+
+    const removeField = useCallback(
+        (index: number) => {
+            const newFields = [...localFields];
+            newFields.splice(index, 1);
+            const newToggles = toggleStates ? [...toggleStates] : [];
+            if (toggleStates) {
+                newToggles.splice(index, 1);
+            }
+            setLocalFields(newFields);
+            setTextFields(newFields, newToggles);
+            setNumFields(Math.max(newFields.length, 1));
+        },
+        [localFields, toggleStates, setTextFields],
+    );
+
+    const handleToggleChange = useCallback(
+        (index: number, checked: boolean) => {
+            if (!setToggleStates || !toggleStates) return;
+            const newToggles = [...toggleStates];
+            newToggles[index] = checked;
+            setToggleStates(newToggles);
+        },
+        [setToggleStates, toggleStates],
+    );
+
+    return (
+        <Stack spacing={2}>
+            <Stack direction='row' spacing={2} alignItems='center'>
+                <Fab
+                    color='primary'
+                    size='small'
+                    onClick={addField}
+                    disabled={numFields > textFields.length || modalMode === ModalMode.EDIT}
+                    style={{
+                        boxShadow: '1px 1px 3px rgba(0,0,0,0.2)',
+                        minWidth: 40,
+                    }}
+                >
+                    <AddIcon fontSize='small' />
+                </Fab>
+                <Stack direction='column'>
+                    <Typography variant='h6'>{label}</Typography>
+                    <Typography variant='body2' sx={{ opacity: 0.85 }}>
+                        {alternateFieldLabelPrefix
+                            ? `Add or remove fields as needed. Toggle between ${fieldLabelPrefix} and ${alternateFieldLabelPrefix} for each field.`
+                            : `Add or remove ${fieldLabelPrefix.toLowerCase()}s as needed. You can add more fields after completing the current ones.`}
+                    </Typography>
+                </Stack>
+            </Stack>
+
+            <Box
+                sx={{
+                    maxHeight: numFields > 3 ? '60vh' : 'none',
+                    overflow: numFields > 3 ? 'auto' : 'visible',
+                    paddingY: 1,
+                }}
+                ref={boxRef}
+            >
+                <Stack spacing={2}>
+                    {Array.from({ length: numFields }).map((_, index) => {
+                        const isToggled = toggleStates && toggleStates[index];
+                        const currentLabel = isToggled ? alternateFieldLabelPrefix : fieldLabelPrefix;
+
+                        return (
+                            <Stack direction='row' spacing={1} alignItems='center' key={index}>
+                                <Fab
+                                    color='error'
+                                    size='small'
+                                    disabled={modalMode === ModalMode.EDIT || numFields <= 1}
+                                    onClick={() => removeField(index)}
+                                    style={{
+                                        minWidth: 40,
+                                        boxShadow: '1px 1px 3px rgba(0,0,0,0.2)',
+                                    }}
+                                >
+                                    <TrashIcon fontSize='small' />
+                                </Fab>
+
+                                {toggleStates && setToggleStates && alternateFieldLabelPrefix ? (
+                                    <ToggleableTextField
+                                        index={index}
+                                        value={localFields[index] || ''}
+                                        onChange={(value) => updateField(index, value)}
+                                        onBlur={syncToParent}
+                                        isToggled={isToggled || false}
+                                        onToggleChange={(checked) => handleToggleChange(index, checked)}
+                                        fieldLabelPrefix={fieldLabelPrefix}
+                                        alternateFieldLabelPrefix={alternateFieldLabelPrefix}
+                                    />
+                                ) : (
+                                    <TextField
+                                        key={index}
+                                        label={`${currentLabel} ${index + 1}`}
+                                        value={localFields[index] || ''}
+                                        onChange={(e) => updateField(index, e.target.value)}
+                                        onBlur={syncToParent}
+                                        fullWidth
+                                    />
+                                )}
+                            </Stack>
+                        );
+                    })}
+                </Stack>
+            </Box>
+        </Stack>
+    );
+}