@gen-epix/ui 1.14.4 → 1.15.0

package/src/pages/CaseTypesAdminPage/CaseTypesAdminPage.tsx

@@ -0,0 +1,204 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  object,
+  string,
+} from 'yup';
+
+import type { CaseType } from '../../api';
+import {
+  CaseApi,
+  CommandName,
+  PermissionType,
+} from '../../api';
+import { useDiseaseOptionsQuery } from '../../dataHooks/useDiseasesQuery';
+import { useEtiologicalAgentOptionsQuery } from '../../dataHooks/useEtiologicalAgentsQuery';
+import { useArray } from '../../hooks/useArray';
+import type { FormFieldDefinition } from '../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../models/form';
+import { QUERY_KEY } from '../../models/query';
+import type { TableColumn } from '../../models/table';
+import { TableUtil } from '../../utils/TableUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import type { CrudPageSubPage } from '../CrudPage';
+import { CrudPage } from '../CrudPage';
+import { AuthorizationManager } from '../../classes/managers/AuthorizationManager';
+import { NumberUtil } from '../../utils/NumberUtil';
+
+type FormFields = Pick<CaseType, 'name' | 'description' | 'etiological_agent_id' | 'disease_id' | 'create_max_n_cases' | 'delete_max_n_cases' | 'read_max_n_cases' | 'read_max_tree_size' | 'update_max_n_cases'>;
+
+export const CaseTypesAdminPage = () => {
+  const { t } = useTranslation();
+  const diseaseOptionsQuery = useDiseaseOptionsQuery();
+  const etiologicalAgentOptionsQuery = useEtiologicalAgentOptionsQuery();
+
+  const loadables = useArray([diseaseOptionsQuery, etiologicalAgentOptionsQuery]);
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await CaseApi.instance.caseTypesGetAll({ signal }))?.data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: CaseType) => {
+    return await CaseApi.instance.caseTypesDeleteOne(item.id);
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: CaseType) => {
+    return (await CaseApi.instance.caseTypesPutOne(item.id, { id: item.id, ...variables })).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    return (await CaseApi.instance.caseTypesPostOne(variables)).data;
+  }, []);
+
+  const getName = useCallback((item: CaseType) => {
+    return item.name;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      name: string().extendedAlphaNumeric().required().max(100),
+      description: string().freeFormText(),
+      create_max_n_cases: NumberUtil.yup.required().min(0),
+      delete_max_n_cases: NumberUtil.yup.required().min(0),
+      read_max_n_cases: NumberUtil.yup.required().min(0),
+      read_max_tree_size: NumberUtil.yup.required().min(0),
+      update_max_n_cases: NumberUtil.yup.required().min(0),
+      etiological_agent_id: string().uuid4().nullable().test(function(value: string) {
+        // eslint-disable-next-line react/no-this-in-sfc
+        const { disease_id } = this.parent as FormFields;
+        if (value !== null || !!disease_id) {
+          return true;
+        }
+        // eslint-disable-next-line react/no-this-in-sfc
+        return this.createError({
+          message: t`Etiological agent is required when no disease is selected`,
+          path: 'etiological_agent_id',
+        });
+      }),
+      disease_id: string().uuid4().nullable().test(function(value: string) {
+        // eslint-disable-next-line react/no-this-in-sfc
+        const { etiological_agent_id } = this.parent as FormFields;
+        if (value !== null || !!etiological_agent_id) {
+          return true;
+        }
+        // eslint-disable-next-line react/no-this-in-sfc
+        return this.createError({
+          message: t`Disease is required when no etiological agent is selected`,
+          path: 'disease_id',
+        });
+      }),
+    });
+  }, [t]);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'name',
+        label: t`Name`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'disease_id',
+        label: t`Disease`,
+        options: diseaseOptionsQuery.options,
+        loading: diseaseOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'etiological_agent_id',
+        label: t`Etiological agent`,
+        options: etiologicalAgentOptionsQuery.options,
+        loading: etiologicalAgentOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.RICH_TEXT,
+        name: 'description',
+        label: t`Description`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'read_max_n_cases',
+        label: t`Read max number of cases`,
+        type: 'number',
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'create_max_n_cases',
+        label: t`Create max number of cases`,
+        type: 'number',
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'update_max_n_cases',
+        label: t`Update max number of cases`,
+        type: 'number',
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'delete_max_n_cases',
+        label: t`Delete max number of cases`,
+        type: 'number',
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'read_max_tree_size',
+        label: t`Read max tree size`,
+        type: 'number',
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [etiologicalAgentOptionsQuery.isLoading, etiologicalAgentOptionsQuery.options, diseaseOptionsQuery, t]);
+
+  const tableColumns = useMemo((): TableColumn<CaseType>[] => {
+    return [
+      TableUtil.createTextColumn<CaseType>({ id: 'name', name: t`Name` }),
+      TableUtil.createOptionsColumn<CaseType>({ id: 'disease_id', name: t`Disease`, options: diseaseOptionsQuery.options }),
+      TableUtil.createOptionsColumn<CaseType>({ id: 'etiological_agent_id', name: t`Etiological agent`, options: etiologicalAgentOptionsQuery.options }),
+      TableUtil.createNumberColumn<CaseType>({ id: 'create_max_n_cases', name: t`Create max number of cases` }),
+      TableUtil.createNumberColumn<CaseType>({ id: 'read_max_n_cases', name: t`Read max number of cases` }),
+      TableUtil.createNumberColumn<CaseType>({ id: 'read_max_tree_size', name: t`Read max tree size` }),
+      TableUtil.createNumberColumn<CaseType>({ id: 'update_max_n_cases', name: t`Update max number of cases` }),
+      TableUtil.createNumberColumn<CaseType>({ id: 'delete_max_n_cases', name: t`Delete max number of cases` }),
+    ];
+  }, [etiologicalAgentOptionsQuery.options, diseaseOptionsQuery.options, t]);
+
+  const subPages = useMemo<CrudPageSubPage<CaseType>[]>(() => {
+    if (!AuthorizationManager.instance.doesUserHavePermission([
+      { command_name: CommandName.DimCrudCommand, permission_type: PermissionType.READ },
+    ])) {
+      return [];
+    }
+
+    return [
+      {
+        label: t`Manage dimensions`,
+        getPathName: (item: CaseType) => `/management/case-types/${item.id}/dimensions`,
+      } satisfies CrudPageSubPage<CaseType>,
+    ];
+  }, [t]);
+
+  return (
+    <CrudPage<FormFields, CaseType>
+      createOne={createOne}
+      subPages={subPages}
+      crudCommandType={CommandName.CaseTypeCrudCommand}
+      createItemDialogTitle={t`Create new case type`}
+      defaultSortByField={'name'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      loadables={loadables}
+      resourceQueryKeyBase={QUERY_KEY.CASE_TYPES}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('CaseTypesAdminPage')}
+      title={t`Case types`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/CaseTypesAdminPage/index.ts

@@ -0,0 +1 @@
+export * from './CaseTypesAdminPage';

package/src/pages/CasesDetailPage/CasesDetailPage.tsx

@@ -0,0 +1,57 @@
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import {
+  useEffect,
+  useMemo,
+} from 'react';
+
+import { CaseApi } from '../../api';
+import { EpiDashboard } from '../../components/epi/EpiDashboard';
+import { PageContainer } from '../../components/ui/PageContainer';
+import { ResponseHandler } from '../../components/ui/ResponseHandler';
+import { useItemQuery } from '../../hooks/useItemQuery';
+import { useUpdateBreadcrumb } from '../../hooks/useUpdateBreadcrumb';
+import { QUERY_KEY } from '../../models/query';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+
+export const CasesDetailPage = () => {
+  const { t } = useTranslation();
+  const { slug, caseTypeId } = useParams();
+
+  const updateBreadcrumb = useUpdateBreadcrumb('Case type');
+
+  const { isLoading, error, data: caseType } = useItemQuery({
+    baseQueryKey: QUERY_KEY.CASE_TYPES,
+    itemId: caseTypeId,
+    useQueryOptions: {
+      queryFn: async ({ signal }) => (await CaseApi.instance.caseTypesGetOne(caseTypeId, { signal })).data,
+    },
+  });
+
+  const title = useMemo(() => {
+    return caseType?.name ? caseType?.name : t`Case`;
+  }, [caseType, t]);
+
+  useEffect(() => {
+    updateBreadcrumb(title);
+  }, [title, updateBreadcrumb]);
+
+  return (
+    <PageContainer
+      fullHeight
+      fullWidth
+      showBreadcrumbs
+      testIdAttributes={TestIdUtil.createAttributes('CasesDetailPage', { 'case-type-id': caseTypeId, slug })}
+      title={title}
+    >
+      <ResponseHandler
+        error={error}
+        isLoading={isLoading}
+      >
+        <EpiDashboard
+          caseTypeId={caseTypeId}
+        />
+      </ResponseHandler>
+    </PageContainer>
+  );
+};

package/src/pages/CasesDetailPage/index.ts

@@ -0,0 +1 @@
+export * from './CasesDetailPage';

package/src/pages/CasesPage/CasesPage.tsx

@@ -0,0 +1,338 @@
+import { useTranslation } from 'react-i18next';
+import {
+  Box,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  useTheme,
+} from '@mui/material';
+import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
+import InfoIcon from '@mui/icons-material/Info';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+
+import type {
+  CaseStats,
+  CaseTypeSet,
+  CaseTypeSetCategory,
+} from '../../api';
+import {
+  CaseApi,
+  CaseTypeSetCategoryPurpose,
+} from '../../api';
+import { ConfigManager } from '../../classes/managers/ConfigManager';
+import { RouterManager } from '../../classes/managers/RouterManager';
+import type { EpiCaseTypeInfoDialogWithLoaderRefMethods } from '../../components/epi/EpiCaseTypeInfoDialog';
+import { EpiCaseTypeInfoDialogWithLoader } from '../../components/epi/EpiCaseTypeInfoDialog';
+import { PageContainer } from '../../components/ui/PageContainer';
+import { ResponseHandler } from '../../components/ui/ResponseHandler';
+import {
+  TableMenu,
+  TableCaption,
+  TableSidebarMenu,
+  Table,
+} from '../../components/ui/Table';
+import { useCaseTypeSetCategoriesQuery } from '../../dataHooks/useCaseTypeSetCategoriesQuery';
+import { useCaseTypeStatsQuery } from '../../dataHooks/useCaseTypeStatsQuery';
+import { useInitializeTableStore } from '../../hooks/useInitializeTableStore';
+import type { OptionBase } from '../../models/form';
+import { QUERY_KEY } from '../../models/query';
+import type {
+  TableRowParams,
+  TableColumn,
+} from '../../models/table';
+import {
+  createTableStore,
+  TableStoreContextProvider,
+} from '../../stores/tableStore';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { TableUtil } from '../../utils/TableUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import { DATE_FORMAT } from '../../data/date';
+import { CaseTypeUtil } from '../../utils/CaseTypeUtil';
+import { DownloadUtil } from '../../utils/DownloadUtil';
+import { useQueryMemo } from '../../hooks/useQueryMemo';
+
+type Row = {
+  id: string;
+  name: string;
+  hasCases: boolean;
+  [key: string]: string[] | string | number | boolean;
+} & Pick<CaseStats, 'n_cases' | 'n_own_cases' | 'first_case_date' | 'last_case_date'>;
+
+const getCaseTypeSetCategoryRowId = (id: string) => `caseTypeSetCategory-${id}`;
+
+export const CasesPage = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const epiCaseTypeInfoDialogWithLoaderRef = useRef<EpiCaseTypeInfoDialogWithLoaderRefMethods>(null);
+  const caseTypeStatsQuery = useCaseTypeStatsQuery();
+  const caseTypeSetCategoriesQuery = useCaseTypeSetCategoriesQuery();
+
+  const { isLoading: isCaseTypesLoading, error: caseTypesError, data: caseTypes } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_TYPES),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseTypesGetAll({ signal });
+      return response.data;
+    },
+  });
+
+  const caseTypeStatsMap = useMemo(() => {
+    return new Map<string, CaseStats>(caseTypeStatsQuery.data?.map(stat => [stat.case_type_id, stat]));
+  }, [caseTypeStatsQuery]);
+
+
+  const { isLoading: isCaseTypeSetsLoading, error: caseTypeSetsError, data: caseTypeSets } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_TYPE_SETS),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseTypeSetsGetAll({ signal });
+      return response.data;
+    },
+  });
+
+  const { isLoading: isCaseTypeSetMembersLoading, error: caseTypeSetMembersError, data: caseTypeSetMembers } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_TYPE_SET_MEMBERS),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.caseTypeSetMembersGetAll({ signal });
+      return response.data;
+    },
+  });
+
+  const isLoading = isCaseTypesLoading || isCaseTypeSetsLoading || isCaseTypeSetMembersLoading || caseTypeSetCategoriesQuery.isLoading || caseTypeStatsQuery.isLoading;
+  const error = caseTypesError || caseTypeSetsError || caseTypeSetMembersError || caseTypeSetCategoriesQuery.error || caseTypeStatsQuery.error;
+
+  const handleCellNavigation = useCallback(async (caseType: Row) => {
+    await RouterManager.instance.router.navigate(CaseTypeUtil.createCaseTypeLink(caseType));
+  }, []);
+
+  const onRowClick = useCallback(async (params: TableRowParams<Row>) => {
+    await handleCellNavigation(params.row);
+  }, [handleCellNavigation]);
+
+  const onShowItemClick = useCallback(async (params: TableRowParams<Row>) => {
+    await handleCellNavigation(params.row);
+  }, [handleCellNavigation]);
+
+  const onShowCaseTypeInformationClick = useCallback((params: TableRowParams<Row>) => {
+    epiCaseTypeInfoDialogWithLoaderRef.current.open({
+      caseTypeId: params.row.id,
+    });
+  }, []);
+
+  const onDownloadExcelTemplateButtonClick = useCallback(async (params: TableRowParams<Row>) => {
+    await DownloadUtil.downloadExcelTemplate(params.row.id, t);
+  }, [t]);
+
+  const onIndexCellClick = useCallback((row: Row) => {
+    epiCaseTypeInfoDialogWithLoaderRef.current.open({
+      caseTypeId: row.id,
+    });
+  }, []);
+
+  const data = useMemo<Row[]>(() => {
+    if (isLoading || error) {
+      return;
+    }
+
+    const caseTypeSetCache = new Map<string, CaseTypeSet>();
+    caseTypeSets.forEach(caseTypeSet => {
+      caseTypeSetCache.set(caseTypeSet.id, caseTypeSet);
+    });
+
+    const caseTypeMemberCache = new Map<string, string[]>();
+    caseTypeSetMembers.forEach(caseTypeSetMember => {
+      const caseTypeMemberCacheEntry = caseTypeMemberCache.get(caseTypeSetMember.case_type_id);
+
+      if (caseTypeMemberCacheEntry) {
+        if (!caseTypeMemberCacheEntry.includes(caseTypeSetMember.case_type_set_id)) {
+          caseTypeMemberCacheEntry.push(caseTypeSetMember.case_type_set_id);
+        }
+      } else {
+        caseTypeMemberCache.set(caseTypeSetMember.case_type_id, [caseTypeSetMember.case_type_set_id]);
+      }
+    });
+
+    const rows = caseTypes.map<Row>(caseType => {
+      const row: Row = {
+        id: caseType.id,
+        name: caseType.name,
+        hasCases: caseTypeStatsMap.get(caseType.id)?.n_cases > 0,
+        n_cases: caseTypeStatsMap.get(caseType.id)?.n_cases ?? 0,
+        n_own_cases: caseTypeStatsMap.get(caseType.id)?.n_own_cases ?? 0,
+        first_case_date: caseTypeStatsMap.get(caseType.id)?.first_case_date,
+        last_case_date: caseTypeStatsMap.get(caseType.id)?.last_case_date,
+      };
+      caseTypeSetCategoriesQuery.data.forEach((caseTypeSetCategorie) => {
+        row[getCaseTypeSetCategoryRowId(caseTypeSetCategorie.id)] = [];
+      });
+
+      (caseTypeMemberCache.get(caseType.id) ?? []).forEach(caseTypeSetId => {
+        const caseTypeSet = caseTypeSetCache.get(caseTypeSetId);
+        if (caseTypeSet) {
+          (row[getCaseTypeSetCategoryRowId(caseTypeSet.case_type_set_category_id)] as string[]).push(caseTypeSetId);
+        }
+      });
+      return row;
+    });
+    return rows;
+  }, [caseTypeSetCategoriesQuery, caseTypeSetMembers, caseTypeSets, caseTypeStatsMap, caseTypes, error, isLoading]);
+
+  const caseTypeSetCategoryOptions = useMemo(() => {
+    const options: { [key: string]: OptionBase<string>[] } = {};
+
+    caseTypeSetCategoriesQuery.data?.forEach(category => {
+      options[category.id] = caseTypeSets?.filter(set => set.case_type_set_category_id === category.id).sort((a, b) => a.rank - b.rank).map<OptionBase<string>>(set => ({ value: set.id, label: set.name }));
+    });
+    return options;
+  }, [caseTypeSetCategoriesQuery, caseTypeSets]);
+
+  const columns = useMemo<TableColumn<Row>[]>(() => {
+    if (isLoading || error) {
+      return;
+    }
+
+    return [
+      TableUtil.createReadableIndexColumn({
+        getAriaLabel: (params: TableRowParams<Row>) => t('Open case type information for {{name}}', { name: params.row.name }),
+      }),
+      TableUtil.createTextColumn({
+        name: t('Name'),
+        id: 'name',
+        flex: 1.5,
+      }),
+      ...caseTypeSetCategoriesQuery.data.filter(c => c.purpose === CaseTypeSetCategoryPurpose.CONTENT).map<TableColumn<Row>>((caseTypeSetCategory: CaseTypeSetCategory) => {
+        return {
+          id: getCaseTypeSetCategoryRowId(caseTypeSetCategory.id),
+          type: 'options',
+          headerName: caseTypeSetCategory.name,
+          maxNumOptionsExpanded: Infinity,
+          widthFlex: 1,
+          options: caseTypeSetCategoryOptions[caseTypeSetCategory.id] ?? [],
+          comparatorFactory: TableUtil.createOptionsCellRowComperator,
+          isInitiallyVisible: true,
+        };
+      }),
+      TableUtil.createNumberColumn({ name: t('Cases'), id: 'n_cases', flex: 0.5 }),
+      TableUtil.createNumberColumn({ name: t('Own cases'), id: 'n_own_cases', flex: 0.5 }),
+      TableUtil.createDateColumn({ name: t('First case date'), id: 'first_case_date', flex: 0.5, dateFormat: DATE_FORMAT.DATE }),
+      TableUtil.createDateColumn({ name: t('Last case date'), id: 'last_case_date', flex: 0.5, dateFormat: DATE_FORMAT.DATE }),
+      TableUtil.createActionsColumn({
+        t,
+        getActions: (params) => {
+          return [
+            (
+              <MenuItem
+                key={'actions1'}
+                disabled={!params.row.hasCases}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={async () => onShowItemClick(params)}
+              >
+                <ListItemIcon>
+                  <ArrowCircleRightIcon />
+                </ListItemIcon>
+                <ListItemText>
+                  {t`Go to cases`}
+                </ListItemText>
+              </MenuItem>
+            ),
+            (
+              <MenuItem
+                key={'actions2'}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={() => onShowCaseTypeInformationClick(params)}
+              >
+                <ListItemIcon>
+                  <InfoIcon />
+                </ListItemIcon>
+                <ListItemText>
+                  {t`Show case type information`}
+                </ListItemText>
+              </MenuItem>
+            ),
+            (
+              <MenuItem
+                key={'actions3'}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={async () => onDownloadExcelTemplateButtonClick(params)}
+              >
+                <ListItemIcon>
+                  <FileDownloadIcon />
+                </ListItemIcon>
+                <ListItemText>
+                  {t`Download Excel template`}
+                </ListItemText>
+              </MenuItem>
+            ),
+          ];
+        },
+      }),
+    ] satisfies TableColumn<Row>[];
+  }, [caseTypeSetCategoriesQuery.data, caseTypeSetCategoryOptions, error, isLoading, onDownloadExcelTemplateButtonClick, onShowCaseTypeInformationClick, onShowItemClick, t]);
+
+  const tableStore = useMemo(() => createTableStore<Row>({
+    navigatorFunction: RouterManager.instance.router.navigate,
+    defaultSortByField: 'name',
+    defaultSortDirection: 'asc',
+    isRowEnabledCallback: (row) => row.n_cases > 0,
+    idSelectorCallback: (row) => row.id,
+    storageNamePostFix: 'cases',
+    storageVersion: 1,
+  }), []);
+
+  useInitializeTableStore({ store: tableStore, columns, rows: data, createFiltersFromColumns: true });
+
+  const getRowName = useCallback((row: Row) => {
+    return row.name;
+  }, []);
+
+  return (
+    <TableStoreContextProvider store={tableStore}>
+      <PageContainer
+        fullWidth
+        showBreadcrumbs
+        contentActions={(<TableMenu />)}
+        contentHeader={(
+          <TableCaption
+            caption={t`Cases`}
+            component={'h2'}
+            variant={'h2'}
+          />
+        )}
+        testIdAttributes={TestIdUtil.createAttributes('CasesPage')}
+        title={t`Cases`}
+      >
+        <Box
+          sx={{
+            position: 'relative',
+            height: '100%',
+          }}
+        >
+          <ResponseHandler
+            error={error}
+            isLoading={isLoading}
+          >
+            <TableSidebarMenu />
+            <Box
+              sx={{
+                width: '100%',
+                height: '100%',
+                paddingLeft: theme.spacing(ConfigManager.instance.config.layout.SIDEBAR_MENU_WIDTH + 1),
+              }}
+            >
+              <Table
+                getRowName={getRowName}
+                onReadableIndexClick={onIndexCellClick}
+                onRowClick={onRowClick}
+              />
+            </Box>
+          </ResponseHandler>
+        </Box>
+        <EpiCaseTypeInfoDialogWithLoader ref={epiCaseTypeInfoDialogWithLoaderRef} />
+      </PageContainer>
+    </TableStoreContextProvider>
+  );
+};

package/src/pages/CasesPage/index.ts

@@ -0,0 +1 @@
+export * from './CasesPage';