@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-cost-breakdown/index.tsx

@@ -0,0 +1,1065 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CostItem {
+  /** Unique identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Cost value */
+  value: number
+  /** Custom color */
+  color?: string
+  /** Child items for hierarchical data */
+  children?: CostItem[]
+  /** Percentage change from previous period */
+  change?: number
+}
+
+export interface WakaCostBreakdownProps {
+  /** Hierarchical cost data */
+  data: CostItem[]
+  /** Visualization variant */
+  variant?: "treemap" | "sunburst"
+  /** Currency symbol or code */
+  currency?: string
+  /** Show legend with percentages */
+  showLegend?: boolean
+  /** Show comparison indicators */
+  showComparison?: boolean
+  /** Callback when an item is clicked */
+  onItemClick?: (id: string, path: string[]) => void
+  /** Custom value formatter */
+  formatValue?: (value: number) => string
+  /** Enable animations */
+  animated?: boolean
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Default Colors
+// ============================================================================
+
+const defaultColors = [
+  "#3b82f6", // blue
+  "#ef4444", // red
+  "#22c55e", // green
+  "#f59e0b", // amber
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#14b8a6", // teal
+  "#f97316", // orange
+  "#6366f1", // indigo
+  "#84cc16", // lime
+]
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function assignColors(items: CostItem[], startIndex = 0): CostItem[] {
+  return items.map((item, index) => ({
+    ...item,
+    color: item.color || defaultColors[(startIndex + index) % defaultColors.length],
+    children: item.children ? assignColors(item.children, startIndex + index) : undefined,
+  }))
+}
+
+function calculateTotal(items: CostItem[]): number {
+  return items.reduce((sum, item) => {
+    if (item.children && item.children.length > 0) {
+      return sum + calculateTotal(item.children)
+    }
+    return sum + item.value
+  }, 0)
+}
+
+function getItemTotal(item: CostItem): number {
+  if (item.children && item.children.length > 0) {
+    return calculateTotal(item.children)
+  }
+  return item.value
+}
+
+function flattenItems(items: CostItem[], path: string[] = []): Array<{ item: CostItem; path: string[] }> {
+  const result: Array<{ item: CostItem; path: string[] }> = []
+
+  items.forEach((item) => {
+    const currentPath = [...path, item.id]
+    result.push({ item, path: currentPath })
+    if (item.children) {
+      result.push(...flattenItems(item.children, currentPath))
+    }
+  })
+
+  return result
+}
+
+function darkenColor(hex: string, amount: number): string {
+  const num = parseInt(hex.slice(1), 16)
+  const r = Math.max(0, (num >> 16) - Math.round(255 * amount))
+  const g = Math.max(0, ((num >> 8) & 0x00ff) - Math.round(255 * amount))
+  const b = Math.max(0, (num & 0x0000ff) - Math.round(255 * amount))
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`
+}
+
+function lightenColor(hex: string, amount: number): string {
+  const num = parseInt(hex.slice(1), 16)
+  const r = Math.min(255, (num >> 16) + Math.round(255 * amount))
+  const g = Math.min(255, ((num >> 8) & 0x00ff) + Math.round(255 * amount))
+  const b = Math.min(255, (num & 0x0000ff) + Math.round(255 * amount))
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`
+}
+
+// ============================================================================
+// Treemap Layout Algorithm (Squarified)
+// ============================================================================
+
+interface TreemapRect {
+  x: number
+  y: number
+  width: number
+  height: number
+  item: CostItem
+  depth: number
+}
+
+function squarify(
+  items: CostItem[],
+  rect: { x: number; y: number; width: number; height: number },
+  depth: number = 0
+): TreemapRect[] {
+  const total = items.reduce((sum, item) => sum + getItemTotal(item), 0)
+  if (total === 0 || items.length === 0) return []
+
+  const sortedItems = [...items].sort((a, b) => getItemTotal(b) - getItemTotal(a))
+  const rects: TreemapRect[] = []
+
+  let currentRect = { ...rect }
+  let remainingItems = sortedItems
+
+  while (remainingItems.length > 0) {
+    const { width, height } = currentRect
+    const isHorizontal = width >= height
+    const side = isHorizontal ? height : width
+
+    // Find best row
+    let rowItems: CostItem[] = []
+    let rowSum = 0
+    let bestRatio = Infinity
+
+    for (let i = 0; i < remainingItems.length; i++) {
+      const testItems = remainingItems.slice(0, i + 1)
+      const testSum = testItems.reduce((sum, item) => sum + getItemTotal(item), 0)
+      const rowRatio = testSum / total
+      const rowLength = isHorizontal ? width * rowRatio : height * rowRatio
+
+      // Calculate worst aspect ratio in this row
+      let worstRatio = 0
+      testItems.forEach((item) => {
+        const itemRatio = getItemTotal(item) / testSum
+        const itemSize = side * itemRatio
+        const aspectRatio = Math.max(rowLength / itemSize, itemSize / rowLength)
+        worstRatio = Math.max(worstRatio, aspectRatio)
+      })
+
+      if (worstRatio <= bestRatio) {
+        bestRatio = worstRatio
+        rowItems = testItems
+        rowSum = testSum
+      } else {
+        break
+      }
+    }
+
+    // Layout the row
+    const rowRatio = rowSum / total
+    const rowLength = isHorizontal ? width * rowRatio : height * rowRatio
+    let offset = 0
+
+    rowItems.forEach((item) => {
+      const itemRatio = getItemTotal(item) / rowSum
+      const itemSize = side * itemRatio
+
+      const itemRect: TreemapRect = isHorizontal
+        ? {
+            x: currentRect.x,
+            y: currentRect.y + offset,
+            width: rowLength,
+            height: itemSize,
+            item,
+            depth,
+          }
+        : {
+            x: currentRect.x + offset,
+            y: currentRect.y,
+            width: itemSize,
+            height: rowLength,
+            item,
+            depth,
+          }
+
+      rects.push(itemRect)
+      offset += itemSize
+    })
+
+    // Update remaining area
+    if (isHorizontal) {
+      currentRect = {
+        x: currentRect.x + rowLength,
+        y: currentRect.y,
+        width: width - rowLength,
+        height,
+      }
+    } else {
+      currentRect = {
+        x: currentRect.x,
+        y: currentRect.y + rowLength,
+        width,
+        height: height - rowLength,
+      }
+    }
+
+    remainingItems = remainingItems.slice(rowItems.length)
+    total === rowSum && (remainingItems = [])
+  }
+
+  return rects
+}
+
+// ============================================================================
+// Sunburst Layout
+// ============================================================================
+
+interface SunburstArc {
+  startAngle: number
+  endAngle: number
+  innerRadius: number
+  outerRadius: number
+  item: CostItem
+  depth: number
+  parentColor?: string
+}
+
+function createSunburstArcs(
+  items: CostItem[],
+  startAngle: number,
+  endAngle: number,
+  innerRadius: number,
+  outerRadius: number,
+  depth: number = 0,
+  parentColor?: string
+): SunburstArc[] {
+  const total = items.reduce((sum, item) => sum + getItemTotal(item), 0)
+  if (total === 0) return []
+
+  const arcs: SunburstArc[] = []
+  let currentAngle = startAngle
+  const ringWidth = (outerRadius - innerRadius) / 3 // 3 levels max depth
+
+  items.forEach((item) => {
+    const itemValue = getItemTotal(item)
+    const angleSpan = ((endAngle - startAngle) * itemValue) / total
+    const itemEndAngle = currentAngle + angleSpan
+
+    arcs.push({
+      startAngle: currentAngle,
+      endAngle: itemEndAngle,
+      innerRadius,
+      outerRadius: innerRadius + ringWidth,
+      item,
+      depth,
+      parentColor,
+    })
+
+    // Add children arcs
+    if (item.children && item.children.length > 0) {
+      arcs.push(
+        ...createSunburstArcs(
+          item.children,
+          currentAngle,
+          itemEndAngle,
+          innerRadius + ringWidth,
+          outerRadius,
+          depth + 1,
+          item.color
+        )
+      )
+    }
+
+    currentAngle = itemEndAngle
+  })
+
+  return arcs
+}
+
+function describeArc(
+  cx: number,
+  cy: number,
+  innerRadius: number,
+  outerRadius: number,
+  startAngle: number,
+  endAngle: number
+): string {
+  const startRad = ((startAngle - 90) * Math.PI) / 180
+  const endRad = ((endAngle - 90) * Math.PI) / 180
+
+  const x1Outer = cx + outerRadius * Math.cos(startRad)
+  const y1Outer = cy + outerRadius * Math.sin(startRad)
+  const x2Outer = cx + outerRadius * Math.cos(endRad)
+  const y2Outer = cy + outerRadius * Math.sin(endRad)
+
+  const x1Inner = cx + innerRadius * Math.cos(endRad)
+  const y1Inner = cy + innerRadius * Math.sin(endRad)
+  const x2Inner = cx + innerRadius * Math.cos(startRad)
+  const y2Inner = cy + innerRadius * Math.sin(startRad)
+
+  const largeArc = endAngle - startAngle > 180 ? 1 : 0
+
+  if (innerRadius === 0) {
+    return `M ${cx} ${cy} L ${x1Outer} ${y1Outer} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x2Outer} ${y2Outer} Z`
+  }
+
+  return `M ${x1Outer} ${y1Outer} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x2Outer} ${y2Outer} L ${x1Inner} ${y1Inner} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${x2Inner} ${y2Inner} Z`
+}
+
+// ============================================================================
+// Breadcrumb Component
+// ============================================================================
+
+interface BreadcrumbProps {
+  path: Array<{ id: string; name: string; color?: string }>
+  onNavigate: (index: number) => void
+}
+
+function Breadcrumb({ path, onNavigate }: BreadcrumbProps) {
+  return (
+    <nav className="flex items-center gap-1 text-sm mb-4 flex-wrap">
+      <button
+        onClick={() => onNavigate(-1)}
+        className={cn(
+          "px-2 py-1 rounded-md transition-colors",
+          "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary",
+          "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        All
+      </button>
+      {path.map((item, index) => (
+        <React.Fragment key={item.id}>
+          <span className="text-muted-foreground">/</span>
+          <button
+            onClick={() => onNavigate(index)}
+            className={cn(
+              "px-2 py-1 rounded-md transition-colors flex items-center gap-2",
+              "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary",
+              index === path.length - 1 ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {item.color && (
+              <span
+                className="w-2 h-2 rounded-full"
+                style={{ backgroundColor: item.color }}
+              />
+            )}
+            {item.name}
+          </button>
+        </React.Fragment>
+      ))}
+    </nav>
+  )
+}
+
+// ============================================================================
+// Tooltip Component
+// ============================================================================
+
+interface TooltipProps {
+  item: CostItem
+  position: { x: number; y: number }
+  total: number
+  formatValue: (value: number) => string
+  showComparison: boolean
+}
+
+function Tooltip({ item, position, total, formatValue, showComparison }: TooltipProps) {
+  const itemTotal = getItemTotal(item)
+  const percentage = ((itemTotal / total) * 100).toFixed(1)
+
+  return (
+    <div
+      className={cn(
+        "absolute z-50 px-3 py-2 text-sm rounded-lg shadow-lg",
+        "bg-foreground text-background",
+        "animate-in fade-in-0 zoom-in-95 duration-100",
+        "pointer-events-none min-w-[140px]"
+      )}
+      style={{
+        left: position.x,
+        top: position.y - 70,
+        transform: "translateX(-50%)",
+      }}
+    >
+      <div className="font-semibold mb-1">{item.name}</div>
+      <div className="flex justify-between gap-4">
+        <span className="opacity-70">Value:</span>
+        <span className="font-medium">{formatValue(itemTotal)}</span>
+      </div>
+      <div className="flex justify-between gap-4">
+        <span className="opacity-70">Share:</span>
+        <span>{percentage}%</span>
+      </div>
+      {showComparison && item.change !== undefined && (
+        <div className="flex justify-between gap-4 mt-1 pt-1 border-t border-background/20">
+          <span className="opacity-70">Change:</span>
+          <span
+            className={cn(
+              "font-medium",
+              item.change > 0 && "text-red-300",
+              item.change < 0 && "text-green-300"
+            )}
+          >
+            {item.change > 0 ? "+" : ""}
+            {item.change.toFixed(1)}%
+          </span>
+        </div>
+      )}
+      {item.children && item.children.length > 0 && (
+        <div className="text-xs opacity-70 mt-1 pt-1 border-t border-background/20">
+          Click to drill down ({item.children.length} items)
+        </div>
+      )}
+      <div className="absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-3 rotate-45 bg-foreground" />
+    </div>
+  )
+}
+
+// ============================================================================
+// Legend Component
+// ============================================================================
+
+interface LegendProps {
+  items: CostItem[]
+  total: number
+  formatValue: (value: number) => string
+  hoveredId: string | null
+  onHover: (id: string | null) => void
+  onClick: (item: CostItem) => void
+  showComparison: boolean
+}
+
+function Legend({ items, total, formatValue, hoveredId, onHover, onClick, showComparison }: LegendProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      {items.map((item) => {
+        const itemTotal = getItemTotal(item)
+        const percentage = ((itemTotal / total) * 100).toFixed(1)
+        const isHovered = hoveredId === item.id
+        const isOtherHovered = hoveredId !== null && hoveredId !== item.id
+
+        return (
+          <button
+            key={item.id}
+            className={cn(
+              "flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-left",
+              "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary",
+              isHovered && "bg-muted",
+              isOtherHovered && "opacity-50"
+            )}
+            onMouseEnter={() => onHover(item.id)}
+            onMouseLeave={() => onHover(null)}
+            onClick={() => onClick(item)}
+          >
+            <span
+              className="w-3 h-3 rounded flex-shrink-0"
+              style={{ backgroundColor: item.color }}
+            />
+            <span className="flex-1 truncate text-sm">{item.name}</span>
+            <div className="flex flex-col items-end text-xs">
+              <span className="font-medium">{formatValue(itemTotal)}</span>
+              <span className="text-muted-foreground">{percentage}%</span>
+            </div>
+            {showComparison && item.change !== undefined && (
+              <span
+                className={cn(
+                  "text-xs font-medium px-1.5 py-0.5 rounded",
+                  item.change > 0 && "text-red-600 bg-red-100",
+                  item.change < 0 && "text-green-600 bg-green-100",
+                  item.change === 0 && "text-muted-foreground bg-muted"
+                )}
+              >
+                {item.change > 0 ? "+" : ""}
+                {item.change.toFixed(1)}%
+              </span>
+            )}
+            {item.children && item.children.length > 0 && (
+              <svg
+                className="w-4 h-4 text-muted-foreground"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+// ============================================================================
+// Treemap Visualization
+// ============================================================================
+
+interface TreemapProps {
+  data: CostItem[]
+  width: number
+  height: number
+  onItemClick: (item: CostItem) => void
+  hoveredId: string | null
+  onHover: (id: string | null) => void
+  formatValue: (value: number) => string
+  showComparison: boolean
+  animated: boolean
+  total: number
+}
+
+function Treemap({
+  data,
+  width,
+  height,
+  onItemClick,
+  hoveredId,
+  onHover,
+  formatValue,
+  showComparison,
+  animated,
+  total,
+}: TreemapProps) {
+  const [tooltipData, setTooltipData] = React.useState<{
+    item: CostItem
+    position: { x: number; y: number }
+  } | null>(null)
+
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  const rects = React.useMemo(
+    () => squarify(data, { x: 0, y: 0, width, height }, 0),
+    [data, width, height]
+  )
+
+  const handleMouseMove = (e: React.MouseEvent, rect: TreemapRect) => {
+    if (containerRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect()
+      setTooltipData({
+        item: rect.item,
+        position: {
+          x: e.clientX - containerRect.left,
+          y: e.clientY - containerRect.top,
+        },
+      })
+    }
+    onHover(rect.item.id)
+  }
+
+  return (
+    <div ref={containerRef} className="relative" style={{ width, height }}>
+      <svg width={width} height={height} className="overflow-visible">
+        {rects.map((rect, index) => {
+          const isHovered = hoveredId === rect.item.id
+          const isOtherHovered = hoveredId !== null && hoveredId !== rect.item.id
+          const hasChildren = rect.item.children && rect.item.children.length > 0
+          const itemTotal = getItemTotal(rect.item)
+          const percentage = ((itemTotal / total) * 100).toFixed(1)
+
+          // Calculate if text fits
+          const minWidthForText = 60
+          const minHeightForText = 40
+          const showText = rect.width >= minWidthForText && rect.height >= minHeightForText
+          const showValue = rect.width >= 80 && rect.height >= 50
+
+          return (
+            <g
+              key={rect.item.id}
+              className={cn(
+                "cursor-pointer",
+                animated && "transition-all duration-300"
+              )}
+              style={{
+                opacity: isOtherHovered ? 0.5 : 1,
+                transform: isHovered ? "scale(1.02)" : "scale(1)",
+                transformOrigin: `${rect.x + rect.width / 2}px ${rect.y + rect.height / 2}px`,
+              }}
+              onMouseMove={(e) => handleMouseMove(e, rect)}
+              onMouseLeave={() => {
+                setTooltipData(null)
+                onHover(null)
+              }}
+              onClick={() => onItemClick(rect.item)}
+            >
+              <rect
+                x={rect.x + 1}
+                y={rect.y + 1}
+                width={Math.max(0, rect.width - 2)}
+                height={Math.max(0, rect.height - 2)}
+                fill={rect.item.color}
+                rx="4"
+                className={cn(
+                  animated && "transition-all duration-200",
+                  isHovered && "brightness-110"
+                )}
+                style={{
+                  filter: isHovered ? "brightness(1.1)" : undefined,
+                }}
+              />
+              {showText && (
+                <>
+                  <text
+                    x={rect.x + rect.width / 2}
+                    y={rect.y + rect.height / 2 - (showValue ? 8 : 0)}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    fill="white"
+                    className="text-xs font-medium pointer-events-none"
+                    style={{
+                      textShadow: "0 1px 2px rgba(0,0,0,0.5)",
+                    }}
+                  >
+                    {rect.item.name.length > Math.floor(rect.width / 8)
+                      ? rect.item.name.slice(0, Math.floor(rect.width / 8)) + "..."
+                      : rect.item.name}
+                  </text>
+                  {showValue && (
+                    <text
+                      x={rect.x + rect.width / 2}
+                      y={rect.y + rect.height / 2 + 10}
+                      textAnchor="middle"
+                      dominantBaseline="middle"
+                      fill="white"
+                      className="text-[10px] pointer-events-none opacity-80"
+                      style={{
+                        textShadow: "0 1px 2px rgba(0,0,0,0.5)",
+                      }}
+                    >
+                      {percentage}%
+                    </text>
+                  )}
+                </>
+              )}
+              {hasChildren && rect.width >= 24 && rect.height >= 24 && (
+                <circle
+                  cx={rect.x + rect.width - 12}
+                  cy={rect.y + 12}
+                  r="8"
+                  fill="rgba(255,255,255,0.3)"
+                  className="pointer-events-none"
+                />
+              )}
+            </g>
+          )
+        })}
+      </svg>
+
+      {tooltipData && (
+        <Tooltip
+          item={tooltipData.item}
+          position={tooltipData.position}
+          total={total}
+          formatValue={formatValue}
+          showComparison={showComparison}
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Sunburst Visualization
+// ============================================================================
+
+interface SunburstProps {
+  data: CostItem[]
+  size: number
+  onItemClick: (item: CostItem) => void
+  hoveredId: string | null
+  onHover: (id: string | null) => void
+  formatValue: (value: number) => string
+  showComparison: boolean
+  animated: boolean
+  total: number
+}
+
+function Sunburst({
+  data,
+  size,
+  onItemClick,
+  hoveredId,
+  onHover,
+  formatValue,
+  showComparison,
+  animated,
+  total,
+}: SunburstProps) {
+  const [tooltipData, setTooltipData] = React.useState<{
+    item: CostItem
+    position: { x: number; y: number }
+  } | null>(null)
+
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const cx = size / 2
+  const cy = size / 2
+  const outerRadius = size / 2 - 20
+  const innerRadius = 50
+
+  const arcs = React.useMemo(
+    () => createSunburstArcs(data, 0, 360, innerRadius, outerRadius, 0),
+    [data, innerRadius, outerRadius]
+  )
+
+  const handleMouseMove = (e: React.MouseEvent, arc: SunburstArc) => {
+    if (containerRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect()
+      setTooltipData({
+        item: arc.item,
+        position: {
+          x: e.clientX - containerRect.left,
+          y: e.clientY - containerRect.top,
+        },
+      })
+    }
+    onHover(arc.item.id)
+  }
+
+  // Get color for arc based on depth
+  const getArcColor = (arc: SunburstArc) => {
+    if (arc.depth === 0) return arc.item.color || defaultColors[0]
+    const baseColor = arc.parentColor || arc.item.color || defaultColors[0]
+    return lightenColor(baseColor, arc.depth * 0.15)
+  }
+
+  return (
+    <div ref={containerRef} className="relative" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="overflow-visible">
+        {/* Center circle with total */}
+        <circle
+          cx={cx}
+          cy={cy}
+          r={innerRadius - 5}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1"
+          className="opacity-10"
+        />
+
+        {/* Arcs */}
+        {arcs.map((arc, index) => {
+          const isHovered = hoveredId === arc.item.id
+          const isOtherHovered = hoveredId !== null && hoveredId !== arc.item.id
+          const hasChildren = arc.item.children && arc.item.children.length > 0
+          const color = getArcColor(arc)
+
+          return (
+            <path
+              key={`${arc.item.id}-${arc.depth}-${index}`}
+              d={describeArc(cx, cy, arc.innerRadius, arc.outerRadius, arc.startAngle, arc.endAngle)}
+              fill={color}
+              stroke="white"
+              strokeWidth="1"
+              className={cn(
+                "cursor-pointer",
+                animated && "transition-all duration-200"
+              )}
+              style={{
+                opacity: isOtherHovered ? 0.5 : 1,
+                filter: isHovered ? "brightness(1.15)" : undefined,
+                transform: isHovered ? `scale(1.02)` : "scale(1)",
+                transformOrigin: `${cx}px ${cy}px`,
+              }}
+              onMouseMove={(e) => handleMouseMove(e, arc)}
+              onMouseLeave={() => {
+                setTooltipData(null)
+                onHover(null)
+              }}
+              onClick={() => onItemClick(arc.item)}
+            />
+          )
+        })}
+
+        {/* Center text */}
+        <text
+          x={cx}
+          y={cy - 8}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          className="text-xs font-medium fill-muted-foreground"
+        >
+          Total
+        </text>
+        <text
+          x={cx}
+          y={cy + 10}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          className="text-sm font-bold fill-foreground"
+        >
+          {formatValue(total)}
+        </text>
+      </svg>
+
+      {tooltipData && (
+        <Tooltip
+          item={tooltipData.item}
+          position={tooltipData.position}
+          total={total}
+          formatValue={formatValue}
+          showComparison={showComparison}
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCostBreakdown({
+  data,
+  variant = "treemap",
+  currency = "$",
+  showLegend = true,
+  showComparison = false,
+  onItemClick,
+  formatValue,
+  animated = true,
+  className,
+}: WakaCostBreakdownProps) {
+  const [currentPath, setCurrentPath] = React.useState<Array<{ id: string; name: string; color?: string }>>([])
+  const [hoveredId, setHoveredId] = React.useState<string | null>(null)
+
+  // Assign colors to data
+  const coloredData = React.useMemo(() => assignColors(data), [data])
+
+  // Get current display data based on drill-down path
+  const currentData = React.useMemo(() => {
+    let items = coloredData
+    for (const pathItem of currentPath) {
+      const found = items.find((item) => item.id === pathItem.id)
+      if (found?.children) {
+        items = found.children
+      } else {
+        break
+      }
+    }
+    return items
+  }, [coloredData, currentPath])
+
+  const total = React.useMemo(() => calculateTotal(currentData), [currentData])
+
+  const defaultFormatValue = React.useCallback(
+    (value: number) => {
+      if (value >= 1000000) {
+        return `${currency}${(value / 1000000).toFixed(1)}M`
+      }
+      if (value >= 1000) {
+        return `${currency}${(value / 1000).toFixed(1)}K`
+      }
+      return `${currency}${value.toFixed(2)}`
+    },
+    [currency]
+  )
+
+  const valueFormatter = formatValue || defaultFormatValue
+
+  const handleItemClick = React.useCallback(
+    (item: CostItem) => {
+      const path = [...currentPath.map((p) => p.id), item.id]
+      onItemClick?.(item.id, path)
+
+      // Drill down if has children
+      if (item.children && item.children.length > 0) {
+        setCurrentPath([...currentPath, { id: item.id, name: item.name, color: item.color }])
+      }
+    },
+    [currentPath, onItemClick]
+  )
+
+  const handleBreadcrumbNavigate = React.useCallback((index: number) => {
+    if (index === -1) {
+      setCurrentPath([])
+    } else {
+      setCurrentPath(currentPath.slice(0, index + 1))
+    }
+  }, [currentPath])
+
+  // Calculate full total for comparison
+  const fullTotal = React.useMemo(() => calculateTotal(coloredData), [coloredData])
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {/* Breadcrumb */}
+      {currentPath.length > 0 && (
+        <Breadcrumb path={currentPath} onNavigate={handleBreadcrumbNavigate} />
+      )}
+
+      {/* Header with total */}
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <div className="text-sm text-muted-foreground">
+            {currentPath.length > 0 ? "Category Total" : "Total Cost"}
+          </div>
+          <div className="text-2xl font-bold">{valueFormatter(total)}</div>
+          {currentPath.length > 0 && (
+            <div className="text-xs text-muted-foreground">
+              {((total / fullTotal) * 100).toFixed(1)}% of total
+            </div>
+          )}
+        </div>
+
+        {showComparison && (
+          <div className="text-right">
+            <div className="text-sm text-muted-foreground">vs. Previous Period</div>
+            <div className="flex items-center gap-2 justify-end">
+              {(() => {
+                const totalChange = currentData.reduce((sum, item) => sum + (item.change || 0) * getItemTotal(item), 0) / total
+                return (
+                  <span
+                    className={cn(
+                      "text-lg font-semibold",
+                      totalChange > 0 && "text-red-600",
+                      totalChange < 0 && "text-green-600",
+                      totalChange === 0 && "text-muted-foreground"
+                    )}
+                  >
+                    {totalChange > 0 ? "+" : ""}
+                    {totalChange.toFixed(1)}%
+                  </span>
+                )
+              })()}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Visualization and Legend */}
+      <div className={cn("flex gap-6", showLegend ? "flex-row" : "flex-col")}>
+        {/* Visualization */}
+        <div className="flex-1 min-w-0">
+          {variant === "treemap" ? (
+            <Treemap
+              data={currentData}
+              width={400}
+              height={300}
+              onItemClick={handleItemClick}
+              hoveredId={hoveredId}
+              onHover={setHoveredId}
+              formatValue={valueFormatter}
+              showComparison={showComparison}
+              animated={animated}
+              total={total}
+            />
+          ) : (
+            <Sunburst
+              data={currentData}
+              size={350}
+              onItemClick={handleItemClick}
+              hoveredId={hoveredId}
+              onHover={setHoveredId}
+              formatValue={valueFormatter}
+              showComparison={showComparison}
+              animated={animated}
+              total={total}
+            />
+          )}
+        </div>
+
+        {/* Legend */}
+        {showLegend && (
+          <div className="w-64 flex-shrink-0">
+            <div className="text-sm font-medium mb-2 text-muted-foreground">
+              {currentPath.length > 0 ? "Subcategories" : "Categories"}
+            </div>
+            <Legend
+              items={currentData}
+              total={total}
+              formatValue={valueFormatter}
+              hoveredId={hoveredId}
+              onHover={setHoveredId}
+              onClick={handleItemClick}
+              showComparison={showComparison}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Hook for cost breakdown
+// ============================================================================
+
+export interface UseCostBreakdownOptions {
+  data: CostItem[]
+  onDrillDown?: (path: string[]) => void
+}
+
+export function useCostBreakdown({ data, onDrillDown }: UseCostBreakdownOptions) {
+  const [path, setPath] = React.useState<string[]>([])
+  const [selectedItem, setSelectedItem] = React.useState<string | null>(null)
+
+  const drillDown = React.useCallback(
+    (itemId: string) => {
+      const newPath = [...path, itemId]
+      setPath(newPath)
+      onDrillDown?.(newPath)
+    },
+    [path, onDrillDown]
+  )
+
+  const drillUp = React.useCallback(() => {
+    const newPath = path.slice(0, -1)
+    setPath(newPath)
+    onDrillDown?.(newPath)
+  }, [path, onDrillDown])
+
+  const reset = React.useCallback(() => {
+    setPath([])
+    setSelectedItem(null)
+    onDrillDown?.([])
+  }, [onDrillDown])
+
+  const getCurrentData = React.useCallback(() => {
+    let items = data
+    for (const id of path) {
+      const found = items.find((item) => item.id === id)
+      if (found?.children) {
+        items = found.children
+      } else {
+        break
+      }
+    }
+    return items
+  }, [data, path])
+
+  return {
+    path,
+    selectedItem,
+    setSelectedItem,
+    drillDown,
+    drillUp,
+    reset,
+    getCurrentData,
+  }
+}
+
+export default WakaCostBreakdown