# @amaster.ai/bpm-ui

BPM task management UI components for React applications.

## Installation

```bash
npm install @amaster.ai/bpm-ui @amaster.ai/bpm-client
```

## Components

### MyTasksPage

Displays current user's pending tasks.

```tsx
import { createBpmClient } from "@amaster.ai/bpm-client";
import { MyTasksPage, addBpmTranslations } from "@amaster.ai/bpm-ui";
import i18n from "i18next";

// Add translations
addBpmTranslations(i18n);

function MyTasks() {
  const bpmClient = createBpmClient();

  return (
    <MyTasksPage
      bpmClient={bpmClient}
      currentUser="admin"
      onApprove={(task) => {
        window.location.href = `/approve?taskId=${task.id}`;
      }}
    />
  );
}
```

### MyHistoryTasksPage

Displays current user's completed tasks.

```tsx
import { MyHistoryTasksPage } from "@amaster.ai/bpm-ui";

function MyHistory() {
  const bpmClient = createBpmClient();

  return <MyHistoryTasksPage bpmClient={bpmClient} currentUser="admin" />;
}
```

### ApproveTaskPage

Task approval form with customizable fields.

```tsx
import { ApproveTaskPage } from "@amaster.ai/bpm-ui";

function ApproveTask({ taskId }: { taskId: string }) {
  const bpmClient = createBpmClient();

  return (
    <ApproveTaskPage
      taskId={taskId}
      bpmClient={bpmClient}
      renderForm={(formVariables, onChange) => (
        <div>
          {/* Custom form fields based on formVariables */}
          <input type="text" onChange={(e) => onChange("comment", e.target.value)} />
        </div>
      )}
      onApproved={() => {
        window.location.href = "/my-tasks";
      }}
      onRejected={() => {
        window.location.href = "/my-tasks";
      }}
    />
  );
}
```

## i18n

The package includes translations for English and Chinese. Add them to your i18next instance:

```tsx
import { addBpmTranslations } from "@amaster.ai/bpm-ui";
import i18n from "i18next";

addBpmTranslations(i18n);
```

Or import translations directly:

```tsx
import { bpmTranslations } from "@amaster.ai/bpm-ui/i18n";
```

## Styling

Components use BEM-style class names (`bpm-*`). Provide your own styles or use with a UI library.

CSS class names:

- `.bpm-tasks-page` - Tasks page container
- `.bpm-history-page` - History page container
- `.bpm-approve-page` - Approve page container
- `.bpm-table` - Table element
- `.bpm-btn` - Button base
- `.bpm-btn-primary` - Primary button
- `.bpm-btn-danger` - Danger button
- `.bpm-btn-outline` - Outline button
- `.bpm-error` - Error message