@papernote/ui 1.10.26 → 1.11.1

package/src/components/ProcessIndicator.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { ChevronRight } from 'lucide-react';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface ProcessStage {
+  /** Unique stage identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Number of items at this stage */
+  count: number;
+  /** Color variant for the stage */
+  color?: 'slate' | 'blue' | 'indigo' | 'purple' | 'green' | 'red' | 'yellow' | 'orange' | 'teal' | 'primary';
+  /** Health status derived from thresholds */
+  health?: 'good' | 'warning' | 'critical';
+  /** Optional icon */
+  icon?: React.ReactNode;
+}
+
+export interface ProcessIndicatorProps {
+  /** Stages to display in order */
+  stages: ProcessStage[];
+  /** Currently selected/filtered stage ID */
+  activeStageId?: string;
+  /** Callback when a stage is clicked */
+  onStageClick?: (stageId: string) => void;
+  /** Show conversion rate between stages */
+  showConversion?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Color Mappings
+// =============================================================================
+
+const stageColors: Record<string, { bg: string; text: string; border: string; activeBg: string }> = {
+  slate:   { bg: 'bg-slate-50',   text: 'text-slate-700',   border: 'border-slate-200',   activeBg: 'bg-slate-100' },
+  blue:    { bg: 'bg-blue-50',    text: 'text-blue-700',    border: 'border-blue-200',    activeBg: 'bg-blue-100' },
+  indigo:  { bg: 'bg-indigo-50',  text: 'text-indigo-700',  border: 'border-indigo-200',  activeBg: 'bg-indigo-100' },
+  purple:  { bg: 'bg-purple-50',  text: 'text-purple-700',  border: 'border-purple-200',  activeBg: 'bg-purple-100' },
+  green:   { bg: 'bg-green-50',   text: 'text-green-700',   border: 'border-green-200',   activeBg: 'bg-green-100' },
+  red:     { bg: 'bg-red-50',     text: 'text-red-700',     border: 'border-red-200',     activeBg: 'bg-red-100' },
+  yellow:  { bg: 'bg-yellow-50',  text: 'text-yellow-700',  border: 'border-yellow-200',  activeBg: 'bg-yellow-100' },
+  orange:  { bg: 'bg-orange-50',  text: 'text-orange-700',  border: 'border-orange-200',  activeBg: 'bg-orange-100' },
+  teal:    { bg: 'bg-teal-50',    text: 'text-teal-700',    border: 'border-teal-200',    activeBg: 'bg-teal-100' },
+  primary: { bg: 'bg-primary-50', text: 'text-primary-700', border: 'border-primary-200', activeBg: 'bg-primary-100' },
+};
+
+const healthIndicator: Record<string, string> = {
+  good: 'bg-success-500',
+  warning: 'bg-warning-500',
+  critical: 'bg-error-500',
+};
+
+const sizeClasses = {
+  sm: { wrapper: 'py-2 px-3', count: 'text-lg', label: 'text-xs', chevron: 'h-3 w-3' },
+  md: { wrapper: 'py-3 px-4', count: 'text-2xl', label: 'text-sm', chevron: 'h-4 w-4' },
+  lg: { wrapper: 'py-4 px-5', count: 'text-3xl', label: 'text-base', chevron: 'h-5 w-5' },
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * ProcessIndicator — Horizontal process flow visualization
+ *
+ * Shows stages as connected blocks with names, item counts, and health coloring.
+ * Stages are clickable for filtering. Used at the top of process views
+ * (Sales Pipeline, Support Center, Commission Lifecycle).
+ */
+export default function ProcessIndicator({
+  stages,
+  activeStageId,
+  onStageClick,
+  showConversion = false,
+  size = 'md',
+  className = '',
+}: ProcessIndicatorProps) {
+  const sizes = sizeClasses[size];
+  const totalCount = stages.reduce((sum, s) => sum + s.count, 0);
+
+  return (
+    <div className={`flex items-stretch overflow-x-auto ${className}`} role="navigation" aria-label="Process stages">
+      {stages.map((stage, index) => {
+        const colors = stageColors[stage.color || 'slate'];
+        const isActive = stage.id === activeStageId;
+        const isClickable = !!onStageClick;
+        const conversionRate = showConversion && index > 0 && stages[index - 1].count > 0
+          ? Math.round((stage.count / stages[index - 1].count) * 100)
+          : null;
+
+        return (
+          <React.Fragment key={stage.id}>
+            {/* Chevron connector between stages */}
+            {index > 0 && (
+              <div className="flex flex-col items-center justify-center px-1 flex-shrink-0">
+                <ChevronRight className={`${sizes.chevron} text-ink-300`} />
+                {conversionRate !== null && (
+                  <span className="text-[10px] text-ink-400 mt-0.5">{conversionRate}%</span>
+                )}
+              </div>
+            )}
+
+            {/* Stage block */}
+            <button
+              type="button"
+              onClick={() => onStageClick?.(stage.id)}
+              disabled={!isClickable}
+              className={`
+                flex flex-col items-center justify-center ${sizes.wrapper}
+                rounded-lg border transition-all min-w-0 flex-1
+                ${isActive ? `${colors.activeBg} ${colors.border} border-2 shadow-sm` : `${colors.bg} ${colors.border}`}
+                ${isClickable ? 'cursor-pointer hover:shadow-sm hover:border-2' : 'cursor-default'}
+              `}
+              aria-current={isActive ? 'step' : undefined}
+              aria-label={`${stage.name}: ${stage.count} items`}
+            >
+              {/* Health indicator dot */}
+              {stage.health && (
+                <div className={`w-2 h-2 rounded-full ${healthIndicator[stage.health]} mb-1`} />
+              )}
+
+              {/* Stage icon */}
+              {stage.icon && (
+                <div className={`${colors.text} mb-1 opacity-60`}>
+                  {stage.icon}
+                </div>
+              )}
+
+              {/* Count */}
+              <span className={`${sizes.count} font-bold ${colors.text} leading-none`}>
+                {stage.count.toLocaleString()}
+              </span>
+
+              {/* Stage name */}
+              <span className={`${sizes.label} ${colors.text} opacity-80 mt-1 whitespace-nowrap`}>
+                {stage.name}
+              </span>
+            </button>
+          </React.Fragment>
+        );
+      })}
+
+      {/* Total */}
+      {stages.length > 0 && (
+        <>
+          <div className="flex items-center justify-center px-2 flex-shrink-0">
+            <div className="w-px h-8 bg-ink-200" />
+          </div>
+          <div className={`flex flex-col items-center justify-center ${sizes.wrapper} min-w-0`}>
+            <span className={`${sizes.count} font-bold text-ink-900 leading-none`}>
+              {totalCount.toLocaleString()}
+            </span>
+            <span className={`${sizes.label} text-ink-500 mt-1`}>Total</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/ReviewDecisionCard.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import ConfidenceIndicator from './ConfidenceIndicator';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface ConfidenceBreakdown {
+  /** Factor name */
+  factor: string;
+  /** Factor score (0-100) */
+  score: number;
+  /** Factor description */
+  description?: string;
+}
+
+export interface ReviewAction {
+  /** Button label */
+  label: string;
+  /** Button variant */
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  /** Click handler */
+  onClick: () => void;
+  /** Icon */
+  icon?: React.ReactNode;
+}
+
+export interface ReviewDecisionCardProps {
+  /** Card title — what needs review */
+  title: string;
+  /** Description */
+  description?: string;
+  /** Overall confidence score (0-100) */
+  confidence: number;
+  /** Confidence breakdown by factor */
+  breakdown?: ConfidenceBreakdown[];
+  /** System recommendation */
+  recommendation?: string;
+  /** Available actions (approve, reject, etc.) */
+  actions: ReviewAction[];
+  /** Entity type and identifier */
+  entityType?: string;
+  entityLabel?: string;
+  /** Click handler for entity link */
+  onEntityClick?: () => void;
+  /** Additional notes/context */
+  notes?: string;
+  /** Timestamp */
+  timestamp?: string;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const buttonVariants: Record<string, string> = {
+  primary:   'bg-primary-600 text-white hover:bg-primary-700',
+  secondary: 'bg-paper-100 text-ink-700 hover:bg-paper-200 border border-paper-300',
+  danger:    'bg-error-600 text-white hover:bg-error-700',
+  ghost:     'text-ink-600 hover:bg-paper-100',
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * ReviewDecisionCard — Action card with confidence breakdown
+ *
+ * Extended ActionCard pattern that includes a confidence gauge and
+ * per-factor confidence breakdown. Used in the Approvals & Review queue
+ * for items requiring human judgment.
+ */
+export default function ReviewDecisionCard({
+  title,
+  description,
+  confidence,
+  breakdown,
+  recommendation,
+  actions,
+  entityType,
+  entityLabel,
+  onEntityClick,
+  notes,
+  timestamp,
+  className = '',
+}: ReviewDecisionCardProps) {
+  return (
+    <div
+      className={`
+        rounded-lg border bg-white dark:bg-ink-900 border-paper-200 dark:border-ink-700 p-5
+        ${className}
+      `}
+    >
+      <div className="flex gap-4">
+        {/* Confidence gauge */}
+        <div className="flex-shrink-0">
+          <ConfidenceIndicator score={confidence} size={72} strokeWidth={5} />
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {/* Title + entity */}
+          <h4 className="text-base font-medium text-ink-900 dark:text-ink-100">{title}</h4>
+          {description && (
+            <p className="text-sm text-ink-500 mt-0.5">{description}</p>
+          )}
+          {entityType && entityLabel && (
+            <button
+              type="button"
+              onClick={onEntityClick}
+              className="text-xs text-primary-600 hover:underline mt-1"
+            >
+              {entityType}: {entityLabel}
+            </button>
+          )}
+
+          {/* Recommendation */}
+          {recommendation && (
+            <div className="mt-3 px-3 py-2 bg-primary-50 dark:bg-primary-900/20 rounded text-sm text-primary-700 dark:text-primary-300">
+              <span className="font-medium">Recommendation: </span>{recommendation}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Confidence breakdown */}
+      {breakdown && breakdown.length > 0 && (
+        <div className="mt-4 pt-3 border-t border-paper-200 dark:border-ink-700">
+          <h5 className="text-xs font-medium text-ink-500 mb-2">Confidence Breakdown</h5>
+          <div className="space-y-2">
+            {breakdown.map((factor, idx) => (
+              <div key={idx} className="flex items-center gap-3">
+                <span className="text-xs text-ink-600 w-28 flex-shrink-0">{factor.factor}</span>
+                <div className="flex-1 h-2 bg-paper-200 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full rounded-full transition-all ${
+                      factor.score >= 80 ? 'bg-success-500' :
+                      factor.score >= 50 ? 'bg-warning-500' :
+                      'bg-error-500'
+                    }`}
+                    style={{ width: `${factor.score}%` }}
+                  />
+                </div>
+                <span className="text-xs text-ink-400 w-10 text-right">{factor.score}%</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Notes */}
+      {notes && (
+        <div className="mt-3 px-3 py-2 bg-paper-50 dark:bg-ink-800 rounded text-xs text-ink-600 border-l-2 border-ink-200">
+          {notes}
+        </div>
+      )}
+
+      {/* Actions + timestamp */}
+      <div className="flex items-center justify-between gap-2 mt-4 pt-3 border-t border-paper-200 dark:border-ink-700">
+        <div className="flex items-center gap-2">
+          {actions.map((action, idx) => (
+            <button
+              key={idx}
+              type="button"
+              onClick={action.onClick}
+              className={`
+                inline-flex items-center gap-1.5 px-4 py-2 rounded text-sm font-medium
+                transition-colors
+                ${buttonVariants[action.variant || 'secondary']}
+              `}
+            >
+              {action.icon}
+              {action.label}
+            </button>
+          ))}
+        </div>
+        {timestamp && (
+          <span className="text-xs text-ink-400">{timestamp}</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/SLAIndicator.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Clock, AlertTriangle, CheckCircle } from 'lucide-react';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface SLAIndicatorProps {
+  /** Time remaining display string (e.g., "2h 15m", "45m") */
+  timeRemaining?: string;
+  /** Total SLA duration in minutes (for progress calculation) */
+  totalMinutes?: number;
+  /** Elapsed minutes (for progress calculation) */
+  elapsedMinutes?: number;
+  /** Current SLA status */
+  status: 'on-track' | 'at-risk' | 'breached' | 'met';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show as compact inline badge */
+  compact?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const statusConfig: Record<string, { icon: React.ReactNode; color: string; bg: string; text: string; label: string }> = {
+  'on-track': { icon: <Clock className="h-4 w-4" />, color: 'text-success-600', bg: 'bg-success-50', text: 'text-success-700', label: 'On Track' },
+  'at-risk':  { icon: <Clock className="h-4 w-4" />, color: 'text-warning-600', bg: 'bg-warning-50', text: 'text-warning-700', label: 'At Risk' },
+  'breached': { icon: <AlertTriangle className="h-4 w-4" />, color: 'text-error-600', bg: 'bg-error-50', text: 'text-error-700', label: 'Breached' },
+  'met':      { icon: <CheckCircle className="h-4 w-4" />, color: 'text-success-600', bg: 'bg-success-50', text: 'text-success-700', label: 'Met' },
+};
+
+const progressColors: Record<string, string> = {
+  'on-track': 'bg-success-500',
+  'at-risk': 'bg-warning-500',
+  'breached': 'bg-error-500',
+  'met': 'bg-success-500',
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * SLAIndicator — Visual SLA countdown with urgency coloring
+ *
+ * Shows time remaining, progress bar, and status icon.
+ * Used in Support Center case queue items and case detail views.
+ */
+export default function SLAIndicator({
+  timeRemaining,
+  totalMinutes,
+  elapsedMinutes,
+  status,
+  size = 'md',
+  compact = false,
+  className = '',
+}: SLAIndicatorProps) {
+  const config = statusConfig[status] || statusConfig['on-track'];
+  const progressPercent = totalMinutes && elapsedMinutes
+    ? Math.min(100, (elapsedMinutes / totalMinutes) * 100)
+    : undefined;
+
+  if (compact) {
+    return (
+      <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${config.bg} ${config.text} ${className}`}>
+        {config.icon}
+        <span>{timeRemaining || config.label}</span>
+      </span>
+    );
+  }
+
+  const sizeClasses = {
+    sm: { text: 'text-sm', icon: 'h-4 w-4', bar: 'h-1' },
+    md: { text: 'text-base', icon: 'h-5 w-5', bar: 'h-1.5' },
+    lg: { text: 'text-lg', icon: 'h-6 w-6', bar: 'h-2' },
+  };
+  const sizes = sizeClasses[size];
+
+  return (
+    <div className={`${className}`}>
+      <div className="flex items-center justify-between gap-2 mb-1">
+        <div className={`flex items-center gap-1.5 ${config.color}`}>
+          {config.icon}
+          <span className={`${sizes.text} font-medium`}>{config.label}</span>
+        </div>
+        {timeRemaining && (
+          <span className={`${sizes.text} font-mono ${config.color}`}>
+            {timeRemaining}
+          </span>
+        )}
+      </div>
+
+      {/* Progress bar */}
+      {progressPercent !== undefined && (
+        <div className={`${sizes.bar} bg-paper-200 rounded-full overflow-hidden`}>
+          <div
+            className={`h-full ${progressColors[status]} rounded-full transition-all`}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/SplitPane.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface SplitPaneProps {
+  /** Content for the left/primary panel */
+  left: React.ReactNode;
+  /** Content for the right/secondary panel */
+  right: React.ReactNode;
+  /** Default width of the left panel as a fraction (0.0 - 1.0) */
+  defaultSplit?: number;
+  /** Minimum left panel width in pixels */
+  minLeftWidth?: number;
+  /** Minimum right panel width in pixels */
+  minRightWidth?: number;
+  /** Whether the divider is draggable */
+  resizable?: boolean;
+  /** Whether to show the right panel */
+  showRight?: boolean;
+  /** Orientation */
+  orientation?: 'horizontal' | 'vertical';
+  /** Callback when split ratio changes */
+  onSplitChange?: (ratio: number) => void;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * SplitPane — Resizable two-panel layout
+ *
+ * Renders a left/primary panel and right/secondary panel with a draggable divider.
+ * Used for list+detail patterns (case queue + case detail, statements + line items).
+ *
+ * The right panel can be toggled on/off via `showRight` prop.
+ */
+export default function SplitPane({
+  left,
+  right,
+  defaultSplit = 0.4,
+  minLeftWidth = 200,
+  minRightWidth = 300,
+  resizable = true,
+  showRight = true,
+  orientation = 'horizontal',
+  onSplitChange,
+  className = '',
+}: SplitPaneProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [splitRatio, setSplitRatio] = useState(defaultSplit);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!resizable) return;
+    e.preventDefault();
+    setIsDragging(true);
+  }, [resizable]);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const isHorizontal = orientation === 'horizontal';
+      const containerSize = isHorizontal ? rect.width : rect.height;
+      const position = isHorizontal ? e.clientX - rect.left : e.clientY - rect.top;
+
+      // Enforce min widths
+      const minLeft = minLeftWidth / containerSize;
+      const maxLeft = 1 - (minRightWidth / containerSize);
+      const newRatio = Math.min(maxLeft, Math.max(minLeft, position / containerSize));
+
+      setSplitRatio(newRatio);
+      onSplitChange?.(newRatio);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, orientation, minLeftWidth, minRightWidth, onSplitChange]);
+
+  const isHorizontal = orientation === 'horizontal';
+
+  if (!showRight) {
+    return (
+      <div className={`h-full ${className}`}>
+        {left}
+      </div>
+    );
+  }
+
+  const leftSize = `${(splitRatio * 100).toFixed(1)}%`;
+  const rightSize = `${((1 - splitRatio) * 100).toFixed(1)}%`;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`
+        flex h-full overflow-hidden
+        ${isHorizontal ? 'flex-row' : 'flex-col'}
+        ${isDragging ? 'select-none' : ''}
+        ${className}
+      `}
+    >
+      {/* Left/Primary panel */}
+      <div
+        className="overflow-auto"
+        style={isHorizontal ? { width: leftSize } : { height: leftSize }}
+      >
+        {left}
+      </div>
+
+      {/* Divider */}
+      <div
+        onMouseDown={handleMouseDown}
+        className={`
+          flex-shrink-0 bg-paper-200 dark:bg-ink-700
+          ${isHorizontal ? 'w-px hover:w-1' : 'h-px hover:h-1'}
+          ${resizable ? 'cursor-col-resize hover:bg-primary-300 transition-all' : ''}
+          ${isDragging ? 'bg-primary-400 w-1' : ''}
+        `}
+        role="separator"
+        aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
+      />
+
+      {/* Right/Secondary panel */}
+      <div
+        className="overflow-auto"
+        style={isHorizontal ? { width: rightSize } : { height: rightSize }}
+      >
+        {right}
+      </div>
+    </div>
+  );
+}