Function RecordTable

src/Components/DataPoints/RecordTable.jsx:162–336

({records, insideProgramPage = false, style = {}, refreshSlot = null})

/* ------------------------------ main table ------------------------------- */

export default function RecordTable({records, insideProgramPage = false, style = {}, refreshSlot = null}) {
    const navigate = useNavigate();
    const location = useLocation();
    const chip = useChipColors();
    const theme = useTheme();
    const dark = theme.palette.mode === "dark";
    const columns = useMemo(
        () => COLUMNS.filter((c) => !(insideProgramPage && c.programOnly)),
        [insideProgramPage]
    );
    const tableWidth = columns.reduce((sum, c) => sum + c.width, 0);
    const cssVars = {
        "--rt-border": theme.palette.divider,
        "--rt-head-bg": theme.palette.surfaceVariant,
        "--rt-row-hover": alpha(theme.palette.primary.main, dark ? 0.12 : 0.06),
        "--rt-text": theme.palette.text.primary,
        "--rt-text-2": theme.palette.text.secondary,
        "--rt-group-bg": alpha(theme.palette.text.primary, dark ? 0.06 : 0.035),
        "--rt-success": theme.palette.admit.main,
        "--rt-input-bg": alpha(theme.palette.text.primary, dark ? 0.07 : 0.045),
        "--rt-input-bg-hover": alpha(theme.palette.text.primary, dark ? 0.11 : 0.07),
        "--rt-accent": theme.palette.primary.main,
        "--rt-accent-soft": alpha(theme.palette.primary.main, dark ? 0.25 : 0.4),
        "--rt-min-width": `${tableWidth}px`,
    };

    const [search, setSearch] = useState("");
    const [statusFilter, setStatusFilter] = useState([]);
    const [seasonFilter, setSeasonFilter] = useState([]);
    const [finalFilter, setFinalFilter] = useState(""); // '', 'true', 'false'
    const [grouped, setGrouped] = useState(true);
    const [sortKey, setSortKey] = useState(null);
    const [sortDir, setSortDir] = useState(null); // 'asc' | 'desc' | null

    const seasonOptions = useMemo(() => {
        const set = new Set(records.map((r) => `${r.ProgramYear} ${r.Semester}`));
        return [...set].sort((a, b) => b.localeCompare(a));
    }, [records]);

    const filtered = useMemo(() => {
        const q = search.trim().toLowerCase();
        return records.filter((r) => {
            if (statusFilter.length && !statusFilter.includes(r.Status)) return false;
            if (seasonFilter.length && !seasonFilter.includes(`${r.ProgramYear} ${r.Semester}`)) return false;
            if (finalFilter !== "" && r.Final !== (finalFilter === "true")) return false;
            if (q) {
                const hay = `${r.ApplicantID} ${r.ProgramID} ${r.Status} ${r.ProgramYear} ${r.Semester} ${r.Detail ?? ""}`.toLowerCase();
                if (!hay.includes(q)) return false;
            }
            return true;
        });
    }, [records, search, statusFilter, seasonFilter, finalFilter]);

    const rows = useMemo(() => {
        const comparator = makeComparator(sortKey, sortDir);
        if (grouped && !insideProgramPage) {
            // group by program (in default program order), sort within each group
            const order = defaultSort(filtered);