@bernierllc/workflow-ui

Workflow management interface with approval queues and state visualization.

Installation

npm install @bernierllc/workflow-ui

Features

• Workflow Dashboard - Overview of all workflows by status
• Approval Queue - Organized queue of pending approvals with bulk actions
• Visual State Flow - Interactive workflow state diagrams
• Workflow Builder - Drag-and-drop workflow creation
• Workflow History - Complete event timeline display
• Real-time Updates - Live status changes via optional refresh
• Role-based UI - Permission-based feature access
• Mobile-responsive - Optimized for all screen sizes

Components

WorkflowDashboard

Main dashboard showing workflow overview and metrics.

import { WorkflowDashboard } from '@bernierllc/workflow-ui';

<WorkflowDashboard
  workflows={workflows}
  userId="user123"
  role="editor"
  onWorkflowSelect={(workflow) => console.log('Selected:', workflow)}
  showMetrics={true}
  refreshInterval={30000}
  onRefresh={async () => await fetchWorkflows()}
/>

ApprovalQueue

Queue of pending approvals with bulk actions.

import { ApprovalQueue } from '@bernierllc/workflow-ui';

<ApprovalQueue
  approver="user123"
  approvals={approvals}
  onApprove={async (id, notes) => await approveWorkflow(id, notes)}
  onReject={async (id, reason) => await rejectWorkflow(id, reason)}
  onBulkAction={async (ids, action) => await bulkAction(ids, action)}
  sortBy="priority"
/>

WorkflowStateVisualizer

Visual representation of workflow state flow.

import { WorkflowStateVisualizer } from '@bernierllc/workflow-ui';

<WorkflowStateVisualizer
  workflow={workflow}
  interactive={true}
  onStateClick={(state) => console.log('Clicked:', state)}
  showTimestamps={true}
  showActors={true}
  layout="horizontal"
/>

WorkflowBuilder

Interactive workflow creation and editing.

import { WorkflowBuilder } from '@bernierllc/workflow-ui';

<WorkflowBuilder
  initialWorkflow={template}
  onSave={async (workflow) => await saveWorkflow(workflow)}
  onPreview={(workflow) => console.log('Preview:', workflow)}
  availableStates={['draft', 'pending_review', 'approved', 'published']}
  availableActions={actions}
  readOnly={false}
/>

WorkflowHistory

Event timeline for workflow changes.

import { WorkflowHistory } from '@bernierllc/workflow-ui';

<WorkflowHistory
  workflowId="w123"
  showDetails={true}
  maxEvents={50}
  onEventClick={(event) => console.log('Event:', event)}
  onLoadHistory={async (id) => await fetchHistory(id)}
/>

ApprovalRequestCard

Individual approval request card.

import { ApprovalRequestCard } from '@bernierllc/workflow-ui';

<ApprovalRequestCard
  request={approval}
  onApprove={(notes) => handleApprove(notes)}
  onReject={(reason) => handleReject(reason)}
  onView={() => viewWorkflow()}
  showActions={true}
  compact={false}
/>

Hooks

useWorkflowDashboard

Manage workflow dashboard state.

import { useWorkflowDashboard } from '@bernierllc/workflow-ui';

const {
  workflows,
  filteredWorkflows,
  metrics,
  isLoading,
  error,
  refresh,
  setFilters,
} = useWorkflowDashboard({
  workflows: initialWorkflows,
  filters: { status: ['active'] },
  refreshInterval: 30000,
  onRefresh: async () => await fetchWorkflows(),
});

useApprovalQueue

Manage approval queue state.

import { useApprovalQueue } from '@bernierllc/workflow-ui';

const {
  filteredApprovals,
  selectedIds,
  isProcessing,
  approve,
  reject,
  bulkApprove,
  bulkReject,
  toggleSelection,
  selectAll,
  clearSelection,
} = useApprovalQueue({
  approvals,
  onApprove: async (id, notes) => await approveWorkflow(id, notes),
  onReject: async (id, reason) => await rejectWorkflow(id, reason),
});

useWorkflowBuilder

Manage workflow builder state.

import { useWorkflowBuilder } from '@bernierllc/workflow-ui';

const {
  workflow,
  isDirty,
  isValid,
  errors,
  updateName,
  addState,
  addTransition,
  save,
  preview,
  reset,
} = useWorkflowBuilder({
  initialWorkflow: template,
  onSave: async (workflow) => await saveWorkflow(workflow),
});

useWorkflowHistory

Manage workflow history state.

import { useWorkflowHistory } from '@bernierllc/workflow-ui';

const { events, isLoading, error, refresh } = useWorkflowHistory({
  workflowId: 'w123',
  maxEvents: 50,
  onLoadHistory: async (id) => await fetchHistory(id),
});

Utilities

import {
  formatDate,
  formatRelativeTime,
  isWorkflowOverdue,
  getPriorityColor,
  getStateColor,
  sortByPriority,
  filterWorkflows,
} from '@bernierllc/workflow-ui';

// Format dates
const formatted = formatDate(new Date());
const relative = formatRelativeTime(new Date());

// Check overdue status
const overdue = isWorkflowOverdue(workflow);

// Get colors
const color = getPriorityColor('urgent');
const stateColor = getStateColor('approved');

// Sort workflows
const sorted = sortByPriority(workflows);

// Filter workflows
const filtered = filterWorkflows(workflows, {
  status: ['active'],
  priority: ['high', 'urgent'],
});

Types

import type {
  Workflow,
  WorkflowTemplate,
  WorkflowEvent,
  ApprovalRequest,
  ContentState,
  WorkflowStatus,
  WorkflowFilters,
  WorkflowMetrics,
} from '@bernierllc/workflow-ui';

Content States

The workflow system supports the following states:

• draft - Initial content creation
• pending_review - Waiting for review
• approved - Approved for publishing
• published - Live content
• archived - Archived content

Integration with State Machine

This package integrates with @bernierllc/state-machine for state transition logic:

import { StateMachine } from '@bernierllc/state-machine';
import { WorkflowStateVisualizer } from '@bernierllc/workflow-ui';

const stateMachine = new StateMachine({
  initial: 'draft',
  states: ['draft', 'pending_review', 'approved', 'published'],
  transitions: {
    draft: ['pending_review'],
    pending_review: ['draft', 'approved'],
    approved: ['published'],
    published: [],
  },
});

// Use with visualizer
<WorkflowStateVisualizer
  workflow={workflow}
  interactive={true}
  onStateClick={async (state) => {
    await stateMachine.transition(state);
  }}
/>

Styling

This package uses Tamagui for styling. All components are fully themed and responsive.

Custom Theme

import { TamaguiProvider } from 'tamagui';
import config from '@tamagui/config/v3';

<TamaguiProvider config={config}>
  <WorkflowDashboard workflows={workflows} />
</TamaguiProvider>

License

Copyright (c) 2025 Bernier LLC. All rights reserved.

This file is licensed to the client under a limited-use license. The client may use and modify this code only within the scope of the project it was delivered for. Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.