@cccsaurora/howler-ui 2.18.0 → 2.19.0-cases.861

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

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, 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: () => _jsx("div", { id: "case-details" })
+}));
+vi.mock('./detail/CaseSidebar', () => ({
+    default: () => _jsx("div", { id: "case-sidebar" })
+}));
+// ---------------------------------------------------------------------------
+// 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');
+        });
+    });
+});

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,148 @@
+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 { 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 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 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();
+    const { dispatchApi } = useMyApi();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    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);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            const filters = buildFilters();
+            setResponse(await dispatchApi(api.search.case.post({
+                query: buildPhraseQuery(phrase),
+                filters,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [buildFilters, phrase, setSearchParams, searchParams, dispatchApi, 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(() => {
+        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) {
+            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) {
+            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(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,33 @@
+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';
+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: item.path, 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.path)))] }));
+};
+export default AlertPanel;

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

@@ -0,0 +1,11 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type AssetEntry } from './assets/Asset';
+/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
+export declare const buildAssetEntries: (records: Partial<Hit | Observable>[]) => AssetEntry[];
+declare const _default: import("react").NamedExoticComponent<{
+    case?: Case;
+    caseId?: string;
+}>;
+export default _default;

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

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Grid, Skeleton, Stack, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useOutletContext } from 'react-router-dom';
+import useCase from '../hooks/useCase';
+import Asset, {} from './assets/Asset';
+/** All Related fields that carry asset values */
+const ASSET_FIELDS = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
+/** Extract (type, value, seenInId) triples from a record's related field */
+const extractAssets = (related, recordId) => {
+    if (!related) {
+        return [];
+    }
+    const results = [];
+    for (const field of ASSET_FIELDS) {
+        const raw = related[field];
+        if (!raw) {
+            continue;
+        }
+        const values = Array.isArray(raw) ? raw : [raw];
+        for (const value of values) {
+            if (value) {
+                results.push({ type: field, value: String(value), id: recordId });
+            }
+        }
+    }
+    return results;
+};
+/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
+export const buildAssetEntries = (records) => {
+    const map = new Map();
+    for (const record of records) {
+        const related = record.related ?? record.related;
+        const recordId = record.howler?.id ?? record.howler?.id;
+        if (!recordId) {
+            continue;
+        }
+        for (const { type, value, id } of extractAssets(related, recordId)) {
+            const key = `${type}:${value}`;
+            if (!map.has(key)) {
+                map.set(key, { type, value, seenIn: [] });
+            }
+            const entry = map.get(key);
+            if (!entry.seenIn.includes(id)) {
+                entry.seenIn.push(id);
+            }
+        }
+    }
+    return Array.from(map.values());
+};
+const RELATED_FIELDS = ASSET_FIELDS.map(f => `related.${f}`).join(',');
+const CaseAssets = ({ case: providedCase, caseId }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const routeCase = useOutletContext();
+    const { case: _case } = useCase({ case: providedCase ?? routeCase, caseId });
+    const [records, setRecords] = useState(null);
+    const [activeFilters, setActiveFilters] = useState(new Set());
+    const ids = useMemo(() => (_case?.items ?? [])
+        .filter(item => ['hit', 'observable'].includes(item.type))
+        .map(item => item.value)
+        .filter(val => !!val), [_case?.items]);
+    useEffect(() => {
+        if (ids.length < 1) {
+            setRecords([]);
+            return;
+        }
+        dispatchApi(api.v2.search.post(['hit', 'observable'], {
+            query: `howler.id:(${ids.join(' OR ')})`,
+            fl: `howler.id,${RELATED_FIELDS}`
+        })).then(response => setRecords(response.items));
+    }, [dispatchApi, ids]);
+    const allAssets = useMemo(() => (records ? buildAssetEntries(records) : []), [records]);
+    const assetTypes = useMemo(() => (allAssets ? [...new Set(allAssets.map(a => a.type))].sort() : []), [allAssets]);
+    const filteredAssets = useMemo(() => {
+        if (allAssets.length < 1) {
+            return [];
+        }
+        if (activeFilters.size === 0) {
+            return allAssets;
+        }
+        return allAssets.filter(a => activeFilters.has(a.type));
+    }, [allAssets, activeFilters]);
+    const toggleFilter = (type) => {
+        setActiveFilters(prev => {
+            const next = new Set(prev);
+            if (next.has(type)) {
+                next.delete(type);
+            }
+            else {
+                next.add(type);
+            }
+            return next;
+        });
+    };
+    if (!_case) {
+        return null;
+    }
+    return (_jsxs(Grid, { container: true, spacing: 2, px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, flexWrap: "wrap", children: [_jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: t('page.cases.assets.filter_by_type') }), records === null ? (_jsx(Skeleton, { width: 240, height: 32 })) : (assetTypes.map(type => (_jsx(Chip, { label: t(`page.cases.assets.type.${type}`), size: "small", onClick: () => toggleFilter(type), color: activeFilters.has(type) ? 'primary' : 'default', variant: activeFilters.has(type) ? 'filled' : 'outlined' }, type))))] }) }), records === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: _jsx(Skeleton, { height: 100 }) }, `skeleton-${i}`)))) : filteredAssets.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.assets.empty') }) })) : (filteredAssets.map(asset => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: _jsx(Asset, { asset: asset, case: _case }) }, `${asset.type}:${asset.value}`))))] }));
+};
+export default memo(CaseAssets);

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

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

package/components/routes/cases/detail/CaseAssets.test.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+import { buildAssetEntries } from './CaseAssets';
+// ---------------------------------------------------------------------------
+// Pure logic tests — no React needed
+// ---------------------------------------------------------------------------
+describe('buildAssetEntries', () => {
+    it('returns an empty array for records with no related field', () => {
+        expect(buildAssetEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
+    });
+    it('extracts a single IP from a hit', () => {
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })]);
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ type: 'ip', value: '1.2.3.4', seenIn: ['h1'] });
+    });
+    it('extracts multiple fields from a single record', () => {
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } })
+        ]);
+        const types = result.map(a => a.type).sort();
+        expect(types).toEqual(['ip', 'user']);
+    });
+    it('deduplicates the same asset value across multiple records', () => {
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockObservable({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
+        ]);
+        expect(result).toHaveLength(1);
+        expect(result[0].seenIn).toEqual(['h1', 'obs1']);
+    });
+    it('keeps distinct asset values as separate entries', () => {
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockHit({ howler: { id: 'h2' }, related: { ip: ['5.6.7.8'] } })
+        ]);
+        expect(result).toHaveLength(2);
+    });
+    it('does not duplicate seenIn ids when the same record appears twice for the same asset', () => {
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
+        ]);
+        expect(result[0].seenIn).toEqual(['h1']);
+    });
+    it('skips records with no howler.id', () => {
+        const noId = { related: { ip: ['1.2.3.4'] } };
+        expect(buildAssetEntries([noId])).toEqual([]);
+    });
+    it('handles the scalar `id` field on Related', () => {
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ type: 'id', value: 'some-id', seenIn: ['h1'] });
+    });
+    it('handles array fields like hash, hosts, user, ids, uri, signature', () => {
+        const related = {
+            hash: ['abc123'],
+            hosts: ['host.example.com'],
+            user: ['bob'],
+            ids: ['guid-1'],
+            uri: ['https://example.com'],
+            signature: ['rule-X']
+        };
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related })]);
+        const types = result.map(a => a.type).sort();
+        expect(types).toEqual(['hash', 'hosts', 'ids', 'signature', 'uri', 'user']);
+    });
+});
+// ---------------------------------------------------------------------------
+// Component rendering tests
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.fn();
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({ case: c, updateCase: vi.fn(), loading: false, missing: false })
+}));
+const mockCase = {
+    case_id: 'case-001',
+    items: [
+        { type: 'hit', value: 'hit-1' },
+        { type: 'observable', value: 'obs-1' }
+    ]
+};
+const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/assets'] }, children);
+// lazy import the component after mocks are set up
+const CaseAssets = (await import('./CaseAssets')).default;
+describe('CaseAssets component', () => {
+    beforeEach(() => {
+        mockDispatchApi.mockClear();
+    });
+    it('renders skeletons while records are loading', () => {
+        mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
+        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        // 6 skeleton cards
+        const skeletons = document.querySelectorAll('.MuiSkeleton-root');
+        expect(skeletons.length).toBeGreaterThan(0);
+    });
+    it('shows "No assets found" when records have no related data', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' } }, { howler: { id: 'obs-1' } }]
+        });
+        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.assets.empty');
+    });
+    it('renders asset cards for extracted assets', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        expect(screen.getByText('alice')).toBeTruthy();
+    });
+    it('renders a filter chip for each asset type present', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findAllByText('page.cases.assets.type.ip');
+        expect(screen.getAllByText('page.cases.assets.type.ip')).toHaveLength(2);
+        expect(screen.getAllByText('page.cases.assets.type.user')).toHaveLength(2);
+    });
+    it('filters assets when a type chip is clicked', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        // Wait for both assets to appear
+        await screen.findByText('1.2.3.4');
+        expect(screen.getByText('alice')).toBeTruthy();
+        // Click the 'ip' filter chip
+        await act(async () => {
+            await userEvent.click(screen.getByRole('button', { name: 'page.cases.assets.type.ip' }));
+        });
+        // Alice (user) should be filtered out
+        expect(screen.queryByText('alice')).toBeNull();
+        expect(screen.getByText('1.2.3.4')).toBeTruthy();
+    });
+    it('restores all assets when an active filter chip is clicked again', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        const ipChip = screen.getByRole('button', { name: 'page.cases.assets.type.ip' });
+        await act(async () => {
+            await userEvent.click(ipChip);
+        });
+        await act(async () => {
+            await userEvent.click(ipChip);
+        });
+        expect(screen.getByText('1.2.3.4')).toBeTruthy();
+        expect(screen.getByText('alice')).toBeTruthy();
+    });
+    it('renders nothing when the case has no hit/observable items', async () => {
+        const emptyCase = { case_id: 'case-002', items: [] };
+        render(_jsx(CaseAssets, { case: emptyCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.assets.empty');
+        expect(mockDispatchApi).not.toHaveBeenCalled();
+    });
+});

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

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