@amaster.ai/bpm-ui

BPM task management UI components for React applications.

Installation

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

Components

MyTasksPage

Displays current user's pending tasks.

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.

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.

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:

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

addBpmTranslations(i18n);

Or import translations directly:

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