@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

package/components/routes/analytics/AnalyticSearch.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { SsidChart, Star, StarBorder } from '@mui/icons-material';
-import { AvatarGroup, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, InputAdornment, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Star, StarBorder } from '@mui/icons-material';
+import { AvatarGroup, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
+import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
@@ -25,12 +25,11 @@ const AnalyticSearchBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const appUser = useAppUser();
-    const [onlyRules, setOnlyRules] = useLocalStorageItem(StorageKey.ONLY_RULES, 0);
+    const { response, request } = useContext(SearchResponseContext);
     const [searching, setSearching] = useState(false);
     const [hasError, setHasError] = useState(false);
     const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const addFavourite = useCallback(async (analytic) => {
         await dispatchApi(api.analytic.favourite.post(analytic.analytic_id));
         appUser.setUser({
@@ -58,22 +57,20 @@ const AnalyticSearchBase = () => {
         setSearchParams(searchParams, { replace: true });
         try {
             const sanitizedPhrase = sanitizeLuceneQuery(phrase);
-            const _response = await dispatchApi(api.search.analytic.post({
-                query: `name:*${sanitizedPhrase}* OR detections:*${sanitizedPhrase}*` +
-                    (onlyRules > 0 ? ' AND _exists_:rule_type' : onlyRules < 0 ? ' AND -_exists_:rule_type' : ''),
+            const _response = await request(api.search.analytic.post, {
+                query: `name:*${sanitizedPhrase}* OR detections:*${sanitizedPhrase}*`,
                 rows: pageCount,
                 offset
-            }));
-            setResponse(_response);
+            });
             load(_response.items.map(u => ({ id: u.analytic_id, item: u })));
         }
-        catch (e) {
+        catch {
             setHasError(true);
         }
         finally {
             setSearching(false);
         }
-    }, [dispatchApi, load, offset, onlyRules, pageCount, phrase, searchParams, setSearchParams]);
+    }, [request, load, offset, pageCount, phrase, searchParams, setSearchParams]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
             searchParams.set('offset', _offset.toString());
@@ -93,14 +90,14 @@ const AnalyticSearchBase = () => {
     }, [addFavourite, appUser.user?.favourite_analytics, dispatchApi, removeFavourite]);
     // Effect to initialize list of users.
     useEffect(() => {
-        onSearch();
+        void onSearch();
         if (!searchParams.has('offset')) {
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onlyRules]);
+    []);
     useEffect(() => {
         if (response?.total <= offset) {
             setOffset(0);
@@ -110,7 +107,7 @@ const AnalyticSearchBase = () => {
     }, [offset, response?.total, searchParams, setSearchParams]);
     useEffect(() => {
         if (!searching) {
-            onSearch();
+            void onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
@@ -122,17 +119,11 @@ const AnalyticSearchBase = () => {
                 transitionProperty: 'border-color',
                 cursor: 'pointer',
                 mt: 1
-            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx("span", { children: item.item.name }), item.item.rule_type && (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: t('route.analytics.rule'), children: _jsx(SsidChart, { color: "info" }) }), _jsx("code", { style: {
-                                            fontSize: '.55em',
-                                            backgroundColor: theme.palette.background.paper,
-                                            padding: theme.spacing(0.5),
-                                            borderRadius: theme.shape.borderRadius,
-                                            border: `thin solid ${theme.palette.divider}`
-                                        }, children: item.item.rule_type })] })), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), item.item.detections?.length > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { item: true, children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { size: "small", variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
+            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx("span", { children: item.item.name }), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), item.item.detections?.length > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { item: true, children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
     }, [appUser.user?.favourite_analytics, navigate, onFavourite, t, theme]);
-    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(Tooltip, { title: t(`route.analytics.search.filter.rules.${onlyRules < 0 ? 'hide' : onlyRules > 0 ? 'show' : 'toggle'}`), children: _jsx(IconButton, { onClick: () => setOnlyRules((((onlyRules + 2) % 3) - 1)), children: _jsx(SsidChart, { color: onlyRules < 0 ? 'error' : onlyRules > 0 ? 'info' : 'inherit', sx: { transition: theme.transitions.create(['color']) } }) }) }) }), aboveSearch: _jsx(Typography, { sx: { fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }, variant: "body2", children: t('route.analytics.search.prompt') }), renderer: renderer, response: response, searchPrompt: "route.analytics.manager.search" }));
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, aboveSearch: _jsx(Typography, { sx: { fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }, variant: "body2", children: t('route.analytics.search.prompt') }), renderer: renderer, response: response, searchPrompt: "route.analytics.manager.search" }));
 };
 const AnalyticSearch = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(AnalyticSearchBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "analytic_id", children: _jsx(AnalyticSearchBase, {}) }) }));
 };
 export default AnalyticSearch;

package/components/routes/analytics/AnalyticTemplates.js

@@ -17,7 +17,7 @@ const AnalyticTemplates = ({ analytic }) => {
     const [loading, setLoading] = useState(false);
     useEffect(() => {
         setLoading(true);
-        dispatchApi(api.template.get())
+        void dispatchApi(api.template.get())
             .then(_templates => _templates.filter(_template => _template.analytic === analytic?.name))
             .then(setTemplates)
             .finally(() => setLoading(false));

package/components/routes/analytics/TriageSettings.js

@@ -51,7 +51,7 @@ const TriageSettings = ({ analytic, setAnalytic }) => {
                                                                     }
                                                                 }), children: _jsx(Delete, {}) })] }) }, _rationale))), _jsx(Card, { variant: "outlined", sx: { p: 1 }, children: _jsx(TextField, { label: t('route.analytics.rationales.new'), value: rationale, onChange: e => setRationale(e.target.value), onKeyDown: e => {
                                                             if (e.key === 'Enter' && !!rationale) {
-                                                                updateAnalytic({
+                                                                void updateAnalytic({
                                                                     triage_settings: {
                                                                         rationales: uniq([...rationales, rationale])
                                                                     }
@@ -60,7 +60,7 @@ const TriageSettings = ({ analytic, setAnalytic }) => {
                                                             }
                                                         }, fullWidth: true, size: "small", InputProps: {
                                                             endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { size: "small", disabled: !rationale, onClick: () => {
-                                                                        updateAnalytic({
+                                                                        void updateAnalytic({
                                                                             triage_settings: {
                                                                                 rationales: uniq([...rationales, rationale])
                                                                             }

package/components/routes/analytics/widgets/Assessment.js

@@ -17,7 +17,7 @@ const Assessment = forwardRef(({ analytic }, ref) => {
             return;
         }
         setLoading(true);
-        api.search.facet.hit
+        void api.search.facet.hit
             .post({
             fields: ['howler.assessment'],
             query: `howler.analytic:("${analytic.name}")`

package/components/routes/analytics/widgets/Created.js

@@ -24,7 +24,7 @@ const Created = forwardRef(({ analytic }, ref) => {
                 mincount: 0
             });
         }
-        queryRef.current
+        void queryRef.current
             .then(result => {
             setIngestionData(result);
             queryRef.current = null;

package/components/routes/analytics/widgets/Escalation.js

@@ -17,7 +17,7 @@ const Escalation = forwardRef(({ analytic, maxWidth = '45%' }, ref) => {
             return;
         }
         setLoading(true);
-        api.search.facet.hit
+        void api.search.facet.hit
             .post({
             query: `howler.analytic:("${analytic.name}")`,
             fields: ['howler.escalation']

package/components/routes/analytics/widgets/Stacked.js

@@ -53,7 +53,7 @@ const Stacked = forwardRef(({ analytic, field, color }, ref) => {
         if (!analytic) {
             return;
         }
-        fetchData();
+        void fetchData();
     }, [analytic, fetchData]);
     const options = useMemo(() => {
         const baseOptions = line(`route.analytics.${field.replace('howler.', '')}.title`);

package/components/routes/cases/CaseViewer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/components/routes/cases/CaseViewer.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack } from '@mui/material';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { memo, useContext, useEffect } from 'react';
+import { Outlet, useParams } from 'react-router-dom';
+import NotFoundPage from '../404';
+import ErrorBoundary from '../ErrorBoundary';
+import CaseDetails from './detail/CaseDetails';
+import CaseSidebar from './detail/CaseSidebar';
+import useCase from './hooks/useCase';
+const CaseViewer = () => {
+    const params = useParams();
+    const { case: _case, missing, update } = useCase({ caseId: params.id });
+    const { emit, open, fetchViewers } = useContext(SocketContext);
+    useEffect(() => {
+        if (!params.id) {
+            return;
+        }
+        void fetchViewers(params.id);
+        if (open) {
+            emit({
+                broadcast: false,
+                action: 'viewing',
+                id: params.id
+            });
+            return () => {
+                emit({
+                    broadcast: false,
+                    action: 'stop_viewing',
+                    id: params.id
+                });
+            };
+        }
+    }, [emit, params.id, open, fetchViewers]);
+    if (missing) {
+        return _jsx(NotFoundPage, {});
+    }
+    return (_jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case, update: updatedCase => update(updatedCase, false) }), _jsx(Box, { sx: {
+                        maxHeight: 'calc(100vh - 64px)',
+                        flex: 1,
+                        overflow: 'auto'
+                    }, children: _jsx(ErrorBoundary, { children: _jsx(Outlet, { context: _case }) }) }), _jsx(CaseDetails, { case: _case })] }) }));
+};
+export default memo(CaseViewer);

package/components/routes/cases/CaseViewer.test.d.ts

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

package/components/routes/cases/CaseViewer.test.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockEmit = vi.hoisted(() => vi.fn());
+const mockFetchViewers = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockOpen = vi.hoisted(() => ({ current: true }));
+const mockAddListener = vi.hoisted(() => vi.fn());
+const mockRemoveListener = vi.hoisted(() => vi.fn());
+const mockParams = vi.hoisted(() => ({ id: 'case-1' }));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+// ---------------------------------------------------------------------------
+// Module-level mocks
+// ---------------------------------------------------------------------------
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useParams: () => mockParams,
+        Outlet: () => _jsx("div", { id: "outlet" }),
+        useLocation: vi.fn(() => ({ pathname: '/', search: '' })),
+        useNavigate: () => vi.fn()
+    };
+});
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: vi.fn(),
+                put: vi.fn()
+            }
+        }
+    }
+}));
+vi.mock('./detail/CaseDetails', () => ({
+    default: ({ case: _case }) => _jsx("div", { id: "case-details", children: _case?.title })
+}));
+vi.mock('./detail/CaseSidebar', () => ({
+    default: ({ case: _case }) => _jsx("div", { id: "case-sidebar", children: _case?.title })
+}));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+import CaseViewer from './CaseViewer';
+// ---------------------------------------------------------------------------
+// Provider wrapper – uses the real SocketContext so both CaseViewer and its
+// useCase hook share the same context value provided here.
+// ---------------------------------------------------------------------------
+const createWrapper = () => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            emit: mockEmit,
+            open: mockOpen.current,
+            fetchViewers: mockFetchViewers,
+            addListener: mockAddListener,
+            removeListener: mockRemoveListener,
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: {}
+        }, children: children }));
+    return Wrapper;
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockEmit.mockClear();
+    mockOpen.current = true;
+    mockFetchViewers.mockClear().mockResolvedValue(undefined);
+    mockAddListener.mockClear();
+    mockRemoveListener.mockClear();
+    mockDispatchApi.mockReset().mockResolvedValue(createMockCase({ case_id: 'case-1' }));
+    mockParams.id = 'case-1';
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseViewer', () => {
+    it('fetches viewers on mount', async () => {
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+    });
+    it('emits viewing action when socket is open', async () => {
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'case-1'
+            });
+        });
+    });
+    it('emits stop_viewing on unmount', async () => {
+        const { unmount } = render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'case-1'
+            });
+        });
+        mockEmit.mockClear();
+        unmount();
+        expect(mockEmit).toHaveBeenCalledWith({
+            broadcast: false,
+            action: 'stop_viewing',
+            id: 'case-1'
+        });
+    });
+    it('does not emit viewing when socket is closed', async () => {
+        mockOpen.current = false;
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+        expect(mockEmit).not.toHaveBeenCalled();
+    });
+    it('still fetches viewers when socket is closed', async () => {
+        mockOpen.current = false;
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+    });
+    it('propagates socket case updates to the sidebar and details', async () => {
+        const initialCase = createMockCase({ case_id: 'case-1', title: 'Original title' });
+        const updatedCase = createMockCase({ case_id: 'case-1', title: 'Updated title' });
+        mockDispatchApi.mockResolvedValue(initialCase);
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockAddListener).toHaveBeenCalledOnce();
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('case-sidebar')).toHaveTextContent('Original title');
+        });
+        act(() => {
+            mockAddListener.mock.calls[0][1]({
+                type: 'cases',
+                case: updatedCase,
+                error: false,
+                message: '',
+                status: 200
+            });
+        });
+        expect(screen.getByTestId('case-sidebar')).toHaveTextContent('Updated title');
+        expect(screen.getByTestId('case-details')).toHaveTextContent('Updated title');
+    });
+});

package/components/routes/cases/Cases.d.ts

@@ -0,0 +1,2 @@
+declare const Cases: () => import("react/jsx-runtime").JSX.Element;
+export default Cases;

package/components/routes/cases/Cases.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Topic } from '@mui/icons-material';
+import { Stack, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
+import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
+import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import dayjs from 'dayjs';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { DATE_RANGE_LUCENE, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import CaseCard from '../../elements/case/CaseCard';
+import CaseAssigneeFilter from './search/CaseAssigneeFilter';
+import CaseDateFilter, {} from './search/CaseDateFilter';
+import CaseStatusFilter from './search/CaseStatusFilter';
+const CasesBase = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { response, request } = useContext(SearchResponseContext);
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [hasError, setHasError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [statusFilter, setStatusFilter] = useState([]);
+    const [assigneeFilter, setAssigneeFilter] = useState([]);
+    const [dateRange, setDateRange] = useState('date.range.all');
+    const [customStart, setCustomStart] = useState(dayjs().subtract(2, 'days'));
+    const [customEnd, setCustomEnd] = useState(dayjs());
+    const filtersReady = useRef(false);
+    const buildFilters = useCallback(() => {
+        const filters = [];
+        if (statusFilter.length > 0) {
+            filters.push(`status:(${statusFilter.map(status => `"${status}"`).join(' OR ')})`);
+        }
+        if (assigneeFilter.length > 0) {
+            filters.push(assigneeFilter
+                .map(assignee => `(participants:"${sanitizeLuceneQuery(assignee)}" OR tasks.assignment:"${sanitizeLuceneQuery(assignee)}")`)
+                .join(' OR '));
+        }
+        const lucene = DATE_RANGE_LUCENE[dateRange];
+        if (lucene) {
+            filters.push(`created:[${lucene} TO now]`);
+        }
+        else if (dateRange === 'date.range.custom') {
+            filters.push(`created:[${customStart.toISOString()} TO ${customEnd.toISOString()}]`);
+        }
+        return filters;
+    }, [statusFilter, assigneeFilter, dateRange, customStart, customEnd]);
+    const onSearch = useCallback(async () => {
+        try {
+            setLoading(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            const filters = buildFilters();
+            await request(api.v2.fuzzy.post, {
+                query: phrase.trim() || '*',
+                filters,
+                rows: pageCount,
+                offset,
+                indexes: ['case']
+            });
+        }
+        catch {
+            setHasError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [phrase, setSearchParams, searchParams, buildFilters, request, pageCount, offset]);
+    // Load the items into list when response changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.case_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    useEffect(() => {
+        void onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!loading) {
+            void onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    // Re-search when filter chips change, but skip the initial render.
+    useEffect(() => {
+        if (!filtersReady.current) {
+            filtersReady.current = true;
+            return;
+        }
+        if (!loading) {
+            void onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [statusFilter, assigneeFilter, dateRange, customStart, customEnd]);
+    const renderer = useCallback((item, className) => _jsx(CaseCard, { case: item, className: className }), []);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.cases.search.prompt') }), searchFilters: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { mt: 0.5, 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 })] }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/cases/${item.id}`), searchPrompt: "route.cases.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
+};
+const Cases = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "case_id", children: _jsx(CasesBase, {}) }) }));
+};
+export default Cases;

package/components/routes/cases/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ESCALATION_COLOR_MAP: {
+    normal: string;
+    focus: string;
+    crisis: string;
+};
+export declare const CASE_STATUSES: readonly ['open', 'in-progress', 'on-hold', 'resolved'];

package/components/routes/cases/constants.js

@@ -0,0 +1,6 @@
+export const ESCALATION_COLOR_MAP = {
+    normal: 'default',
+    focus: 'warning',
+    crisis: 'error'
+};
+export const CASE_STATUSES = ['open', 'in-progress', 'on-hold', 'resolved'];

package/components/routes/cases/detail/AlertPanel.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const AlertPanel: FC<{
+    case: Case;
+}>;
+export default AlertPanel;

package/components/routes/cases/detail/AlertPanel.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { chunk, uniq } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { buildPathFromID } from '../utils';
+const AlertPanel = ({ case: _case }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const [alertPage, setAlertPage] = useState(1);
+    const alertPages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'hit')), 5), [_case?.items]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.alerts') }), _jsx(Pagination, { count: alertPages.length, page: alertPage, onChange: (_, page) => setAlertPage(page) })] }), _jsx(Divider, {}), alertPages?.length > 0 &&
+                alertPages[alertPage - 1].map(item => (_jsxs(Box, { position: "relative", children: [_jsx(HitCard, { layout: HitLayout.DENSE, id: item.value, lazy: true }), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${buildPathFromID(_case, item.id)}`, sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                width: '100%',
+                                height: '100%',
+                                cursor: 'pointer',
+                                zIndex: 100,
+                                borderRadius: '4px',
+                                '&:hover': {
+                                    background: theme.palette.divider,
+                                    border: `thin solid ${theme.palette.primary.light}`
+                                }
+                            } })] }, item.id ?? item.value)))] }));
+};
+export default AlertPanel;

package/components/routes/cases/detail/AlertPanel.test.d.ts

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