@handled-ai/design-system 0.8.0 → 0.9.0

package/src/charts/sankey-chart.tsx

@@ -0,0 +1,290 @@
+"use client"
+
+import * as React from "react"
+import { ResponsiveSankey } from "@nivo/sankey"
+
+import { cn } from "../lib/utils"
+
+export interface SankeyNode {
+  id: string
+  nodeColor?: string
+}
+
+export interface SankeyLink {
+  source: string
+  target: string
+  value: number
+}
+
+export interface SankeyData {
+  nodes: SankeyNode[]
+  links: SankeyLink[]
+}
+
+export interface SankeyDropOff {
+  reason: string
+  count: number
+  pct?: string
+}
+
+export interface SankeyStageMetrics {
+  conversion: string
+  medianTime: string
+  avgTime: string
+}
+
+export interface SankeyHoverCardData {
+  title: string
+  count: number | string
+  metrics?: SankeyStageMetrics
+  dropOffs?: SankeyDropOff[]
+}
+
+interface HoveredNodeState {
+  id: string
+  x: number
+  y: number
+  data: SankeyHoverCardData
+  pinned?: boolean
+}
+
+interface SankeyChartProps {
+  data: SankeyData
+  height?: number
+  nodeOpacity?: number
+  nodeThickness?: number
+  nodeBorderWidth?: number
+  linkOpacity?: number
+  linkHoverOpacity?: number
+  enableLabels?: boolean
+  labelTextColor?: string
+  stageMetrics?: Record<string, { metrics: SankeyStageMetrics; dropOffs: SankeyDropOff[] }>
+  onDropOffClick?: (reason: string) => void
+  onViewDetails?: (nodeId: string) => void
+  className?: string
+}
+
+function HoverCard({
+  data,
+  position,
+  onDropOffClick,
+  onViewDetails,
+}: {
+  data: SankeyHoverCardData
+  position: { x: number; y: number }
+  onDropOffClick?: (reason: string) => void
+  onViewDetails?: () => void
+}) {
+  return (
+    <div
+      className="pointer-events-auto absolute z-50 w-[260px] overflow-hidden rounded-lg border border-border bg-card font-sans text-left shadow-xl"
+      style={{ left: position.x + 10, top: position.y - 40 }}
+    >
+      <div className="border-b border-border p-3">
+        <div className="mb-0.5 text-xs font-medium text-muted-foreground">
+          {data.title}
+        </div>
+        <div className="text-2xl font-bold text-foreground">{data.count}</div>
+      </div>
+
+      {data.metrics ? (
+        <div className="grid grid-cols-3 gap-2 border-b border-border bg-muted/30 px-3 py-2">
+          <div>
+            <div className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+              Conversion
+            </div>
+            <div className="text-xs font-bold text-emerald-600">
+              {data.metrics.conversion}
+            </div>
+          </div>
+          <div className="border-l border-border pl-2">
+            <div className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+              Median
+            </div>
+            <div className="text-xs font-bold text-foreground">
+              {data.metrics.medianTime}
+            </div>
+          </div>
+          <div className="border-l border-border pl-2">
+            <div className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+              Average
+            </div>
+            <div className="text-xs font-bold text-foreground">
+              {data.metrics.avgTime}
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {data.dropOffs && data.dropOffs.length > 0 ? (
+        <div className="p-2">
+          <div className="mb-1.5 px-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Drop-off Reasons
+          </div>
+          <div className="space-y-0.5">
+            {data.dropOffs.map((drop, i) => (
+              <div
+                key={i}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onDropOffClick?.(drop.reason)
+                }}
+                className="group flex cursor-pointer items-center justify-between rounded p-1.5 text-xs transition-colors hover:bg-muted"
+              >
+                <span className="truncate pr-2 text-muted-foreground group-hover:text-foreground">
+                  {drop.reason}
+                </span>
+                <div className="flex items-center gap-1.5">
+                  {drop.pct ? (
+                    <span className="text-[10px] text-muted-foreground/70">
+                      {drop.pct}
+                    </span>
+                  ) : null}
+                  <span className="inline-flex h-4 min-w-[20px] items-center justify-center rounded border border-border bg-muted px-1 text-[9px] font-semibold text-muted-foreground group-hover:bg-muted group-hover:text-foreground">
+                    {drop.count}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {onViewDetails ? (
+        <div
+          onClick={(e) => {
+            e.stopPropagation()
+            onViewDetails()
+          }}
+          className="flex cursor-pointer items-center justify-between border-t border-border bg-muted px-3 py-2 text-xs font-medium text-blue-600 transition-colors hover:bg-muted hover:text-blue-700"
+        >
+          View Details
+          <svg
+            className="h-3 w-3"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export function SankeyChart({
+  data,
+  height = 400,
+  nodeOpacity = 1,
+  nodeThickness = 18,
+  nodeBorderWidth = 0,
+  linkOpacity = 0.25,
+  linkHoverOpacity = 0.5,
+  enableLabels = true,
+  labelTextColor = "#334155",
+  stageMetrics,
+  onDropOffClick,
+  onViewDetails,
+  className,
+}: SankeyChartProps) {
+  const [hoveredNode, setHoveredNode] = React.useState<HoveredNodeState | null>(
+    null,
+  )
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  const handleNodeHover = React.useCallback(
+    (node: { id: string; value?: number }, event: React.MouseEvent) => {
+      if (hoveredNode?.pinned) return
+
+      const containerRect = containerRef.current?.getBoundingClientRect()
+      if (!containerRect) return
+
+      const nodeId = node.id as string
+      const stageKey = nodeId.toLowerCase().replace(/[^a-z]/g, "")
+      const meta = stageMetrics?.[stageKey] || stageMetrics?.[nodeId]
+
+      const hoverData: SankeyHoverCardData = {
+        title: nodeId,
+        count: node.value ?? 0,
+        metrics: meta?.metrics,
+        dropOffs: meta?.dropOffs,
+      }
+
+      setHoveredNode({
+        id: nodeId,
+        x: event.clientX - containerRect.left,
+        y: event.clientY - containerRect.top,
+        data: hoverData,
+      })
+    },
+    [hoveredNode?.pinned, stageMetrics],
+  )
+
+  const handleNodeLeave = React.useCallback(() => {
+    if (!hoveredNode?.pinned) {
+      setHoveredNode(null)
+    }
+  }, [hoveredNode?.pinned])
+
+  const handleClick = React.useCallback(() => {
+    if (hoveredNode?.pinned) {
+      setHoveredNode(null)
+    } else if (hoveredNode) {
+      setHoveredNode((prev) => (prev ? { ...prev, pinned: true } : null))
+    }
+  }, [hoveredNode])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("relative", className)}
+      style={{ height }}
+      onClick={handleClick}
+    >
+      <ResponsiveSankey
+        data={data}
+        margin={{ top: 20, right: 160, bottom: 20, left: 20 }}
+        align="justify"
+        colors={(node: { nodeColor?: string }) => node.nodeColor || "#94a3b8"}
+        nodeOpacity={nodeOpacity}
+        nodeHoverOpacity={1}
+        nodeThickness={nodeThickness}
+        nodeSpacing={24}
+        nodeBorderWidth={nodeBorderWidth}
+        nodeBorderColor={{ from: "color", modifiers: [["darker", 0.8]] }}
+        nodeBorderRadius={3}
+        linkOpacity={linkOpacity}
+        linkHoverOpacity={linkHoverOpacity}
+        linkHoverOthersOpacity={0.1}
+        linkContract={3}
+        enableLinkGradient
+        labelPosition="outside"
+        labelOrientation="horizontal"
+        labelPadding={16}
+        labelTextColor={labelTextColor}
+        enableLabels={enableLabels}
+        animate
+        {...({ onNodeMouseEnter: handleNodeHover, onNodeMouseLeave: handleNodeLeave } as Record<string, unknown>)}
+      />
+
+      {hoveredNode ? (
+        <HoverCard
+          data={hoveredNode.data}
+          position={{ x: hoveredNode.x, y: hoveredNode.y }}
+          onDropOffClick={onDropOffClick}
+          onViewDetails={
+            onViewDetails
+              ? () => onViewDetails(hoveredNode.id)
+              : undefined
+          }
+        />
+      ) : null}
+    </div>
+  )
+}

package/src/charts/top-line-metrics.tsx

@@ -0,0 +1,261 @@
+"use client"
+
+import * as React from "react"
+import {
+  AreaChart,
+  Area,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts"
+import { ArrowUp, ArrowDown, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../components/button"
+
+export interface MetricCardData {
+  label: string
+  value: string | number
+  trend?: {
+    value: number
+    direction: "up" | "down" | "neutral"
+  }
+  alert?: boolean
+}
+
+export interface TopLineMetricsProps {
+  metrics: MetricCardData[]
+  chartData?: { date: string; value: number; secondary?: number }[]
+  filters?: string[]
+  activeFilter?: string
+  onFilterChange?: (filter: string) => void
+  className?: string
+}
+
+function generateDefaultData() {
+  const data = []
+  const base = 150
+  for (let i = 0; i < 7; i++) {
+    const date = new Date()
+    date.setDate(date.getDate() - (6 - i))
+    const dayFactor = Math.sin(i * 0.8) * 40
+    const value = Math.floor(base + dayFactor + Math.random() * 30)
+    const secondary = Math.floor(value * 0.4)
+    data.push({
+      date: date.toLocaleDateString("en-US", {
+        month: "2-digit",
+        day: "2-digit",
+      }),
+      value,
+      secondary,
+    })
+  }
+  return data
+}
+
+const DEFAULT_DATA = generateDefaultData()
+
+export function TopLineMetrics({
+  metrics,
+  chartData,
+  filters,
+  activeFilter,
+  onFilterChange,
+  className,
+}: TopLineMetricsProps) {
+  const [internalFilter, setInternalFilter] = React.useState(
+    activeFilter ?? filters?.[0] ?? "All",
+  )
+  const currentFilter = activeFilter ?? internalFilter
+  const data = chartData ?? DEFAULT_DATA
+  const primaryMetric = metrics[0]
+
+  const handleFilterClick = (f: string) => {
+    setInternalFilter(f)
+    onFilterChange?.(f)
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+        <div className="flex flex-col gap-4 border-b border-border p-6">
+          <div className="flex items-start justify-between">
+            <div>
+              <div className="mb-4 flex items-center gap-4">
+                <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                  Work Queue Activity
+                </h3>
+                {filters && filters.length > 0 ? (
+                  <>
+                    <div className="h-4 w-px bg-muted" />
+                    <div className="flex gap-1">
+                      {filters.map((f) => (
+                        <button
+                          key={f}
+                          onClick={() => handleFilterClick(f)}
+                          className={cn(
+                            "rounded-full px-2 py-0.5 text-xs font-medium transition-colors",
+                            currentFilter === f
+                              ? "bg-muted text-foreground"
+                              : "text-muted-foreground hover:text-foreground",
+                          )}
+                        >
+                          {f}
+                        </button>
+                      ))}
+                    </div>
+                  </>
+                ) : null}
+              </div>
+
+              <div className="flex items-baseline gap-3">
+                <span className="text-4xl font-bold tracking-tight text-foreground">
+                  {primaryMetric.value}
+                </span>
+                <span className="text-lg font-medium text-muted-foreground">
+                  {primaryMetric.label}
+                </span>
+                {primaryMetric.trend ? (
+                  <span
+                    className={cn(
+                      "ml-2 flex items-center rounded-full px-2 py-0.5 text-sm font-bold",
+                      primaryMetric.trend.direction === "up"
+                        ? "bg-emerald-50 text-emerald-700"
+                        : "bg-red-50 text-red-700",
+                    )}
+                  >
+                    {primaryMetric.trend.direction === "up" ? (
+                      <ArrowUp className="mr-1 h-3.5 w-3.5" />
+                    ) : (
+                      <ArrowDown className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    {primaryMetric.trend.value}%
+                  </span>
+                ) : null}
+              </div>
+            </div>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 text-muted-foreground/70 hover:text-muted-foreground"
+            >
+              <MoreHorizontal className="h-5 w-5" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="group relative h-[240px] w-full">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart
+              data={data}
+              margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+            >
+              <defs>
+                <linearGradient
+                  id="tlm-primary"
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient
+                  id="tlm-secondary"
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop offset="5%" stopColor="#f97316" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#f97316" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (!active || !payload?.length) return null
+                  return (
+                    <div className="min-w-[200px] animate-in fade-in zoom-in-95 rounded-lg border border-border bg-card/95 p-4 shadow-lg backdrop-blur-sm duration-200">
+                      <div className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+                        Metrics Snapshot
+                      </div>
+                      <div className="space-y-3">
+                        {metrics.map((m, i) => (
+                          <div
+                            key={i}
+                            className="flex items-center justify-between gap-4"
+                          >
+                            <span
+                              className={cn(
+                                "text-sm font-medium",
+                                i === 0
+                                  ? "font-bold text-foreground"
+                                  : "text-muted-foreground",
+                              )}
+                            >
+                              {m.label}
+                            </span>
+                            <div className="flex items-center gap-2">
+                              <span
+                                className={cn(
+                                  "font-mono text-sm",
+                                  m.alert
+                                    ? "font-bold text-red-600"
+                                    : "text-foreground",
+                                )}
+                              >
+                                {m.value}
+                              </span>
+                              {m.alert ? (
+                                <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-red-500" />
+                              ) : null}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )
+                }}
+                cursor={{
+                  stroke: "#94a3b8",
+                  strokeWidth: 1,
+                  strokeDasharray: "4 4",
+                }}
+              />
+              <Area
+                type="monotone"
+                dataKey="value"
+                stroke="#10b981"
+                strokeWidth={3}
+                fillOpacity={1}
+                fill="url(#tlm-primary)"
+              />
+              {data[0]?.secondary != null ? (
+                <Area
+                  type="monotone"
+                  dataKey="secondary"
+                  stroke="#f97316"
+                  strokeWidth={3}
+                  fillOpacity={1}
+                  fill="url(#tlm-secondary)"
+                  style={{ opacity: 0.6 }}
+                />
+              ) : null}
+            </AreaChart>
+          </ResponsiveContainer>
+
+          <div className="pointer-events-none absolute bottom-4 left-0 right-0 flex justify-between px-8 text-xs font-medium text-muted-foreground/70">
+            {data.map((d, i) => (
+              <span key={i}>{d.date}</span>
+            ))}
+          </div>
+
+          <div className="pointer-events-none absolute right-4 top-4 rounded bg-background/50 px-2 py-1 text-[10px] text-muted-foreground opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100">
+            Hover for details
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/charts/trend-area-chart.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts"
+
+import { cn } from "../lib/utils"
+import { CHART_TOOLTIP_STYLE, CHART_CURSOR_STYLE } from "./chart-tooltip"
+
+export interface TrendSeries {
+  dataKey: string
+  color: string
+  label?: string
+  fillOpacity?: number
+}
+
+export interface TrendAreaChartProps {
+  data: Record<string, unknown>[]
+  series: TrendSeries[]
+  height?: number
+  xAxisKey?: string
+  showGrid?: boolean
+  yDomain?: [number, number]
+  tooltipFormatter?: (value: number | string, name: string) => [string, string]
+  className?: string
+}
+
+export function TrendAreaChart({
+  data,
+  series,
+  height = 250,
+  xAxisKey = "date",
+  showGrid = true,
+  yDomain,
+  tooltipFormatter,
+  className,
+}: TrendAreaChartProps) {
+  const chartId = React.useId().replace(/:/g, "")
+
+  const CustomTooltip = React.useCallback(
+    ({ active, payload, label }: { active?: boolean; payload?: Array<{ value?: number | string; name?: string; dataKey?: string; color?: string }>; label?: string }) => {
+      if (!active || !payload || !payload.length) return null
+
+      return (
+        <div
+          className="rounded-lg border border-border bg-background px-3 py-2 shadow-md"
+          style={{ fontSize: "12px" }}
+        >
+          {label ? (
+            <p className="mb-1 text-xs font-medium text-muted-foreground">{label}</p>
+          ) : null}
+          {payload.map((entry: { value?: number | string; name?: string; dataKey?: string; color?: string; stroke?: string }, i: number) => {
+            const val = entry.value ?? ""
+            const name = entry.name || entry.dataKey || ""
+            const [displayValue, displayName] = tooltipFormatter
+              ? tooltipFormatter(val, name)
+              : [String(val), name]
+            return (
+              <div key={i} className="flex items-center gap-2">
+                <div
+                  className="h-2 w-2 shrink-0 rounded-full"
+                  style={{ backgroundColor: entry.color || entry.stroke }}
+                />
+                <span className="text-xs font-medium text-foreground">
+                  {displayName}: {displayValue}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      )
+    },
+    [tooltipFormatter],
+  )
+
+  return (
+    <div className={cn("w-full", className)} style={{ height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          data={data}
+          margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
+        >
+          <defs>
+            {series.map((s, i) => (
+              <linearGradient
+                key={s.dataKey}
+                id={`trend-${chartId}-${i}`}
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop
+                  offset="5%"
+                  stopColor={s.color}
+                  stopOpacity={s.fillOpacity ?? 0.15}
+                />
+                <stop offset="95%" stopColor={s.color} stopOpacity={0} />
+              </linearGradient>
+            ))}
+          </defs>
+          {showGrid ? (
+            <CartesianGrid
+              strokeDasharray="3 3"
+              vertical={false}
+              stroke="#e2e8f0"
+            />
+          ) : null}
+          <XAxis
+            dataKey={xAxisKey}
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 10, fill: "#64748b" }}
+            dy={10}
+          />
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 10, fill: "#64748b" }}
+            domain={yDomain}
+          />
+          <Tooltip
+            content={tooltipFormatter ? <CustomTooltip /> : undefined}
+            contentStyle={tooltipFormatter ? undefined : CHART_TOOLTIP_STYLE}
+            cursor={CHART_CURSOR_STYLE}
+          />
+          {series.map((s, i) => (
+            <Area
+              key={s.dataKey}
+              type="linear"
+              dataKey={s.dataKey}
+              stroke={s.color}
+              strokeWidth={2}
+              fillOpacity={1}
+              fill={`url(#trend-${chartId}-${i})`}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+            />
+          ))}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}