@propriety/court-calendar 0.0.0

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

@@ -0,0 +1,91 @@
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Switch from '@mui/material/Switch';
+
+export default function ToggleableTextField({
+    index,
+    value,
+    onChange,
+    onBlur,
+    isToggled,
+    onToggleChange,
+    fieldLabelPrefix,
+    alternateFieldLabelPrefix,
+}: {
+    index: number;
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    isToggled: boolean;
+    onToggleChange: (checked: boolean) => void;
+    fieldLabelPrefix: string;
+    alternateFieldLabelPrefix: string;
+}) {
+    return (
+        <TextField
+            label={
+                <Box
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                        borderRadius: '12px',
+                        '&:hover': { cursor: 'pointer', backgroundColor: 'var(--fc-today-bg-color) !important' },
+                    }}
+                >
+                    <Typography
+                        variant='caption'
+                        sx={{
+                            fontSize: '1rem',
+                            fontWeight: !isToggled ? 600 : 400,
+                            color: !isToggled ? 'primary.main' : 'var(--text)',
+                            opacity: !isToggled ? 1 : '0.5 !important',
+                            transition: 'all 0.2s',
+                        }}
+                    >
+                        {fieldLabelPrefix}
+                    </Typography>
+                    <Switch
+                        checked={isToggled}
+                        onChange={(e) => {
+                            e.stopPropagation();
+                            onToggleChange(e.target.checked);
+                        }}
+                        size='medium'
+                    />
+                    <Typography
+                        variant='caption'
+                        sx={{
+                            fontSize: '1rem',
+                            fontWeight: isToggled ? 600 : 400,
+                            color: isToggled ? 'primary.main' : 'var(--text)',
+                            transition: 'all 0.2s',
+                            opacity: isToggled ? 1 : '0.5 !important',
+                        }}
+                    >
+                        {alternateFieldLabelPrefix}
+                    </Typography>
+                </Box>
+            }
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            onBlur={onBlur}
+            fullWidth
+            slotProps={{
+                inputLabel: {
+                    shrink: true,
+                    sx: {
+                        borderRadius: '12px',
+                        top: '-3px',
+                    },
+                },
+            }}
+            sx={{
+                '& legend': {
+                    width: '170px',
+                },
+            }}
+        />
+    );
+}

package/src/_components/Modal/Modal.css

@@ -0,0 +1,15 @@
+/* Modal appearing animation */
+.modal-appear-animate {
+    animation: modalFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.96) translateY(24px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}

package/src/_components/Modal/Modal.tsx

@@ -0,0 +1,325 @@
+import { useEffect, useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import { Lifecycle, ModalMode, SourceType, type CalendarFilterCtx, type Case, type CourtDate } from '@/types';
+import CaseViewer from './View/CaseViewer';
+import DateDetails from './View/DateDetails';
+import ModalActions from './ModalActions';
+import CreateEditCase from './CreateEdit/CreateEditCase';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { createCourtDate, deleteCourtDate, isVillageDate, updateCourtDate } from '@/helpers/courtDates';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import './Modal.css';
+import CaseDetails from './CaseDetails/CaseDetails';
+import Paper from '@mui/material/Paper';
+
+export default function CCModal({
+    modalIsOpen,
+    modalMode,
+    setModalMode,
+    setIsOpen,
+    selectedCourtDate,
+    updateCourtDateInMemory,
+    filterCtx,
+    setFilterCtx,
+    selectedCases,
+    updateCases,
+    deleteCases,
+    isFetchingCases,
+    apiKey,
+}: {
+    modalIsOpen: boolean;
+    modalMode: ModalMode;
+    setModalMode: (mode: ModalMode) => void;
+    setIsOpen: (isOpen: boolean) => void;
+    selectedCourtDate: CourtDate | null;
+    updateCourtDateInMemory: (updatedDate: CourtDate, del?: boolean) => void;
+    filterCtx: CalendarFilterCtx;
+    setFilterCtx: (ctx: CalendarFilterCtx) => void;
+    selectedCases: Case[];
+    updateCases: (cases: Record<string, Case[]>) => void;
+    deleteCases: (courtDateId: string) => void;
+    isFetchingCases: boolean;
+    apiKey: string;
+}) {
+    const [editedData, setEditedData] = useState<CourtDate | undefined>(undefined);
+    const [editedCases, setEditedCases] = useState<Case[]>([]);
+    const [clickedCase, setClickedCase] = useState<Case | null>(null);
+
+    useEffect(() => {
+        if (!modalIsOpen) {
+            setModalMode(ModalMode.DETAILS);
+            setClickedCase(null);
+        }
+    }, [modalIsOpen]);
+
+    useEffect(() => {
+        if (clickedCase !== null) {
+            setModalMode(ModalMode.CASE_DETAILS);
+        }
+    }, [clickedCase]);
+
+    useEffect(() => {
+        if (modalMode === ModalMode.DETAILS) {
+            setClickedCase(null);
+        }
+    }, [modalMode]);
+
+    useEffect(() => {
+        if (modalMode === ModalMode.EDIT && selectedCourtDate) {
+            setEditedData(selectedCourtDate);
+            setEditedCases(selectedCases);
+        }
+    }, [modalMode, selectedCourtDate, selectedCases]);
+
+    useEffect(() => {
+        if (modalMode === ModalMode.CREATE) {
+            // Initialize with blank data for create mode, using selectedCourtDate.CourtDate if available
+            setEditedData({
+                CourtDateID: 0,
+                CourtDate: selectedCourtDate?.CourtDate ? new Date(selectedCourtDate.CourtDate) : new Date(),
+                MuniCode: '',
+                UploadDeadline: null,
+                CourtCases: 0,
+                Lifecycle: Lifecycle.SCHEDULED,
+                HearingTime: '',
+                HearingLink: null,
+                Source: SourceType.MANUAL,
+                Type: null,
+                FirstChair: null,
+                SecondChair: null,
+                HearingOfficer: null,
+                EnterDate: new Date(),
+                LastUpdateDate: null,
+                AdjournmentDate: null,
+                IsAdjourned: false,
+                Notes: null,
+                NoticeFile: null,
+            });
+            setEditedCases([
+                {
+                    ParcelID: '',
+                    Municipality: '',
+                    Negotiator: 0,
+                    Year: new Date().getFullYear(),
+                    property_data: { Address: '', PropertyOwnerFull: '' },
+                    evidence: null,
+                    SCARIndexNumber: '',
+                    SCARDeterminationAction: '',
+                    SCARSettleDate: null,
+                    SCARFileDate: null,
+                    VillageSCARIndexNumber: '',
+                    VillageSCARDeterminationAction: '',
+                    VillageSCARSettleDate: null,
+                    VillageSCARFileDate: null,
+                    DateCompleted: null,
+                },
+            ]);
+        }
+    }, [modalMode, selectedCourtDate]);
+
+    // #region Handlers
+    function validateEditedData(): { valid: boolean; message?: string } {
+        if (!editedData) return { valid: false, message: 'No data to validate' };
+
+        // REQUIRED FIELDS
+        if (!editedData.CourtDate) return { valid: false, message: 'CourtDate is required' };
+        if (!editedData.MuniCode || editedData.MuniCode.trim() === '')
+            return { valid: false, message: 'MuniCode is required' };
+
+        // validation passed
+        return { valid: true };
+    }
+
+    async function handleSave() {
+        if (!editedData) return;
+        const validation = validateEditedData();
+        if (!validation.valid) {
+            alert(`Validation failed: ${validation.message}`);
+            return;
+        }
+        if (modalMode === ModalMode.CREATE) {
+            await handleCreate();
+            return;
+        }
+        await updateCourtDate(
+            editedData.CourtDateID,
+            editedData,
+            apiKey,
+            editedCases.map((c) => c.SCARIndexNumber),
+        );
+        // Update cache after save
+        const courtDateId = editedData.CourtDateID;
+        if (courtDateId) {
+            updateCases({ [courtDateId.toString()]: editedCases });
+        }
+        setIsOpen(false); // TODO notification
+        updateCourtDateInMemory(editedData);
+    }
+
+    async function handleCreate() {
+        if (!editedData) return;
+        const validation = validateEditedData();
+        if (!validation.valid) {
+            alert(`Validation failed: ${validation.message}`);
+            return;
+        }
+        const id = await createCourtDate(
+            editedData.CourtDate,
+            editedData.MuniCode,
+            apiKey,
+            editedCases.map((c) => c.SCARIndexNumber),
+        );
+        if (id) {
+            const updatedData = { ...editedData, CourtDateID: id };
+            setEditedData(updatedData);
+            await updateCourtDate(id, updatedData, apiKey);
+            updateCourtDateInMemory(updatedData);
+            // Update cache after create
+            updateCases({ [id.toString()]: editedCases });
+        }
+        setIsOpen(false); // TODO notification
+    }
+
+    async function handleDelete() {
+        const res = window.confirm('Are you sure you want to delete this court date?');
+        if (res) {
+            await deleteCourtDate(selectedCourtDate!.CourtDateID, apiKey);
+            updateCourtDateInMemory(selectedCourtDate!, true);
+            // Remove from cache after delete
+            const courtDateId = selectedCourtDate!.CourtDateID;
+            if (courtDateId) {
+                deleteCases(courtDateId.toString());
+            }
+            setIsOpen(false); // TODO notification
+        }
+    }
+    // #endregion
+
+    // #region render
+    return (
+        <Dialog
+            open={modalIsOpen}
+            onClose={() => setIsOpen(false)}
+            fullWidth
+            maxWidth='lg'
+            slotProps={{
+                paper: {
+                    className: 'modal-appear-animate',
+                    sx: {
+                        background:
+                            'linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0)) !important',
+                    },
+                },
+            }}
+        >
+            <DialogTitle
+                className='themed'
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                }}
+            >
+                {modalMode === ModalMode.DETAILS
+                    ? 'Court Date Details'
+                    : modalMode === ModalMode.CREATE
+                      ? 'Create Court Date'
+                      : modalMode === ModalMode.EDIT
+                        ? 'Edit Court Date'
+                        : modalMode === ModalMode.CASE_DETAILS
+                          ? 'Case Details'
+                          : ''}
+                <IconButton aria-label='close' onClick={() => setIsOpen(false)} edge='end' size='small'>
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent dividers className='themed' sx={{ position: 'relative' }}>
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                    <div
+                        style={{
+                            opacity: modalMode === ModalMode.DETAILS ? 1 : 0,
+                            pointerEvents: modalMode === ModalMode.DETAILS ? 'auto' : 'none',
+                            position: modalMode === ModalMode.DETAILS ? 'relative' : 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            transition: modalMode === ModalMode.DETAILS ? 'opacity 0.15s ease-in-out' : 'none',
+                            overflow: modalMode === ModalMode.DETAILS ? 'visible' : 'hidden',
+                            maxHeight: modalMode === ModalMode.DETAILS ? 'none' : 0,
+                        }}
+                    >
+                        <DateDetails selectedCourtDate={selectedCourtDate} apiKey={apiKey} />
+                        <CaseViewer
+                            cases={selectedCases}
+                            isFetchingCases={isFetchingCases}
+                            filterCtx={filterCtx}
+                            setFilterCtx={setFilterCtx}
+                            setClickedCase={setClickedCase}
+                            isVillage={isVillageDate(selectedCourtDate ? selectedCourtDate.MuniCode : '')}
+                        />
+                    </div>
+                    {(modalMode === ModalMode.EDIT || modalMode === ModalMode.CREATE) && editedData && (
+                        <div
+                            style={{
+                                opacity: modalMode === ModalMode.EDIT || modalMode === ModalMode.CREATE ? 1 : 0,
+                                pointerEvents:
+                                    modalMode === ModalMode.EDIT || modalMode === ModalMode.CREATE ? 'auto' : 'none',
+                                position:
+                                    modalMode === ModalMode.EDIT || modalMode === ModalMode.CREATE
+                                        ? 'relative'
+                                        : 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                transition:
+                                    modalMode === ModalMode.EDIT || modalMode === ModalMode.CREATE
+                                        ? 'opacity 0.15s ease-in-out'
+                                        : 'none',
+                            }}
+                        >
+                            <CreateEditCase
+                                edited={editedData}
+                                setEdited={setEditedData}
+                                editedCases={editedCases}
+                                setEditedCases={setEditedCases}
+                                modalMode={modalMode}
+                            />
+                        </div>
+                    )}
+                    {clickedCase !== null && (
+                        <div
+                            style={{
+                                opacity: modalMode === ModalMode.CASE_DETAILS ? 1 : 0,
+                                pointerEvents: modalMode === ModalMode.CASE_DETAILS ? 'auto' : 'none',
+                                position: modalMode === ModalMode.CASE_DETAILS ? 'relative' : 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                transition: modalMode === ModalMode.CASE_DETAILS ? 'opacity 0.15s ease-in-out' : 'none',
+                                overflow: modalMode === ModalMode.CASE_DETAILS ? 'visible' : 'hidden',
+                                maxHeight: modalMode === ModalMode.CASE_DETAILS ? 'none' : 0,
+                            }}
+                        >
+                            <CaseDetails
+                                selectedCase={clickedCase}
+                                isVillage={isVillageDate(selectedCourtDate ? selectedCourtDate.MuniCode : '')}
+                            />
+                        </div>
+                    )}
+                </LocalizationProvider>
+            </DialogContent>
+            <ModalActions
+                modalMode={modalMode}
+                onDelete={handleDelete}
+                onSave={handleSave}
+                setModalMode={setModalMode}
+                setIsOpen={setIsOpen}
+            />
+        </Dialog>
+    );
+    // #endregion
+}

package/src/_components/Modal/ModalActions.tsx

@@ -0,0 +1,99 @@
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import { ModalMode } from '@/types';
+import { useRef, useState } from 'react';
+
+export default function ModalActions({
+    modalMode,
+    onDelete,
+    onSave,
+    setModalMode,
+    setIsOpen,
+}: {
+    modalMode: ModalMode;
+    onDelete: () => void;
+    onSave: () => void;
+    setModalMode: (mode: ModalMode) => void;
+    setIsOpen: (isOpen: boolean) => void;
+}) {
+    const [showDelete, setShowDelete] = useState(false);
+    const clickTimes = useRef<number[]>([]);
+
+    const handleDivClick = () => {
+        const now = Date.now();
+        clickTimes.current = clickTimes.current.filter((t) => now - t < 600);
+        clickTimes.current.push(now);
+        if (clickTimes.current.length >= 3) {
+            setShowDelete(true);
+            clickTimes.current = [];
+        }
+    };
+
+    return (
+        <>
+            <DialogActions
+                className='modal-footer'
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '15px 15px',
+                    borderTop: '1px solid var(--fc-border-color)',
+                    backgroundColor: 'var(--bg) !important',
+                }}
+            >
+                <Button
+                    className=''
+                    onClick={
+                        modalMode === ModalMode.DETAILS || modalMode === ModalMode.CREATE
+                            ? () => setIsOpen(false)
+                            : () => setModalMode(ModalMode.DETAILS)
+                    }
+                    color='error'
+                    variant='outlined'
+                    style={{ margin: '0' }}
+                >
+                    {modalMode === ModalMode.DETAILS || modalMode === ModalMode.CREATE
+                        ? 'Close'
+                        : modalMode === ModalMode.EDIT
+                          ? 'Cancel'
+                          : 'Back'}
+                </Button>
+                <div
+                    style={{
+                        width: 90,
+                        height: 40,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'unset',
+                        userSelect: 'none',
+                    }}
+                    onClick={handleDivClick}
+                >
+                    {showDelete && (
+                        <Button
+                            className=''
+                            onClick={onDelete}
+                            color='error'
+                            variant='outlined'
+                            style={{ margin: '0' }}
+                        >
+                            Delete
+                        </Button>
+                    )}
+                </div>
+                <Button
+                    className=''
+                    onClick={modalMode === ModalMode.DETAILS ? () => setModalMode(ModalMode.EDIT) : onSave}
+                    color='primary'
+                    variant='contained'
+                    style={{ margin: '0' }}
+                    disabled={modalMode === ModalMode.CASE_DETAILS}
+                >
+                    {modalMode === ModalMode.DETAILS ? 'Edit' : 'Save'}
+                </Button>
+            </DialogActions>
+        </>
+    );
+}

package/src/_components/Modal/View/CaseToolbar.tsx

@@ -0,0 +1,81 @@
+import Box from '@mui/material/Box';
+import type { CalendarFilterCtx } from '@/types';
+import SearchBar from '../../Shared/SearchBar';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+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';
+
+export default function CaseToolbar({
+    filterCtx,
+    setFilterCtx,
+}: {
+    filterCtx: CalendarFilterCtx;
+    setFilterCtx: (ctx: CalendarFilterCtx) => void;
+}) {
+    return (
+        <Box display='flex' alignItems='center' justifyContent='space-between' sx={{ p: 0, gap: 2 }} className='themed'>
+            {/* search bar */}
+            <SearchBar
+                searchTerm={filterCtx.searchTerm}
+                setSearchTerm={(term) => setFilterCtx({ ...filterCtx, searchTerm: term })}
+            />
+
+            {/* show only unsettled */}
+            <ToggleButtonGroup>
+                <Tooltip title={`Show Only Unsettled`} arrow placement='top'>
+                    <ToggleButton
+                        value='unsettled'
+                        selected={filterCtx.showOnlyUnsettled}
+                        onClick={() =>
+                            setFilterCtx({
+                                ...filterCtx,
+                                showOnlyUnsettled: !filterCtx.showOnlyUnsettled,
+                            })
+                        }
+                    >
+                        <PendingActionsIcon fontSize='small' />
+                    </ToggleButton>
+                </Tooltip>
+            </ToggleButtonGroup>
+
+            {/* show only without evidence */}
+            <ToggleButtonGroup>
+                <Tooltip title={`Show Only Without Evidence`} arrow placement='top'>
+                    <ToggleButton
+                        value='withoutEvidence'
+                        selected={filterCtx.showOnlyWithoutEvidence}
+                        onClick={() =>
+                            setFilterCtx({
+                                ...filterCtx,
+                                showOnlyWithoutEvidence: !filterCtx.showOnlyWithoutEvidence,
+                            })
+                        }
+                    >
+                        <WarningAmberIcon fontSize='small' />
+                    </ToggleButton>
+                </Tooltip>
+            </ToggleButtonGroup>
+
+            {/* show only unreviewed */}
+            <ToggleButtonGroup>
+                <Tooltip title={`Show Only Unreviewed`} arrow placement='top'>
+                    <ToggleButton
+                        value='unreviewed'
+                        selected={filterCtx.showOnlyUnreviewed}
+                        onClick={() =>
+                            setFilterCtx({
+                                ...filterCtx,
+                                showOnlyUnreviewed: !filterCtx.showOnlyUnreviewed,
+                            })
+                        }
+                    >
+                        <ManageSearchIcon fontSize='small' />
+                    </ToggleButton>
+                </Tooltip>
+            </ToggleButtonGroup>
+        </Box>
+    );
+}