npm package: @rxbenefits/clinical
Description: Clinical module functionality for RxBenefits applications including intervention drug lists, clinical conditions, and configuration
Author: RxBenefits
Latest version: 1.0.0

# @rxbenefits/clinical

> Clinical module functionality for RxBenefits applications

[![NPM Version](https://img.shields.io/npm/v/@rxbenefits/clinical.svg)](https://www.npmjs.com/package/@rxbenefits/clinical)
[![License](https://img.shields.io/npm/l/@rxbenefits/clinical.svg)](https://github.com/rxbenefits/clinical/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue.svg)](https://www.typescriptlang.org/)

## Overview

The **Clinical Library** provides comprehensive clinical management functionality for RxBenefits pharmacy benefits management applications. This library includes components for managing intervention drug lists, clinical conditions, and clinical configuration.

## Features

### 🏥 Clinical Conditions

- View and manage clinical conditions
- Condition detail views with associated drugs
- Search and filter conditions
- Create and edit conditions
- Associate drugs with conditions

### 💊 Intervention Drug Lists

- Manage intervention drug lists
- Target drug associations
- Intervention details and history
- Drug list configuration
- Search and pagination

### ⚙️ Clinical Configuration

- Configure clinical settings
- Manage clinical workflows
- System-wide clinical preferences

## Installation

```bash
npm install @rxbenefits/clinical
```

### Peer Dependencies

```bash
npm install react@^18.3.1 react-dom@^18.3.1 react-router-dom@^6.0.0 antd@^4.18.0
```

### Dependencies

```bash
npm install @rxbenefits/api @rxbenefits/components @rxbenefits/constants @rxbenefits/hooks @rxbenefits/types @rxbenefits/ui @rxbenefits/utils
```

## Quick Start

### Basic Setup

```tsx
import { ClinicalModule } from '@rxbenefits/clinical';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <ClinicalModule />
    </BrowserRouter>
  );
}
```

### Clinical Conditions

```tsx
import { Conditions } from '@rxbenefits/clinical';

function ConditionsPage() {
  return <Conditions />;
}
```

### Intervention Drug List

```tsx
import { InterventionDrugList } from '@rxbenefits/clinical';

function InterventionPage() {
  return <InterventionDrugList />;
}
```

## Components

### ClinicalModule

Main routing module for clinical functionality.

```tsx
import { ClinicalModule } from '@rxbenefits/clinical';

<ClinicalModule />;
```

**Features:**

- Routing configuration for all clinical features
- Lazy-loaded components
- React Router v6 integration

### Conditions

Main component for viewing and managing clinical conditions.

```tsx
import { Conditions } from '@rxbenefits/clinical';

<Conditions />;
```

**Features:**

- Paginated condition list
- Search and filter
- Detail views
- Create/edit modals

### ConditionsDetail

Detailed view of a specific clinical condition.

```tsx
import { ConditionsDetail } from '@rxbenefits/clinical';

<ConditionsDetail conditionId="123" />;
```

**Features:**

- Complete condition information
- Associated drugs table
- Edit capabilities
- History tracking

### ConditionsModal

Modal for creating or editing clinical conditions.

```tsx
import { ConditionsModal } from '@rxbenefits/clinical';

<ConditionsModal
  visible={true}
  onClose={() => setVisible(false)}
  conditionId="123" // Optional for edit
/>;
```

**Form Fields:**

- Condition name
- Description
- Status
- Associated drugs
- Effective dates

### InterventionDrugList

Main component for managing intervention drug lists.

```tsx
import { InterventionDrugList } from '@rxbenefits/clinical';

<InterventionDrugList />;
```

**Features:**

- Paginated drug list
- Search functionality
- Sort and filter
- Detail views

### InterventionDetail

Detailed view of an intervention drug list.

```tsx
import { InterventionDetail } from '@rxbenefits/clinical';

<InterventionDetail interventionId="456" />;
```

**Features:**

- Complete intervention information
- Target drugs
- Associated conditions
- History and audit trail

### InterventionDrugListModal

Modal for creating or editing intervention drug lists.

```tsx
import { InterventionDrugListModal } from '@rxbenefits/clinical';

<InterventionDrugListModal
  visible={true}
  onClose={() => setVisible(false)}
  interventionId="456" // Optional for edit
/>;
```

**Form Fields:**

- Intervention name
- Description
- Drug associations
- Target criteria
- Effective dates

### TargetDrugs

Component for managing target drugs within an intervention.

```tsx
import { TargetDrugs } from '@rxbenefits/clinical';

<TargetDrugs interventionId="456" />;
```

**Features:**

- Target drug table
- Add/remove drugs
- Search drugs
- Drug details

### Configuration

Clinical configuration management component.

```tsx
import { Configuration } from '@rxbenefits/clinical';

<Configuration />;
```

**Features:**

- System settings
- Clinical workflow configuration
- Preference management

## API Reference

### Types

#### ConditionResponse

```typescript
interface ConditionResponse {
  conditionId: string;
  name: string;
  description: string;
  status: string;
  effectiveDate: string;
  terminationDate?: string;
  drugs: ConditionDrug[];
}
```

#### ConditionDrug

```typescript
interface ConditionDrug {
  drugId: string;
  drugName: string;
  ndc: string;
  strength: string;
  form: string;
  effectiveDate: string;
  terminationDate?: string;
}
```

### Hooks (from @rxbenefits/hooks)

#### useConditions

```typescript
import { useConditions } from '@rxbenefits/hooks';

const { conditions, isLoading, error, refetch, createCondition, updateCondition, deleteCondition } =
  useConditions();
```

#### useInterventions

```typescript
import { useInterventions } from '@rxbenefits/hooks';

const {
  interventions,
  isLoading,
  error,
  refetch,
  createIntervention,
  updateIntervention,
  deleteIntervention,
} = useInterventions();
```

## Examples

### Complete Clinical Module Setup

```tsx
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { ClinicalModule } from '@rxbenefits/clinical';

function ClinicalApp() {
  return (
    <BrowserRouter>
      <ClinicalModule />
    </BrowserRouter>
  );
}

export default ClinicalApp;
```

### Custom Conditions Page

```tsx
import React, { useState } from 'react';
import { Conditions, ConditionsModal } from '@rxbenefits/clinical';

function CustomConditionsPage() {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedConditionId, setSelectedConditionId] = useState(null);

  const handleEdit = (conditionId: string) => {
    setSelectedConditionId(conditionId);
    setModalVisible(true);
  };

  const handleCreate = () => {
    setSelectedConditionId(null);
    setModalVisible(true);
  };

  return (
    <div>
      <button onClick={handleCreate}>Create Condition</button>
      <Conditions onEdit={handleEdit} />
      <ConditionsModal
        visible={modalVisible}
        onClose={() => setModalVisible(false)}
        conditionId={selectedConditionId}
      />
    </div>
  );
}
```

### Intervention Management

```tsx
import React from 'react';
import { InterventionDrugList, InterventionDetail, TargetDrugs } from '@rxbenefits/clinical';

function InterventionManagement({ interventionId }: { interventionId: string }) {
  return (
    <div>
      <InterventionDetail interventionId={interventionId} />
      <TargetDrugs interventionId={interventionId} />
    </div>
  );
}
```

## Architecture

### Module Structure

```
@rxbenefits/clinical/
├── ClinicalModule.tsx       # Main routing module
├── Conditions/              # Clinical conditions
│   ├── Conditions.tsx
│   ├── Conditions.css
│   └── Components/
│       ├── ConditionsDetail.tsx
│       └── ConditionsModal.tsx
├── InterventionDrugList/    # Intervention drugs
│   ├── InterventionDrugList.tsx
│   ├── InterventionDrugList.css
│   └── Components/
│       ├── InterventionDetail.tsx
│       ├── InterventionDrugListModal.tsx
│       └── TargetDrugs.tsx
└── Configuration/           # Clinical config
    └── Configuration.tsx
```

### Data Flow

1. **Conditions**: Load via Protect API, display in paginated table
2. **Details**: Fetch condition details with associated drugs
3. **Create/Edit**: Submit via modal forms
4. **Interventions**: Manage drug lists and target associations

## Styling

The library includes CSS files for custom styling:

- `Conditions.css` - Styles for conditions components
- `InterventionDrugList.css` - Styles for intervention components

Import CSS in your application:

```tsx
import '@rxbenefits/clinical/dist/lib/Conditions/Conditions.css';
import '@rxbenefits/clinical/dist/lib/InterventionDrugList/InterventionDrugList.css';
```

Or import in your global styles:

```css
@import '@rxbenefits/clinical/dist/lib/Conditions/Conditions.css';
@import '@rxbenefits/clinical/dist/lib/InterventionDrugList/InterventionDrugList.css';
```

## Testing

```bash
# Run tests
npm test

# Watch mode
npm run test:watch

# Coverage
npm run test:coverage
```

### Test Example

```typescript
import { render, screen } from '@testing-library/react';
import { Conditions } from '@rxbenefits/clinical';

describe('Conditions', () => {
  it('should render conditions list', () => {
    render(<Conditions />);
    expect(screen.getByRole('table')).toBeInTheDocument();
  });
});
```

## Performance

- **Bundle Size**: ~80 KB (estimated, uncompressed)
- **Gzipped**: ~25 KB (estimated)
- **Load Time**: < 100ms initial render
- **Table Performance**: Optimized pagination for large datasets

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## Accessibility

- WCAG 2.1 AA compliant
- Keyboard navigation
- Screen reader support
- Proper ARIA labels

## License

MIT © RxBenefits

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for version history.

## Related Packages

- [@rxbenefits/api](https://www.npmjs.com/package/@rxbenefits/api) - API clients
- [@rxbenefits/components](https://www.npmjs.com/package/@rxbenefits/components) - Shared components
- [@rxbenefits/ui](https://www.npmjs.com/package/@rxbenefits/ui) - UI library
- [@rxbenefits/hooks](https://www.npmjs.com/package/@rxbenefits/hooks) - Custom hooks
- [@rxbenefits/types](https://www.npmjs.com/package/@rxbenefits/types) - TypeScript types
- [@rxbenefits/utils](https://www.npmjs.com/package/@rxbenefits/utils) - Utilities
- [@rxbenefits/constants](https://www.npmjs.com/package/@rxbenefits/constants) - Constants