@cccsaurora/howler-ui 2.18.0-dev.762 → 2.18.0-dev.766

package/components/routes/cases/Cases.js

@@ -1,17 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Topic } from '@mui/icons-material';
-import { Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 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 useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useCallback, useContext, useEffect, useState } from 'react';
+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 { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+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 buildPhraseQuery = (phrase) => {
+    const sanitized = sanitizeLuceneQuery(phrase);
+    if (!phrase) {
+        return '(title:* OR summary:* OR overview:* OR participants:* OR tasks.summary:* OR tasks.assignment:*)';
+    }
+    return (`(title:*${sanitized}* OR summary:*${sanitized}* OR overview:*${sanitized}* OR participants:*${sanitized}* ` +
+        `OR tasks.summary:*${sanitized}* OR tasks.assignment:*${sanitized}*)`);
+};
 const CasesBase = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -24,6 +37,31 @@ const CasesBase = () => {
     const [response, setResponse] = useState(null);
     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);
@@ -35,11 +73,10 @@ const CasesBase = () => {
                 searchParams.delete('phrase');
             }
             setSearchParams(searchParams, { replace: true });
-            // Check for the actual search query
-            const query = phrase ? `*:*${phrase}*` : '*:*';
-            // Ensure the overview should be visible and/or matches the type we are filtering for
+            const filters = buildFilters();
             setResponse(await dispatchApi(api.search.case.post({
-                query,
+                query: buildPhraseQuery(phrase),
+                filters,
                 rows: pageCount,
                 offset
             })));
@@ -50,9 +87,8 @@ const CasesBase = () => {
         finally {
             setLoading(false);
         }
-    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    }, [buildFilters, phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
     // Load the items into list when response changes.
-    // This hook should only trigger when the 'response' changes.
     useEffect(() => {
         if (response) {
             load(response.items.map((item) => ({
@@ -92,8 +128,19 @@ const CasesBase = () => {
         }
         // 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) {
+            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') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/cases/${item.id}`), onCreate: () => navigate('/cases/create'), createPrompt: "route.cases.create", searchPrompt: "route.cases.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
+    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}`), onCreate: () => navigate('/cases/create'), createPrompt: "route.cases.create", searchPrompt: "route.cases.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
 };
 const Cases = () => {
     return (_jsx(TuiListProvider, { children: _jsx(CasesBase, {}) }));

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

@@ -3,3 +3,4 @@ export declare const ESCALATION_COLOR_MAP: {
     focus: string;
     crisis: string;
 };
+export declare const CASE_STATUSES: readonly ["open", "in-progress", "on-hold", "resolved"];

package/components/routes/cases/constants.js

@@ -3,3 +3,4 @@ export const ESCALATION_COLOR_MAP = {
     focus: 'warning',
     crisis: 'error'
 };
+export const CASE_STATUSES = ['open', 'in-progress', 'on-hold', 'resolved'];

package/components/routes/cases/search/CaseAssigneeFilter.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+declare const CaseAssigneeFilter: FC<{
+    assigneeFilter: string[];
+    onChange: (v: string[]) => void;
+}>;
+export default CaseAssigneeFilter;

package/components/routes/cases/search/CaseAssigneeFilter.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Person } from '@mui/icons-material';
+import { AvatarGroup, Checkbox, Divider, FormControlLabel, Stack, Typography } from '@mui/material';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
+import { useCallback, useContext, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+const CaseAssigneeFilter = ({ assigneeFilter, onChange }) => {
+    const { t } = useTranslation();
+    const { user: currentUser } = useAppUser();
+    const { users, searchUsers } = useContext(UserListContext);
+    useEffect(() => {
+        searchUsers('uname:*');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const toggleMyself = useCallback((_, checked) => {
+        if (!currentUser) {
+            return;
+        }
+        onChange(checked
+            ? [...assigneeFilter.filter(a => a !== currentUser.username), currentUser.username]
+            : assigneeFilter.filter(a => a !== currentUser.username));
+    }, [currentUser, assigneeFilter, onChange]);
+    return (_jsx(ChipPopper, { icon: assigneeFilter.length > 0 ? (_jsx(AvatarGroup, { sx: { '& .MuiAvatar-root': { height: 18, width: 18, fontSize: '0.6rem' } }, children: assigneeFilter.map(u => (_jsx(HowlerAvatar, { userId: u, sx: { height: 18, width: 18 } }, u))) })) : (_jsx(Person, { fontSize: "small" })), label: _jsx(Typography, { variant: "body2", children: assigneeFilter.length === 0
+                ? t('route.cases.filter.assignee')
+                : assigneeFilter.length === 1
+                    ? (users[assigneeFilter[0]]?.name ?? assigneeFilter[0])
+                    : `${assigneeFilter.length} ${t('route.cases.filter.assignees')}` }), minWidth: "260px", slotProps: { chip: { size: 'small', color: assigneeFilter.length > 0 ? 'primary' : 'default' } }, children: _jsxs(Stack, { direction: "row", divider: _jsx(Divider, { orientation: "vertical", flexItem: true }), spacing: 1, children: [_jsx(UserList, { userIds: assigneeFilter, onChange: onChange, i18nLabel: "route.cases.filter.assignee", multiple: true }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: currentUser ? assigneeFilter.includes(currentUser.username) : false, onChange: toggleMyself }), label: t('route.cases.filter.myself') })] }) }));
+};
+export default CaseAssigneeFilter;

package/components/routes/cases/search/CaseAssigneeFilter.test.d.ts

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

package/components/routes/cases/search/CaseAssigneeFilter.test.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CaseAssigneeFilter from './CaseAssigneeFilter';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+vi.mock('commons/components/app/hooks/useAppUser', () => ({
+    useAppUser: () => ({ user: { username: 'alice', name: 'Alice Smith' } })
+}));
+// Stub HowlerAvatar to avoid avatar API calls
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId}`, children: userId })
+}));
+// Stub UserList to a simple multi-select so we can test the onChange wire-up
+// without pulling in the full component and its popover.
+vi.mock('components/elements/UserList', () => ({
+    default: ({ userIds, onChange, multiple }) => (_jsxs("div", { id: "user-list", children: [_jsx("button", { id: "user-list-add", onClick: () => onChange([...userIds, 'bob']), children: "Add bob" }), multiple &&
+                userIds.map(id => (_jsxs("button", { id: `remove-${id}`, onClick: () => onChange(userIds.filter(u => u !== id)), children: ["Remove ", id] }, id)))] }))
+}));
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const mockSearchUsers = vi.fn();
+const USERS = {
+    alice: { username: 'alice', name: 'Alice Smith' },
+    bob: { username: 'bob', name: 'Bob Jones' }
+};
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(UserListContext.Provider, { value: { users: USERS, searchUsers: mockSearchUsers, fetchUsers: vi.fn() }, children: children }) }));
+const renderFilter = (assigneeFilter, onChange = vi.fn()) => render(_jsx(CaseAssigneeFilter, { assigneeFilter: assigneeFilter, onChange: onChange }), { wrapper: Wrapper });
+const openPopper = async (user, labelText) => {
+    const chip = screen.getByText(labelText).closest('.MuiChip-root');
+    await user.click(chip);
+    await waitFor(() => {
+        expect(screen.getByTestId('user-list')).toBeInTheDocument();
+    });
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseAssigneeFilter', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    describe('searchUsers on mount', () => {
+        it('calls searchUsers with "uname:*" on mount', () => {
+            renderFilter([]);
+            expect(mockSearchUsers).toHaveBeenCalledWith('uname:*');
+        });
+    });
+    describe('label', () => {
+        it('shows the default "Assignee" label when no assignees are selected', () => {
+            renderFilter([]);
+            expect(screen.getByText(i18n.t('route.cases.filter.assignee'))).toBeInTheDocument();
+        });
+        it('shows the user display name when one assignee is selected', () => {
+            renderFilter(['alice']);
+            expect(screen.getByText('Alice Smith')).toBeInTheDocument();
+        });
+        it('shows count + "Assignees" when multiple assignees are selected', () => {
+            renderFilter(['alice', 'bob']);
+            expect(screen.getByText(`2 ${i18n.t('route.cases.filter.assignees')}`)).toBeInTheDocument();
+        });
+        it('falls back to username when user is not in the user map', () => {
+            renderFilter(['unknown-user']);
+            const chipLabel = document.querySelector('.MuiChip-label');
+            expect(chipLabel?.textContent).toContain('unknown-user');
+        });
+    });
+    describe('chip color', () => {
+        it('uses default color when no assignees are selected', () => {
+            renderFilter([]);
+            const chip = screen.getByText(i18n.t('route.cases.filter.assignee')).closest('.MuiChip-root');
+            expect(chip).not.toHaveClass('MuiChip-colorPrimary');
+        });
+        it('uses primary color when assignees are selected', () => {
+            renderFilter(['alice']);
+            const chip = screen.getByText('Alice Smith').closest('.MuiChip-root');
+            expect(chip).toHaveClass('MuiChip-colorPrimary');
+        });
+    });
+    describe('"Myself" checkbox', () => {
+        it('is unchecked when the current user is not in the filter', async () => {
+            renderFilter([]);
+            await openPopper(user, i18n.t('route.cases.filter.assignee'));
+            const checkbox = screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') });
+            expect(checkbox).not.toBeChecked();
+        });
+        it('is checked when the current user is already in the filter', async () => {
+            renderFilter(['alice']);
+            await openPopper(user, 'Alice Smith');
+            const checkbox = screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') });
+            expect(checkbox).toBeChecked();
+        });
+        it('adds the current user to the filter when the checkbox is checked', async () => {
+            const onChange = vi.fn();
+            renderFilter([], onChange);
+            await openPopper(user, i18n.t('route.cases.filter.assignee'));
+            await user.click(screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') }));
+            expect(onChange).toHaveBeenCalledWith(['alice']);
+        });
+        it('removes the current user from the filter when the checkbox is unchecked', async () => {
+            const onChange = vi.fn();
+            renderFilter(['alice', 'bob'], onChange);
+            await openPopper(user, `2 ${i18n.t('route.cases.filter.assignees')}`);
+            await user.click(screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') }));
+            expect(onChange).toHaveBeenCalledWith(['bob']);
+        });
+    });
+    describe('UserList onChange passthrough', () => {
+        it('passes onChange directly to UserList', async () => {
+            const onChange = vi.fn();
+            renderFilter(['alice'], onChange);
+            await openPopper(user, 'Alice Smith');
+            await user.click(screen.getByTestId('user-list-add'));
+            expect(onChange).toHaveBeenCalledWith(['alice', 'bob']);
+        });
+    });
+});

package/components/routes/cases/search/CaseDateFilter.d.ts

@@ -0,0 +1,13 @@
+import type { Dayjs } from 'dayjs';
+import type { FC } from 'react';
+import { DATE_RANGES } from '@cccsaurora/howler-ui/utils/constants';
+export type DateRangeOption = (typeof DATE_RANGES)[number];
+declare const CaseDateFilter: FC<{
+    dateRange: DateRangeOption;
+    onChange: (v: DateRangeOption) => void;
+    customStart: Dayjs;
+    customEnd: Dayjs;
+    onCustomStartChange: (v: Dayjs) => void;
+    onCustomEndChange: (v: Dayjs) => void;
+}>;
+export default CaseDateFilter;

package/components/routes/cases/search/CaseDateFilter.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvTimer } from '@mui/icons-material';
+import { Autocomplete, Stack, TextField, Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { useTranslation } from 'react-i18next';
+import { DATE_RANGES } from '@cccsaurora/howler-ui/utils/constants';
+const CaseDateFilter = ({ dateRange, onChange, customStart, customEnd, onCustomStartChange, onCustomEndChange }) => {
+    const { t } = useTranslation();
+    return (_jsx(ChipPopper, { icon: _jsx(AvTimer, { fontSize: "small" }), label: _jsx(Typography, { variant: "body2", children: dateRange === 'date.range.all'
+                ? t('route.cases.filter.date')
+                : dateRange === 'date.range.custom'
+                    ? `${customStart.format('YYYY-MM-DD')} ${t('to')} ${customEnd.format('YYYY-MM-DD')}`
+                    : t(dateRange) }), minWidth: "225px", slotProps: { chip: { size: 'small', color: dateRange !== 'date.range.all' ? 'primary' : 'default' } }, children: _jsxs(Stack, { spacing: 1, children: [_jsx(Autocomplete, { size: "small", value: dateRange, options: [...DATE_RANGES], getOptionLabel: o => t(o), disableClearable: true, onChange: (_, nv) => onChange(nv), renderInput: params => _jsx(TextField, { ...params, label: t('route.cases.filter.date') }) }), dateRange === 'date.range.custom' && (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: customStart, maxDate: customEnd, onChange: nv => {
+                                    if (nv) {
+                                        onCustomStartChange(nv);
+                                    }
+                                }, ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: customEnd, minDate: customStart, onChange: nv => {
+                                    if (nv) {
+                                        onCustomEndChange(nv);
+                                    }
+                                }, ampm: false, disableFuture: true })] }) }))] }) }));
+};
+export default CaseDateFilter;

package/components/routes/cases/search/CaseDateFilter.test.d.ts

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

package/components/routes/cases/search/CaseDateFilter.test.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import dayjs from 'dayjs';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CaseDateFilter from './CaseDateFilter';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// ---------------------------------------------------------------------------
+// Stub the date pickers so jsdom doesn't choke on them
+// ---------------------------------------------------------------------------
+vi.mock('@mui/x-date-pickers/DateTimePicker', () => ({
+    DateTimePicker: ({ label, onChange }) => (_jsx("button", { id: `picker-${label}`, onClick: () => onChange(dayjs('2025-06-01')), children: label }))
+}));
+// ---------------------------------------------------------------------------
+// Wrapper / render helper
+// ---------------------------------------------------------------------------
+const FIXED_START = dayjs('2025-01-01');
+const FIXED_END = dayjs('2025-03-01');
+const Wrapper = ({ children }) => _jsx(I18nextProvider, { i18n: i18n, children: children });
+const renderFilter = ({ dateRange = 'date.range.all', onChange = vi.fn(), onCustomStartChange = vi.fn(), onCustomEndChange = vi.fn() } = {}) => render(_jsx(CaseDateFilter, { dateRange: dateRange, onChange: onChange, customStart: FIXED_START, customEnd: FIXED_END, onCustomStartChange: onCustomStartChange, onCustomEndChange: onCustomEndChange }), { wrapper: Wrapper });
+const openPopper = async (user) => {
+    // The chip label varies; find the chip by the AvTimer icon's sibling
+    const chip = document.querySelector('.MuiChip-root');
+    await user.click(chip);
+    await waitFor(() => {
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseDateFilter', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    describe('label', () => {
+        it('shows "Date Range" label when date.range.all is selected', () => {
+            renderFilter({ dateRange: 'date.range.all' });
+            expect(screen.getByText(i18n.t('route.cases.filter.date'))).toBeInTheDocument();
+        });
+        it('shows the translated range label for a non-all preset', () => {
+            renderFilter({ dateRange: 'date.range.1.week' });
+            expect(screen.getByText(i18n.t('date.range.1.week'))).toBeInTheDocument();
+        });
+        it('shows formatted start/end dates for the custom range', () => {
+            renderFilter({ dateRange: 'date.range.custom' });
+            const expected = `${FIXED_START.format('YYYY-MM-DD')} ${i18n.t('to')} ${FIXED_END.format('YYYY-MM-DD')}`;
+            expect(screen.getByText(expected)).toBeInTheDocument();
+        });
+    });
+    describe('chip color', () => {
+        it('uses default color for date.range.all', () => {
+            renderFilter({ dateRange: 'date.range.all' });
+            const chip = document.querySelector('.MuiChip-root');
+            expect(chip).not.toHaveClass('MuiChip-colorPrimary');
+        });
+        it('uses primary color for any non-all range', () => {
+            renderFilter({ dateRange: 'date.range.1.day' });
+            const chip = document.querySelector('.MuiChip-root');
+            expect(chip).toHaveClass('MuiChip-colorPrimary');
+        });
+    });
+    describe('popper content', () => {
+        it('does not show the autocomplete before the chip is clicked', () => {
+            renderFilter();
+            expect(screen.queryByRole('combobox')).toBeNull();
+        });
+        it('shows the range autocomplete after the chip is clicked', async () => {
+            renderFilter();
+            await openPopper(user);
+            expect(screen.getByRole('combobox')).toBeInTheDocument();
+        });
+        it('does not show date pickers when a preset (non-custom) range is active', async () => {
+            renderFilter({ dateRange: 'date.range.1.day' });
+            await openPopper(user);
+            expect(screen.queryByTestId(`picker-${i18n.t('date.select.start')}`)).toBeNull();
+        });
+        it('shows start and end date pickers when custom range is active', async () => {
+            renderFilter({ dateRange: 'date.range.custom' });
+            await openPopper(user);
+            expect(screen.getByTestId(`picker-${i18n.t('date.select.start')}`)).toBeInTheDocument();
+            expect(screen.getByTestId(`picker-${i18n.t('date.select.end')}`)).toBeInTheDocument();
+        });
+    });
+    describe('interactions', () => {
+        it('calls onChange when a range option is selected from the autocomplete', async () => {
+            const onChange = vi.fn();
+            renderFilter({ dateRange: 'date.range.all', onChange });
+            await openPopper(user);
+            await user.click(screen.getByRole('combobox'));
+            const option = await screen.findByRole('option', { name: i18n.t('date.range.1.week') });
+            await user.click(option);
+            expect(onChange).toHaveBeenCalledWith('date.range.1.week');
+        });
+        it('calls onCustomStartChange when the start date picker fires', async () => {
+            const onCustomStartChange = vi.fn();
+            renderFilter({ dateRange: 'date.range.custom', onCustomStartChange });
+            await openPopper(user);
+            await user.click(screen.getByTestId(`picker-${i18n.t('date.select.start')}`));
+            expect(onCustomStartChange).toHaveBeenCalledWith(dayjs('2025-06-01'));
+        });
+        it('calls onCustomEndChange when the end date picker fires', async () => {
+            const onCustomEndChange = vi.fn();
+            renderFilter({ dateRange: 'date.range.custom', onCustomEndChange });
+            await openPopper(user);
+            await user.click(screen.getByTestId(`picker-${i18n.t('date.select.end')}`));
+            expect(onCustomEndChange).toHaveBeenCalledWith(dayjs('2025-06-01'));
+        });
+    });
+});

package/components/routes/cases/search/CaseStatusFilter.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const CaseStatusFilter: FC<{
+    statusFilter: string[];
+    onChange: (v: string[]) => void;
+}>;
+export default CaseStatusFilter;

package/components/routes/cases/search/CaseStatusFilter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { useTranslation } from 'react-i18next';
+import { CASE_STATUSES } from '../constants';
+const CaseStatusFilter = ({ statusFilter, onChange }) => {
+    const { t } = useTranslation();
+    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: _jsx(Typography, { variant: "body2", children: statusFilter.length === 0
+                ? t('route.cases.filter.status')
+                : statusFilter.map(s => t(`page.cases.status.${s}`)).join(', ') }), minWidth: "200px", slotProps: { chip: { size: 'small', color: statusFilter.length > 0 ? 'primary' : 'default' } }, children: _jsx(ToggleButtonGroup, { value: statusFilter, onChange: (_, nv) => onChange(nv), size: "small", orientation: "vertical", sx: { width: '100%' }, children: CASE_STATUSES.map(s => (_jsx(ToggleButton, { value: s, sx: { justifyContent: 'flex-start' }, children: t(`page.cases.status.${s}`) }, s))) }) }));
+};
+export default CaseStatusFilter;

package/components/routes/cases/search/CaseStatusFilter.test.d.ts

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

package/components/routes/cases/search/CaseStatusFilter.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CaseStatusFilter from './CaseStatusFilter';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const Wrapper = ({ children }) => _jsx(I18nextProvider, { i18n: i18n, children: children });
+const renderFilter = (statusFilter, onChange = vi.fn()) => render(_jsx(CaseStatusFilter, { statusFilter: statusFilter, onChange: onChange }), { wrapper: Wrapper });
+const openPopper = async (user) => {
+    const chip = screen.getByText(i18n.t('route.cases.filter.status')).closest('.MuiChip-root');
+    await user.click(chip);
+    await waitFor(() => {
+        expect(screen.getByRole('group')).toBeInTheDocument();
+    });
+};
+describe('CaseStatusFilter', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    describe('label', () => {
+        it('shows the default "Status" label when no statuses are selected', () => {
+            renderFilter([]);
+            expect(screen.getByText(i18n.t('route.cases.filter.status'))).toBeInTheDocument();
+        });
+        it('shows a comma-separated list of status labels when statuses are selected', () => {
+            renderFilter(['open', 'on-hold']);
+            const expected = [i18n.t('page.cases.status.open'), i18n.t('page.cases.status.on-hold')].join(', ');
+            expect(screen.getByText(expected)).toBeInTheDocument();
+        });
+        it('shows a single status label when one status is selected', () => {
+            renderFilter(['resolved']);
+            expect(screen.getByText(i18n.t('page.cases.status.resolved'))).toBeInTheDocument();
+        });
+    });
+    describe('chip color', () => {
+        it('uses default color when no statuses are selected', () => {
+            renderFilter([]);
+            const chip = screen.getByText(i18n.t('route.cases.filter.status')).closest('.MuiChip-root');
+            expect(chip).not.toHaveClass('MuiChip-colorPrimary');
+        });
+        it('uses primary color when statuses are selected', () => {
+            renderFilter(['open']);
+            const chip = screen.getByText(i18n.t('page.cases.status.open')).closest('.MuiChip-root');
+            expect(chip).toHaveClass('MuiChip-colorPrimary');
+        });
+    });
+    describe('popper content', () => {
+        it('does not show toggle buttons before the chip is clicked', () => {
+            renderFilter([]);
+            expect(screen.queryByRole('group')).toBeNull();
+        });
+        it('shows all four status toggle buttons when the chip is clicked', async () => {
+            renderFilter([]);
+            await openPopper(user);
+            expect(screen.getByText(i18n.t('page.cases.status.open'))).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('page.cases.status.in-progress'))).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('page.cases.status.on-hold'))).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('page.cases.status.resolved'))).toBeInTheDocument();
+        });
+    });
+    describe('interactions', () => {
+        it('calls onChange when a toggle button is clicked', async () => {
+            const onChange = vi.fn();
+            renderFilter([], onChange);
+            await openPopper(user);
+            await user.click(screen.getByText(i18n.t('page.cases.status.open')));
+            expect(onChange).toHaveBeenCalledWith(['open']);
+        });
+        it('calls onChange with empty array when the only selected status is deselected', async () => {
+            const onChange = vi.fn();
+            renderFilter(['open'], onChange);
+            const chip = screen.getByText(i18n.t('page.cases.status.open')).closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByRole('group')).toBeInTheDocument();
+            });
+            await user.click(screen.getAllByText(i18n.t('page.cases.status.open'))[1]);
+            expect(onChange).toHaveBeenCalledWith([]);
+        });
+    });
+});

package/locales/en/translation.json

@@ -408,6 +408,10 @@
     "page.cases.sidebar.item.remove": "Remove item",
     "page.cases.sidebar.item.rename": "Rename item",
     "page.cases.sources": "Sources",
+    "page.cases.status.in-progress": "In Progress",
+    "page.cases.status.on-hold": "On Hold",
+    "page.cases.status.open": "Open",
+    "page.cases.status.resolved": "Resolved",
     "page.cases.timeline": "Timeline",
     "page.cases.timeline.empty": "No events match the selected filters.",
     "page.cases.timeline.filter.escalation": "Escalation",
@@ -620,8 +624,13 @@
     "route.analytics.view": "View Analytic",
     "route.cases": "Cases",
     "route.cases.create": "Create Case",
+    "route.cases.filter.assignee": "Assignee",
+    "route.cases.filter.assignees": "Assignees",
+    "route.cases.filter.date": "Date Range",
+    "route.cases.filter.myself": "Myself",
+    "route.cases.filter.status": "Status",
     "route.cases.manager.search": "Search Cases",
-    "route.cases.search.prompt": "Search Cases via title, summary or indicators",
+    "route.cases.search.prompt": "Search cases by title, summary, description, participants or task details",
     "route.cases.view": "View Case",
     "route.clear": "Clear query",
     "route.dossiers": "Dossiers",

package/locales/fr/translation.json

@@ -408,6 +408,10 @@
     "page.cases.sidebar.item.remove": "Supprimer l'élément",
     "page.cases.sidebar.item.rename": "Renommer l'élément",
     "page.cases.sources": "Sources",
+    "page.cases.status.in-progress": "En cours",
+    "page.cases.status.on-hold": "En attente",
+    "page.cases.status.open": "Ouvert",
+    "page.cases.status.resolved": "Résolu",
     "page.cases.timeline": "Chronologie",
     "page.cases.timeline.empty": "Aucun événement ne correspond aux filtres sélectionnés.",
     "page.cases.timeline.filter.escalation": "Escalade",
@@ -620,8 +624,13 @@
     "route.analytics.view": "Voir l'analyse",
     "route.cases": "Cas",
     "route.cases.create": "Créer un cas",
+    "route.cases.filter.assignee": "Assigné",
+    "route.cases.filter.assignees": "Assignés",
+    "route.cases.filter.date": "Plage de dates",
+    "route.cases.filter.myself": "Moi-même",
+    "route.cases.filter.status": "Statut",
     "route.cases.manager.search": "Rechercher des cas",
-    "route.cases.search.prompt": "Rechercher des cas par titre, résumé ou indicateurs",
+    "route.cases.search.prompt": "Rechercher des cas par titre, résumé, description, participants ou détails des tâches",
     "route.cases.view": "Voir le cas",
     "route.clear": "Effacer la requête",
     "route.dossiers": "Dossiers",

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.18.0-dev.762",
+  "version": "2.18.0-dev.766",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -172,6 +172,7 @@
     "./components/routes/action/view/markdown/*.md": "./components/routes/action/view/markdown/*.md.js",
     "./components/routes/cases/modals/*": "./components/routes/cases/modals/*.js",
     "./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
+    "./components/routes/cases/search/*": "./components/routes/cases/search/*.js",
     "./components/routes/cases/hooks/*": "./components/routes/cases/hooks/*.js",
     "./components/routes/cases/detail/assets/*": "./components/routes/cases/detail/assets/*.js",
     "./components/routes/cases/detail/sidebar/*": "./components/routes/cases/detail/sidebar/*.js",

package/utils/constants.d.ts

@@ -74,6 +74,7 @@ export declare const RULE_INTERVALS: {
     crontab: string;
 }[];
 export declare const DATE_RANGES: string[];
+export declare const DATE_RANGE_LUCENE: Partial<Record<(typeof DATE_RANGES)[number], string>>;
 interface LabelData {
     icon?: ReactElement;
     color?: string;

package/utils/constants.js

@@ -104,6 +104,12 @@ export const DATE_RANGES = [
     'date.range.all',
     'date.range.custom'
 ];
+export const DATE_RANGE_LUCENE = {
+    'date.range.1.day': 'now-1d/d',
+    'date.range.3.day': 'now-3d/d',
+    'date.range.1.week': 'now-7d/d',
+    'date.range.1.month': 'now-1M/M'
+};
 export const LABEL_TYPES = {
     insight: { icon: _jsx(PsychologyAlt, { fontSize: "small" }), color: '#FFFFFF' }, //brain icon
     mitigation: { icon: _jsx(LocalPolice, { fontSize: "small" }), color: blue[600] }, //police badge