@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-budget-burn/index.tsx

@@ -0,0 +1,1234 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { AlertTriangle, TrendingDown, TrendingUp, Calendar, DollarSign, Clock, Target } from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface SpendDataPoint {
+  /** Date of the spend */
+  date: Date
+  /** Amount spent on this day */
+  amount: number
+  /** Category breakdown (optional) */
+  categories?: Record<string, number>
+}
+
+export interface BudgetCategory {
+  /** Unique identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Allocated budget for this category */
+  budget: number
+  /** Current spend for this category */
+  spent: number
+  /** Custom color */
+  color?: string
+}
+
+export interface BudgetBurnState {
+  /** Total budget amount */
+  totalBudget: number
+  /** Total amount spent */
+  totalSpent: number
+  /** Budget period start date */
+  startDate: Date
+  /** Budget period end date */
+  endDate: Date
+  /** Daily spending data */
+  spendHistory: SpendDataPoint[]
+  /** Budget categories */
+  categories: BudgetCategory[]
+  /** Current burn rate (spend per day) */
+  burnRate: number
+  /** Ideal burn rate to stay on budget */
+  idealBurnRate: number
+  /** Projected depletion date */
+  depletionDate: Date | null
+  /** Days remaining in period */
+  daysRemaining: number
+  /** Time elapsed percentage */
+  timeElapsedPercent: number
+  /** Budget used percentage */
+  budgetUsedPercent: number
+  /** Danger zone (burn rate is too high) */
+  isDangerZone: boolean
+  /** Warning zone (burn rate approaching danger) */
+  isWarningZone: boolean
+}
+
+export interface WakaBudgetBurnProps {
+  /** Total budget amount */
+  budget: number
+  /** Budget period start date */
+  startDate: Date
+  /** Budget period end date */
+  endDate: Date
+  /** Daily spending history */
+  spendHistory: SpendDataPoint[]
+  /** Budget categories (optional) */
+  categories?: BudgetCategory[]
+  /** Currency symbol */
+  currency?: string
+  /** Danger threshold (percentage over ideal burn rate) */
+  dangerThreshold?: number
+  /** Warning threshold (percentage over ideal burn rate) */
+  warningThreshold?: number
+  /** Show projected burn line */
+  showProjection?: boolean
+  /** Show ideal burn line */
+  showIdealLine?: boolean
+  /** Show category breakdown */
+  showCategories?: boolean
+  /** Show daily/weekly/monthly trends */
+  showTrends?: boolean
+  /** Enable animations */
+  animated?: boolean
+  /** Chart height in pixels */
+  height?: number
+  /** Custom value formatter */
+  formatValue?: (value: number) => string
+  /** Callback when danger zone is entered */
+  onDangerZone?: () => void
+  /** Callback when budget is depleted */
+  onBudgetDepleted?: () => void
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Default Colors
+// ============================================================================
+
+const defaultCategoryColors = [
+  "#3b82f6", // blue
+  "#ef4444", // red
+  "#22c55e", // green
+  "#f59e0b", // amber
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#14b8a6", // teal
+  "#f97316", // orange
+]
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function calculateBurnState(
+  budget: number,
+  startDate: Date,
+  endDate: Date,
+  spendHistory: SpendDataPoint[],
+  categories: BudgetCategory[],
+  dangerThreshold: number,
+  warningThreshold: number
+): BudgetBurnState {
+  const now = new Date()
+  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))
+  const daysElapsed = Math.max(0, Math.ceil((now.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)))
+  const daysRemaining = Math.max(0, totalDays - daysElapsed)
+
+  const totalSpent = spendHistory.reduce((sum, point) => sum + point.amount, 0)
+  const budgetRemaining = Math.max(0, budget - totalSpent)
+
+  const timeElapsedPercent = Math.min(100, (daysElapsed / totalDays) * 100)
+  const budgetUsedPercent = Math.min(100, (totalSpent / budget) * 100)
+
+  // Calculate burn rates
+  const burnRate = daysElapsed > 0 ? totalSpent / daysElapsed : 0
+  const idealBurnRate = budget / totalDays
+
+  // Project depletion date
+  let depletionDate: Date | null = null
+  if (burnRate > 0 && budgetRemaining > 0) {
+    const daysUntilDepletion = budgetRemaining / burnRate
+    depletionDate = new Date(now.getTime() + daysUntilDepletion * 24 * 60 * 60 * 1000)
+  } else if (totalSpent >= budget) {
+    depletionDate = now
+  }
+
+  // Determine zones
+  const burnRateRatio = idealBurnRate > 0 ? burnRate / idealBurnRate : 0
+  const isDangerZone = burnRateRatio >= 1 + dangerThreshold / 100
+  const isWarningZone = !isDangerZone && burnRateRatio >= 1 + warningThreshold / 100
+
+  return {
+    totalBudget: budget,
+    totalSpent,
+    startDate,
+    endDate,
+    spendHistory,
+    categories,
+    burnRate,
+    idealBurnRate,
+    depletionDate,
+    daysRemaining,
+    timeElapsedPercent,
+    budgetUsedPercent,
+    isDangerZone,
+    isWarningZone,
+  }
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" })
+}
+
+function calculateCumulativeSpend(spendHistory: SpendDataPoint[]): Array<{ date: Date; cumulative: number }> {
+  let cumulative = 0
+  return spendHistory
+    .sort((a, b) => a.date.getTime() - b.date.getTime())
+    .map((point) => {
+      cumulative += point.amount
+      return { date: point.date, cumulative }
+    })
+}
+
+function calculateTrend(values: number[]): { direction: "up" | "down" | "neutral"; percentage: number } {
+  if (values.length < 2) return { direction: "neutral", percentage: 0 }
+
+  const recentAvg = values.slice(-3).reduce((a, b) => a + b, 0) / Math.min(3, values.length)
+  const olderAvg = values.slice(0, -3).reduce((a, b) => a + b, 0) / Math.max(1, values.length - 3)
+
+  if (olderAvg === 0) return { direction: "neutral", percentage: 0 }
+
+  const change = ((recentAvg - olderAvg) / olderAvg) * 100
+
+  if (Math.abs(change) < 5) return { direction: "neutral", percentage: 0 }
+  return {
+    direction: change > 0 ? "up" : "down",
+    percentage: Math.abs(change),
+  }
+}
+
+// ============================================================================
+// Burn Chart Component
+// ============================================================================
+
+interface BurnChartProps {
+  state: BudgetBurnState
+  width: number
+  height: number
+  showProjection: boolean
+  showIdealLine: boolean
+  animated: boolean
+  formatValue: (value: number) => string
+}
+
+function BurnChart({
+  state,
+  width,
+  height,
+  showProjection,
+  showIdealLine,
+  animated,
+  formatValue,
+}: BurnChartProps) {
+  const [animationProgress, setAnimationProgress] = React.useState(animated ? 0 : 1)
+  const [hoveredPoint, setHoveredPoint] = React.useState<{
+    index: number
+    x: number
+    y: number
+    value: number
+    date: Date
+  } | null>(null)
+
+  const padding = { top: 20, right: 20, bottom: 30, left: 60 }
+  const chartWidth = width - padding.left - padding.right
+  const chartHeight = height - padding.top - padding.bottom
+
+  // Calculate cumulative spending
+  const cumulativeData = React.useMemo(
+    () => calculateCumulativeSpend(state.spendHistory),
+    [state.spendHistory]
+  )
+
+  // Calculate total days for x-axis
+  const totalDays = Math.ceil(
+    (state.endDate.getTime() - state.startDate.getTime()) / (1000 * 60 * 60 * 24)
+  )
+
+  // Scale functions
+  const xScale = (date: Date) => {
+    const dayIndex = Math.ceil(
+      (date.getTime() - state.startDate.getTime()) / (1000 * 60 * 60 * 24)
+    )
+    return padding.left + (dayIndex / totalDays) * chartWidth
+  }
+
+  const yScale = (value: number) => {
+    return padding.top + chartHeight - (value / state.totalBudget) * chartHeight
+  }
+
+  // Generate path for actual burn line
+  const burnPath = React.useMemo(() => {
+    if (cumulativeData.length === 0) return ""
+
+    const points = cumulativeData.map((d) => ({
+      x: xScale(d.date),
+      y: yScale(d.cumulative),
+    }))
+
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ")
+  }, [cumulativeData, chartWidth, chartHeight])
+
+  // Generate ideal burn line
+  const idealPath = React.useMemo(() => {
+    const startX = padding.left
+    const startY = yScale(0)
+    const endX = padding.left + chartWidth
+    const endY = yScale(state.totalBudget)
+    return `M ${startX} ${startY} L ${endX} ${endY}`
+  }, [chartWidth, chartHeight, state.totalBudget])
+
+  // Generate projection line
+  const projectionPath = React.useMemo(() => {
+    if (cumulativeData.length === 0 || state.burnRate === 0) return ""
+
+    const lastPoint = cumulativeData[cumulativeData.length - 1]
+    const startX = xScale(lastPoint.date)
+    const startY = yScale(lastPoint.cumulative)
+
+    // Project to budget depletion or end date
+    const endDate = state.depletionDate && state.depletionDate < state.endDate
+      ? state.depletionDate
+      : state.endDate
+
+    const daysToProject = Math.ceil(
+      (endDate.getTime() - lastPoint.date.getTime()) / (1000 * 60 * 60 * 24)
+    )
+    const projectedSpend = lastPoint.cumulative + state.burnRate * daysToProject
+
+    const endX = xScale(endDate)
+    const endY = yScale(Math.min(projectedSpend, state.totalBudget))
+
+    return `M ${startX} ${startY} L ${endX} ${endY}`
+  }, [cumulativeData, state.burnRate, state.depletionDate, state.endDate, chartWidth, chartHeight])
+
+  // Danger zone area (above ideal burn)
+  const dangerZonePath = React.useMemo(() => {
+    const topLeft = `${padding.left},${padding.top}`
+    const topRight = `${padding.left + chartWidth},${padding.top}`
+    const bottomRight = `${padding.left + chartWidth},${yScale(state.totalBudget)}`
+    const bottomLeft = `${padding.left},${yScale(0)}`
+    return `M ${topLeft} L ${topRight} L ${bottomRight} L ${bottomLeft} Z`
+  }, [chartWidth, chartHeight, state.totalBudget])
+
+  // Animation effect
+  React.useEffect(() => {
+    if (!animated) {
+      setAnimationProgress(1)
+      return
+    }
+
+    const duration = 1500
+    const startTime = Date.now()
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      const eased = 1 - Math.pow(1 - progress, 3)
+      setAnimationProgress(eased)
+
+      if (progress < 1) {
+        requestAnimationFrame(animate)
+      }
+    }
+
+    requestAnimationFrame(animate)
+  }, [animated])
+
+  // Generate tick marks
+  const xTicks = React.useMemo(() => {
+    const ticks: Array<{ date: Date; x: number }> = []
+    const tickCount = Math.min(6, totalDays)
+
+    for (let i = 0; i <= tickCount; i++) {
+      const date = new Date(
+        state.startDate.getTime() + (i / tickCount) * (state.endDate.getTime() - state.startDate.getTime())
+      )
+      ticks.push({ date, x: xScale(date) })
+    }
+
+    return ticks
+  }, [state.startDate, state.endDate, totalDays, chartWidth])
+
+  const yTicks = React.useMemo(() => {
+    const ticks: Array<{ value: number; y: number }> = []
+    const tickCount = 4
+
+    for (let i = 0; i <= tickCount; i++) {
+      const value = (i / tickCount) * state.totalBudget
+      ticks.push({ value, y: yScale(value) })
+    }
+
+    return ticks
+  }, [state.totalBudget, chartHeight])
+
+  // Handle hover on burn line points
+  const handlePointHover = (index: number) => {
+    const point = cumulativeData[index]
+    if (point) {
+      setHoveredPoint({
+        index,
+        x: xScale(point.date),
+        y: yScale(point.cumulative),
+        value: point.cumulative,
+        date: point.date,
+      })
+    }
+  }
+
+  return (
+    <div className="relative">
+      <svg width={width} height={height} className="overflow-visible">
+        <defs>
+          {/* Gradient for danger zone */}
+          <linearGradient id="dangerZoneGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#ef4444" stopOpacity="0.15" />
+            <stop offset="100%" stopColor="#ef4444" stopOpacity="0.02" />
+          </linearGradient>
+
+          {/* Gradient for burn line */}
+          <linearGradient id="burnLineGradient" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#3b82f6" />
+            <stop offset="100%" stopColor={state.isDangerZone ? "#ef4444" : state.isWarningZone ? "#f59e0b" : "#22c55e"} />
+          </linearGradient>
+
+          {/* Clip path for animation */}
+          <clipPath id="burnLineClip">
+            <rect
+              x={padding.left}
+              y={padding.top}
+              width={chartWidth * animationProgress}
+              height={chartHeight}
+            />
+          </clipPath>
+        </defs>
+
+        {/* Background grid */}
+        <g className="text-muted-foreground/20">
+          {yTicks.map((tick, i) => (
+            <line
+              key={i}
+              x1={padding.left}
+              y1={tick.y}
+              x2={padding.left + chartWidth}
+              y2={tick.y}
+              stroke="currentColor"
+              strokeDasharray="4,4"
+            />
+          ))}
+        </g>
+
+        {/* Danger zone fill */}
+        <path
+          d={`M ${padding.left} ${padding.top}
+              L ${padding.left + chartWidth} ${yScale(state.totalBudget)}
+              L ${padding.left + chartWidth} ${padding.top} Z`}
+          fill="url(#dangerZoneGradient)"
+        />
+
+        {/* Y-axis */}
+        <g className="text-muted-foreground text-xs">
+          {yTicks.map((tick, i) => (
+            <g key={i}>
+              <text
+                x={padding.left - 8}
+                y={tick.y}
+                textAnchor="end"
+                dominantBaseline="middle"
+                fill="currentColor"
+              >
+                {formatValue(tick.value)}
+              </text>
+            </g>
+          ))}
+        </g>
+
+        {/* X-axis */}
+        <g className="text-muted-foreground text-xs">
+          {xTicks.map((tick, i) => (
+            <text
+              key={i}
+              x={tick.x}
+              y={height - 8}
+              textAnchor="middle"
+              fill="currentColor"
+            >
+              {formatDate(tick.date)}
+            </text>
+          ))}
+        </g>
+
+        {/* Ideal burn line */}
+        {showIdealLine && (
+          <path
+            d={idealPath}
+            fill="none"
+            stroke="#94a3b8"
+            strokeWidth="2"
+            strokeDasharray="8,4"
+            opacity="0.6"
+          />
+        )}
+
+        {/* Actual burn line with animation */}
+        <g clipPath="url(#burnLineClip)">
+          <path
+            d={burnPath}
+            fill="none"
+            stroke="url(#burnLineGradient)"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+
+        {/* Projection line */}
+        {showProjection && projectionPath && animationProgress === 1 && (
+          <path
+            d={projectionPath}
+            fill="none"
+            stroke={state.isDangerZone ? "#ef4444" : state.isWarningZone ? "#f59e0b" : "#22c55e"}
+            strokeWidth="2"
+            strokeDasharray="6,3"
+            opacity="0.6"
+            className="animate-burn-dash"
+          />
+        )}
+
+        {/* Current position marker */}
+        {cumulativeData.length > 0 && animationProgress === 1 && (
+          <g>
+            <circle
+              cx={xScale(cumulativeData[cumulativeData.length - 1].date)}
+              cy={yScale(cumulativeData[cumulativeData.length - 1].cumulative)}
+              r="6"
+              fill={state.isDangerZone ? "#ef4444" : state.isWarningZone ? "#f59e0b" : "#3b82f6"}
+              stroke="white"
+              strokeWidth="2"
+              className="animate-burn-pulse"
+            />
+          </g>
+        )}
+
+        {/* Budget line */}
+        <line
+          x1={padding.left}
+          y1={yScale(state.totalBudget)}
+          x2={padding.left + chartWidth}
+          y2={yScale(state.totalBudget)}
+          stroke="#ef4444"
+          strokeWidth="2"
+          strokeDasharray="4,2"
+        />
+
+        {/* Today marker */}
+        {state.timeElapsedPercent < 100 && (
+          <g>
+            <line
+              x1={padding.left + (state.timeElapsedPercent / 100) * chartWidth}
+              y1={padding.top}
+              x2={padding.left + (state.timeElapsedPercent / 100) * chartWidth}
+              y2={padding.top + chartHeight}
+              stroke="#6366f1"
+              strokeWidth="1"
+              strokeDasharray="4,4"
+              opacity="0.5"
+            />
+            <text
+              x={padding.left + (state.timeElapsedPercent / 100) * chartWidth}
+              y={padding.top - 6}
+              textAnchor="middle"
+              className="text-xs fill-indigo-500 font-medium"
+            >
+              Today
+            </text>
+          </g>
+        )}
+
+        {/* Hover points */}
+        {animationProgress === 1 && cumulativeData.map((point, i) => (
+          <circle
+            key={i}
+            cx={xScale(point.date)}
+            cy={yScale(point.cumulative)}
+            r="8"
+            fill="transparent"
+            className="cursor-pointer"
+            onMouseEnter={() => handlePointHover(i)}
+            onMouseLeave={() => setHoveredPoint(null)}
+          />
+        ))}
+
+        {/* Depletion date marker */}
+        {showProjection && state.depletionDate && state.depletionDate <= state.endDate && animationProgress === 1 && (
+          <g>
+            <line
+              x1={xScale(state.depletionDate)}
+              y1={padding.top}
+              x2={xScale(state.depletionDate)}
+              y2={padding.top + chartHeight}
+              stroke="#ef4444"
+              strokeWidth="2"
+              strokeDasharray="4,4"
+            />
+            <g transform={`translate(${xScale(state.depletionDate)}, ${padding.top + 10})`}>
+              <rect
+                x="-40"
+                y="-8"
+                width="80"
+                height="16"
+                rx="4"
+                fill="#ef4444"
+              />
+              <text
+                textAnchor="middle"
+                dominantBaseline="middle"
+                className="text-[10px] font-medium fill-white"
+              >
+                Depleted
+              </text>
+            </g>
+          </g>
+        )}
+      </svg>
+
+      {/* Tooltip */}
+      {hoveredPoint && (
+        <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"
+          )}
+          style={{
+            left: hoveredPoint.x,
+            top: hoveredPoint.y - 60,
+            transform: "translateX(-50%)",
+          }}
+        >
+          <div className="font-semibold">{formatDate(hoveredPoint.date)}</div>
+          <div className="text-xs opacity-80">
+            Cumulative: {formatValue(hoveredPoint.value)}
+          </div>
+          <div
+            className="absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-3 rotate-45 bg-foreground"
+          />
+        </div>
+      )}
+
+      {/* CSS Animations */}
+      <style>{`
+        @keyframes burn-pulse {
+          0%, 100% { transform: scale(1); opacity: 1; }
+          50% { transform: scale(1.2); opacity: 0.8; }
+        }
+        @keyframes burn-dash {
+          0% { stroke-dashoffset: 0; }
+          100% { stroke-dashoffset: 18; }
+        }
+        .animate-burn-pulse {
+          animation: burn-pulse 2s ease-in-out infinite;
+          transform-origin: center;
+          transform-box: fill-box;
+        }
+        .animate-burn-dash {
+          animation: burn-dash 1s linear infinite;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+// ============================================================================
+// Stats Panel Component
+// ============================================================================
+
+interface StatsPanelProps {
+  state: BudgetBurnState
+  formatValue: (value: number) => string
+}
+
+function StatsPanel({ state, formatValue }: StatsPanelProps) {
+  const budgetRemaining = state.totalBudget - state.totalSpent
+  const burnRateVsIdeal = state.idealBurnRate > 0
+    ? ((state.burnRate - state.idealBurnRate) / state.idealBurnRate) * 100
+    : 0
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {/* Budget Remaining */}
+      <div className="rounded-lg border bg-card p-4">
+        <div className="flex items-center gap-2 text-muted-foreground text-sm mb-1">
+          <DollarSign className="h-4 w-4" />
+          <span>Remaining</span>
+        </div>
+        <div className={cn(
+          "text-2xl font-bold",
+          budgetRemaining < 0 && "text-red-600"
+        )}>
+          {formatValue(Math.max(0, budgetRemaining))}
+        </div>
+        <div className="text-xs text-muted-foreground mt-1">
+          {(100 - state.budgetUsedPercent).toFixed(1)}% of budget
+        </div>
+      </div>
+
+      {/* Burn Rate */}
+      <div className="rounded-lg border bg-card p-4">
+        <div className="flex items-center gap-2 text-muted-foreground text-sm mb-1">
+          <TrendingDown className="h-4 w-4" />
+          <span>Burn Rate</span>
+        </div>
+        <div className={cn(
+          "text-2xl font-bold",
+          state.isDangerZone && "text-red-600",
+          state.isWarningZone && "text-amber-600"
+        )}>
+          {formatValue(state.burnRate)}/day
+        </div>
+        <div className={cn(
+          "text-xs mt-1 flex items-center gap-1",
+          burnRateVsIdeal > 0 ? "text-red-600" : "text-green-600"
+        )}>
+          {burnRateVsIdeal > 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
+          {Math.abs(burnRateVsIdeal).toFixed(1)}% vs ideal
+        </div>
+      </div>
+
+      {/* Days Remaining */}
+      <div className="rounded-lg border bg-card p-4">
+        <div className="flex items-center gap-2 text-muted-foreground text-sm mb-1">
+          <Clock className="h-4 w-4" />
+          <span>Days Left</span>
+        </div>
+        <div className="text-2xl font-bold">
+          {state.daysRemaining}
+        </div>
+        <div className="text-xs text-muted-foreground mt-1">
+          {state.timeElapsedPercent.toFixed(1)}% elapsed
+        </div>
+      </div>
+
+      {/* Depletion Forecast */}
+      <div className="rounded-lg border bg-card p-4">
+        <div className="flex items-center gap-2 text-muted-foreground text-sm mb-1">
+          <Calendar className="h-4 w-4" />
+          <span>Depletion Date</span>
+        </div>
+        <div className={cn(
+          "text-lg font-bold",
+          state.depletionDate && state.depletionDate < state.endDate && "text-red-600"
+        )}>
+          {state.depletionDate
+            ? formatDate(state.depletionDate)
+            : "On Track"}
+        </div>
+        {state.depletionDate && state.depletionDate < state.endDate && (
+          <div className="text-xs text-red-600 mt-1 flex items-center gap-1">
+            <AlertTriangle className="h-3 w-3" />
+            Before period ends
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Trend Indicators Component
+// ============================================================================
+
+interface TrendIndicatorsProps {
+  state: BudgetBurnState
+  formatValue: (value: number) => string
+}
+
+function TrendIndicators({ state, formatValue }: TrendIndicatorsProps) {
+  const dailyAmounts = state.spendHistory.map((p) => p.amount)
+  const dailyTrend = calculateTrend(dailyAmounts)
+
+  // Calculate weekly averages
+  const weeklyAverages: number[] = []
+  for (let i = 0; i < dailyAmounts.length; i += 7) {
+    const weekData = dailyAmounts.slice(i, i + 7)
+    if (weekData.length > 0) {
+      weeklyAverages.push(weekData.reduce((a, b) => a + b, 0) / weekData.length)
+    }
+  }
+  const weeklyTrend = calculateTrend(weeklyAverages)
+
+  const avgDaily = dailyAmounts.length > 0
+    ? dailyAmounts.reduce((a, b) => a + b, 0) / dailyAmounts.length
+    : 0
+  const avgWeekly = avgDaily * 7
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {/* Daily Trend */}
+      <div className="flex items-center gap-3 px-4 py-2 rounded-lg bg-muted/50">
+        <div>
+          <div className="text-xs text-muted-foreground">Daily Avg</div>
+          <div className="font-semibold">{formatValue(avgDaily)}</div>
+        </div>
+        {dailyTrend.direction !== "neutral" && (
+          <div className={cn(
+            "flex items-center gap-1 text-sm font-medium",
+            dailyTrend.direction === "up" ? "text-red-600" : "text-green-600"
+          )}>
+            {dailyTrend.direction === "up" ? (
+              <TrendingUp className="h-4 w-4" />
+            ) : (
+              <TrendingDown className="h-4 w-4" />
+            )}
+            {dailyTrend.percentage.toFixed(1)}%
+          </div>
+        )}
+      </div>
+
+      {/* Weekly Trend */}
+      <div className="flex items-center gap-3 px-4 py-2 rounded-lg bg-muted/50">
+        <div>
+          <div className="text-xs text-muted-foreground">Weekly Avg</div>
+          <div className="font-semibold">{formatValue(avgWeekly)}</div>
+        </div>
+        {weeklyTrend.direction !== "neutral" && (
+          <div className={cn(
+            "flex items-center gap-1 text-sm font-medium",
+            weeklyTrend.direction === "up" ? "text-red-600" : "text-green-600"
+          )}>
+            {weeklyTrend.direction === "up" ? (
+              <TrendingUp className="h-4 w-4" />
+            ) : (
+              <TrendingDown className="h-4 w-4" />
+            )}
+            {weeklyTrend.percentage.toFixed(1)}%
+          </div>
+        )}
+      </div>
+
+      {/* Monthly projection */}
+      <div className="flex items-center gap-3 px-4 py-2 rounded-lg bg-muted/50">
+        <div>
+          <div className="text-xs text-muted-foreground">Monthly Proj.</div>
+          <div className="font-semibold">{formatValue(state.burnRate * 30)}</div>
+        </div>
+        <div className={cn(
+          "text-xs",
+          state.burnRate * 30 > state.totalBudget ? "text-red-600" : "text-green-600"
+        )}>
+          {state.burnRate * 30 > state.totalBudget ? "Over budget" : "On track"}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Category Breakdown Component
+// ============================================================================
+
+interface CategoryBreakdownProps {
+  categories: BudgetCategory[]
+  formatValue: (value: number) => string
+}
+
+function CategoryBreakdown({ categories, formatValue }: CategoryBreakdownProps) {
+  return (
+    <div className="space-y-3">
+      <div className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+        <Target className="h-4 w-4" />
+        Category Breakdown
+      </div>
+      <div className="space-y-2">
+        {categories.map((category, index) => {
+          const percentage = (category.spent / category.budget) * 100
+          const isOverBudget = category.spent > category.budget
+          const color = category.color || defaultCategoryColors[index % defaultCategoryColors.length]
+
+          return (
+            <div key={category.id} className="space-y-1">
+              <div className="flex items-center justify-between text-sm">
+                <div className="flex items-center gap-2">
+                  <span
+                    className="w-3 h-3 rounded-full"
+                    style={{ backgroundColor: color }}
+                  />
+                  <span className="font-medium">{category.name}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className={cn(isOverBudget && "text-red-600")}>
+                    {formatValue(category.spent)}
+                  </span>
+                  <span className="text-muted-foreground">
+                    / {formatValue(category.budget)}
+                  </span>
+                </div>
+              </div>
+              <div className="h-2 rounded-full bg-muted overflow-hidden">
+                <div
+                  className={cn(
+                    "h-full rounded-full transition-all duration-500",
+                    isOverBudget && "animate-pulse"
+                  )}
+                  style={{
+                    width: `${Math.min(percentage, 100)}%`,
+                    backgroundColor: isOverBudget ? "#ef4444" : color,
+                  }}
+                />
+              </div>
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>{percentage.toFixed(1)}% used</span>
+                <span>
+                  {isOverBudget
+                    ? `${formatValue(category.spent - category.budget)} over`
+                    : `${formatValue(category.budget - category.spent)} left`}
+                </span>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Alert Banner Component
+// ============================================================================
+
+interface AlertBannerProps {
+  state: BudgetBurnState
+  formatValue: (value: number) => string
+}
+
+function AlertBanner({ state, formatValue }: AlertBannerProps) {
+  if (!state.isDangerZone && !state.isWarningZone) return null
+
+  return (
+    <div className={cn(
+      "flex items-center gap-3 px-4 py-3 rounded-lg",
+      state.isDangerZone
+        ? "bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-200"
+        : "bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-200"
+    )}>
+      <AlertTriangle className="h-5 w-5 flex-shrink-0" />
+      <div>
+        <div className="font-semibold">
+          {state.isDangerZone ? "Budget at Risk!" : "Budget Warning"}
+        </div>
+        <div className="text-sm opacity-90">
+          {state.isDangerZone
+            ? `At current burn rate of ${formatValue(state.burnRate)}/day, budget will deplete ${
+                state.depletionDate ? `on ${formatDate(state.depletionDate)}` : "before period ends"
+              }.`
+            : `Spending is ${((state.burnRate / state.idealBurnRate - 1) * 100).toFixed(0)}% above ideal burn rate. Consider reducing expenses.`}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaBudgetBurn({
+  budget,
+  startDate,
+  endDate,
+  spendHistory,
+  categories = [],
+  currency = "$",
+  dangerThreshold = 30,
+  warningThreshold = 15,
+  showProjection = true,
+  showIdealLine = true,
+  showCategories = true,
+  showTrends = true,
+  animated = true,
+  height = 300,
+  formatValue: customFormatValue,
+  onDangerZone,
+  onBudgetDepleted,
+  className,
+}: WakaBudgetBurnProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [containerWidth, setContainerWidth] = React.useState(600)
+
+  // Calculate burn state
+  const state = React.useMemo(
+    () => calculateBurnState(budget, startDate, endDate, spendHistory, categories, dangerThreshold, warningThreshold),
+    [budget, startDate, endDate, spendHistory, categories, dangerThreshold, warningThreshold]
+  )
+
+  // Default value formatter
+  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 formatValue = customFormatValue || defaultFormatValue
+
+  // Track danger zone changes
+  const prevDangerZoneRef = React.useRef(state.isDangerZone)
+  const prevDepletedRef = React.useRef(state.totalSpent >= state.totalBudget)
+
+  React.useEffect(() => {
+    if (state.isDangerZone && !prevDangerZoneRef.current) {
+      onDangerZone?.()
+    }
+    prevDangerZoneRef.current = state.isDangerZone
+
+    const isDepleted = state.totalSpent >= state.totalBudget
+    if (isDepleted && !prevDepletedRef.current) {
+      onBudgetDepleted?.()
+    }
+    prevDepletedRef.current = isDepleted
+  }, [state.isDangerZone, state.totalSpent, state.totalBudget, onDangerZone, onBudgetDepleted])
+
+  // Resize observer for responsive chart
+  React.useEffect(() => {
+    if (!containerRef.current) return
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width)
+      }
+    })
+
+    observer.observe(containerRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div ref={containerRef} className={cn("space-y-6", className)}>
+      {/* Alert Banner */}
+      <AlertBanner state={state} formatValue={formatValue} />
+
+      {/* Stats Panel */}
+      <StatsPanel state={state} formatValue={formatValue} />
+
+      {/* Burn Chart */}
+      <div className="rounded-lg border bg-card p-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="text-sm font-medium">Budget Burn-down</div>
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            {showIdealLine && (
+              <div className="flex items-center gap-2">
+                <div className="w-6 h-0.5 bg-slate-400" style={{ backgroundImage: "repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 8px)" }} />
+                <span>Ideal</span>
+              </div>
+            )}
+            {showProjection && (
+              <div className="flex items-center gap-2">
+                <div className="w-6 h-0.5" style={{ backgroundImage: "repeating-linear-gradient(90deg, #22c55e 0, #22c55e 3px, transparent 3px, transparent 6px)" }} />
+                <span>Projected</span>
+              </div>
+            )}
+            <div className="flex items-center gap-2">
+              <div className="w-6 h-0.5 bg-gradient-to-r from-blue-500 to-green-500 rounded" />
+              <span>Actual</span>
+            </div>
+          </div>
+        </div>
+        <BurnChart
+          state={state}
+          width={containerWidth - 32}
+          height={height}
+          showProjection={showProjection}
+          showIdealLine={showIdealLine}
+          animated={animated}
+          formatValue={formatValue}
+        />
+      </div>
+
+      {/* Trends */}
+      {showTrends && spendHistory.length > 0 && (
+        <TrendIndicators state={state} formatValue={formatValue} />
+      )}
+
+      {/* Category Breakdown */}
+      {showCategories && categories.length > 0 && (
+        <div className="rounded-lg border bg-card p-4">
+          <CategoryBreakdown categories={categories} formatValue={formatValue} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Custom Hook: useBudgetBurn
+// ============================================================================
+
+export interface UseBudgetBurnOptions {
+  /** Total budget amount */
+  budget: number
+  /** Budget period start date */
+  startDate: Date
+  /** Budget period end date */
+  endDate: Date
+  /** Initial spending history */
+  initialHistory?: SpendDataPoint[]
+  /** Initial categories */
+  initialCategories?: BudgetCategory[]
+  /** Danger threshold percentage */
+  dangerThreshold?: number
+  /** Warning threshold percentage */
+  warningThreshold?: number
+  /** Callback when danger zone is entered */
+  onDangerZone?: () => void
+  /** Callback when budget is depleted */
+  onBudgetDepleted?: () => void
+}
+
+export function useBudgetBurn({
+  budget,
+  startDate,
+  endDate,
+  initialHistory = [],
+  initialCategories = [],
+  dangerThreshold = 30,
+  warningThreshold = 15,
+  onDangerZone,
+  onBudgetDepleted,
+}: UseBudgetBurnOptions) {
+  const [spendHistory, setSpendHistory] = React.useState<SpendDataPoint[]>(initialHistory)
+  const [categories, setCategories] = React.useState<BudgetCategory[]>(initialCategories)
+
+  // Calculate state
+  const state = React.useMemo(
+    () => calculateBurnState(budget, startDate, endDate, spendHistory, categories, dangerThreshold, warningThreshold),
+    [budget, startDate, endDate, spendHistory, categories, dangerThreshold, warningThreshold]
+  )
+
+  // Track danger zone and depletion
+  const prevDangerZoneRef = React.useRef(state.isDangerZone)
+  const prevDepletedRef = React.useRef(state.totalSpent >= state.totalBudget)
+
+  React.useEffect(() => {
+    if (state.isDangerZone && !prevDangerZoneRef.current) {
+      onDangerZone?.()
+    }
+    prevDangerZoneRef.current = state.isDangerZone
+
+    const isDepleted = state.totalSpent >= state.totalBudget
+    if (isDepleted && !prevDepletedRef.current) {
+      onBudgetDepleted?.()
+    }
+    prevDepletedRef.current = isDepleted
+  }, [state.isDangerZone, state.totalSpent, state.totalBudget, onDangerZone, onBudgetDepleted])
+
+  // Add spend entry
+  const addSpend = React.useCallback((date: Date, amount: number, categoryBreakdown?: Record<string, number>) => {
+    setSpendHistory((prev) => [
+      ...prev,
+      { date, amount, categories: categoryBreakdown },
+    ])
+
+    // Update categories if provided
+    if (categoryBreakdown) {
+      setCategories((prev) =>
+        prev.map((cat) => ({
+          ...cat,
+          spent: cat.spent + (categoryBreakdown[cat.id] || 0),
+        }))
+      )
+    }
+  }, [])
+
+  // Remove spend entry
+  const removeSpend = React.useCallback((date: Date) => {
+    setSpendHistory((prev) => {
+      const entry = prev.find((p) => p.date.getTime() === date.getTime())
+      if (entry?.categories) {
+        setCategories((cats) =>
+          cats.map((cat) => ({
+            ...cat,
+            spent: Math.max(0, cat.spent - (entry.categories?.[cat.id] || 0)),
+          }))
+        )
+      }
+      return prev.filter((p) => p.date.getTime() !== date.getTime())
+    })
+  }, [])
+
+  // Update category
+  const updateCategory = React.useCallback((id: string, updates: Partial<BudgetCategory>) => {
+    setCategories((prev) =>
+      prev.map((cat) => (cat.id === id ? { ...cat, ...updates } : cat))
+    )
+  }, [])
+
+  // Add category
+  const addCategory = React.useCallback((category: BudgetCategory) => {
+    setCategories((prev) => [...prev, category])
+  }, [])
+
+  // Remove category
+  const removeCategory = React.useCallback((id: string) => {
+    setCategories((prev) => prev.filter((cat) => cat.id !== id))
+  }, [])
+
+  // Reset all spending
+  const reset = React.useCallback(() => {
+    setSpendHistory([])
+    setCategories((prev) => prev.map((cat) => ({ ...cat, spent: 0 })))
+  }, [])
+
+  // Get forecast
+  const getForecast = React.useCallback((days: number) => {
+    const projectedSpend = state.totalSpent + state.burnRate * days
+    const projectedRemaining = Math.max(0, budget - projectedSpend)
+    const projectedPercentUsed = Math.min(100, (projectedSpend / budget) * 100)
+
+    return {
+      projectedSpend,
+      projectedRemaining,
+      projectedPercentUsed,
+      willDeplete: projectedSpend >= budget,
+      daysUntilDepletion: state.burnRate > 0
+        ? Math.ceil((budget - state.totalSpent) / state.burnRate)
+        : Infinity,
+    }
+  }, [budget, state.totalSpent, state.burnRate])
+
+  return {
+    // State
+    ...state,
+    spendHistory,
+    categories,
+
+    // Actions
+    addSpend,
+    removeSpend,
+    updateCategory,
+    addCategory,
+    removeCategory,
+    reset,
+    setSpendHistory,
+    setCategories,
+
+    // Utilities
+    getForecast,
+  }
+}
+
+export default WakaBudgetBurn