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

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const CaseSearch: FC;
+export default CaseSearch;

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

@@ -0,0 +1,78 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
+import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import FuzzySearchBar from '@cccsaurora/howler-ui/components/elements/search/FuzzySearchBar';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { isCase, isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+const CaseSearch = () => {
+    const parentCase = useOutletContext();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const [hitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, HitLayout.NORMAL);
+    const [loading, setLoading] = useState(false);
+    const [response, setResponse] = useState(null);
+    const [error, setError] = useState(null);
+    const [offset, setOffset] = useState(0);
+    const caseIds = useMemo(() => parentCase
+        ? [
+            parentCase.case_id,
+            ...(parentCase.items ?? []).filter(item => item.type === 'case').map(item => item.value)
+        ].filter((id) => !!id)
+        : [], [parentCase]);
+    const handleSearch = useCallback(async (_query, _indexes) => {
+        setLoading(true);
+        setError(null);
+        try {
+            // If no indexes specified, search across all types
+            const searchIndexes = _indexes.length > 0 ? _indexes : ['case', 'hit', 'event'];
+            // Add case_id to the filters to scope the search to this case and its sub-cases
+            const filters = parentCase?.case_id
+                ? [`case_id:(${caseIds.join(' OR ')}) OR howler.related:(${caseIds.join(' OR ')})`]
+                : [];
+            setResponse(await api.v2.fuzzy.post({
+                query: _query,
+                indexes: searchIndexes,
+                rows: 25,
+                filters,
+                offset
+            }));
+        }
+        catch (err) {
+            setError(err.message || 'An error occurred while searching.');
+            setResponse(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [caseIds, offset, parentCase?.case_id]);
+    useEffect(() => {
+        if (query) {
+            void handleSearch(query, indexes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [indexes, offset]);
+    return (_jsx(PageCenter, { maxWidth: "lg", textAlign: "left", children: _jsxs(Stack, { spacing: 1, children: [_jsx(FuzzySearchBar, { onSearch: handleSearch, loading: loading }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] })), error && (_jsx(Typography, { color: "error", sx: { mb: 2 }, children: error })), loading ? (_jsx(_Fragment, { children: _jsx(Skeleton, { variant: "rounded", height: 430 }) })) : ((response?.items ?? []).map(item => {
+                    if (isHit(item)) {
+                        return _jsx(HitCard, { id: item.howler.id, layout: hitLayout }, item.howler.id);
+                    }
+                    else if (isEvent(item)) {
+                        return _jsx(EventCard, { id: item.howler.id, event: item }, item.howler.id);
+                    }
+                    else if (isCase(item)) {
+                        return _jsx(CaseCard, { caseId: item.case_id, case: item }, item.case_id);
+                    }
+                }))] }) }));
+};
+export default CaseSearch;

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

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

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

@@ -0,0 +1,154 @@
+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 { setupContextSelectorMock, setupLocalStorageMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { createMockCase, createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Setup common mocks
+// ---------------------------------------------------------------------------
+setupContextSelectorMock();
+const mockLocalStorage = setupLocalStorageMock();
+const mockFuzzyPost = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            fuzzy: {
+                post: (...args) => mockFuzzyPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        // Provide a parent case via outlet context for CaseSearch
+        useOutletContext: () => createMockCase({
+            case_id: 'parent-case',
+            items: [{ type: 'case', value: 'child-1' }, { type: 'case', value: 'child-2' }]
+        })
+    };
+});
+// The cards render skeletons when records aren't in RecordContext. We don't
+// need full RecordProvider—verify presence via ids/text content.
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: ({ id }) => _jsxs("div", { id: `hit-card-${id}`, children: ["Hit ", id] })
+}));
+vi.mock('components/elements/event/EventCard', () => ({
+    default: ({ id }) => _jsxs("div", { id: `event-card-${id}`, children: ["Event ", id] })
+}));
+vi.mock('components/elements/case/CaseCard', () => ({
+    default: ({ caseId }) => _jsxs("div", { id: `case-card-${caseId}`, children: ["Case ", caseId] })
+}));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import CaseSearch from './CaseSearch';
+// Helper to make a response object
+const makeResponse = (overrides) => ({
+    items: [],
+    offset: 0,
+    rows: 25,
+    total: 0,
+    ...overrides
+});
+describe('CaseSearch', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockLocalStorage.clear();
+    });
+    const MakeWrapper = ({ children }) => {
+        const [query, setQuery] = useState('');
+        const [indexes] = useState([]);
+        return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ParameterContext.Provider, { value: { indexes, query, setQuery }, children: children }) }));
+    };
+    it('renders SearchTotal and pagination after a successful search', async () => {
+        const hit = createMockHit({ howler: { id: 'hit-1' } });
+        const event = createMockEvent({ howler: { id: 'event-1' } });
+        mockFuzzyPost.mockResolvedValueOnce(makeResponse({ items: [hit, event], total: 100, rows: 25, offset: 0 }));
+        render(_jsx(CaseSearch, {}), { wrapper: MakeWrapper });
+        // Trigger search by clicking the button in FuzzySearchBar
+        // First, type a query into the input and click the search icon
+        const user = userEvent.setup();
+        const input = screen.getByTestId('fuzzy-search-input');
+        await user.type(input, 'howler.id:*');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        await waitFor(() => {
+            // Total text appears
+            expect(screen.getByText(/Showing 1 to 2 of 100 results/)).toBeInTheDocument();
+            // Pagination navigation renders
+            expect(screen.getByRole('navigation')).toBeInTheDocument();
+        });
+    });
+    it('calls fuzzy search with default indexes when none selected', async () => {
+        mockFuzzyPost.mockResolvedValueOnce(makeResponse({ items: [], total: 0 }));
+        render(_jsx(CaseSearch, {}), { wrapper: MakeWrapper });
+        const user = userEvent.setup();
+        const input = screen.getByTestId('fuzzy-search-input');
+        await user.type(input, 'test');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        await waitFor(() => {
+            expect(mockFuzzyPost).toHaveBeenCalledTimes(1);
+            const arg = mockFuzzyPost.mock.calls[0][0];
+            expect(arg.query).toBe('test');
+            expect(arg.rows).toBe(25);
+            expect(arg.offset).toBe(0);
+            expect(arg.indexes).toEqual(['case', 'hit', 'event']);
+            // When indexes array is empty, CaseSearch uses defaults
+            // Filters are included when case context exists; exact text is implementation detail
+        });
+    });
+    it('renders appropriate cards for hit, event and case items', async () => {
+        const hit = { ...createMockHit({ howler: { id: 'hit-123' } }), _score: 1 };
+        const event = { ...createMockEvent({ howler: { id: 'event-456' } }), _score: 1 };
+        const caseItem = { __index: 'case', case_id: 'case-789', _score: 1 };
+        mockFuzzyPost.mockResolvedValueOnce(makeResponse({ items: [hit, event, caseItem], total: 3, offset: 0 }));
+        render(_jsx(CaseSearch, {}), { wrapper: MakeWrapper });
+        const user = userEvent.setup();
+        const input = screen.getByTestId('fuzzy-search-input');
+        await user.type(input, 'anything');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        await waitFor(() => {
+            expect(screen.getByTestId('hit-card-hit-123')).toBeInTheDocument();
+            expect(screen.getByTestId('event-card-event-456')).toBeInTheDocument();
+            expect(screen.getByTestId('case-card-case-789')).toBeInTheDocument();
+        });
+    });
+    it('updates offset via pagination and re-runs search', async () => {
+        // First response with 100 total and 25 rows; clicking page 2 should set offset=25
+        mockFuzzyPost
+            .mockResolvedValueOnce(makeResponse({ items: [], total: 100, rows: 25, offset: 0 }))
+            .mockResolvedValueOnce(makeResponse({ items: [], total: 100, rows: 25, offset: 25 }));
+        render(_jsx(CaseSearch, {}), { wrapper: MakeWrapper });
+        const user = userEvent.setup();
+        const input = screen.getByTestId('fuzzy-search-input');
+        await user.type(input, 'page');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        await waitFor(() => {
+            expect(screen.getByRole('navigation')).toBeInTheDocument();
+        });
+        await user.click(screen.getByText('2'));
+        await waitFor(() => {
+            // Second call should include offset 25
+            const second = mockFuzzyPost.mock.calls[1][0];
+            expect(second.offset).toBe(25);
+        });
+    });
+    it('shows error text when search fails', async () => {
+        mockFuzzyPost.mockRejectedValueOnce(new Error('Boom'));
+        render(_jsx(CaseSearch, {}), { wrapper: MakeWrapper });
+        const user = userEvent.setup();
+        const input = screen.getByTestId('fuzzy-search-input');
+        await user.type(input, 'bad');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        await waitFor(() => {
+            expect(screen.getByText('Boom')).toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,8 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+interface CaseSidebarProps {
+    case: Case;
+    update: (newCase: Case) => void;
+}
+declare const CaseSidebar: FC<CaseSidebarProps>;
+export default CaseSidebar;

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, MouseSensor, pointerWithin, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { AddCircle, CalendarMonth, Circle, Dashboard, Dataset, Description, Folder, Refresh, Rule, Search, UnfoldLess } from '@mui/icons-material';
+import { alpha, Box, Card, Chip, IconButton, LinearProgress, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddToCaseModal';
+import dayjs from 'dayjs';
+import { useCallback, useContext, useReducer, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+import { ESCALATION_COLOR_MAP } from '../constants';
+import CaseFolder from './sidebar/CaseFolder';
+import FolderEntry from './sidebar/FolderEntry';
+import RootDropZone from './sidebar/RootDropZone';
+const CaseSidebar = ({ case: _case, update }) => {
+    const { dispatchApi } = useMyApi();
+    const { t } = useTranslation();
+    const location = useLocation();
+    const theme = useTheme();
+    const { showModal } = useContext(ModalContext);
+    const sensors = useSensors(useSensor(MouseSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }), useSensor(TouchSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }));
+    const [loading, setLoading] = useState(false);
+    const [activeDragData, setActiveDragData] = useState(null);
+    const [collapseKey, collapse] = useReducer(x => x + 1, 0);
+    const handleDragStart = useCallback((event) => {
+        const data = event.active.data.current;
+        setActiveDragData({ type: data.type, label: data.label ?? '' });
+    }, []);
+    const navItemSx = useCallback((isActive) => [
+        {
+            cursor: 'pointer',
+            px: 0.5,
+            py: 0.5,
+            transition: theme.transitions.create('background', { duration: 100 }),
+            color: `${theme.palette.text.primary} !important`,
+            textDecoration: 'none',
+            background: 'transparent',
+            borderRight: `thin solid ${theme.palette.divider}`,
+            '&:hover': {
+                background: alpha(theme.palette.grey[600], 0.25)
+            }
+        },
+        isActive && {
+            background: alpha(theme.palette.grey[600], 0.15),
+            borderRight: `3px solid ${theme.palette.primary.main}`
+        }
+    ], [
+        theme.palette.divider,
+        theme.palette.grey,
+        theme.palette.primary.main,
+        theme.palette.text.primary,
+        theme.transitions
+    ]);
+    const handleDragEnd = useCallback(async (event) => {
+        setActiveDragData(null);
+        if (!_case) {
+            return;
+        }
+        const { active, over } = event;
+        if (!over?.data.current || !active?.data.current) {
+            return;
+        }
+        const movingEntry = active.data.current.entry;
+        const targetFolderId = over.data.current.folderId ?? null;
+        if (!movingEntry.id) {
+            return;
+        }
+        if (movingEntry.parent === targetFolderId) {
+            return;
+        }
+        try {
+            setLoading(true);
+            const updatedCase = await dispatchApi(api.v2.case.items.put(_case.case_id, movingEntry.id, { parent: targetFolderId }));
+            update(updatedCase);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [_case, dispatchApi, update]);
+    return (_jsxs(Box, { sx: {
+            flex: 1,
+            maxWidth: '350px',
+            maxHeight: 'calc(100vh - 64px)',
+            display: 'flex',
+            flexDirection: 'column'
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('search')), component: Link, to: `/cases/${_case?.case_id}/search`, children: [_jsx(Search, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.search') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case?.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Card, { sx: { borderRadius: 0, p: 0.25 }, children: _jsxs(Stack, { direction: "row", spacing: 0.25, children: [_jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_item'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: () => {
+                                    if (_case) {
+                                        showModal(_jsx(AddToCaseModal, { case: _case, onUpdated: update }), { maxHeight: '90vh', height: 'unset' });
+                                    }
+                                }, children: [_jsx(Description, { sx: { fontSize: '18px' } }), _jsx(AddCircle, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                            bottom: 2,
+                                            right: 2,
+                                            backgroundColor: theme.palette.background.paper,
+                                            borderRadius: '100%'
+                                        }, htmlColor: "grey" })] }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_folder'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: async () => {
+                                    if (_case?.case_id) {
+                                        try {
+                                            setLoading(true);
+                                            const updatedCase = await dispatchApi(api.v2.case.items.post(_case.case_id, {
+                                                type: 'folder',
+                                                name: t('page.cases.sidebar.new_folder'),
+                                                value: t('page.cases.sidebar.new_folder')
+                                            }));
+                                            update(updatedCase);
+                                        }
+                                        finally {
+                                            setLoading(false);
+                                        }
+                                    }
+                                }, children: [_jsx(Folder, { sx: { fontSize: '18px' } }), _jsx(AddCircle, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                            bottom: 2,
+                                            right: 2,
+                                            backgroundColor: theme.palette.background.paper,
+                                            borderRadius: '100%'
+                                        }, htmlColor: "grey" })] }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.refresh'), children: _jsx(IconButton, { size: "small", onClick: async () => {
+                                    if (_case?.case_id) {
+                                        try {
+                                            setLoading(true);
+                                            const refreshedCase = await dispatchApi(api.v2.case.get(_case.case_id));
+                                            if (refreshedCase) {
+                                                update(refreshedCase);
+                                            }
+                                        }
+                                        finally {
+                                            setLoading(false);
+                                        }
+                                    }
+                                }, children: _jsx(Refresh, { sx: { fontSize: '18px' } }) }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.collapse_all'), children: _jsx(IconButton, { size: "small", onClick: collapse, children: _jsx(UnfoldLess, { sx: { fontSize: '18px' } }) }) })] }) }), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
+                    position: 'relative',
+                    borderRight: `thin solid ${theme.palette.divider}`
+                }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update, collapseKey: collapseKey }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && _jsx(FolderEntry, { caseId: null, indent: 0, label: activeDragData.label, entry: null }) })] })] }) }))] }));
+};
+export default CaseSidebar;

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

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

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

@@ -0,0 +1,155 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+const mockDragEndHandler = vi.hoisted(() => ({ current: null }));
+const mockDragStartHandler = vi.hoisted(() => ({ current: null }));
+vi.mock('@dnd-kit/core', () => ({
+    DndContext: ({ children, onDragEnd, onDragStart }) => {
+        mockDragEndHandler.current = onDragEnd;
+        mockDragStartHandler.current = onDragStart;
+        return _jsx("div", { id: "dnd-context", children: children });
+    },
+    DragOverlay: ({ children }) => _jsx("div", { id: "drag-overlay", children: children ?? null }),
+    MouseSensor: class {
+    },
+    TouchSensor: class {
+    },
+    useSensor: vi.fn(),
+    useSensors: vi.fn(() => []),
+    pointerWithin: vi.fn()
+}));
+vi.mock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: () => '' } }
+}));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+const mockItemsPut = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: vi.fn(),
+                items: {
+                    put: (...args) => mockItemsPut(...args),
+                    post: vi.fn(),
+                    del: vi.fn(),
+                    patch: vi.fn()
+                }
+            }
+        }
+    }
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children })),
+        useLocation: vi.fn(() => ({ pathname: '/', search: '' }))
+    };
+});
+vi.mock('./sidebar/CaseFolder', () => ({
+    default: () => _jsx("div", { id: "case-folder" })
+}));
+vi.mock('./sidebar/FolderEntry', () => ({
+    default: ({ label }) => _jsx("div", { id: "folder-entry-overlay", children: label })
+}));
+vi.mock('./sidebar/RootDropZone', () => ({
+    default: ({ caseId }) => _jsx("div", { id: "root-drop-zone", "data-case-id": caseId })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({ showModal: vi.fn(), close: vi.fn(), setContent: vi.fn() })
+    };
+});
+import CaseSidebar from './CaseSidebar';
+const hitItem = (value, id = value, parent = null) => ({
+    type: 'hit',
+    value,
+    id,
+    parent,
+    name: null
+});
+const renderSidebar = (overrides, onUpdate = vi.fn()) => {
+    const _case = createMockCase({ case_id: 'case-1', items: [], ...overrides });
+    const utils = render(_jsx(MemoryRouter, { children: _jsx(CaseSidebar, { case: _case, update: onUpdate }) }));
+    return { _case, onUpdate, ...utils };
+};
+const fireDragStart = (data) => {
+    act(() => {
+        mockDragStartHandler.current?.({ active: { data: { current: data } } });
+    });
+};
+const fireDragEnd = (activeData, overData) => {
+    act(() => {
+        mockDragEndHandler.current?.({
+            active: { data: { current: activeData } },
+            over: overData ? { data: { current: overData } } : null
+        });
+    });
+};
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockItemsPut.mockReset();
+    mockDragEndHandler.current = null;
+    mockDragStartHandler.current = null;
+});
+describe('CaseSidebar', () => {
+    it('renders navigation links and DnD wrappers', () => {
+        const { container } = renderSidebar();
+        expect(container.querySelector('#dnd-context')).toBeInTheDocument();
+        expect(container.querySelector('#case-folder')).toBeInTheDocument();
+        expect(container.querySelector('#drag-overlay')).toBeInTheDocument();
+        expect(container.querySelector('#root-drop-zone')).toHaveAttribute('data-case-id', 'case-1');
+        expect(screen.getByText('page.cases.dashboard').closest('a')).toHaveAttribute('href', '/cases/case-1');
+    });
+    it('shows and clears drag overlay label across drag start/end', async () => {
+        const items = [hitItem('folder/my-item', 'val')];
+        renderSidebar({ items });
+        fireDragStart({ type: 'hit', label: 'my-item', entry: hitItem('folder/my-item', 'val'), caseId: 'case-1' });
+        expect(screen.getByText('my-item')).toBeInTheDocument();
+        mockItemsPut.mockReturnValue('put-request');
+        mockDispatchApi.mockResolvedValue(createMockCase({ case_id: 'case-1', items }));
+        fireDragEnd({ type: 'hit', entry: hitItem('folder/my-item', 'val', 'docs-folder'), caseId: 'case-1' }, { folderId: 'archive-folder', caseId: 'case-1' });
+        await waitFor(() => {
+            expect(screen.queryByText('my-item')).not.toBeInTheDocument();
+        });
+    });
+    it('moves item to folder by calling items.put with parent folder id', async () => {
+        const items = [hitItem('v', 'item-1', 'old-folder')];
+        const updatedCase = createMockCase({ case_id: 'case-1', items });
+        mockItemsPut.mockReturnValue('put-request');
+        mockDispatchApi.mockResolvedValue(updatedCase);
+        const { onUpdate } = renderSidebar({ items });
+        fireDragEnd({ type: 'hit', entry: items[0], caseId: 'case-1' }, { folderId: 'archive-folder', caseId: 'case-1' });
+        await waitFor(() => {
+            expect(mockItemsPut).toHaveBeenCalledWith('case-1', 'item-1', { parent: 'archive-folder' });
+            expect(onUpdate).toHaveBeenCalledWith(updatedCase);
+        });
+    });
+    it('moves item to root with parent null', async () => {
+        const items = [hitItem('v', 'item-1', 'folder-id')];
+        mockItemsPut.mockReturnValue('put-request');
+        mockDispatchApi.mockResolvedValue(createMockCase({ case_id: 'case-1', items }));
+        renderSidebar({ items });
+        fireDragEnd({ type: 'hit', entry: items[0], caseId: 'case-1' }, { caseId: 'case-1' });
+        await waitFor(() => {
+            expect(mockItemsPut).toHaveBeenCalledWith('case-1', 'item-1', { parent: null });
+        });
+    });
+    it('does nothing for no-op drops (same parent) and invalid payloads', async () => {
+        renderSidebar({ items: [hitItem('v', 'item-1', 'same-folder')] });
+        fireDragEnd({ type: 'hit', entry: hitItem('v', 'item-1', 'same-folder'), caseId: 'case-1' }, { folderId: 'same-folder', caseId: 'case-1' });
+        fireDragEnd({ type: 'hit', entry: { type: 'hit', value: 'v' }, caseId: 'case-1' }, { folderId: 'x' });
+        fireDragEnd({ type: 'hit', entry: hitItem('v', 'id-2') }, null);
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(mockItemsPut).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,14 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Task } from '@cccsaurora/howler-ui/models/entities/generated/Task';
+import { type FC } from 'react';
+declare const CaseTask: FC<{
+    case: Case;
+    task?: Task;
+    onDelete?: () => Promise<void>;
+    onEdit?: (task?: Partial<Task>) => Promise<void>;
+    loading?: boolean;
+    newTask?: boolean;
+    /** When true all editing controls are hidden and the task is display-only */
+    readOnly?: boolean;
+}>;
+export default CaseTask;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Close, Delete, Edit } from '@mui/icons-material';
+import { Autocomplete, Card, Checkbox, Chip, IconButton, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { buildPathFromID } from '../utils';
+const CaseTask = ({ case: _case, task, onEdit, onDelete, newTask = false, readOnly = false }) => {
+    const { t } = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [editing, setEditing] = useState(newTask);
+    const [summary, setSummary] = useState(task?.summary || '');
+    const [item, setItem] = useState(task?.item ? _case?.items.find(_item => _item.id === task.item) : null);
+    const [assignment, setAssignment] = useState(task?.assignment);
+    const [complete, setComplete] = useState(task?.complete ?? false);
+    const dirty = summary !== task?.summary ||
+        item?.id !== task?.item ||
+        complete !== task?.complete ||
+        assignment !== task?.assignment;
+    const options = useMemo(() => _case?.items ?? [], [_case]);
+    const onSubmit = async () => {
+        if (dirty && editing) {
+            setLoading(true);
+            await onEdit({ summary, item: !item ? null : item.id, assignment, complete });
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (!readOnly && !editing && task?.assignment !== assignment) {
+            setLoading(true);
+            void onEdit({ assignment }).finally(() => setLoading(false));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [assignment]);
+    useEffect(() => {
+        if (!readOnly && !editing && task?.complete !== complete) {
+            setLoading(true);
+            void onEdit({ complete }).finally(() => setLoading(false));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [complete]);
+    useEffect(() => {
+        if (!editing && task) {
+            setSummary(task.summary);
+            setItem(task?.item ? _case?.items.find(_item => _item.id === task.item) : null);
+            setComplete(task.complete);
+            setAssignment(task.assignment);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [task, _case]);
+    return (_jsxs(Card, { sx: { pl: 0.5, pr: 1, py: 0.5, position: 'relative' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Checkbox, { disabled: loading || readOnly, color: "success", checked: complete, size: "small", onChange: (_ev, _complete) => !readOnly && setComplete(_complete) }), editing && !readOnly ? (_jsx(TextField, { disabled: loading, value: summary, onChange: e => setSummary(e.target.value), size: "small", fullWidth: true, sx: { minWidth: '40%' } })) : (_jsx(Typography, { sx: [complete && { textDecoration: 'line-through' }], children: task?.summary || summary })), !editing && item && (_jsx(Chip, { clickable: true, component: Link, to: `/cases/${_case.case_id}/${buildPathFromID(_case, item.id)}`, label: item.name })), editing && !readOnly && (_jsx(Autocomplete, { disabled: loading, value: item, options: options, getOptionLabel: opt => buildPathFromID(_case, opt.id), isOptionEqualToValue: opt => opt.id === item.id, onChange: (_ev, value) => setItem(value), fullWidth: true, renderInput: params => _jsx(TextField, { ...params, size: "small" }) })), _jsx(UserList, { disabled: loading || readOnly, userIds: [assignment], onChange: ([_assigment]) => !readOnly && setAssignment(_assigment), i18nLabel: "route.cases.task.set.assignment", avatarHeight: 24 }), _jsx("div", { style: { flex: 1 } }), !readOnly && editing && !newTask && (_jsx(Tooltip, { title: t('route.cases.task.delete'), children: _jsx(IconButton, { size: "small", color: "error", onClick: () => {
+                                setLoading(true);
+                                void onDelete().then(() => setLoading(false));
+                            }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }) })), !readOnly && (_jsx(Tooltip, { title: t(editing ? 'route.cases.task.edit.save' : 'route.cases.task.edit'), children: _jsx("span", { children: _jsx(IconButton, { size: "small", color: editing ? 'success' : 'default', onClick: async () => {
+                                    if (!editing) {
+                                        setEditing(true);
+                                        return;
+                                    }
+                                    await onSubmit();
+                                    setEditing(false);
+                                }, disabled: (!dirty && editing) || loading || !summary, children: editing ? _jsx(Check, { fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }) }) })), !readOnly && editing && (_jsx(Tooltip, { title: t('route.cases.task.edit.cancel'), children: _jsx(IconButton, { size: "small", onClick: () => {
+                                if (newTask) {
+                                    void onDelete();
+                                }
+                                else {
+                                    setEditing(false);
+                                }
+                            }, disabled: loading, children: _jsx(Close, { fontSize: "small" }) }) }))] }), loading && _jsx(LinearProgress, { sx: { left: 0, bottom: 0, right: 0, position: 'absolute' } })] }));
+};
+export default CaseTask;

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

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