@cccsaurora/howler-ui 3.1.0-dev.1708 → 3.1.0-dev.1716

package/components/routes/hits/search/shared/HitFilter.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AddCircleOutline, FilterList, RemoveCircleOutline } from '@mui/icons-material';
-import { Autocomplete, Checkbox, FormControlLabel, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import { Autocomplete, Checkbox, createFilterOptions, FormControlLabel, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -19,6 +20,13 @@ const ACCEPTED_LOOKUPS = [
     'event.provider',
     'organization.name'
 ];
+const DEFAULT_FILTER_FIELDS = [
+    'howler.assessment',
+    'howler.escalation',
+    'howler.analytic',
+    'howler.detection',
+    'event.provider'
+];
 const parseFilter = (value) => {
     const negated = value.startsWith('-');
     const positiveValue = negated ? value.slice(1) : value;
@@ -72,9 +80,11 @@ const serializeFilter = (category, values, negated) => {
     }
     return filter.join('');
 };
+const filterFields = createFilterOptions();
 const HitFilter = ({ size, id, value }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
+    const { hitFields, getHitFields } = useContext(FieldContext);
     const { dispatchApi } = useMyApi();
     const setSavedFilter = useContextSelector(ParameterContext, ctx => ctx.setFilter);
     const removeSavedFilter = useContextSelector(ParameterContext, ctx => ctx.removeFilter);
@@ -89,10 +99,15 @@ const HitFilter = ({ size, id, value }) => {
         category: null,
         options: []
     });
+    const [categorySearchInput, setCategorySearchInput] = useState('');
     const { category, values: filterValues, editable, negated } = parsedFilter;
     const configuredLookup = category ? config.lookups?.[category] : undefined;
     const needsLookups = !!category && editable && !Array.isArray(configuredLookup);
     const loading = needsLookups && customLookups.category !== category;
+    const categoryOptions = hitFields.map(field => field.key).filter((field) => !!field);
+    useEffect(() => {
+        void getHitFields();
+    }, [getHitFields]);
     useEffect(() => {
         if (value) {
             setSavedFilter(id, value);
@@ -142,6 +157,8 @@ const HitFilter = ({ size, id, value }) => {
     }, [commitFilter, parsedFilter.raw]);
     const lookupOptions = configuredLookup ?? (customLookups.category === category ? customLookups.options : []);
     const chipLabel = `${parsedFilter.category ? `${parsedFilter.category}:` : ''}${parsedFilter.rawClause}`;
-    return (_jsx(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: _jsx(ChipPopper, { icon: _jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(FilterList, { fontSize: "small" }), parsedFilter.negated ? (_jsx(Tooltip, { title: t('hit.search.filter.excluded'), children: _jsx(RemoveCircleOutline, { fontSize: "small", color: "error" }) })) : (_jsx(Tooltip, { title: t('hit.search.filter.included'), children: _jsx(AddCircleOutline, { fontSize: "small", color: "success" }) }))] }), label: _jsx(Typography, { variant: "body2", children: chipLabel }), minWidth: "250px", onDelete: () => removeSavedFilter(value), slotProps: { chip: { size: 'small', color: parsedFilter.wildcard ? 'warning' : 'default' } }, children: _jsxs(Stack, { spacing: 1, sx: { minWidth: '225px' }, children: [_jsx(FormControlLabel, { label: t('hit.search.filter.exclude'), control: _jsx(Checkbox, { size: "small", checked: negated, onChange: toggleNegation }) }), _jsx(Autocomplete, { fullWidth: true, disableClearable: true, disabled: !editable, size: size ?? 'small', value: category ?? ACCEPTED_LOOKUPS[0], options: ACCEPTED_LOOKUPS, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, multiple: true, disabled: !category || !editable, loading: loading, size: size ?? 'small', value: filterValues, options: lookupOptions, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValuesChange })] }) }) }));
+    return (_jsx(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: _jsx(ChipPopper, { icon: _jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(FilterList, { fontSize: "small" }), parsedFilter.negated ? (_jsx(Tooltip, { title: t('hit.search.filter.excluded'), children: _jsx(RemoveCircleOutline, { fontSize: "small", color: "error" }) })) : (_jsx(Tooltip, { title: t('hit.search.filter.included'), children: _jsx(AddCircleOutline, { fontSize: "small", color: "success" }) }))] }), label: _jsx(Typography, { variant: "body2", children: chipLabel }), minWidth: "250px", onDelete: () => removeSavedFilter(value), slotProps: { chip: { size: 'small', color: parsedFilter.wildcard ? 'warning' : 'default' } }, children: _jsxs(Stack, { spacing: 1, sx: { minWidth: '225px' }, children: [_jsx(FormControlLabel, { label: t('hit.search.filter.exclude'), control: _jsx(Checkbox, { size: "small", checked: negated, onChange: toggleNegation }) }), _jsx(Autocomplete, { fullWidth: true, disableClearable: true, disabled: !editable, size: size ?? 'small', value: category ?? ACCEPTED_LOOKUPS[0], options: categoryOptions, filterOptions: (options, state) => categorySearchInput
+                            ? filterFields(options, { ...state, inputValue: categorySearchInput })
+                            : options.filter(option => DEFAULT_FILTER_FIELDS.includes(option)), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange, onInputChange: (_event, inputValue, reason) => setCategorySearchInput(reason === 'input' ? inputValue : '') }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, multiple: true, disabled: !category || !editable, loading: loading, size: size ?? 'small', value: filterValues, options: lookupOptions, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValuesChange })] }) }) }));
 };
 export default memo(HitFilter);

package/components/routes/hits/search/shared/HitFilter.test.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 const apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+const fieldContextToken = vi.hoisted(() => ({ name: 'field-context' }));
 const parameterContextToken = vi.hoisted(() => ({ name: 'parameter-context' }));
 const mockDispatchApi = vi.hoisted(() => vi.fn());
 const mockSetSavedFilter = vi.hoisted(() => vi.fn());
 const mockRemoveSavedFilter = vi.hoisted(() => vi.fn());
+const autocompleteProps = vi.hoisted(() => []);
 const mockAutocompleteSelection = vi.hoisted(() => ({
     value: 'normal'
 }));
@@ -19,25 +22,32 @@ vi.mock('@mui/material', async (importOriginal) => {
     const actual = await importOriginal();
     return {
         ...actual,
-        Autocomplete: ({ onChange, options, disabled, multiple, value, loading }) => (_jsx("button", { disabled: disabled, "data-loading": Boolean(loading), "data-options": JSON.stringify(options), onClick: () => onChange(null, mockAutocompleteSelection.value === 'clear'
-                ? multiple
-                    ? []
-                    : null
-                : multiple
-                    ? mockAutocompleteSelection.value === 'unchanged'
-                        ? value
-                        : mockAutocompleteSelection.value === 'add'
-                            ? [...(value ?? []), 'added value']
-                            : mockAutocompleteSelection.value === 'single'
-                                ? (value ?? []).slice(0, 1)
-                                : (value?.length ?? 0) > 1
-                                    ? [value[0], value[0]?.startsWith('C:') ? 'new\\path' : 'changed two']
-                                    : [value?.[0] ?? options[0] ?? 'changed one']
-                    : value === '*'
-                        ? '*'
-                        : options.includes('event.provider')
-                            ? 'event.provider'
-                            : options[0]), children: "change-filter" }))
+        Autocomplete: (props) => {
+            autocompleteProps.push(props);
+            const { onChange, options, disabled, multiple, value, loading } = props;
+            return (_jsx("button", { disabled: disabled, "data-loading": Boolean(loading), "data-options": JSON.stringify(options), onClick: () => onChange(null, mockAutocompleteSelection.value === 'clear'
+                    ? multiple
+                        ? []
+                        : null
+                    : multiple
+                        ? mockAutocompleteSelection.value === 'unchanged'
+                            ? value
+                            : mockAutocompleteSelection.value === 'add'
+                                ? [...(value ?? []), 'added value']
+                                : mockAutocompleteSelection.value === 'single'
+                                    ? (value ?? []).slice(0, 1)
+                                    : (value?.length ?? 0) > 1
+                                        ? [value[0], value[0]?.startsWith('C:') ? 'new\\path' : 'changed two']
+                                        : [value?.[0] ?? options[0] ?? 'changed one']
+                        : value === '*'
+                            ? '*'
+                            : options.includes('event.provider')
+                                ? 'event.provider'
+                                : options[0]), children: "change-filter" }));
+        },
+        Stack: ({ children }) => _jsx("div", { children: children }),
+        TextField: ({ label }) => _jsx("div", { children: label }),
+        Typography: ({ children }) => _jsx("div", { children: children })
     };
 });
 vi.mock('api', () => ({
@@ -54,9 +64,21 @@ vi.mock('api', () => ({
 vi.mock('components/app/providers/ApiConfigProvider', () => ({
     ApiConfigContext: apiConfigContextToken
 }));
+vi.mock('components/app/providers/FieldProvider', () => ({
+    FieldContext: fieldContextToken
+}));
 vi.mock('components/app/providers/ParameterProvider', () => ({
     ParameterContext: parameterContextToken
 }));
+vi.mock('components/elements/display/ChipPopper', () => ({
+    default: ({ children, icon, label, onDelete }) => {
+        const [open, setOpen] = useState(false);
+        return (_jsxs("div", { children: [_jsxs("button", { className: "MuiChip-root", onClick: () => setOpen(current => !current), children: [icon && _jsx("span", { className: "MuiChip-icon", children: icon }), label, onDelete && (_jsx("span", { className: "MuiChip-deleteIcon", onClick: event => {
+                                event.stopPropagation();
+                                onDelete(event);
+                            }, children: "delete-filter" }))] }), open && children] }));
+    }
+}));
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
@@ -73,6 +95,19 @@ vi.mock('react', async (importOriginal) => {
         useContext: (context) => {
             if (context === apiConfigContextToken)
                 return { config: configValue };
+            if (context === fieldContextToken) {
+                return {
+                    hitFields: [
+                        { key: 'howler.assessment' },
+                        { key: 'howler.escalation' },
+                        { key: 'howler.analytic' },
+                        { key: 'howler.detection' },
+                        { key: 'event.provider' },
+                        { key: 'organization.name' }
+                    ],
+                    getHitFields: vi.fn()
+                };
+            }
             return actual.useContext(context);
         }
     };
@@ -84,6 +119,7 @@ describe('HitFilter', () => {
         mockDispatchApi.mockReset().mockImplementation(async (_value) => ({ 'event.provider': { azure: 2 } }));
         mockSetSavedFilter.mockReset();
         mockRemoveSavedFilter.mockReset();
+        autocompleteProps.length = 0;
         mockAutocompleteSelection.value = 'normal';
     });
     it('initializes from value, fetches custom lookups, updates values, and removes filters', async () => {
@@ -121,6 +157,37 @@ describe('HitFilter', () => {
         render(_jsx(HitFilter, { id: 2, value: 'howler.assessment:*' }));
         await waitFor(() => expect(mockSetSavedFilter).toHaveBeenCalledWith(2, 'howler.assessment:*'));
     });
+    it('shows only default fields until the user searches for another indexed field', () => {
+        render(_jsx(HitFilter, { id: 3, value: "howler.assessment:*" }));
+        fireEvent.click(screen.getByRole('button', { name: /howler.assessment:\*/ }));
+        const getFieldAutocomplete = () => [...autocompleteProps].reverse().find(props => props.options.includes('organization.name'));
+        const autocompleteState = {
+            inputValue: 'howler.assessment',
+            getOptionLabel: (option) => option
+        };
+        let fieldAutocomplete = getFieldAutocomplete();
+        expect(fieldAutocomplete.filterOptions(fieldAutocomplete.options, autocompleteState)).toEqual([
+            'howler.assessment',
+            'howler.escalation',
+            'howler.analytic',
+            'howler.detection',
+            'event.provider'
+        ]);
+        act(() => fieldAutocomplete.onInputChange(null, 'organization', 'input'));
+        fieldAutocomplete = getFieldAutocomplete();
+        expect(fieldAutocomplete.filterOptions(fieldAutocomplete.options, autocompleteState)).toEqual([
+            'organization.name'
+        ]);
+        act(() => fieldAutocomplete.onInputChange(null, 'howler.assessment', 'reset'));
+        fieldAutocomplete = getFieldAutocomplete();
+        expect(fieldAutocomplete.filterOptions(fieldAutocomplete.options, autocompleteState)).toEqual([
+            'howler.assessment',
+            'howler.escalation',
+            'howler.analytic',
+            'howler.detection',
+            'event.provider'
+        ]);
+    });
     it('deduplicates decoded literals while preserving quoted OR text', () => {
         const clause = String.raw `event.provider:("a" OR "\a" OR "text OR more" OR "escaped\"quote")`;
         render(_jsx(HitFilter, { id: 15, value: clause }));

package/components/routes/home/AddNewCard.js

@@ -7,10 +7,13 @@ import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/View
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { v4 as uuid } from 'uuid';
 import { useContextSelector } from 'use-context-selector';
 const TYPES = {
     view: ['viewId', 'limit'],
-    analytic: ['analyticId', 'type']
+    analytic: ['analyticId', 'type'],
+    case: [],
+    tasks: []
 };
 const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detection'];
 const AddNewCard = ({ dashboard, addCard }) => {
@@ -29,7 +32,11 @@ const AddNewCard = ({ dashboard, addCard }) => {
             return;
         }
         addCard({
-            entry_id: selectedType === 'view' ? config.viewId : `${config.analyticId}-${config.type}`,
+            entry_id: selectedType === 'view'
+                ? config.viewId
+                : selectedType === 'analytic'
+                    ? `${config.analyticId}-${config.type}`
+                    : `${selectedType}-${uuid()}`,
             type: selectedType,
             config: JSON.stringify(config)
         });
@@ -81,6 +88,12 @@ const AddNewCard = ({ dashboard, addCard }) => {
                 limit: 3
             });
         }
+        else if (selectedType === 'case') {
+            _setConfig({ dateRange: 'date.range.all', statusFilter: [], assigneeFilter: [] });
+        }
+        else if (selectedType === 'tasks') {
+            _setConfig({ taskFilter: 'incomplete' });
+        }
         else {
             _setConfig({});
         }

package/components/routes/home/CasePanel.d.ts

@@ -0,0 +1,16 @@
+import { type DateRangeOption } from '@cccsaurora/howler-ui/components/routes/cases/search/CaseDateFilter';
+import { type FC } from 'react';
+export interface CaseSettings {
+    statusFilter?: string[];
+    assigneeFilter?: string[];
+    dateRange?: DateRangeOption;
+    customStart?: string;
+    customEnd?: string;
+}
+interface CasePanelProps extends CaseSettings {
+    panelId?: string;
+    refreshTick?: symbol;
+    onRefreshComplete?: (panelId: string, refreshTick: symbol) => void;
+}
+declare const CasePanel: FC<CasePanelProps>;
+export default CasePanel;

package/components/routes/home/CasePanel.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OpenInNew } from '@mui/icons-material';
+import { Alert, Card, CardContent, CircularProgress, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { AppListEmpty } from '@tui/core';
+import api from '@cccsaurora/howler-ui/api';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import CaseAssigneeFilter from '@cccsaurora/howler-ui/components/routes/cases/search/CaseAssigneeFilter';
+import CaseDateFilter, {} from '@cccsaurora/howler-ui/components/routes/cases/search/CaseDateFilter';
+import CaseStatusFilter from '@cccsaurora/howler-ui/components/routes/cases/search/CaseStatusFilter';
+import dayjs, {} from 'dayjs';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { DATE_RANGE_LUCENE } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const CASE_LIMIT = 10;
+const getDate = (value, fallback) => {
+    const date = value ? dayjs(value) : fallback;
+    return date.isValid() ? date : fallback;
+};
+const CasePanel = ({ statusFilter: initialStatusFilter = [], assigneeFilter: initialAssigneeFilter = [], dateRange: initialDateRange = 'date.range.all', customStart: initialCustomStart, customEnd: initialCustomEnd, panelId = 'case-panel', refreshTick, onRefreshComplete }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const [cases, setCases] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [statusFilter, setStatusFilter] = useState(initialStatusFilter);
+    const [assigneeFilter, setAssigneeFilter] = useState(initialAssigneeFilter);
+    const [dateRange, setDateRange] = useState(initialDateRange);
+    const [customStart, setCustomStart] = useState(() => getDate(initialCustomStart, dayjs().subtract(2, 'days')));
+    const [customEnd, setCustomEnd] = useState(() => getDate(initialCustomEnd, dayjs()));
+    const activeRefreshTick = useRef(undefined);
+    const filters = useMemo(() => {
+        const nextFilters = [];
+        if (statusFilter.length > 0) {
+            nextFilters.push(`status:(${statusFilter.map(status => `"${status}"`).join(' OR ')})`);
+        }
+        if (assigneeFilter.length > 0) {
+            nextFilters.push(assigneeFilter
+                .map(assignee => `(participants:"${sanitizeLuceneQuery(assignee)}" OR tasks.assignment:"${sanitizeLuceneQuery(assignee)}")`)
+                .join(' OR '));
+        }
+        const luceneDate = DATE_RANGE_LUCENE[dateRange];
+        if (luceneDate) {
+            nextFilters.push(`created:[${luceneDate} TO now]`);
+        }
+        else if (dateRange === 'date.range.custom') {
+            nextFilters.push(`created:[${customStart.toISOString()} TO ${customEnd.toISOString()}]`);
+        }
+        return nextFilters;
+    }, [assigneeFilter, customEnd, customStart, dateRange, statusFilter]);
+    useEffect(() => {
+        const controller = new AbortController();
+        let refreshComplete = false;
+        const completeRefresh = () => {
+            if (refreshTick && !refreshComplete) {
+                refreshComplete = true;
+                if (activeRefreshTick.current === refreshTick) {
+                    activeRefreshTick.current = undefined;
+                }
+                onRefreshComplete?.(panelId, refreshTick);
+            }
+        };
+        if (refreshTick) {
+            activeRefreshTick.current = refreshTick;
+        }
+        setLoading(true);
+        setError(false);
+        void dispatchApi(api.v2.search.post('case', {
+            query: 'case_id:*',
+            filters,
+            rows: CASE_LIMIT,
+            sort: 'created desc'
+        }, controller.signal), { showError: false })
+            .then(response => {
+            if (!controller.signal.aborted) {
+                setCases(response?.items ?? []);
+            }
+        })
+            .catch(() => {
+            if (!controller.signal.aborted) {
+                setError(true);
+                setCases([]);
+            }
+        })
+            .finally(() => {
+            if (!controller.signal.aborted) {
+                setLoading(false);
+                completeRefresh();
+            }
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [dispatchApi, filters, onRefreshComplete, panelId, refreshTick]);
+    useEffect(() => () => {
+        if (activeRefreshTick.current) {
+            onRefreshComplete?.(panelId, activeRefreshTick.current);
+            activeRefreshTick.current = undefined;
+        }
+    }, [onRefreshComplete, panelId]);
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsx(CardContent, { sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t('route.home.case.title') }), _jsx(Tooltip, { title: t('route.home.case.open'), children: _jsx(IconButton, { component: Link, to: "/cases", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }), _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: 'wrap' }, children: [_jsx(CaseStatusFilter, { statusFilter: statusFilter, onChange: setStatusFilter }), _jsx(CaseAssigneeFilter, { assigneeFilter: assigneeFilter, onChange: setAssigneeFilter }), _jsx(CaseDateFilter, { dateRange: dateRange, onChange: setDateRange, customStart: customStart, customEnd: customEnd, onCustomStartChange: setCustomStart, onCustomEndChange: setCustomEnd })] }), error ? (_jsx(Alert, { severity: "error", children: t('route.home.case.error') })) : loading ? (_jsx(Stack, { alignItems: "center", py: 3, children: _jsx(CircularProgress, { size: 28 }) })) : cases.length > 0 ? (cases.map(_case => (_jsx(Link, { to: `/cases/${_case.case_id}`, style: { color: 'inherit', textDecoration: 'none' }, children: _jsx(CaseCard, { case: _case }) }, _case.case_id)))) : (_jsx(AppListEmpty, {}))] }) }) }));
+};
+export default CasePanel;

package/components/routes/home/CasePanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/home/CasePanel.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CasePanel from './CasePanel';
+const mockSearchPost = vi.hoisted(() => vi.fn());
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (...args) => mockSearchPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/routes/cases/search/CaseStatusFilter', () => ({
+    default: () => _jsx("div", { children: "status-filter" })
+}));
+vi.mock('components/routes/cases/search/CaseAssigneeFilter', () => ({
+    default: () => _jsx("div", { children: "assignee-filter" })
+}));
+vi.mock('components/routes/cases/search/CaseDateFilter', () => ({
+    default: () => _jsx("div", { children: "date-filter" })
+}));
+vi.mock('components/elements/case/CaseCard', () => ({
+    default: ({ case: _case }) => _jsx("div", { children: _case.title })
+}));
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
+    return {
+        ...actual,
+        Link: ({ children, to, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
+    };
+});
+const Wrapper = ({ children }) => _jsx(I18nextProvider, { i18n: i18n, children: children });
+describe('CasePanel', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockSearchPost.mockReturnValue('case-request');
+        mockDispatchApi.mockResolvedValue({
+            items: [{ case_id: 'case-1', title: 'Case One', __index: 'case' }]
+        });
+    });
+    it('loads cases with the configured filters', async () => {
+        render(_jsx(CasePanel, { statusFilter: ['open'], assigneeFilter: ['alice'], dateRange: "date.range.1.day" }), {
+            wrapper: Wrapper
+        });
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+        expect(mockSearchPost).toHaveBeenCalledWith('case', {
+            query: 'case_id:*',
+            filters: ['status:("open")', '(participants:"alice" OR tasks.assignment:"alice")', 'created:[now-1d/d TO now]'],
+            rows: 10,
+            sort: 'created desc'
+        }, expect.any(AbortSignal));
+        expect(await screen.findByText('Case One')).toBeInTheDocument();
+    });
+    it('renders all three case filters', async () => {
+        render(_jsx(CasePanel, {}), { wrapper: Wrapper });
+        expect(screen.getByText('status-filter')).toBeInTheDocument();
+        expect(screen.getByText('assignee-filter')).toBeInTheDocument();
+        expect(screen.getByText('date-filter')).toBeInTheDocument();
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+    });
+    it('reports a pending refresh when the panel unmounts', () => {
+        const refreshTick = Symbol('refresh');
+        const onRefreshComplete = vi.fn();
+        mockDispatchApi.mockReturnValue(new Promise(() => { }));
+        const { unmount } = render(_jsx(CasePanel, { panelId: "case-panel-1", refreshTick: refreshTick, onRefreshComplete: onRefreshComplete }), { wrapper: Wrapper });
+        unmount();
+        expect(onRefreshComplete).toHaveBeenCalledWith('case-panel-1', refreshTick);
+        expect(mockSearchPost.mock.calls[0][2].aborted).toBe(true);
+    });
+    it('aborts an earlier refresh when a newer refresh begins', () => {
+        mockDispatchApi.mockReturnValue(new Promise(() => { }));
+        const { rerender } = render(_jsx(CasePanel, { refreshTick: Symbol('first') }), { wrapper: Wrapper });
+        const firstSignal = mockSearchPost.mock.calls[0][2];
+        rerender(_jsx(CasePanel, { refreshTick: Symbol('second') }));
+        expect(firstSignal.aborted).toBe(true);
+        expect(mockSearchPost).toHaveBeenCalledTimes(2);
+    });
+});

package/components/routes/home/TasksPanel.d.ts

@@ -0,0 +1,13 @@
+import type { TaskSearchFilter } from '@cccsaurora/howler-ui/api/v2/task';
+import { type FC } from 'react';
+type TaskFilter = TaskSearchFilter;
+export interface TasksSettings {
+    taskFilter?: TaskFilter;
+}
+interface TasksPanelProps extends TasksSettings {
+    panelId?: string;
+    refreshTick?: symbol;
+    onRefreshComplete?: (panelId: string, refreshTick: symbol) => void;
+}
+declare const TasksPanel: FC<TasksPanelProps>;
+export default TasksPanel;

package/components/routes/home/TasksPanel.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HourglassBottom, UpdateOutlined } from '@mui/icons-material';
+import { Alert, Button, Card, CardContent, Chip, CircularProgress, FormControl, InputLabel, MenuItem, Select, Stack, Tooltip, Typography } from '@mui/material';
+import { AppListEmpty, useAppUser } from '@tui/core';
+import api from '@cccsaurora/howler-ui/api';
+import StatusIcon from '@cccsaurora/howler-ui/components/elements/case/StatusIcon';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import CaseTask from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseTask';
+import dayjs from 'dayjs';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+const TASKS_PER_PAGE = 25;
+const API_FILTER = {
+    all: 'all',
+    complete: 'complete',
+    incomplete: 'incomplete'
+};
+const groupTasksByCase = (items) => {
+    const groups = [];
+    const groupsByCaseId = new Map();
+    items.forEach(({ task, case: _case }, index) => {
+        const caseId = _case.case_id ?? `missing-case-id-${index}`;
+        let group = groupsByCaseId.get(caseId);
+        if (!group) {
+            group = { case: _case, tasks: [] };
+            groupsByCaseId.set(caseId, group);
+            groups.push(group);
+        }
+        group.tasks.push(task);
+    });
+    return groups;
+};
+const TasksPanel = ({ taskFilter: initialTaskFilter = 'incomplete', panelId = 'tasks-panel', refreshTick, onRefreshComplete }) => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const username = user?.username;
+    const { dispatchApi } = useMyApi();
+    const filterId = useId();
+    const [items, setItems] = useState([]);
+    const [taskFilter, setTaskFilter] = useState(initialTaskFilter);
+    const [offset, setOffset] = useState(0);
+    const [hasMore, setHasMore] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const activeRefreshTick = useRef(undefined);
+    const lastReceivedRefreshTick = useRef(undefined);
+    useEffect(() => {
+        const controller = new AbortController();
+        let refreshComplete = false;
+        let retryingPreviousPage = false;
+        if (refreshTick && lastReceivedRefreshTick.current !== refreshTick) {
+            activeRefreshTick.current = refreshTick;
+            lastReceivedRefreshTick.current = refreshTick;
+        }
+        const completeRefresh = () => {
+            if (refreshTick && !refreshComplete && activeRefreshTick.current === refreshTick) {
+                refreshComplete = true;
+                activeRefreshTick.current = undefined;
+                onRefreshComplete?.(panelId, refreshTick);
+            }
+        };
+        if (!username) {
+            completeRefresh();
+            return;
+        }
+        setLoading(true);
+        setError(false);
+        const loadTasks = async () => {
+            try {
+                const response = await dispatchApi(api.v2.task.search({
+                    offset,
+                    rows: TASKS_PER_PAGE,
+                    filter: API_FILTER[taskFilter]
+                }, controller.signal), { showError: false });
+                if (controller.signal.aborted) {
+                    return;
+                }
+                if (offset > 0 && (response?.items.length ?? 0) === 0) {
+                    retryingPreviousPage = true;
+                    setOffset(currentOffset => Math.max(0, currentOffset - TASKS_PER_PAGE));
+                    return;
+                }
+                setItems(response?.items ?? []);
+                setHasMore(response?.has_more ?? false);
+            }
+            catch {
+                if (!controller.signal.aborted) {
+                    setError(true);
+                    setItems([]);
+                    setHasMore(false);
+                }
+            }
+            finally {
+                if (!controller.signal.aborted && !retryingPreviousPage) {
+                    setLoading(false);
+                    completeRefresh();
+                }
+            }
+        };
+        void loadTasks();
+        return () => {
+            controller.abort();
+        };
+    }, [dispatchApi, offset, onRefreshComplete, panelId, refreshTick, taskFilter, username]);
+    useEffect(() => () => {
+        if (activeRefreshTick.current) {
+            const pendingRefreshTick = activeRefreshTick.current;
+            activeRefreshTick.current = undefined;
+            onRefreshComplete?.(panelId, pendingRefreshTick);
+        }
+    }, [onRefreshComplete, panelId]);
+    const groupedTasks = useMemo(() => (username ? groupTasksByCase(items) : []), [items, username]);
+    const isLoading = Boolean(username) && loading;
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsx(CardContent, { sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t('route.home.tasks.title') }), _jsx("div", { style: { flex: 1 } }), _jsxs(FormControl, { size: "small", sx: { minWidth: 150 }, children: [_jsx(InputLabel, { id: filterId, children: t('route.home.tasks.filter') }), _jsxs(Select, { labelId: filterId, value: taskFilter, label: t('route.home.tasks.filter'), onChange: event => {
+                                            setTaskFilter(event.target.value);
+                                            setOffset(0);
+                                        }, children: [_jsx(MenuItem, { value: "incomplete", children: t('route.home.tasks.filter.incomplete') }), _jsx(MenuItem, { value: "complete", children: t('route.home.tasks.filter.complete') }), _jsx(MenuItem, { value: "all", children: t('route.home.tasks.filter.all') })] })] })] }), !username ? (_jsx(AppListEmpty, {})) : error ? (_jsx(Alert, { severity: "error", children: t('route.home.tasks.error') })) : isLoading ? (_jsx(Stack, { alignItems: "center", py: 3, children: _jsx(CircularProgress, { size: 28 }) })) : groupedTasks.length > 0 ? (groupedTasks.map(({ case: _case, tasks }) => {
+                        const status = _case.status ?? 'open';
+                        return (_jsxs(Stack, { spacing: 0.5, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: Link, to: `/cases/${_case.case_id}`, color: "text.primary", sx: {
+                                                alignItems: 'center',
+                                                display: 'flex',
+                                                gap: 0.5,
+                                                textDecoration: 'none'
+                                            }, children: [_case.title ?? _case.case_id, _jsx(StatusIcon, { status: status })] }), _jsx("div", { style: { flex: 1 } }), _case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] }), tasks.map(task => (_jsx(CaseTask, { case: _case, task: task, readOnly: true }, `${_case.case_id}-${task.id ?? task.summary}`)))] }, _case.case_id));
+                    })) : (_jsx(AppListEmpty, {})), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Button, { disabled: !username || isLoading || offset === 0, onClick: () => setOffset(currentOffset => Math.max(0, currentOffset - TASKS_PER_PAGE)), children: t('route.home.tasks.previous') }), _jsx(Button, { disabled: !username || isLoading || !hasMore, onClick: () => setOffset(currentOffset => currentOffset + TASKS_PER_PAGE), children: t('route.home.tasks.next') })] })] }) }) }));
+};
+export default TasksPanel;

package/components/routes/home/TasksPanel.test.d.ts

@@ -0,0 +1 @@
+export {};