INDICATOR Extensions

Overview

INDICATOR extensions add visual badges, status markers, and quick-glance indicators to list items, cards, and entity displays.

Use Cases

• Status indicators (active, urgent, blocked)
• Notification badges (unread count)
• Progress indicators
• Warning/error markers
• Quick-glance metrics

Basic Example

{
  point: 'work-unit.indicators',
  plugin: 'timer',
  priority: 50,
  match: {
    businessType: ['SERVICE', 'PROJECT']
  },
  extension: {
    type: ExtensionType.INDICATOR,
    id: 'timer-status',
    component: TimerIndicator,
    position: 'end'
  }
}

INDICATOR Extension Properties

Required

• type: ExtensionType.INDICATOR
• id: Unique identifier
• component: Indicator component

Optional

• position: 'start' | 'end' - Indicator placement
• priority: Display order when multiple indicators
• tooltip: Tooltip text

Indicator Component Example

export function TimerIndicator({ item }: { item: any }) {
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    const checkTimer = () => {
      const timers = getTimersFromStorage();
      setIsRunning(!!timers[item.id]?.isRunning);
    };

    window.addEventListener('storage', checkTimer);
    checkTimer();

    return () => window.removeEventListener('storage', checkTimer);
  }, [item.id]);

  if (!isRunning) return null;

  return (
    <Badge color="green" variant="dot">
      Timer Running
    </Badge>
  );
}

Badge Variants

// Dot indicator
<Badge variant="dot" color="green">Active</Badge>

// Filled badge
<Badge color="error">Urgent</Badge>

// Count badge
<Badge color="blue">{unreadCount}</Badge>

// Icon badge
<Badge leftSection={<IconClock size={12} />}>
  In Progress
</Badge>

Conditional Display

Show indicators only when relevant:

export function UrgentIndicator({ item }: { item: any }) {
  // Only show for urgent items
  if (!item.isUrgent) return null;

  return (
    <Badge color="error" variant="filled">
      Urgent
    </Badge>
  );
}

export function ProgressIndicator({ item }: { item: any }) {
  const progress = item.completionPercentage || 0;

  // Only show if in progress
  if (progress === 0 || progress === 100) return null;

  return (
    <Badge color="blue">
      {progress}% Complete
    </Badge>
  );
}

Multiple Indicators

export function StatusIndicators({ item }: { item: any }) {
  return (
    <Group gap="xs">
      {item.isBlocked && (
        <Badge color="error">Blocked</Badge>
      )}
      {item.isOverdue && (
        <Badge color="orange">Overdue</Badge>
      )}
      {item.hasUnreadComments && (
        <Badge color="blue">{item.unreadCommentCount}</Badge>
      )}
    </Group>
  );
}

Tooltip Support

export function DetailedIndicator({ item }: { item: any }) {
  const status = getDetailedStatus(item);

  return (
    <Tooltip label={status.description}>
      <Badge color={status.color}>
        {status.label}
      </Badge>
    </Tooltip>
  );
}

Best Practices

• Return null when indicator shouldn’t display
• Keep indicators concise (1-2 words)
• Use consistent colors for similar states
• Provide tooltips for complex indicators
• Clean up event listeners in useEffect

Color Guidelines

• green: Success, active, running
• blue: Information, in progress
• orange: Warning, attention needed
• error: Urgent, blocked, failed
• gray: Neutral, inactive

Next Steps

• Complete Examples
• Best Practices