@propriety/court-calendar 0.0.0

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

@@ -0,0 +1,237 @@
+import { useEffect, useMemo, useState, memo } from 'react';
+import type { CalendarFilterCtx, Case } from '@/types';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { formatEvidence } from '@/helpers/formatter';
+import CircularProgress from '@mui/material/CircularProgress';
+import { DataGrid, type GridColDef } from '@mui/x-data-grid';
+import CaseToolbar from './CaseToolbar';
+import { isCaseMissingEvidence, isCaseSettled } from '@/helpers/cases';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
+
+const CaseViewer = memo(function CaseViewer({
+    cases,
+    isFetchingCases,
+    filterCtx,
+    setFilterCtx,
+    setClickedCase,
+    isVillage,
+}: {
+    cases: Case[];
+    isFetchingCases: boolean;
+    filterCtx: CalendarFilterCtx;
+    setFilterCtx: (ctx: CalendarFilterCtx) => void;
+    setClickedCase: (caseItem: Case | null) => void;
+    isVillage: boolean;
+}) {
+    const columns: GridColDef[] = [
+        {
+            field: 'scarIndexNumber',
+            headerName: 'Index',
+            width: 120,
+            disableColumnMenu: true,
+        },
+        {
+            field: 'owner',
+            headerName: 'Owner',
+            width: 250,
+            disableColumnMenu: true,
+            renderCell: (params) => {
+                if (params.value === 'Loading...') {
+                    return <CircularProgress size={18} sx={{ color: 'var(--text)' }} />;
+                }
+                return params.value;
+            },
+        },
+        {
+            field: 'address',
+            headerName: 'Address',
+            width: 175,
+            disableColumnMenu: true,
+            renderCell: (params) => {
+                if (params.value === 'Loading...') {
+                    return <CircularProgress size={18} sx={{ color: 'var(--text)' }} />;
+                }
+                return params.value;
+            },
+        },
+        {
+            field: 'reviewed',
+            headerName: 'Reviewed',
+            width: 100,
+            disableColumnMenu: true,
+            renderCell: (params) => {
+                const isReviewed = params.value === 'Yes';
+                return (
+                    <Box display='flex' alignItems='center' justifyContent='center' width='100%' mt={1.7}>
+                        {isReviewed ? (
+                            <CheckCircleIcon sx={{ color: '#4caf50', fontSize: 24 }} />
+                        ) : (
+                            <CancelIcon sx={{ color: '#f44336', fontSize: 24 }} />
+                        )}
+                    </Box>
+                );
+            },
+        },
+        {
+            field: 'evidence',
+            headerName: 'Evidence',
+            width: 100,
+            disableColumnMenu: true,
+        },
+        {
+            field: 'determination',
+            headerName: 'Determination',
+            width: 120,
+            disableColumnMenu: true,
+        },
+        {
+            field: 'pid',
+            headerName: 'PID',
+            width: 60,
+            disableColumnMenu: true,
+            sortable: false,
+            filterable: false,
+            renderCell: (params) => {
+                const pid = params.row.pid;
+                const handleCopy = (e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    if (navigator && navigator.clipboard) {
+                        navigator.clipboard.writeText(pid);
+                    }
+                };
+                return (
+                    <button
+                        onClick={handleCopy}
+                        style={{
+                            cursor: 'pointer',
+                            padding: '2px 8px',
+                            border: '1px solid #ccc',
+                            borderRadius: 4,
+                            background: '#f5f5f5',
+                        }}
+                        title='Copy PID'
+                    >
+                        Copy
+                    </button>
+                );
+            },
+        },
+    ];
+
+    const rows = useMemo(() => {
+        if (cases.length <= 0) return [];
+        const filteredCases = cases.filter((caseItem) => {
+            // filter by unsettled
+            if (filterCtx.showOnlyUnsettled) {
+                if (isCaseSettled(caseItem, isVillage)) {
+                    return false;
+                }
+            }
+            // filter by unreviewed
+            if (filterCtx.showOnlyUnreviewed) {
+                if (caseItem.DateCompleted) {
+                    return false;
+                }
+            }
+            // filter by without evidence
+            if (filterCtx.showOnlyWithoutEvidence) {
+                if (!isCaseMissingEvidence(caseItem)) {
+                    return false; // hide cases that have evidence
+                }
+            }
+            // filter by search term
+            if (filterCtx.searchTerm) {
+                const term = filterCtx.searchTerm.toLowerCase();
+                const owner = caseItem.property_data?.PropertyOwnerFull.toLowerCase() || '';
+                const address = caseItem.property_data?.Address.toLowerCase() || '';
+                const pid = caseItem.ParcelID.toLowerCase();
+                const scarid = caseItem.SCARIndexNumber.toLowerCase();
+                if (!owner.includes(term) && !address.includes(term) && !pid.includes(term) && !scarid.includes(term)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        return filteredCases.map((caseItem, index) => ({
+            id: index,
+            scarIndexNumber: isVillage ? caseItem.VillageSCARIndexNumber : caseItem.SCARIndexNumber,
+            owner: caseItem.property_data?.PropertyOwnerFull || 'Loading...',
+            reviewed: caseItem.DateCompleted ? 'Yes' : 'No',
+            address: caseItem.property_data?.Address || 'Loading...',
+            evidence: caseItem.evidence ? formatEvidence(caseItem.evidence) : 'N/A',
+            determination: getActionDetail(caseItem),
+            pid: caseItem.ParcelID || 'N/A',
+            _case: caseItem,
+        }));
+    }, [cases, filterCtx]);
+
+    function getActionDetail(caseItem: Case): string {
+        if (!isVillage) {
+            return caseItem.SCARDeterminationAction;
+        } else if (isVillage) {
+            return caseItem.VillageSCARDeterminationAction;
+        }
+        return '';
+    }
+
+    // For height animation
+    const [tableOpen, setTableOpen] = useState(false);
+    useEffect(() => {
+        setTableOpen(!isFetchingCases && cases.length > 0);
+    }, [isFetchingCases, cases.length]);
+
+    return (
+        <Box justifyContent={'center'} width={'100%'} mt={2}>
+            {cases.length === 0 && !isFetchingCases && <Typography>No cases associated with this date.</Typography>}
+            {isFetchingCases && (
+                <Box display='flex' justifyContent='center' alignItems='center'>
+                    <Typography>Loading cases...</Typography>
+                    <CircularProgress size={40} sx={{ color: 'var(--text)' }} />
+                </Box>
+            )}
+            <div
+                className='case-table-anim'
+                style={{
+                    maxHeight: tableOpen ? 1000 : 0,
+                    overflow: 'hidden',
+                    transition: 'max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+                }}
+            >
+                {!isFetchingCases && cases.length > 0 && (
+                    <Stack>
+                        <Box mb={2}>
+                            <CaseToolbar filterCtx={filterCtx} setFilterCtx={setFilterCtx} />
+                        </Box>
+                        <Box mx={1} mb={1} justifyContent={'center'} alignItems={'center'} display='flex'>
+                            <Typography variant='body1' fontStyle={''}>
+                                {rows.length} case{rows.length !== 1 ? 's' : ''} found, click a row to view additional
+                                case details.
+                            </Typography>
+                        </Box>
+                        <DataGrid
+                            autoHeight
+                            rows={rows}
+                            columns={columns}
+                            hideFooter
+                            onRowClick={(params) => setClickedCase(params.row._case)}
+                            sx={{
+                                '& .MuiDataGrid-row': {
+                                    cursor: 'pointer',
+                                    transition: 'background-color 0.2s ease-in-out',
+                                    '&:hover': {
+                                        backgroundColor: 'var(--fc-today-bg-color) !important',
+                                    },
+                                },
+                            }}
+                        />
+                    </Stack>
+                )}
+            </div>
+        </Box>
+    );
+});
+
+export default CaseViewer;

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

@@ -0,0 +1,138 @@
+import { HearingType, type Case, type CourtDate } from '../../../types';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import FormRow from '../../Shared/FormRow';
+import InfoBox from './InfoBox';
+import Stack from '@mui/material/Stack';
+import { allUsers } from '@/helpers/people';
+import { useEffect, useState } from 'react';
+import InfoBoxBtn from './InfoBoxBtn';
+import SnoozeIcon from '@mui/icons-material/Snooze';
+import NoticeFileLink from './NoticeFileLink';
+import { snoozeUploadDeadline } from '@/helpers/courtDates';
+import { allMuniNames, getTownshipName } from '@/helpers/munis';
+
+export default function DateDetails({
+    selectedCourtDate,
+    apiKey,
+}: {
+    selectedCourtDate: CourtDate | null;
+    apiKey: string;
+}) {
+    const [firstChairName, setFirstChairName] = useState<string>('-');
+    const [secondChairName, setSecondChairName] = useState<string>('-');
+
+    useEffect(() => {
+        if (!selectedCourtDate) {
+            setFirstChairName('-');
+            return;
+        }
+        if (selectedCourtDate.FirstChair) {
+            const user = allUsers[selectedCourtDate.FirstChair];
+            setFirstChairName(user ? `${user.UserFirstName} ${user.UserLastName}` : '-');
+        } else {
+            setFirstChairName('-');
+        }
+        if (selectedCourtDate.SecondChair) {
+            const user = allUsers[selectedCourtDate.SecondChair];
+            setSecondChairName(user ? `${user.UserFirstName} ${user.UserLastName}` : '-');
+        } else {
+            setSecondChairName('-');
+        }
+    }, [selectedCourtDate]);
+
+    function formatDate(date: Date | null | undefined): string {
+        if (!date) return '-';
+        return new Intl.DateTimeFormat('en-US', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        }).format(new Date(date));
+    }
+
+    // biome-ignore lint/correctness/noUnusedVariables: may be used in the future
+    async function handleSnoozeClick() {
+        if (!selectedCourtDate || !selectedCourtDate.UploadDeadline) return;
+        const newDate = new Date(new Date(selectedCourtDate.UploadDeadline).getTime() + 24 * 60 * 60 * 1000);
+        const res = window.confirm(
+            `Snooze upload deadline by 1 business day? \nThe new date will be on ${formatDate(newDate)}`,
+        );
+        if (res) {
+            await snoozeUploadDeadline(selectedCourtDate.CourtDateID, apiKey);
+        }
+    }
+
+    return (
+        <Box className='themed'>
+            {selectedCourtDate && (
+                <Stack spacing={0} direction='column'>
+                    <Box>
+                        <Typography variant='h6' align='center' gutterBottom>
+                            {`${getTownshipName(selectedCourtDate.MuniCode) || 'Unknown Municipality'} (${selectedCourtDate.MuniCode}) ${selectedCourtDate.FirstChair || selectedCourtDate.SecondChair ? '' : '- Unassigned'}`}
+                        </Typography>
+                    </Box>
+                    <FormRow gap={7}>
+                        <InfoBox label='First Chair' info={firstChairName} color='#2196f3' />
+                        <InfoBox label='Second Chair' info={secondChairName} color='#00bcd4' />
+                    </FormRow>
+                    <FormRow gap={3}>
+                        <InfoBox label='Court Date' info={formatDate(selectedCourtDate.CourtDate)} color='#ff9800' />
+                        <InfoBox
+                            label='Adjournment Date'
+                            info={formatDate(selectedCourtDate.AdjournmentDate)}
+                            color='#9c27b0'
+                        />
+                        <InfoBox
+                            label='Upload Due Date'
+                            info={formatDate(selectedCourtDate.UploadDeadline)}
+                            color='#f44336'
+                        />
+                    </FormRow>
+                    <FormRow gap={7}>
+                        <InfoBox label='Status' info={selectedCourtDate.Lifecycle || '-'} color='#4caf50' />
+                    </FormRow>
+                    <NoticeFileLink fileKey={selectedCourtDate.NoticeFile} />
+                    <Stack mt={2} spacing={1}>
+                        <Typography variant='body1'>{selectedCourtDate.Notes || 'No notes provided.'}</Typography>
+                        <Typography variant='body2' sx={{ opacity: 0.85 }}>
+                            <span>{`The hearing is `}</span>
+                            <strong>
+                                {selectedCourtDate.Type === HearingType.VIRTUAL
+                                    ? 'virtual'
+                                    : selectedCourtDate.Type === HearingType.IN_PERSON
+                                      ? 'in person'
+                                      : 'of unknown type'}
+                            </strong>
+                            <span>{` and is scheduled for `}</span>
+                            <strong>{selectedCourtDate.HearingTime}</strong>
+                            <span>{`.`}</span>
+                            <br />
+                            <span>{`The hearing officer is `}</span>
+                            <strong>{selectedCourtDate.HearingOfficer || 'Not Assigned'}</strong>
+                            <span>{`.`}</span>
+                            <br />
+                            {selectedCourtDate.Type === HearingType.VIRTUAL && (
+                                <>
+                                    <span>{`The virtual hearing link is `}</span>
+                                    {selectedCourtDate.HearingLink ? (
+                                        <a
+                                            href={selectedCourtDate.HearingLink}
+                                            target='_blank'
+                                            rel='noopener noreferrer'
+                                            style={{ fontWeight: 'bold' }}
+                                        >
+                                            here
+                                        </a>
+                                    ) : (
+                                        <strong>No Link Provided</strong>
+                                    )}
+                                    <span>{`.`}</span>
+                                </>
+                            )}
+                        </Typography>
+                    </Stack>
+                </Stack>
+            )}
+        </Box>
+    );
+}

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

@@ -0,0 +1,22 @@
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+export default function InfoBox({ label, info, color }: { label: string; info: string; color?: string }) {
+    return (
+        <Stack
+            spacing={0}
+            direction='column'
+            alignItems='center'
+            justifyContent='center'
+            border={'2px solid var(--fc-border-color)'}
+            p={1}
+            borderRadius={2}
+            width={'100%'}
+        >
+            <Typography variant='h5' color={`${color} !important`}>
+                {info}
+            </Typography>
+            <Typography variant='subtitle1'>{label}</Typography>
+        </Stack>
+    );
+}

package/src/_components/Modal/View/InfoBoxBtn.css

@@ -0,0 +1,39 @@
+.info-box-btn {
+    cursor: pointer;
+    width: 100%;
+    display: inherit;
+    position: relative;
+}
+
+.info-box-btn > .info-box-btn-cover {
+    position: absolute;
+    top: 0%;
+    width: 5%;
+    right: 0;
+    height: 100%;
+    background-color: var(--text) !important;
+    color: var(--text);
+    z-index: 99999;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.7;
+    transition:
+        background-color 0.3s,
+        height 0.3s,
+        width 0.3s,
+        top 0.3s,
+        border-radius 0.3s,
+        opacity 0.3s;
+}
+.info-box-btn:hover > .info-box-btn-cover {
+    height: 100%;
+    width: 100%;
+    background-color: var(--fc-today-bg-color) !important;
+    top: 0;
+    border-radius: 8px;
+    opacity: 1;
+}

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

@@ -0,0 +1,29 @@
+import Typography from '@mui/material/Typography';
+import InfoBox from './InfoBox';
+import './InfoBoxBtn.css';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+
+export default function InfoBoxBtn({
+    label,
+    info,
+    btnLabel,
+    btnIcon,
+    onBtnClick,
+}: {
+    label: string;
+    info: string;
+    btnLabel?: string;
+    btnIcon?: React.ReactNode;
+    onBtnClick?: () => void;
+}) {
+    return (
+        <Box className='info-box-btn' onClick={onBtnClick}>
+            <Stack className='info-box-btn-cover' direction={'column'}>
+                <Typography variant={'h6'}>{btnLabel}</Typography>
+                {btnIcon}
+            </Stack>
+            <InfoBox label={label} info={info} />
+        </Box>
+    );
+}

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

@@ -0,0 +1,44 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DescriptionIcon from '@mui/icons-material/Description';
+import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
+
+const S3_BASE_URL = 'https://aventine-court-notices.s3.us-east-1.amazonaws.com';
+
+export default function NoticeFileLink({ fileKey }: { fileKey: string | null }) {
+    const hasFile = Boolean(fileKey);
+
+    function handleClick() {
+        if (!fileKey) return;
+        const url = fileKey.startsWith('http') ? fileKey : `${S3_BASE_URL}/${fileKey}`;
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+
+    return (
+        <Box
+            mt={1}
+            mb={1}
+            display='flex'
+            alignItems='center'
+            justifyContent='center'
+            gap={1}
+            border='2px solid var(--fc-border-color)'
+            borderRadius={2}
+            p={1.5}
+            sx={{
+                cursor: hasFile ? 'pointer' : 'default',
+                opacity: hasFile ? 1 : 0.5,
+                transition: 'opacity 0.2s',
+                '&:hover': hasFile ? { opacity: 0.8 } : undefined,
+            }}
+            onClick={handleClick}
+        >
+            {hasFile ? (
+                <DescriptionIcon sx={{ color: '#66bb6a' }} />
+            ) : (
+                <InsertDriveFileOutlinedIcon sx={{ color: 'text.secondary' }} />
+            )}
+            <Typography variant='subtitle1'>{hasFile ? 'View Notice File' : 'No Notice File'}</Typography>
+        </Box>
+    );
+}