@wakastellar/ui 1.0.12 → 2.1.0

package/src/components/waka-allocation-matrix/index.tsx

@@ -0,0 +1,1278 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  AlertTriangle,
+  ArrowUpDown,
+  ChevronDown,
+  ChevronUp,
+  Filter,
+  GripHorizontal,
+  Percent,
+  Search,
+  X,
+} from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface Resource {
+  /** Unique identifier for the resource */
+  id: string
+  /** Display name */
+  name: string
+  /** Optional category for grouping */
+  category?: string
+  /** Maximum capacity (default: 100) */
+  capacity?: number
+  /** Custom color for the resource row */
+  color?: string
+}
+
+export interface Consumer {
+  /** Unique identifier for the consumer/project */
+  id: string
+  /** Display name */
+  name: string
+  /** Optional priority level */
+  priority?: "low" | "medium" | "high" | "critical"
+  /** Custom color for the consumer column */
+  color?: string
+}
+
+export interface Allocation {
+  /** Resource ID */
+  resourceId: string
+  /** Consumer ID */
+  consumerId: string
+  /** Allocation percentage (0-100+) */
+  value: number
+}
+
+export type SortField = "name" | "total" | "allocation"
+export type SortDirection = "asc" | "desc"
+export type FilterMode = "all" | "over-allocated" | "under-allocated" | "unallocated"
+
+export interface AllocationMatrixState {
+  /** Current allocations */
+  allocations: Map<string, number>
+  /** Selected cell for editing */
+  selectedCell: { resourceId: string; consumerId: string } | null
+  /** Row sort configuration */
+  rowSort: { field: SortField; direction: SortDirection }
+  /** Column sort configuration */
+  columnSort: { field: SortField; direction: SortDirection }
+  /** Filter mode */
+  filterMode: FilterMode
+  /** Search query */
+  searchQuery: string
+  /** Dragging state */
+  isDragging: boolean
+  /** Drag start value */
+  dragStartValue: number
+}
+
+export interface AllocationSummary {
+  /** Total allocations across all cells */
+  totalAllocations: number
+  /** Average allocation per cell */
+  averageAllocation: number
+  /** Number of over-allocated resources (>100%) */
+  overAllocatedCount: number
+  /** Number of under-allocated resources (<100%) */
+  underAllocatedCount: number
+  /** Number of fully allocated resources (=100%) */
+  fullyAllocatedCount: number
+  /** Number of unallocated resources (0%) */
+  unallocatedCount: number
+  /** Utilization efficiency percentage */
+  utilizationEfficiency: number
+}
+
+export interface WakaAllocationMatrixProps {
+  /** Resources (rows) */
+  resources: Resource[]
+  /** Consumers/Projects (columns) */
+  consumers: Consumer[]
+  /** Initial allocations */
+  allocations?: Allocation[]
+  /** Enable editing */
+  editable?: boolean
+  /** Enable drag to adjust allocations */
+  enableDrag?: boolean
+  /** Show row totals */
+  showRowTotals?: boolean
+  /** Show column totals */
+  showColumnTotals?: boolean
+  /** Show summary statistics */
+  showSummary?: boolean
+  /** Show filter controls */
+  showFilters?: boolean
+  /** Show search */
+  showSearch?: boolean
+  /** Over-allocation threshold (default: 100) */
+  overAllocationThreshold?: number
+  /** Cell size */
+  cellSize?: "sm" | "md" | "lg"
+  /** Color scheme for intensity */
+  colorScheme?: "blue" | "green" | "purple" | "orange"
+  /** Callback when allocation changes */
+  onAllocationChange?: (resourceId: string, consumerId: string, value: number) => void
+  /** Callback when allocations are saved */
+  onSave?: (allocations: Allocation[]) => void
+  /** Custom value formatter */
+  formatValue?: (value: number) => string
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const CELL_SIZE_CONFIG = {
+  sm: {
+    cell: "w-12 h-12",
+    header: "w-12 h-10",
+    text: "text-xs",
+    headerText: "text-xs",
+    padding: "p-1",
+    icon: "h-3 w-3",
+  },
+  md: {
+    cell: "w-16 h-16",
+    header: "w-16 h-12",
+    text: "text-sm",
+    headerText: "text-sm",
+    padding: "p-2",
+    icon: "h-4 w-4",
+  },
+  lg: {
+    cell: "w-20 h-20",
+    header: "w-20 h-14",
+    text: "text-base",
+    headerText: "text-base",
+    padding: "p-3",
+    icon: "h-5 w-5",
+  },
+}
+
+const COLOR_SCHEMES = {
+  blue: {
+    light: ["bg-blue-50", "bg-blue-100", "bg-blue-200", "bg-blue-300", "bg-blue-400", "bg-blue-500"],
+    dark: ["dark:bg-blue-950", "dark:bg-blue-900", "dark:bg-blue-800", "dark:bg-blue-700", "dark:bg-blue-600", "dark:bg-blue-500"],
+    text: ["text-blue-900", "text-blue-900", "text-blue-900", "text-white", "text-white", "text-white"],
+    darkText: ["dark:text-blue-100", "dark:text-blue-100", "dark:text-blue-100", "dark:text-white", "dark:text-white", "dark:text-white"],
+  },
+  green: {
+    light: ["bg-green-50", "bg-green-100", "bg-green-200", "bg-green-300", "bg-green-400", "bg-green-500"],
+    dark: ["dark:bg-green-950", "dark:bg-green-900", "dark:bg-green-800", "dark:bg-green-700", "dark:bg-green-600", "dark:bg-green-500"],
+    text: ["text-green-900", "text-green-900", "text-green-900", "text-white", "text-white", "text-white"],
+    darkText: ["dark:text-green-100", "dark:text-green-100", "dark:text-green-100", "dark:text-white", "dark:text-white", "dark:text-white"],
+  },
+  purple: {
+    light: ["bg-purple-50", "bg-purple-100", "bg-purple-200", "bg-purple-300", "bg-purple-400", "bg-purple-500"],
+    dark: ["dark:bg-purple-950", "dark:bg-purple-900", "dark:bg-purple-800", "dark:bg-purple-700", "dark:bg-purple-600", "dark:bg-purple-500"],
+    text: ["text-purple-900", "text-purple-900", "text-purple-900", "text-white", "text-white", "text-white"],
+    darkText: ["dark:text-purple-100", "dark:text-purple-100", "dark:text-purple-100", "dark:text-white", "dark:text-white", "dark:text-white"],
+  },
+  orange: {
+    light: ["bg-orange-50", "bg-orange-100", "bg-orange-200", "bg-orange-300", "bg-orange-400", "bg-orange-500"],
+    dark: ["dark:bg-orange-950", "dark:bg-orange-900", "dark:bg-orange-800", "dark:bg-orange-700", "dark:bg-orange-600", "dark:bg-orange-500"],
+    text: ["text-orange-900", "text-orange-900", "text-orange-900", "text-white", "text-white", "text-white"],
+    darkText: ["dark:text-orange-100", "dark:text-orange-100", "dark:text-orange-100", "dark:text-white", "dark:text-white", "dark:text-white"],
+  },
+}
+
+const PRIORITY_COLORS = {
+  low: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400",
+  medium: "bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400",
+  high: "bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-400",
+  critical: "bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400",
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function getAllocationKey(resourceId: string, consumerId: string): string {
+  return `${resourceId}:${consumerId}`
+}
+
+function getIntensityLevel(value: number, maxValue: number = 100): number {
+  if (value === 0) return 0
+  const percentage = (value / maxValue) * 100
+  if (percentage <= 20) return 1
+  if (percentage <= 40) return 2
+  if (percentage <= 60) return 3
+  if (percentage <= 80) return 4
+  return 5
+}
+
+function calculateRowTotal(
+  resourceId: string,
+  consumers: Consumer[],
+  allocations: Map<string, number>
+): number {
+  return consumers.reduce((sum, consumer) => {
+    const key = getAllocationKey(resourceId, consumer.id)
+    return sum + (allocations.get(key) || 0)
+  }, 0)
+}
+
+function calculateColumnTotal(
+  consumerId: string,
+  resources: Resource[],
+  allocations: Map<string, number>
+): number {
+  return resources.reduce((sum, resource) => {
+    const key = getAllocationKey(resource.id, consumerId)
+    return sum + (allocations.get(key) || 0)
+  }, 0)
+}
+
+function calculateSummary(
+  resources: Resource[],
+  consumers: Consumer[],
+  allocations: Map<string, number>,
+  overAllocationThreshold: number
+): AllocationSummary {
+  let totalAllocations = 0
+  let overAllocatedCount = 0
+  let underAllocatedCount = 0
+  let fullyAllocatedCount = 0
+  let unallocatedCount = 0
+
+  resources.forEach((resource) => {
+    const rowTotal = calculateRowTotal(resource.id, consumers, allocations)
+    totalAllocations += rowTotal
+    const capacity = resource.capacity || overAllocationThreshold
+
+    if (rowTotal === 0) {
+      unallocatedCount++
+    } else if (rowTotal > capacity) {
+      overAllocatedCount++
+    } else if (rowTotal === capacity) {
+      fullyAllocatedCount++
+    } else {
+      underAllocatedCount++
+    }
+  })
+
+  const totalCells = resources.length * consumers.length
+  const averageAllocation = totalCells > 0 ? totalAllocations / totalCells : 0
+  const maxPossibleAllocation = resources.reduce(
+    (sum, r) => sum + (r.capacity || overAllocationThreshold),
+    0
+  )
+  const utilizationEfficiency =
+    maxPossibleAllocation > 0
+      ? Math.min(100, (totalAllocations / maxPossibleAllocation) * 100)
+      : 0
+
+  return {
+    totalAllocations,
+    averageAllocation,
+    overAllocatedCount,
+    underAllocatedCount,
+    fullyAllocatedCount,
+    unallocatedCount,
+    utilizationEfficiency,
+  }
+}
+
+// ============================================================================
+// Custom Hook: useAllocationMatrix
+// ============================================================================
+
+export interface UseAllocationMatrixOptions {
+  /** Initial resources */
+  resources: Resource[]
+  /** Initial consumers */
+  consumers: Consumer[]
+  /** Initial allocations */
+  initialAllocations?: Allocation[]
+  /** Over-allocation threshold */
+  overAllocationThreshold?: number
+  /** Callback when allocation changes */
+  onAllocationChange?: (resourceId: string, consumerId: string, value: number) => void
+}
+
+export interface UseAllocationMatrixReturn {
+  /** Current allocations map */
+  allocations: Map<string, number>
+  /** Set allocation for a cell */
+  setAllocation: (resourceId: string, consumerId: string, value: number) => void
+  /** Get allocation for a cell */
+  getAllocation: (resourceId: string, consumerId: string) => number
+  /** Get row total */
+  getRowTotal: (resourceId: string) => number
+  /** Get column total */
+  getColumnTotal: (consumerId: string) => number
+  /** Check if resource is over-allocated */
+  isOverAllocated: (resourceId: string) => boolean
+  /** Get summary statistics */
+  getSummary: () => AllocationSummary
+  /** Clear all allocations */
+  clearAll: () => void
+  /** Reset to initial allocations */
+  reset: () => void
+  /** Export allocations as array */
+  exportAllocations: () => Allocation[]
+  /** Import allocations from array */
+  importAllocations: (allocations: Allocation[]) => void
+  /** Selected cell */
+  selectedCell: { resourceId: string; consumerId: string } | null
+  /** Set selected cell */
+  setSelectedCell: (cell: { resourceId: string; consumerId: string } | null) => void
+  /** Row sort */
+  rowSort: { field: SortField; direction: SortDirection }
+  /** Set row sort */
+  setRowSort: (sort: { field: SortField; direction: SortDirection }) => void
+  /** Column sort */
+  columnSort: { field: SortField; direction: SortDirection }
+  /** Set column sort */
+  setColumnSort: (sort: { field: SortField; direction: SortDirection }) => void
+  /** Filter mode */
+  filterMode: FilterMode
+  /** Set filter mode */
+  setFilterMode: (mode: FilterMode) => void
+  /** Search query */
+  searchQuery: string
+  /** Set search query */
+  setSearchQuery: (query: string) => void
+  /** Sorted and filtered resources */
+  filteredResources: Resource[]
+  /** Sorted consumers */
+  sortedConsumers: Consumer[]
+}
+
+export function useAllocationMatrix({
+  resources,
+  consumers,
+  initialAllocations = [],
+  overAllocationThreshold = 100,
+  onAllocationChange,
+}: UseAllocationMatrixOptions): UseAllocationMatrixReturn {
+  // Initialize allocations map
+  const [allocations, setAllocations] = React.useState<Map<string, number>>(() => {
+    const map = new Map<string, number>()
+    initialAllocations.forEach((alloc) => {
+      const key = getAllocationKey(alloc.resourceId, alloc.consumerId)
+      map.set(key, alloc.value)
+    })
+    return map
+  })
+
+  const [selectedCell, setSelectedCell] = React.useState<{
+    resourceId: string
+    consumerId: string
+  } | null>(null)
+
+  const [rowSort, setRowSort] = React.useState<{
+    field: SortField
+    direction: SortDirection
+  }>({ field: "name", direction: "asc" })
+
+  const [columnSort, setColumnSort] = React.useState<{
+    field: SortField
+    direction: SortDirection
+  }>({ field: "name", direction: "asc" })
+
+  const [filterMode, setFilterMode] = React.useState<FilterMode>("all")
+  const [searchQuery, setSearchQuery] = React.useState("")
+
+  // Store initial allocations for reset
+  const initialAllocationsRef = React.useRef(initialAllocations)
+
+  const setAllocation = React.useCallback(
+    (resourceId: string, consumerId: string, value: number) => {
+      const key = getAllocationKey(resourceId, consumerId)
+      setAllocations((prev) => {
+        const next = new Map(prev)
+        if (value === 0) {
+          next.delete(key)
+        } else {
+          next.set(key, Math.max(0, value))
+        }
+        return next
+      })
+      onAllocationChange?.(resourceId, consumerId, value)
+    },
+    [onAllocationChange]
+  )
+
+  const getAllocation = React.useCallback(
+    (resourceId: string, consumerId: string): number => {
+      const key = getAllocationKey(resourceId, consumerId)
+      return allocations.get(key) || 0
+    },
+    [allocations]
+  )
+
+  const getRowTotal = React.useCallback(
+    (resourceId: string): number => {
+      return calculateRowTotal(resourceId, consumers, allocations)
+    },
+    [consumers, allocations]
+  )
+
+  const getColumnTotal = React.useCallback(
+    (consumerId: string): number => {
+      return calculateColumnTotal(consumerId, resources, allocations)
+    },
+    [resources, allocations]
+  )
+
+  const isOverAllocated = React.useCallback(
+    (resourceId: string): boolean => {
+      const resource = resources.find((r) => r.id === resourceId)
+      const capacity = resource?.capacity || overAllocationThreshold
+      return getRowTotal(resourceId) > capacity
+    },
+    [resources, getRowTotal, overAllocationThreshold]
+  )
+
+  const getSummary = React.useCallback((): AllocationSummary => {
+    return calculateSummary(resources, consumers, allocations, overAllocationThreshold)
+  }, [resources, consumers, allocations, overAllocationThreshold])
+
+  const clearAll = React.useCallback(() => {
+    setAllocations(new Map())
+  }, [])
+
+  const reset = React.useCallback(() => {
+    const map = new Map<string, number>()
+    initialAllocationsRef.current.forEach((alloc) => {
+      const key = getAllocationKey(alloc.resourceId, alloc.consumerId)
+      map.set(key, alloc.value)
+    })
+    setAllocations(map)
+  }, [])
+
+  const exportAllocations = React.useCallback((): Allocation[] => {
+    const result: Allocation[] = []
+    allocations.forEach((value, key) => {
+      const [resourceId, consumerId] = key.split(":")
+      result.push({ resourceId, consumerId, value })
+    })
+    return result
+  }, [allocations])
+
+  const importAllocations = React.useCallback((newAllocations: Allocation[]) => {
+    const map = new Map<string, number>()
+    newAllocations.forEach((alloc) => {
+      const key = getAllocationKey(alloc.resourceId, alloc.consumerId)
+      map.set(key, alloc.value)
+    })
+    setAllocations(map)
+  }, [])
+
+  // Sorted and filtered resources
+  const filteredResources = React.useMemo(() => {
+    let filtered = [...resources]
+
+    // Apply search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase()
+      filtered = filtered.filter(
+        (r) =>
+          r.name.toLowerCase().includes(query) ||
+          r.category?.toLowerCase().includes(query)
+      )
+    }
+
+    // Apply allocation filter
+    switch (filterMode) {
+      case "over-allocated":
+        filtered = filtered.filter((r) => isOverAllocated(r.id))
+        break
+      case "under-allocated":
+        filtered = filtered.filter((r) => {
+          const total = getRowTotal(r.id)
+          const capacity = r.capacity || overAllocationThreshold
+          return total > 0 && total < capacity
+        })
+        break
+      case "unallocated":
+        filtered = filtered.filter((r) => getRowTotal(r.id) === 0)
+        break
+    }
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      let comparison = 0
+      switch (rowSort.field) {
+        case "name":
+          comparison = a.name.localeCompare(b.name)
+          break
+        case "total":
+          comparison = getRowTotal(a.id) - getRowTotal(b.id)
+          break
+      }
+      return rowSort.direction === "asc" ? comparison : -comparison
+    })
+
+    return filtered
+  }, [
+    resources,
+    searchQuery,
+    filterMode,
+    rowSort,
+    isOverAllocated,
+    getRowTotal,
+    overAllocationThreshold,
+  ])
+
+  // Sorted consumers
+  const sortedConsumers = React.useMemo(() => {
+    const sorted = [...consumers]
+    sorted.sort((a, b) => {
+      let comparison = 0
+      switch (columnSort.field) {
+        case "name":
+          comparison = a.name.localeCompare(b.name)
+          break
+        case "total":
+          comparison = getColumnTotal(a.id) - getColumnTotal(b.id)
+          break
+      }
+      return columnSort.direction === "asc" ? comparison : -comparison
+    })
+    return sorted
+  }, [consumers, columnSort, getColumnTotal])
+
+  return {
+    allocations,
+    setAllocation,
+    getAllocation,
+    getRowTotal,
+    getColumnTotal,
+    isOverAllocated,
+    getSummary,
+    clearAll,
+    reset,
+    exportAllocations,
+    importAllocations,
+    selectedCell,
+    setSelectedCell,
+    rowSort,
+    setRowSort,
+    columnSort,
+    setColumnSort,
+    filterMode,
+    setFilterMode,
+    searchQuery,
+    setSearchQuery,
+    filteredResources,
+    sortedConsumers,
+  }
+}
+
+// ============================================================================
+// Sub-Components
+// ============================================================================
+
+interface CellProps {
+  resourceId: string
+  consumerId: string
+  value: number
+  isSelected: boolean
+  isEditable: boolean
+  enableDrag: boolean
+  isOverAllocated: boolean
+  colorScheme: keyof typeof COLOR_SCHEMES
+  size: "sm" | "md" | "lg"
+  onSelect: () => void
+  onChange: (value: number) => void
+  onDragStart: (value: number) => void
+  onDrag: (deltaY: number) => void
+  onDragEnd: () => void
+}
+
+function AllocationCell({
+  value,
+  isSelected,
+  isEditable,
+  enableDrag,
+  isOverAllocated,
+  colorScheme,
+  size,
+  onSelect,
+  onChange,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+}: CellProps) {
+  const [editValue, setEditValue] = React.useState(value.toString())
+  const [isDragging, setIsDragging] = React.useState(false)
+  const dragStartY = React.useRef(0)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const config = CELL_SIZE_CONFIG[size]
+  const colors = COLOR_SCHEMES[colorScheme]
+  const level = getIntensityLevel(value)
+
+  React.useEffect(() => {
+    setEditValue(value.toString())
+  }, [value])
+
+  React.useEffect(() => {
+    if (isSelected && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [isSelected])
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const newValue = Math.max(0, parseInt(editValue) || 0)
+      onChange(newValue)
+      onSelect()
+    } else if (e.key === "Escape") {
+      setEditValue(value.toString())
+      onSelect()
+    }
+  }
+
+  const handleBlur = () => {
+    const newValue = Math.max(0, parseInt(editValue) || 0)
+    if (newValue !== value) {
+      onChange(newValue)
+    }
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!enableDrag || !isEditable) return
+    setIsDragging(true)
+    dragStartY.current = e.clientY
+    onDragStart(value)
+  }
+
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return
+      const deltaY = dragStartY.current - e.clientY
+      onDrag(deltaY)
+    },
+    [isDragging, onDrag]
+  )
+
+  const handleMouseUp = React.useCallback(() => {
+    if (!isDragging) return
+    setIsDragging(false)
+    onDragEnd()
+  }, [isDragging, onDragEnd])
+
+  React.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove)
+      window.addEventListener("mouseup", handleMouseUp)
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove)
+        window.removeEventListener("mouseup", handleMouseUp)
+      }
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp])
+
+  return (
+    <div
+      className={cn(
+        "relative flex items-center justify-center border border-border/50 transition-all duration-200",
+        config.cell,
+        config.padding,
+        colors.light[level],
+        colors.dark[level],
+        colors.text[level],
+        colors.darkText[level],
+        isEditable && "cursor-pointer hover:ring-2 hover:ring-primary/50",
+        isSelected && "ring-2 ring-primary z-10",
+        isDragging && "cursor-ns-resize",
+        isOverAllocated && value > 0 && "ring-2 ring-red-500 ring-inset"
+      )}
+      onClick={isEditable && !isSelected ? onSelect : undefined}
+      onMouseDown={handleMouseDown}
+    >
+      {isSelected && isEditable ? (
+        <input
+          ref={inputRef}
+          type="number"
+          min="0"
+          max="200"
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className={cn(
+            "w-full h-full text-center bg-transparent outline-none",
+            config.text,
+            "font-medium tabular-nums",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          )}
+        />
+      ) : (
+        <span className={cn(config.text, "font-medium tabular-nums select-none")}>
+          {value > 0 ? `${value}%` : "-"}
+        </span>
+      )}
+      {enableDrag && isEditable && !isSelected && (
+        <div className="absolute bottom-0.5 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-50 transition-opacity">
+          <GripHorizontal className={cn(config.icon, "text-current")} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface HeaderCellProps {
+  label: string
+  subtitle?: string
+  priority?: "low" | "medium" | "high" | "critical"
+  isColumn?: boolean
+  isSortable?: boolean
+  sortDirection?: SortDirection | null
+  size: "sm" | "md" | "lg"
+  onSort?: () => void
+}
+
+function HeaderCell({
+  label,
+  subtitle,
+  priority,
+  isColumn,
+  isSortable,
+  sortDirection,
+  size,
+  onSort,
+}: HeaderCellProps) {
+  const config = CELL_SIZE_CONFIG[size]
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center bg-muted/50 border border-border/50",
+        config.header,
+        config.padding,
+        isColumn && "min-w-max",
+        isSortable && "cursor-pointer hover:bg-muted transition-colors"
+      )}
+      onClick={onSort}
+    >
+      <div className="flex items-center gap-1">
+        <span
+          className={cn(
+            config.headerText,
+            "font-medium truncate max-w-full",
+            isColumn && "writing-mode-vertical-rl rotate-180"
+          )}
+          style={isColumn ? { writingMode: "vertical-rl" } : undefined}
+          title={label}
+        >
+          {label}
+        </span>
+        {isSortable && sortDirection && (
+          sortDirection === "asc" ? (
+            <ChevronUp className={config.icon} />
+          ) : (
+            <ChevronDown className={config.icon} />
+          )
+        )}
+      </div>
+      {subtitle && (
+        <span className={cn("text-muted-foreground", size === "sm" ? "text-[10px]" : "text-xs")}>
+          {subtitle}
+        </span>
+      )}
+      {priority && (
+        <span
+          className={cn(
+            "mt-0.5 px-1 rounded text-[10px] font-medium",
+            PRIORITY_COLORS[priority]
+          )}
+        >
+          {priority}
+        </span>
+      )}
+    </div>
+  )
+}
+
+interface TotalCellProps {
+  value: number
+  isOverAllocated?: boolean
+  maxValue?: number
+  size: "sm" | "md" | "lg"
+  isRow?: boolean
+}
+
+function TotalCell({ value, isOverAllocated, maxValue = 100, size, isRow }: TotalCellProps) {
+  const config = CELL_SIZE_CONFIG[size]
+  const percentage = (value / maxValue) * 100
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center border border-border/50",
+        isRow ? "bg-muted/30" : "bg-muted/50",
+        config.cell,
+        config.padding,
+        isOverAllocated && "bg-red-100 dark:bg-red-900/30"
+      )}
+    >
+      <span
+        className={cn(
+          config.text,
+          "font-bold tabular-nums",
+          isOverAllocated ? "text-red-600 dark:text-red-400" : "text-foreground"
+        )}
+      >
+        {value}%
+      </span>
+      {isRow && (
+        <div className="w-full mt-1 h-1 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn(
+              "h-full rounded-full transition-all duration-300",
+              isOverAllocated
+                ? "bg-red-500"
+                : percentage >= 80
+                  ? "bg-yellow-500"
+                  : "bg-green-500"
+            )}
+            style={{ width: `${Math.min(percentage, 100)}%` }}
+          />
+        </div>
+      )}
+      {isOverAllocated && (
+        <AlertTriangle className={cn(config.icon, "text-red-500 mt-0.5")} />
+      )}
+    </div>
+  )
+}
+
+interface SummaryCardProps {
+  summary: AllocationSummary
+  size: "sm" | "md" | "lg"
+}
+
+function SummaryCard({ summary, size }: SummaryCardProps) {
+  const config = CELL_SIZE_CONFIG[size]
+
+  const stats = [
+    { label: "Total Allocated", value: `${summary.totalAllocations.toFixed(0)}%`, color: "text-foreground" },
+    { label: "Avg per Cell", value: `${summary.averageAllocation.toFixed(1)}%`, color: "text-foreground" },
+    { label: "Utilization", value: `${summary.utilizationEfficiency.toFixed(1)}%`, color: "text-blue-600" },
+    { label: "Over-allocated", value: summary.overAllocatedCount.toString(), color: summary.overAllocatedCount > 0 ? "text-red-600" : "text-green-600" },
+    { label: "Fully Allocated", value: summary.fullyAllocatedCount.toString(), color: "text-green-600" },
+    { label: "Under-allocated", value: summary.underAllocatedCount.toString(), color: "text-yellow-600" },
+    { label: "Unallocated", value: summary.unallocatedCount.toString(), color: "text-muted-foreground" },
+  ]
+
+  return (
+    <div className="flex flex-wrap gap-4 p-4 bg-muted/30 rounded-lg border border-border">
+      {stats.map((stat) => (
+        <div key={stat.label} className="flex flex-col">
+          <span className={cn("text-muted-foreground", config.headerText)}>{stat.label}</span>
+          <span className={cn("font-bold tabular-nums", config.text, stat.color)}>
+            {stat.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaAllocationMatrix({
+  resources,
+  consumers,
+  allocations: initialAllocations = [],
+  editable = true,
+  enableDrag = true,
+  showRowTotals = true,
+  showColumnTotals = true,
+  showSummary = true,
+  showFilters = true,
+  showSearch = true,
+  overAllocationThreshold = 100,
+  cellSize = "md",
+  colorScheme = "blue",
+  onAllocationChange,
+  onSave,
+  formatValue,
+  className,
+}: WakaAllocationMatrixProps) {
+  const matrix = useAllocationMatrix({
+    resources,
+    consumers,
+    initialAllocations,
+    overAllocationThreshold,
+    onAllocationChange,
+  })
+
+  const [dragStartValue, setDragStartValue] = React.useState(0)
+  const [currentDragCell, setCurrentDragCell] = React.useState<{
+    resourceId: string
+    consumerId: string
+  } | null>(null)
+
+  const config = CELL_SIZE_CONFIG[cellSize]
+
+  const handleDragStart = (resourceId: string, consumerId: string, value: number) => {
+    setDragStartValue(value)
+    setCurrentDragCell({ resourceId, consumerId })
+  }
+
+  const handleDrag = (resourceId: string, consumerId: string, deltaY: number) => {
+    if (!currentDragCell) return
+    // Every 5 pixels of drag = 1% change
+    const newValue = Math.max(0, Math.min(200, dragStartValue + Math.round(deltaY / 5)))
+    matrix.setAllocation(resourceId, consumerId, newValue)
+  }
+
+  const handleDragEnd = () => {
+    setCurrentDragCell(null)
+  }
+
+  const handleSave = () => {
+    onSave?.(matrix.exportAllocations())
+  }
+
+  const toggleRowSort = () => {
+    matrix.setRowSort({
+      field: matrix.rowSort.field === "name" ? "total" : "name",
+      direction:
+        matrix.rowSort.field === matrix.rowSort.field && matrix.rowSort.direction === "asc"
+          ? "desc"
+          : "asc",
+    })
+  }
+
+  const toggleColumnSort = () => {
+    matrix.setColumnSort({
+      field: matrix.columnSort.field === "name" ? "total" : "name",
+      direction:
+        matrix.columnSort.field === matrix.columnSort.field && matrix.columnSort.direction === "asc"
+          ? "desc"
+          : "asc",
+    })
+  }
+
+  const summary = matrix.getSummary()
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Controls */}
+      {(showFilters || showSearch) && (
+        <div className="flex flex-wrap items-center gap-4">
+          {/* Search */}
+          {showSearch && (
+            <div className="relative">
+              <Search className={cn(config.icon, "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground")} />
+              <input
+                type="text"
+                placeholder="Search resources..."
+                value={matrix.searchQuery}
+                onChange={(e) => matrix.setSearchQuery(e.target.value)}
+                className={cn(
+                  "pl-10 pr-4 py-2 border border-border rounded-lg bg-background",
+                  config.text,
+                  "focus:outline-none focus:ring-2 focus:ring-primary/50"
+                )}
+              />
+              {matrix.searchQuery && (
+                <button
+                  onClick={() => matrix.setSearchQuery("")}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  <X className={config.icon} />
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Filters */}
+          {showFilters && (
+            <div className="flex items-center gap-2">
+              <Filter className={cn(config.icon, "text-muted-foreground")} />
+              <div className="flex rounded-lg border border-border overflow-hidden">
+                {(["all", "over-allocated", "under-allocated", "unallocated"] as FilterMode[]).map(
+                  (mode) => (
+                    <button
+                      key={mode}
+                      onClick={() => matrix.setFilterMode(mode)}
+                      className={cn(
+                        "px-3 py-1.5 transition-colors",
+                        config.text,
+                        matrix.filterMode === mode
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-background hover:bg-muted"
+                      )}
+                    >
+                      {mode === "all"
+                        ? "All"
+                        : mode === "over-allocated"
+                          ? "Over"
+                          : mode === "under-allocated"
+                            ? "Under"
+                            : "None"}
+                    </button>
+                  )
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Sort controls */}
+          <div className="flex items-center gap-2 ml-auto">
+            <button
+              onClick={toggleRowSort}
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg",
+                "bg-background hover:bg-muted transition-colors",
+                config.text
+              )}
+            >
+              <ArrowUpDown className={config.icon} />
+              Rows: {matrix.rowSort.field}
+            </button>
+            <button
+              onClick={toggleColumnSort}
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg",
+                "bg-background hover:bg-muted transition-colors",
+                config.text
+              )}
+            >
+              <ArrowUpDown className={config.icon} />
+              Columns: {matrix.columnSort.field}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Summary Statistics */}
+      {showSummary && <SummaryCard summary={summary} size={cellSize} />}
+
+      {/* Matrix Grid */}
+      <div className="overflow-auto">
+        <div className="inline-block min-w-full">
+          <div className="flex">
+            {/* Corner cell */}
+            <div
+              className={cn(
+                "flex items-center justify-center bg-muted/50 border border-border/50 sticky left-0 z-20",
+                config.header,
+                config.padding
+              )}
+            >
+              <Percent className={cn(config.icon, "text-muted-foreground")} />
+            </div>
+
+            {/* Column headers */}
+            {matrix.sortedConsumers.map((consumer) => (
+              <HeaderCell
+                key={consumer.id}
+                label={consumer.name}
+                priority={consumer.priority}
+                isColumn
+                isSortable
+                sortDirection={
+                  matrix.columnSort.field === "name"
+                    ? matrix.columnSort.direction
+                    : null
+                }
+                size={cellSize}
+                onSort={toggleColumnSort}
+              />
+            ))}
+
+            {/* Row totals header */}
+            {showRowTotals && (
+              <div
+                className={cn(
+                  "flex items-center justify-center bg-muted/50 border border-border/50",
+                  config.header,
+                  config.padding
+                )}
+              >
+                <span className={cn(config.headerText, "font-bold")}>Total</span>
+              </div>
+            )}
+          </div>
+
+          {/* Rows */}
+          {matrix.filteredResources.map((resource) => {
+            const rowTotal = matrix.getRowTotal(resource.id)
+            const capacity = resource.capacity || overAllocationThreshold
+            const isOverAllocated = rowTotal > capacity
+
+            return (
+              <div key={resource.id} className="flex group">
+                {/* Row header */}
+                <HeaderCell
+                  label={resource.name}
+                  subtitle={resource.category}
+                  isSortable
+                  sortDirection={
+                    matrix.rowSort.field === "name" ? matrix.rowSort.direction : null
+                  }
+                  size={cellSize}
+                  onSort={toggleRowSort}
+                />
+
+                {/* Cells */}
+                {matrix.sortedConsumers.map((consumer) => {
+                  const value = matrix.getAllocation(resource.id, consumer.id)
+                  const isSelected =
+                    matrix.selectedCell?.resourceId === resource.id &&
+                    matrix.selectedCell?.consumerId === consumer.id
+
+                  return (
+                    <AllocationCell
+                      key={`${resource.id}-${consumer.id}`}
+                      resourceId={resource.id}
+                      consumerId={consumer.id}
+                      value={value}
+                      isSelected={isSelected}
+                      isEditable={editable}
+                      enableDrag={enableDrag}
+                      isOverAllocated={isOverAllocated}
+                      colorScheme={colorScheme}
+                      size={cellSize}
+                      onSelect={() =>
+                        matrix.setSelectedCell(
+                          isSelected ? null : { resourceId: resource.id, consumerId: consumer.id }
+                        )
+                      }
+                      onChange={(newValue) =>
+                        matrix.setAllocation(resource.id, consumer.id, newValue)
+                      }
+                      onDragStart={(v) => handleDragStart(resource.id, consumer.id, v)}
+                      onDrag={(deltaY) => handleDrag(resource.id, consumer.id, deltaY)}
+                      onDragEnd={handleDragEnd}
+                    />
+                  )
+                })}
+
+                {/* Row total */}
+                {showRowTotals && (
+                  <TotalCell
+                    value={rowTotal}
+                    isOverAllocated={isOverAllocated}
+                    maxValue={capacity}
+                    size={cellSize}
+                    isRow
+                  />
+                )}
+              </div>
+            )
+          })}
+
+          {/* Column totals row */}
+          {showColumnTotals && (
+            <div className="flex">
+              {/* Total label */}
+              <div
+                className={cn(
+                  "flex items-center justify-center bg-muted/50 border border-border/50",
+                  config.header,
+                  config.padding
+                )}
+              >
+                <span className={cn(config.headerText, "font-bold")}>Total</span>
+              </div>
+
+              {/* Column totals */}
+              {matrix.sortedConsumers.map((consumer) => (
+                <TotalCell
+                  key={`total-${consumer.id}`}
+                  value={matrix.getColumnTotal(consumer.id)}
+                  size={cellSize}
+                />
+              ))}
+
+              {/* Grand total */}
+              {showRowTotals && (
+                <div
+                  className={cn(
+                    "flex items-center justify-center bg-muted border border-border/50 font-bold",
+                    config.cell,
+                    config.padding,
+                    config.text
+                  )}
+                >
+                  {summary.totalAllocations.toFixed(0)}%
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      {editable && onSave && (
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={matrix.reset}
+            className={cn(
+              "px-4 py-2 border border-border rounded-lg",
+              "bg-background hover:bg-muted transition-colors",
+              config.text
+            )}
+          >
+            Reset
+          </button>
+          <button
+            onClick={matrix.clearAll}
+            className={cn(
+              "px-4 py-2 border border-border rounded-lg",
+              "bg-background hover:bg-muted transition-colors",
+              config.text
+            )}
+          >
+            Clear All
+          </button>
+          <button
+            onClick={handleSave}
+            className={cn(
+              "px-4 py-2 rounded-lg",
+              "bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+              config.text
+            )}
+          >
+            Save Allocations
+          </button>
+        </div>
+      )}
+
+      {/* CSS Animations */}
+      <style>{`
+        @keyframes allocation-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.7; }
+        }
+
+        .allocation-cell-editing {
+          animation: allocation-pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes over-allocation-warning {
+          0%, 100% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.5); }
+          50% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 1); }
+        }
+
+        .over-allocated-cell {
+          animation: over-allocation-warning 2s ease-in-out infinite;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default WakaAllocationMatrix