@wakastellar/ui 3.2.0 → 3.3.0

package/src/components/waka-credit-quota/index.tsx

@@ -0,0 +1,461 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Clock } from "lucide-react"
+import type { CreditServiceUsage } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WakaCreditQuotaProps {
+  /** Credits used in the current period */
+  used: number
+  /** Total credit quota */
+  total: number
+  /** Date when the quota resets */
+  resetDate?: string | Date
+  /** Per-service breakdown for stacked segments */
+  services?: CreditServiceUsage[]
+  /** Visual variant */
+  variant?: "compact" | "detailed"
+  /** Component size */
+  size?: "sm" | "md" | "lg"
+  /** Enable animated bar fill */
+  animated?: boolean
+  /** Show reset date countdown */
+  showResetCountdown?: boolean
+  /** Custom value formatter */
+  formatValue?: (value: number) => string
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Config
+// ============================================================================
+
+const SIZE_CONFIG = {
+  sm: {
+    bar: "h-2",
+    text: "text-xs",
+    label: "text-xs",
+    icon: "h-3 w-3",
+    gap: "gap-1",
+    legendDot: "h-2 w-2",
+    container: "space-y-2",
+  },
+  md: {
+    bar: "h-3",
+    text: "text-sm",
+    label: "text-sm",
+    icon: "h-4 w-4",
+    gap: "gap-2",
+    legendDot: "h-2.5 w-2.5",
+    container: "space-y-3",
+  },
+  lg: {
+    bar: "h-4",
+    text: "text-base",
+    label: "text-base",
+    icon: "h-5 w-5",
+    gap: "gap-3",
+    legendDot: "h-3 w-3",
+    container: "space-y-4",
+  },
+}
+
+const DEFAULT_SERVICE_COLORS = [
+  "bg-blue-500",
+  "bg-emerald-500",
+  "bg-amber-500",
+  "bg-violet-500",
+  "bg-rose-500",
+  "bg-cyan-500",
+  "bg-orange-500",
+  "bg-indigo-500",
+]
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function defaultFormatValue(value: number): string {
+  return value.toLocaleString("en-US")
+}
+
+function getUsageColor(percentage: number): string {
+  if (percentage >= 90) return "bg-destructive"
+  if (percentage >= 75) return "bg-warning"
+  return "bg-success"
+}
+
+function getUsageTextColor(percentage: number): string {
+  if (percentage >= 90) return "text-red-600 dark:text-red-400"
+  if (percentage >= 75) return "text-yellow-600 dark:text-yellow-400"
+  return "text-green-600 dark:text-green-400"
+}
+
+function computeResetCountdown(resetDate: string | Date): string {
+  const now = new Date()
+  const target = new Date(resetDate)
+  const diffMs = target.getTime() - now.getTime()
+
+  if (diffMs <= 0) return "Resetting now"
+
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+  const diffHours = Math.floor(
+    (diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+  )
+
+  if (diffDays > 1) return `Resets in ${diffDays} days`
+  if (diffDays === 1) return `Resets in 1 day`
+  if (diffHours > 1) return `Resets in ${diffHours} hours`
+  if (diffHours === 1) return `Resets in 1 hour`
+  return "Resets in less than an hour"
+}
+
+function getServiceColor(index: number, customColor?: string): string {
+  if (customColor) return customColor
+  return DEFAULT_SERVICE_COLORS[index % DEFAULT_SERVICE_COLORS.length]
+}
+
+// ============================================================================
+// Reset Countdown Component
+// ============================================================================
+
+interface ResetCountdownProps {
+  resetDate: string | Date
+  size: "sm" | "md" | "lg"
+}
+
+function ResetCountdown({ resetDate, size }: ResetCountdownProps) {
+  const styles = SIZE_CONFIG[size]
+  const countdownText = computeResetCountdown(resetDate)
+
+  return (
+    <div
+      className={cn(
+        "flex items-center text-muted-foreground",
+        styles.gap,
+        styles.text
+      )}
+    >
+      <Clock className={styles.icon} />
+      <span>{countdownText}</span>
+    </div>
+  )
+}
+
+// ============================================================================
+// Service Legend Component
+// ============================================================================
+
+interface ServiceLegendProps {
+  services: CreditServiceUsage[]
+  total: number
+  size: "sm" | "md" | "lg"
+  formatValue: (value: number) => string
+}
+
+function ServiceLegend({
+  services,
+  total,
+  size,
+  formatValue,
+}: ServiceLegendProps) {
+  const styles = SIZE_CONFIG[size]
+
+  return (
+    <div className={cn("flex flex-wrap", styles.gap)}>
+      {services.map((service, index) => {
+        const color = getServiceColor(index, service.color)
+        const pct = total > 0 ? ((service.value / total) * 100).toFixed(1) : "0"
+        return (
+          <div
+            key={service.id}
+            className={cn("flex items-center", styles.gap, styles.text)}
+          >
+            <div
+              className={cn(
+                "rounded-full flex-shrink-0",
+                styles.legendDot,
+                color
+              )}
+            />
+            <span className="text-muted-foreground">
+              {service.name}:{" "}
+              <span className="font-medium text-foreground tabular-nums">
+                {formatValue(service.value)}
+              </span>
+              <span className="text-muted-foreground ml-0.5">
+                ({pct}%)
+              </span>
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditQuota({
+  used,
+  total,
+  resetDate,
+  services,
+  variant = "compact",
+  size = "md",
+  animated = true,
+  showResetCountdown = true,
+  formatValue = defaultFormatValue,
+  className,
+}: WakaCreditQuotaProps) {
+  const [displayProgress, setDisplayProgress] = React.useState(0)
+  const styles = SIZE_CONFIG[size]
+
+  // Calculate usage percentage
+  const usagePercentage = total > 0 ? (used / total) * 100 : 0
+  const clampedPercentage = Math.min(usagePercentage, 100)
+
+  // Animate progress bar
+  React.useEffect(() => {
+    if (!animated) {
+      setDisplayProgress(clampedPercentage)
+      return
+    }
+
+    const targetProgress = clampedPercentage
+    const duration = 800
+    const startTime = Date.now()
+    const startProgress = 0
+
+    const animateProgress = () => {
+      const elapsed = Date.now() - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      // Ease-out cubic
+      const eased = 1 - Math.pow(1 - progress, 3)
+
+      setDisplayProgress(startProgress + (targetProgress - startProgress) * eased)
+
+      if (progress < 1) {
+        requestAnimationFrame(animateProgress)
+      }
+    }
+
+    requestAnimationFrame(animateProgress)
+  }, [clampedPercentage, animated])
+
+  // Compact variant: single bar with used/total label
+  if (variant === "compact") {
+    return (
+      <div className={cn("w-full", styles.container, className)}>
+        {/* Header: used / total */}
+        <div
+          className={cn(
+            "flex items-center justify-between",
+            styles.text
+          )}
+        >
+          <span className="text-muted-foreground">
+            <span className="font-medium text-foreground tabular-nums">
+              {formatValue(used)}
+            </span>
+            {" / "}
+            <span className="tabular-nums">{formatValue(total)}</span>
+            {" used"}
+          </span>
+          <span
+            className={cn(
+              "font-medium tabular-nums",
+              getUsageTextColor(usagePercentage)
+            )}
+          >
+            {usagePercentage.toFixed(0)}%
+          </span>
+        </div>
+
+        {/* Bar */}
+        <div
+          className={cn(
+            "relative w-full overflow-hidden rounded-full bg-muted",
+            styles.bar
+          )}
+        >
+          <div
+            className={cn(
+              "h-full rounded-full transition-colors duration-300",
+              getUsageColor(usagePercentage),
+              usagePercentage >= 100 && "animate-pulse"
+            )}
+            style={{
+              width: `${displayProgress}%`,
+              transition: animated ? undefined : "width 0.3s ease-out",
+            }}
+          />
+        </div>
+
+        {/* Reset countdown */}
+        {showResetCountdown && resetDate && (
+          <ResetCountdown resetDate={resetDate} size={size} />
+        )}
+      </div>
+    )
+  }
+
+  // Detailed variant: stacked bar + service breakdown
+  return (
+    <div className={cn("w-full", styles.container, className)}>
+      {/* Header: used / total */}
+      <div
+        className={cn(
+          "flex items-center justify-between",
+          styles.text
+        )}
+      >
+        <span className="text-muted-foreground">
+          <span className="font-medium text-foreground tabular-nums">
+            {formatValue(used)}
+          </span>
+          {" / "}
+          <span className="tabular-nums">{formatValue(total)}</span>
+          {" used"}
+        </span>
+        <span
+          className={cn(
+            "font-medium tabular-nums",
+            getUsageTextColor(usagePercentage)
+          )}
+        >
+          {usagePercentage.toFixed(0)}%
+        </span>
+      </div>
+
+      {/* Stacked bar */}
+      <div
+        className={cn(
+          "relative w-full overflow-hidden rounded-full bg-muted",
+          styles.bar
+        )}
+      >
+        {services && services.length > 0 ? (
+          <StackedBar
+            services={services}
+            total={total}
+            animated={animated}
+            usagePercentage={usagePercentage}
+          />
+        ) : (
+          <div
+            className={cn(
+              "h-full rounded-full transition-colors duration-300",
+              getUsageColor(usagePercentage),
+              usagePercentage >= 100 && "animate-pulse"
+            )}
+            style={{
+              width: `${displayProgress}%`,
+              transition: animated ? undefined : "width 0.3s ease-out",
+            }}
+          />
+        )}
+      </div>
+
+      {/* Service legend */}
+      {services && services.length > 0 && (
+        <ServiceLegend
+          services={services}
+          total={total}
+          size={size}
+          formatValue={formatValue}
+        />
+      )}
+
+      {/* Reset countdown */}
+      {showResetCountdown && resetDate && (
+        <ResetCountdown resetDate={resetDate} size={size} />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Stacked Bar Component
+// ============================================================================
+
+interface StackedBarProps {
+  services: CreditServiceUsage[]
+  total: number
+  animated: boolean
+  usagePercentage: number
+}
+
+function StackedBar({ services, total, animated, usagePercentage }: StackedBarProps) {
+  const [displayProgress, setDisplayProgress] = React.useState(0)
+
+  const clampedPercentage = Math.min(usagePercentage, 100)
+
+  React.useEffect(() => {
+    if (!animated) {
+      setDisplayProgress(1)
+      return
+    }
+
+    const duration = 800
+    const startTime = Date.now()
+
+    const animateProgress = () => {
+      const elapsed = Date.now() - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      const eased = 1 - Math.pow(1 - progress, 3)
+
+      setDisplayProgress(eased)
+
+      if (progress < 1) {
+        requestAnimationFrame(animateProgress)
+      }
+    }
+
+    requestAnimationFrame(animateProgress)
+  }, [animated, clampedPercentage])
+
+  // Calculate widths capped at total
+  const totalUsed = services.reduce((sum, s) => sum + s.value, 0)
+  const scale = totalUsed > 0 ? Math.min(totalUsed, total) / totalUsed : 0
+
+  return (
+    <div className="flex h-full w-full">
+      {services.map((service, index) => {
+        const segmentPercentage =
+          total > 0 ? ((service.value * scale) / total) * 100 : 0
+        const color = getServiceColor(index, service.color)
+
+        return (
+          <div
+            key={service.id}
+            className={cn(
+              "h-full transition-all duration-300",
+              color,
+              index === 0 && "rounded-l-full",
+              index === services.length - 1 &&
+                usagePercentage >= 100 &&
+                "rounded-r-full",
+              index === services.length - 1 &&
+                usagePercentage < 100 &&
+                "rounded-r-full"
+            )}
+            style={{
+              width: `${segmentPercentage * displayProgress}%`,
+            }}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default WakaCreditQuota

package/src/components/waka-credit-receipt/WakaCreditReceipt.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditReceipt } from "./index"
+
+const meta: Meta<typeof WakaCreditReceipt> = {
+  title: "Components/Credit/WakaCreditReceipt",
+  component: WakaCreditReceipt,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Printable receipt card showing credit transaction details with download support.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    downloadable: {
+      control: "boolean",
+      description: "Whether to show the download PDF button",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditReceipt>
+
+export const Default: Story = {
+  args: {
+    transaction: {
+      id: "TXN-2024-001-ABC123",
+      type: "credit",
+      amount: 5000,
+      credits: 5000,
+      price: 39.99,
+      description: "Credit pack purchase - Starter",
+      paymentMethod: "Visa ****4242",
+      timestamp: "2024-11-15T14:32:00Z",
+      status: "completed",
+    },
+  },
+}
+
+export const WithOrganization: Story = {
+  args: {
+    transaction: {
+      id: "TXN-2024-002-DEF456",
+      type: "credit",
+      amount: 10000,
+      credits: 10000,
+      price: 74.99,
+      description: "Credit pack purchase - Pro",
+      paymentMethod: "Mastercard ****8910",
+      timestamp: "2024-11-20T09:15:00Z",
+      status: "completed",
+    },
+    organization: {
+      name: "Acme Corporation",
+      id: "org-acme-001",
+    },
+  },
+}
+
+export const Downloadable: Story = {
+  args: {
+    transaction: {
+      id: "TXN-2024-003-GHI789",
+      type: "credit",
+      amount: 2500,
+      credits: 2500,
+      price: 19.99,
+      description: "Credit pack purchase - Basic",
+      paymentMethod: "Visa ****4242",
+      timestamp: "2024-12-01T16:45:00Z",
+      status: "completed",
+    },
+    downloadable: true,
+    onDownload: () => alert("Download PDF"),
+  },
+}
+
+export const Refund: Story = {
+  args: {
+    transaction: {
+      id: "TXN-2024-004-JKL012",
+      type: "refund",
+      amount: -3000,
+      credits: -3000,
+      price: 23.99,
+      description: "Refund - Service interruption compensation",
+      paymentMethod: "Visa ****4242",
+      timestamp: "2024-12-05T11:20:00Z",
+      status: "completed",
+    },
+    downloadable: true,
+    onDownload: () => alert("Download PDF"),
+  },
+}