InsightStatusBoard

Kanban-style status visualization

Overview

InsightStatusBoard displays insights organized by status columns in a board view. Perfect for showing insight workflow status distribution with a kanban-style interface. Supports both full board and compact views.

Features

Kanban-style column layout
Score-based insight highlighting
Compact mode for overview
Configurable max items per column
Click handlers for columns and cards

Examples

Full Board

Complete board view

New

App crashes on startup after update

Score: 9

Dark mode colors are inconsistent

Score: 6

Score: 7

Push notifications not working

Score: 8

Search results are slow

Score: 5

+1 more

In Review

Feature request: Export to PDF

Score: 7

Improve onboarding flow

Score: 6

Add keyboard shortcuts

Score: 5

Planned

Implement offline mode

Score: 8

Add analytics dashboard

Score: 7

Done

Fix password reset flow

Score: 9

Update user profile page

Score: 5

Add two-factor auth

Score: 8

Compact View

Just headers and counts

Without Counts

Hiding count badges

New

App crashes on startup after update

Score: 9

Dark mode colors are inconsistent

Score: 6

Score: 7

Push notifications not working

Score: 8

Search results are slow

Score: 5

+1 more

In Review

Feature request: Export to PDF

Score: 7

Improve onboarding flow

Score: 6

Add keyboard shortcuts

Score: 5

Max 3 Items

Limited items per column

New

App crashes on startup after update

Score: 9

Dark mode colors are inconsistent

Score: 6

Score: 7

+3 more

In Review

Feature request: Export to PDF

Score: 7

Improve onboarding flow

Score: 6

Add keyboard shortcuts

Score: 5

Clickable Elements

Interactive columns and cards

New

App crashes on startup after update

Score: 9

Dark mode colors are inconsistent

Score: 6

Score: 7

+3 more

In Review

Feature request: Export to PDF

Score: 7

Improve onboarding flow

Score: 6

Add keyboard shortcuts

Score: 5

Planned

Implement offline mode

Score: 8

Add analytics dashboard

Score: 7

Compact with Click Handler

Clickable compact view

With ChartCard

Wrapped in ChartCard

Insight Pipeline

Current status distribution of 49 insights

New

App crashes on startup after update

Score: 9

Dark mode colors are inconsistent

Score: 6

Score: 7

Push notifications not working

Score: 8

Search results are slow

Score: 5

+1 more

In Review

Feature request: Export to PDF

Score: 7

Improve onboarding flow

Score: 6

Add keyboard shortcuts

Score: 5

Planned

Implement offline mode

Score: 8

Add analytics dashboard

Score: 7

Done

Fix password reset flow

Score: 9

Update user profile page

Score: 5

Add two-factor auth

Score: 8

Props Reference

Prop	Type	Default	Description
`columns`	`StatusColumn[]`	`required`	Array of status columns
`onCardClick`	`(insightId: string) => void`	`-`	Click handler for cards
`onColumnClick`	`(status: string) => void`	`-`	Click handler for column headers
`showCounts`	`boolean`	`true`	Show count badges
`compact`	`boolean`	`false`	Compact display (headers and counts only)
`maxItems`	`number`	`5`	Maximum items to show per column
`className`	`string`	`-`	Additional CSS classes

StatusColumn Type

id: string - Unique identifier

label: string - Column label

count: number - Total count in column

color?: string - Column color

items?: StatusItem[] - Items in the column

Usage

import { InsightStatusBoard, ChartCard } from '@/ui/components/charts';

const columns = [
  {
    id: 'new',
    label: 'New',
    count: 12,
    color: 'var(--chart-1)',
    items: [
      { id: '1', title: 'App crashes on startup', score: 9 },
      { id: '2', title: 'Dark mode issues', score: 6 },
    ],
  },
  {
    id: 'review',
    label: 'In Review',
    count: 8,
    color: 'var(--chart-2)',
    items: [
      { id: '3', title: 'Export to PDF feature', score: 7 },
    ],
  },
];

// Basic board
<InsightStatusBoard columns={columns} />

// Compact view (just counts)
<InsightStatusBoard columns={columns} compact />

// With click handlers
<InsightStatusBoard
  columns={columns}
  showCounts
  onColumnClick={(status) => console.log('Column:', status)}
  onCardClick={(id) => console.log('Card:', id)}
/>

// With ChartCard
<ChartCard title="Insight Pipeline">
  <InsightStatusBoard columns={columns} />
</ChartCard>

Prop

Type

Default

Description

columns

StatusColumn[]

required

Array of status columns

onCardClick

(insightId: string) => void

-

Click handler for cards

onColumnClick

(status: string) => void

-

Click handler for column headers

showCounts

boolean

true

Show count badges

compact

boolean

false

Compact display (headers and counts only)

maxItems

number

5

Maximum items to show per column

className

string

-

Additional CSS classes

import { InsightStatusBoard, ChartCard } from '@/ui/components/charts'; const columns = [ { id: 'new', label: 'New', count: 12, color: 'var(--chart-1)', items: [ { id: '1', title: 'App crashes on startup', score: 9 }, { id: '2', title: 'Dark mode issues', score: 6 }, ], }, { id: 'review', label: 'In Review', count: 8, color: 'var(--chart-2)', items: [ { id: '3', title: 'Export to PDF feature', score: 7 }, ], }, ]; // Basic board <InsightStatusBoard columns={columns} /> // Compact view (just counts) <InsightStatusBoard columns={columns} compact /> // With click handlers <InsightStatusBoard columns={columns} showCounts onColumnClick={(status) => console.log('Column:', status)} onCardClick={(id) => console.log('Card:', id)} /> // With ChartCard <ChartCard title="Insight Pipeline"> <InsightStatusBoard columns={columns} /> </ChartCard>