Project: workspace-doctolib · Branch: HEAD · Mode:  · Model: claude-haiku-4-5-20251001

Stats: 1 user messages, 22 tool calls, tools used: Glob, Bash, Read.

Conversation

Turn 1 — User

Explore the filter panel components in the tpf-national-health-records-ui package at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src. I need to understand:
1. What filter-related components exist (look for "Filter", "filter", "NhrFilter", etc.)
2. The full implementation of the filter panel - component structure, props, state, all JSX/HTML rendered
3. What CSS classes and styles are used
4. What design system components (Oxygen) are imported
5. Any test files for the filter components

Be thorough and show the full file contents of the filter panel component(s) found.

Turn 1 — Assistant

I'll help you explore the filter panel components in the tpf-national-health-records-ui package. Let me start by searching for filter-related files and understanding the structure.

Tools used:

- Glob: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src//[Ff]ilter

Tool results:

  → result (ok): treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.stories.tsx
treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.test.tsx
treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx
treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDoc
…(truncated, 3268 more chars)

Tools used:

- Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src -type f -name "ilter" 2>/dev/null

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src 2>/dev/null | head -30

Tool results:

  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDateSelectionFilterConfig.tsx
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentStatusFilterConfig.test.tsx
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx
/Users/USER/workspace/d
…(truncated, 4167 more chars)

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 416 B  Mon Apr 13 15:03:05 2026 .
drwxr-xr-x clertonra staff 672 B  Mon Apr 13 15:03:05 2026 ..
drwxr-xr-x clertonra staff  96 B  Tue Feb 24 15:53:39 2026 __tests__
drwxr-xr-x clertonra staff 128 B  Wed Apr  1 10:05:06 2026 business
drwxr-xr-x clertonra staff 352 B  Wed Apr  1 10:05:06 2026 components
.rw-r--r-- clertonra staff 105 B  Tue Mar 10 17:05:01 2026 entry.ts
.rw-r--r-- clertonra staff 1.0 KB Wed Apr  1 10:05:06 2026 i18n.test.ts
.rw-r--r-- clertonra staff 332
…(truncated, 376 more chars)

Great! I found several filter-related components. Let me read the main filter panel component and its related files to get the full picture.

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.tsx

Tool results:

  → result (ok): 1	import { ArrowRotateLeftRegularIcon } from '@doctolib/design-system-icons/ArrowRotateLeftRegularIcon'
2	import { Button } from '@doctolib/design-system/Button/v2'
3	import { IconButton } from '@doctolib/design-system/IconButton/v2'
4	import { Paragraph } from '@doctolib/design-system/Paragraph'
5	import { useEffect, useState } from 'react'
6	
7	import type { FilterConfig } from '../../types'
8	
9	export type NhrDocumentListFilterPanelProps = {
10	  isOpen: boolean
11	  onClose: () => void
12	 
…(truncated, 3859 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.test.tsx

Tool results:

  → result (ok): 1	import { render, screen, waitFor } from '@testing-library/react'
2	// eslint-disable-next-line import/no-extraneous-dependencies, @doctolib-tpf/no-undeclared-dependencies
3	import { userEvent } from '@testing-library/user-event'
4	import { forwardRef } from 'react'
5	import { describe, expect, it, vi } from 'vitest'
6	
7	import type { FilterConfig } from '../../types'
8	import { NhrDocumentListFilterPanel } from './NhrDocumentListFilterPanel'
9	
10	// Mock design system components
11	vi.mock('
…(truncated, 6873 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.stories.tsx

Tool results:

  → result (ok): 1	import type { Meta, StoryObj } from '@storybook/react'
2	import { useState } from 'react'
3	
4	import type { FilterConfig } from '../../types'
5	import { NhrDocumentListFilterPanel } from './NhrDocumentListFilterPanel'
6	
7	const meta = {
8	  title: 'NHR/NhrDocumentListFilterPanel',
9	  component: NhrDocumentListFilterPanel,
10	  parameters: {
11	    layout: 'fullscreen',
12	  },
13	  decorators: [
14	    (Story) => (
15	      <div data-theme='doctolib2023' style={{ height: '100vh' }}>
16	    
…(truncated, 6118 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateRangeFilter/NhrDateRangeFilter.tsx

Tool results:

  → result (ok): 1	import { InputDate } from '@doctolib/design-system/InputDate'
2	
3	type NhrDateRangeFilterProps = {
4	  fromLabel: string
5	  toLabel: string
6	  fromValue: string
7	  toValue: string
8	  onFromChange: (value: string) => void
9	  onToChange: (value: string) => void
10	}
11	
12	export const NhrDateRangeFilter = ({
13	  fromLabel,
14	  toLabel,
15	  fromValue,
16	  toValue,
17	  onFromChange,
18	  onToChange,
19	}: NhrDateRangeFilterProps) => (
20	  <div className='flex gap-8 w-full'>
21	    <di
…(truncated, 535 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateSelectionFilter/NhrDateSelectionFilter.tsx

Tool results:

  → result (ok): 1	import { t } from '#i18n'
2	import type { Option } from '@doctolib/design-system/Option'
3	import { Paragraph } from '@doctolib/design-system/Paragraph'
4	import { RadioGroup } from '@doctolib/design-system/RadioGroup'
5	
6	import { NhrDateRangeFilter } from '../NhrDateRangeFilter/NhrDateRangeFilter'
7	import { NhrDateTypeFilter } from '../NhrDateTypeFilter/NhrDateTypeFilter'
8	
9	export type DateMode = 'customDateRange' | 'lastAccess'
10	
11	type NhrDateSelectionFilterProps = {
12	  label: st
…(truncated, 2235 more chars)

Now let me read the remaining filter components:

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateTypeFilter/NhrDateTypeFilter.tsx

Tool results:

  → result (ok): 1	import type { Option } from '@doctolib/design-system/Option'
2	import { Select } from '@doctolib/design-system/Select'
3	
4	type NhrDateTypeFilterProps = {
5	  label: string
6	  value: string
7	  options: Option[]
8	  onChange: (value: string) => void
9	}
10	
11	export const NhrDateTypeFilter = ({ label, value, options, onChange }: NhrDateTypeFilterProps) => (
12	  <Select
13	    label={label}
14	    name='documentDateType'
15	    customStyle={['w-full']}
16	    value={value}
17	    options={o
…(truncated, 73 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx

Tool results:

  → result (ok): 1	import { BetaComboBox } from '@doctolib/design-system/BetaComboBox'
2	import type { Option } from '@doctolib/design-system/Option'
3	
4	type NhrDocumentCategoryFilterProps = {
5	  value: string
6	  options: Option[]
7	  onSelectionChange: (option: Option) => void
8	  onSearchChange: (search: string) => void
9	}
10	
11	export const NhrDocumentCategoryFilter = ({
12	  value,
13	  options,
14	  onSelectionChange,
15	  onSearchChange,
16	}: NhrDocumentCategoryFilterProps) => (
17	  <BetaComboBox
1
…(truncated, 192 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter.tsx

Tool results:

  → result (ok): 1	import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
2	import { Heading } from '@doctolib/design-system/Heading'
3	
4	import type { NhrDocumentStatusFilterProps } from '../../../types'
5	
6	export const NhrDocumentStatusFilter = ({ label, statuses, value, onChange }: NhrDocumentStatusFilterProps) => (
7	  <>
8	    <Heading level='h5'>{label}</Heading>
9	    <div className='flex flex-col'>
10	      {statuses.map((status) => (
11	        <Checkbox
12	          key={status.filterKey}
13
…(truncated, 306 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentVisibilityFilter/NhrDocumentVisibilityFilter.tsx

Tool results:

  → result (ok): 1	import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
2	import { Heading } from '@doctolib/design-system/Heading'
3	
4	import type { VisibilityOption } from '../../types'
5	
6	export type NhrDocumentVisibilityFilterProps = {
7	  groupLabel: string
8	  visibilityModes: VisibilityOption[]
9	  filters: Record<string, boolean>
10	  onChange: (filterKey: string, checked: boolean) => void
11	}
12	
13	export const NhrDocumentVisibilityFilter = ({
14	  groupLabel,
15	  visibilityModes,
16	  f
…(truncated, 627 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types.ts

Tool results:

  → result (ok): 1	import type { DesignSystemIconComponent } from '@doctolib/design-system-icons'
2	import type { NhrDocument } from '@doctolib/tpf-national-health-records'
3	import type { ReactNode } from 'react'
4	
5	export type NhrPatientInfo = {
6	  fullName: string
7	  gender: 'male' | 'female' | 'other'
8	  birthDate: string
9	  age: number
10	}
11	
12	export type ColumnConfig = {
13	  key: string
14	  header: string
15	  sortable: boolean
16	  / Only required when sortable: true. Returns a string for lo
…(truncated, 2157 more chars)

Now let me check the factory files to see how filters are configured:

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDateSelectionFilterConfig.tsx

Tool results:

  → result (ok): 1	import type { Option } from '@doctolib/design-system/Option'
2	
3	import {
4	  type DateMode,
5	  NhrDateSelectionFilter,
6	} from '../../../components/NhrDateSelectionFilter/NhrDateSelectionFilter'
7	import type { FilterConfig } from '../../../types'
8	
9	export const createNhrDateSelectionFilterConfig = ({
10	  label,
11	  dateTypeOptions = [],
12	  dateTypeLabel,
13	  defaultDateType = '',
14	  lastAccessDate,
15	  fromLabel,
16	  toLabel,
17	}: {
18	  label: string
19	  dateTypeOptions?: O
…(truncated, 1328 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx

Tool results:

  → result (ok): 1	import type { Option } from '@doctolib/design-system/Option'
2	
3	import { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter'
4	import type { FilterConfig } from '../../../types'
5	
6	export const createNhrDocumentCategoryFilterConfig = (options: Option[] = [], defaultValue = ''): FilterConfig => ({
7	  key: 'typeCodes',
8	  render: (filters, onChange) => {
9	    const currentValue = (filters.typeCodes as string[] | undefi
…(truncated, 394 more chars)

Perfect! Now let me get a screenshot of the directory structure and check for any CSS files:

Tools used:

- Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components -name "[Ff]ilter" -type d | head -20

Tool results:

  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateRangeFilter
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/compon
…(truncated, 403 more chars)

Tools used:

- Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components -name ".module.scss" -o -name ".module.css"

Tool results:

  → result (ok): (Bash completed with no output)

Tools used:

- Bash: grep -r "@doctolib/design-system" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/ 2>/dev/null | head -20

Tool results:

  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.tsx:import { ArrowRotateLeftRegularIcon } from '@doctolib/design-system-icons/ArrowRotateLeftRegularIcon'
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.tsx:import { Button } from '@doctolib/design-system/Button/v2'
/Users/USER/workspace
…(truncated, 1560 more chars)

Now let me check the index.ts to see what's exported and get a complete picture:

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/index.ts

Tool results:

  → result (ok): 1	export { NhrDocumentList } from './components/NhrDocumentList/NhrDocumentList'
2	export { NhrDocumentListFilterPanel } from './components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel'
3	export type {
4	  ActionConfig,
5	  ActionsFactory,
6	  ColumnConfig,
7	  FilterConfig,
8	  FilterRenderContext,
9	  NhrPatientInfo,
10	  NhrVisibilityEntry,
11	  StatusOption,
12	  NhrDocumentStatusFilterProps,
13	  VisibilityOption,
14	  SearchDocumentsFn,
15	} from './types'
16	export { NhrEntryPoin
…(truncated, 2130 more chars)

Tools used:

- Bash: grep -A 5 -B 5 "FilterPanel\|Filter" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/index.ts

Tool results:

  → result (ok): export { NhrDocumentList } from './components/NhrDocumentList/NhrDocumentList'
export { NhrDocumentListFilterPanel } from './components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel'
export type {
  ActionConfig,
  ActionsFactory,
  ColumnConfig,
  FilterConfig,
  FilterRenderContext,
  NhrPatientInfo,
  NhrVisibilityEntry,
  StatusOption,
  NhrDocumentStatusFilterProps,
  VisibilityOption,
  SearchDocumentsFn,
} from './types'
export { NhrEntryPoint, type NhrEntryPointProps } from './co
…(truncated, 1548 more chars)

Perfect! Now let me create a comprehensive summary document by reading a few more factory files to complete the picture:

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentStatusFilterConfig.tsx

Tool results:

  → result (ok): 1	import { NhrDocumentStatusFilter } from '../../../components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter'
2	import type { FilterConfig, StatusOption } from '../../../types'
3	
4	export const createNhrDocumentStatusFilterConfig = (statuses: StatusOption[], label: string): FilterConfig => ({
5	  key: 'documentStatus',
6	  render: (filters, onChange) => (
7	    <NhrDocumentStatusFilter
8	      label={label}
9	      statuses={statuses}
10	      value={statuses.filter((s) => fil
…(truncated, 158 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentVisibilityFilterConfig.tsx

Tool results:

  → result (ok): 1	import { NhrDocumentVisibilityFilter } from '../../../components/NhrDocumentVisibilityFilter/NhrDocumentVisibilityFilter'
2	import type { FilterConfig, VisibilityOption } from '../../../types'
3	
4	type CreateNhrDocumentVisibilityFilterConfigOptions = {
5	  groupLabel: string
6	  visibilityModes: VisibilityOption[]
7	}
8	
9	export const createNhrDocumentVisibilityFilterConfig = ({
10	  groupLabel,
11	  visibilityModes,
12	}: CreateNhrDocumentVisibilityFilterConfigOptions): FilterConfig => ({
1
…(truncated, 337 more chars)

Excellent! Now I have all the information needed. Let me compile a comprehensive report.

Comprehensive Filter Panel Analysis - tpf-national-health-records-ui

Based on my thorough exploration of the filter panel components in the tpf-national-health-records-ui package, here's the complete breakdown:

---

1. FILTER-RELATED COMPONENTS INVENTORY

The package contains the following filter-related components:

Main Panel Component:
- NhrDocumentListFilterPanel - The main filter panel container

Individual Filter Components:
- NhrDateRangeFilter - Dual date input (from/to)
- NhrDateSelectionFilter - Complex date selection (custom range vs last access)
- NhrDateTypeFilter - Date type selector dropdown
- NhrDocumentCategoryFilter - Category/document type combo-box
- NhrDocumentStatusFilter - Status checkboxes
- NhrDocumentVisibilityFilter - Visibility/sharing mode checkboxes

Filter Config Factories:
- createNhrDateSelectionFilterConfig
- createNhrDocumentCategoryFilterConfig
- createNhrDocumentStatusFilterConfig
- createNhrDocumentVisibilityFilterConfig

---

2. MAIN FILTER PANEL - FULL IMPLEMENTATION

File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.tsx

Component Structure:
// Props Type
export type NhrDocumentListFilterPanelProps = {
  isOpen: boolean
  onClose: () => void
  filters: FilterConfig[]                              // Injected filter factories
  appliedFilters: Record<string, unknown>             // Current applied filters
  onApply: (pendingFilters: Record<string, unknown>) => void
}

// Key Features:
// - Rendered conditionally only when isOpen=true
// - Returns null if not open (no DOM rendering)
// - Uses React hooks: useState, useEffect for state management
// - Manages two filter states: pending (in-edit) vs applied (committed)

// Main Component Structure:
// 1. FilterPanelHeader - Title + Close button
// 2. FilterPanelBody - Dynamic filter rendering area
// 3. FilterPanelFooter - Reset, Cancel, Apply buttons
// 4. Modal Backdrop - Semi-transparent overlay with Escape key support

Rendering Structure:
<div>                                          // Modal Backdrop
  role='button'
  className='absolute inset-0 bg-black/40 flex justify-end z-10'
  onClick={handleBackdropClick}
  onKeyDown={handleBackdropKeyDown}
  
  <div className='w-[400px] h-full bg-white flex flex-col'>  // Panel container
    <FilterPanelHeader />                      // Header with title + close icon
    <FilterPanelBody />                        // Scrollable filter controls
    <FilterPanelFooter />                      // Footer with action buttons
  </div>
</div>

State Management:
- pendingFilters - Local mutable state while editing
- Resets to appliedFilters whenever panel opens (useEffect)
- On "Apply" button: calls onApply(pendingFilters) then onClose()
- On "Reset" button: clears all pending filters (setPendingFilters({}))
- On "Cancel" button: discards pending changes and closes

Event Handling:
- Click on backdrop (not panel) → closes panel
- Escape key → closes panel
- Click inside panel content → no action
- "Apply filters" button → commits changes + closes
- "Cancel" button → closes without applying
- "Reset" button → clears all filters to empty object

---

3. CSS CLASSES AND STYLES

Tailwind CSS Classes Used:

Header:
'flex justify-between items-center p-4'

Body (Filter List):
'flex-1 overflow-y-auto px-4 flex flex-col gap-16'

Footer:
'flex justify-between items-center p-4 border-t border-gray-300'
'flex gap-8'  (for button group)

Modal Backdrop:
'absolute inset-0 bg-black/40 flex justify-end z-10'

Panel Container:
'w-[400px] h-full bg-white flex flex-col'

Individual Filter Wrappers:
Key: {config.key}
Rendered inside: <div>

No CSS Modules used - All styling is Tailwind-based with inline classes.

---

4. DESIGN SYSTEM COMPONENTS (OXYGEN)

Imported from @doctolib/design-system:

// Icons
import { ArrowRotateLeftRegularIcon } from '@doctolib/design-system-icons/ArrowRotateLeftRegularIcon'

// Components
import { Button } from '@doctolib/design-system/Button/v2'
import { IconButton } from '@doctolib/design-system/IconButton/v2'
import { Paragraph } from '@doctolib/design-system/Paragraph'

// Used in Sub-filters:
import { InputDate } from '@doctolib/design-system/InputDate'
import { RadioGroup } from '@doctolib/design-system/RadioGroup'
import { Select } from '@doctolib/design-system/Select'
import { BetaComboBox } from '@doctolib/design-system/BetaComboBox'
import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
import { Heading } from '@doctolib/design-system/Heading'

Component Props Used:

| Component | Key Props |
|-----------|-----------|
| Button | variant ('solid', 'transparent'), uiStyle ('neutral', 'brand'), size ('medium'), icon, onClick |
| IconButton | variant ('transparent'), uiStyle ('neutral'), icon, tooltip, onClick |
| Paragraph | font ('Title/S/Bold') |
| InputDate | label, name, value, onChange, customStyle (Tailwind array) |
| RadioGroup | label, name, value, options, onChange, orientation, wrap |
| Select | label, name, value, options, onChange, customStyle |
| BetaComboBox | label, name, value, options, onSelectionChange, onSearchChange |
| Checkbox | name, label, value, isDisabled, onChange |
| Heading | level, font |

---

5. INDIVIDUAL FILTER COMPONENT DETAILS

A. NhrDateRangeFilter
File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateRangeFilter/NhrDateRangeFilter.tsx

export const NhrDateRangeFilter = ({
  fromLabel, toLabel,
  fromValue, toValue,
  onFromChange, onToChange
}: NhrDateRangeFilterProps) => (
  <div className='flex gap-8 w-full'>
    <div className='flex-1'>
      <InputDate customStyle={['w-full']} label={fromLabel} 
                 name='submissionDateFrom' value={fromValue} 
                 onChange={(e) => onFromChange(e.target.value)} />
    </div>
    <div className='flex-1'>
      <InputDate customStyle={['w-full']} label={toLabel} 
                 name='submissionDateTo' value={toValue} 
                 onChange={(e) => onToChange(e.target.value)} />
    </div>
  </div>
)

- Side-by-side date inputs with equal width flex-1
- 8px gap between inputs

B. NhrDateSelectionFilter
File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateSelectionFilter/NhrDateSelectionFilter.tsx

export type DateMode = 'customDateRange' | 'lastAccess'

// Renders:
// 1. RadioGroup with two options: "Custom Date Range" vs "Last Access"
// 2. Conditional sub-sections based on dateMode:
//    - customDateRange: Shows NhrDateTypeFilter + NhrDateRangeFilter (mt-8 spacing)
//    - lastAccess: Shows Paragraph with last access date message

- Uses RadioGroup for mode selection with horizontal orientation
- Conditional rendering based on dateMode
- Sub-components have 8px top margin separation (mt-8)

C. NhrDateTypeFilter
File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateTypeFilter/NhrDateTypeFilter.tsx

export const NhrDateTypeFilter = ({ label, value, options, onChange }) => (
  <Select label={label} name='documentDateType' customStyle={['w-full']}
          value={value} options={options} 
          onChange={(e) => onChange(e.target.value)} />
)

- Simple dropdown for date type selection

D. NhrDocumentCategoryFilter
File: `/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/c
…(truncated, 9928 more chars)