@wakastellar/ui 3.2.0 → 3.3.2

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

@@ -0,0 +1,654 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  ArrowUpCircle,
+  ArrowDownCircle,
+  RotateCcw,
+  Gift,
+  Clock,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Download,
+  Filter,
+  Inbox,
+  ChevronLeft,
+  ChevronRight,
+  X,
+} from "lucide-react"
+import type {
+  CreditTransaction,
+  CreditTransactionType,
+  CreditTransactionStatus,
+} from "../waka-credit-balance/types"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type { CreditTransaction, CreditTransactionType } from "../waka-credit-balance/types"
+
+export interface WakaCreditHistoryProps {
+  /** Array of credit transactions to display */
+  transactions: CreditTransaction[]
+  /** Number of items per page (default: 10) */
+  pageSize?: number
+  /** Active filters */
+  filters?: {
+    types?: CreditTransactionType[]
+    services?: string[]
+    dateRange?: { from: Date; to: Date }
+  }
+  /** Callback when export is triggered */
+  onExport?: (format: "csv" | "pdf", data: CreditTransaction[]) => void
+  /** Callback when a row is clicked */
+  onRowClick?: (transaction: CreditTransaction) => void
+  /** Show the filter bar */
+  showFilters?: boolean
+  /** Show the export button */
+  showExport?: boolean
+  /** Custom empty state message */
+  emptyMessage?: string
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Config
+// ============================================================================
+
+type SortField = "date" | "amount" | "type"
+type SortDirection = "asc" | "desc"
+
+const TRANSACTION_TYPE_CONFIG: Record<
+  CreditTransactionType,
+  { label: string; icon: React.ElementType; colorClass: string }
+> = {
+  credit: {
+    label: "Credit",
+    icon: ArrowUpCircle,
+    colorClass: "text-green-600 dark:text-green-400",
+  },
+  debit: {
+    label: "Debit",
+    icon: ArrowDownCircle,
+    colorClass: "text-red-600 dark:text-red-400",
+  },
+  refund: {
+    label: "Refund",
+    icon: RotateCcw,
+    colorClass: "text-blue-600 dark:text-blue-400",
+  },
+  bonus: {
+    label: "Bonus",
+    icon: Gift,
+    colorClass: "text-purple-600 dark:text-purple-400",
+  },
+  expiry: {
+    label: "Expiry",
+    icon: Clock,
+    colorClass: "text-orange-600 dark:text-orange-400",
+  },
+}
+
+const STATUS_BADGE_VARIANT: Record<
+  CreditTransactionStatus,
+  { variant: "default" | "secondary" | "destructive" | "outline"; className: string }
+> = {
+  completed: {
+    variant: "default",
+    className: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800",
+  },
+  pending: {
+    variant: "outline",
+    className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800",
+  },
+  failed: {
+    variant: "destructive",
+    className: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800",
+  },
+  cancelled: {
+    variant: "secondary",
+    className: "bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400 border-gray-200 dark:border-gray-700",
+  },
+}
+
+const ALL_TYPES: CreditTransactionType[] = ["credit", "debit", "refund", "bonus", "expiry"]
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function toDate(value: string | Date): Date {
+  return value instanceof Date ? value : new Date(value)
+}
+
+function formatDate(value: string | Date): string {
+  const date = toDate(value)
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+function formatAmount(amount: number, type: CreditTransactionType): string {
+  const isPositive = type === "credit" || type === "refund" || type === "bonus"
+  const prefix = isPositive ? "+" : "-"
+  return `${prefix}${Math.abs(amount).toLocaleString("en-US")}`
+}
+
+function getAmountColorClass(type: CreditTransactionType): string {
+  const isPositive = type === "credit" || type === "refund" || type === "bonus"
+  return isPositive
+    ? "text-green-600 dark:text-green-400"
+    : "text-red-600 dark:text-red-400"
+}
+
+// ============================================================================
+// Sub-Components
+// ============================================================================
+
+interface SortHeaderProps {
+  label: string
+  field: SortField
+  currentSort: SortField
+  currentDirection: SortDirection
+  onSort: (field: SortField) => void
+}
+
+function SortHeader({ label, field, currentSort, currentDirection, onSort }: SortHeaderProps) {
+  const isActive = currentSort === field
+  const Icon = isActive
+    ? currentDirection === "asc"
+      ? ArrowUp
+      : ArrowDown
+    : ArrowUpDown
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex items-center gap-1 text-xs font-medium uppercase tracking-wider hover:text-foreground transition-colors",
+        isActive ? "text-foreground" : "text-muted-foreground"
+      )}
+      onClick={() => onSort(field)}
+    >
+      {label}
+      <Icon className="h-3 w-3" />
+    </button>
+  )
+}
+
+interface TypeFilterProps {
+  selectedTypes: CreditTransactionType[]
+  onChange: (types: CreditTransactionType[]) => void
+}
+
+function TypeFilter({ selectedTypes, onChange }: TypeFilterProps) {
+  const handleToggle = (type: CreditTransactionType) => {
+    if (selectedTypes.includes(type)) {
+      onChange(selectedTypes.filter((t) => t !== type))
+    } else {
+      onChange([...selectedTypes, type])
+    }
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {ALL_TYPES.map((type) => {
+        const config = TRANSACTION_TYPE_CONFIG[type]
+        const isSelected = selectedTypes.length === 0 || selectedTypes.includes(type)
+        return (
+          <button
+            key={type}
+            type="button"
+            onClick={() => handleToggle(type)}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium border transition-colors",
+              isSelected
+                ? "bg-primary/10 border-primary/30 text-foreground"
+                : "bg-muted/50 border-transparent text-muted-foreground hover:bg-muted"
+            )}
+          >
+            <config.icon className="h-3 w-3" />
+            {config.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  totalItems: number
+  pageSize: number
+  onPageChange: (page: number) => void
+}
+
+function Pagination({ currentPage, totalPages, totalItems, pageSize, onPageChange }: PaginationProps) {
+  const startItem = (currentPage - 1) * pageSize + 1
+  const endItem = Math.min(currentPage * pageSize, totalItems)
+
+  return (
+    <div className="flex items-center justify-between px-2 py-3">
+      <p className="text-xs text-muted-foreground">
+        Showing {startItem}-{endItem} of {totalItems} transactions
+      </p>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-7 w-7"
+          disabled={currentPage <= 1}
+          onClick={() => onPageChange(currentPage - 1)}
+        >
+          <ChevronLeft className="h-3.5 w-3.5" />
+        </Button>
+        {Array.from({ length: totalPages }, (_, i) => i + 1)
+          .filter((page) => {
+            if (totalPages <= 7) return true
+            if (page === 1 || page === totalPages) return true
+            if (Math.abs(page - currentPage) <= 1) return true
+            return false
+          })
+          .map((page, idx, arr) => {
+            const showEllipsisBefore = idx > 0 && page - arr[idx - 1] > 1
+
+            return (
+              <React.Fragment key={page}>
+                {showEllipsisBefore && (
+                  <span className="px-1 text-xs text-muted-foreground">...</span>
+                )}
+                <Button
+                  variant={page === currentPage ? "default" : "outline"}
+                  size="icon"
+                  className="h-7 w-7 text-xs"
+                  onClick={() => onPageChange(page)}
+                >
+                  {page}
+                </Button>
+              </React.Fragment>
+            )
+          })}
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-7 w-7"
+          disabled={currentPage >= totalPages}
+          onClick={() => onPageChange(currentPage + 1)}
+        >
+          <ChevronRight className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Empty State
+// ============================================================================
+
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <div className="rounded-full bg-muted p-3 mb-3">
+        <Inbox className="h-6 w-6 text-muted-foreground" />
+      </div>
+      <p className="text-sm text-muted-foreground">{message}</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditHistory({
+  transactions,
+  pageSize = 10,
+  filters: externalFilters,
+  onExport,
+  onRowClick,
+  showFilters = false,
+  showExport = false,
+  emptyMessage = "No transactions found",
+  className,
+}: WakaCreditHistoryProps) {
+  // -- State --
+  const [sortField, setSortField] = React.useState<SortField>("date")
+  const [sortDirection, setSortDirection] = React.useState<SortDirection>("desc")
+  const [currentPage, setCurrentPage] = React.useState(1)
+  const [selectedTypes, setSelectedTypes] = React.useState<CreditTransactionType[]>(
+    externalFilters?.types ?? []
+  )
+  const [exportFormat, setExportFormat] = React.useState<"csv" | "pdf">("csv")
+  const [filtersVisible, setFiltersVisible] = React.useState(showFilters)
+
+  // Reset page when filters change
+  React.useEffect(() => {
+    setCurrentPage(1)
+  }, [selectedTypes, externalFilters])
+
+  // Sync external filters
+  React.useEffect(() => {
+    if (externalFilters?.types) {
+      setSelectedTypes(externalFilters.types)
+    }
+  }, [externalFilters?.types])
+
+  // -- Filtering --
+  const filteredTransactions = React.useMemo(() => {
+    let result = [...transactions]
+
+    // Filter by type
+    if (selectedTypes.length > 0) {
+      result = result.filter((t) => selectedTypes.includes(t.type))
+    }
+
+    // Filter by services (external only)
+    if (externalFilters?.services && externalFilters.services.length > 0) {
+      result = result.filter(
+        (t) => t.service && externalFilters.services!.includes(t.service)
+      )
+    }
+
+    // Filter by date range (external only)
+    if (externalFilters?.dateRange) {
+      const { from, to } = externalFilters.dateRange
+      result = result.filter((t) => {
+        const date = toDate(t.timestamp)
+        return date >= from && date <= to
+      })
+    }
+
+    return result
+  }, [transactions, selectedTypes, externalFilters])
+
+  // -- Sorting --
+  const sortedTransactions = React.useMemo(() => {
+    const sorted = [...filteredTransactions]
+
+    sorted.sort((a, b) => {
+      let comparison = 0
+
+      switch (sortField) {
+        case "date":
+          comparison = toDate(a.timestamp).getTime() - toDate(b.timestamp).getTime()
+          break
+        case "amount":
+          comparison = a.amount - b.amount
+          break
+        case "type":
+          comparison = a.type.localeCompare(b.type)
+          break
+      }
+
+      return sortDirection === "asc" ? comparison : -comparison
+    })
+
+    return sorted
+  }, [filteredTransactions, sortField, sortDirection])
+
+  // -- Pagination --
+  const totalPages = Math.max(1, Math.ceil(sortedTransactions.length / pageSize))
+  const safePage = Math.min(currentPage, totalPages)
+  const paginatedTransactions = sortedTransactions.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  )
+
+  // -- Handlers --
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection((d) => (d === "asc" ? "desc" : "asc"))
+    } else {
+      setSortField(field)
+      setSortDirection("desc")
+    }
+    setCurrentPage(1)
+  }
+
+  const handleExport = () => {
+    onExport?.(exportFormat, filteredTransactions)
+  }
+
+  const handleClearFilters = () => {
+    setSelectedTypes([])
+    setCurrentPage(1)
+  }
+
+  const hasActiveFilters = selectedTypes.length > 0
+
+  // -- Render --
+  return (
+    <div className={cn("rounded-lg border bg-card shadow-sm", className)}>
+      {/* Toolbar */}
+      <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">Transaction History</h3>
+          <Badge variant="secondary" className="text-xs">
+            {filteredTransactions.length}
+          </Badge>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {showFilters && (
+            <Button
+              variant={filtersVisible ? "default" : "outline"}
+              size="sm"
+              onClick={() => setFiltersVisible((v) => !v)}
+              className="h-8"
+            >
+              <Filter className="h-3.5 w-3.5" />
+              Filters
+              {hasActiveFilters && (
+                <span className="ml-1 rounded-full bg-primary-foreground/20 px-1.5 text-[10px]">
+                  {selectedTypes.length}
+                </span>
+              )}
+            </Button>
+          )}
+
+          {showExport && onExport && (
+            <div className="flex items-center gap-1">
+              <Select value={exportFormat} onValueChange={(v: string) => setExportFormat(v as "csv" | "pdf")}>
+                <SelectTrigger className="h-8 w-[80px] text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="csv">CSV</SelectItem>
+                  <SelectItem value="pdf">PDF</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button variant="outline" size="sm" onClick={handleExport} className="h-8">
+                <Download className="h-3.5 w-3.5" />
+                Export
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Filter Bar */}
+      {filtersVisible && (
+        <div className="border-b px-4 py-3 bg-muted/30">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex-1">
+              <p className="text-xs font-medium text-muted-foreground mb-2">Filter by type</p>
+              <TypeFilter selectedTypes={selectedTypes} onChange={setSelectedTypes} />
+            </div>
+            {hasActiveFilters && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleClearFilters}
+                className="h-7 text-xs text-muted-foreground"
+              >
+                <X className="h-3 w-3" />
+                Clear
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      {sortedTransactions.length === 0 ? (
+        <EmptyState message={hasActiveFilters ? "No transactions match the selected filters" : emptyMessage} />
+      ) : (
+        <>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b bg-muted/30">
+                  <th className="px-4 py-3 text-left">
+                    <SortHeader
+                      label="Type"
+                      field="type"
+                      currentSort={sortField}
+                      currentDirection={sortDirection}
+                      onSort={handleSort}
+                    />
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      Description
+                    </span>
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      Service
+                    </span>
+                  </th>
+                  <th className="px-4 py-3 text-right">
+                    <SortHeader
+                      label="Amount"
+                      field="amount"
+                      currentSort={sortField}
+                      currentDirection={sortDirection}
+                      onSort={handleSort}
+                    />
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <SortHeader
+                      label="Date"
+                      field="date"
+                      currentSort={sortField}
+                      currentDirection={sortDirection}
+                      onSort={handleSort}
+                    />
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      Status
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {paginatedTransactions.map((transaction) => {
+                  const typeConfig = TRANSACTION_TYPE_CONFIG[transaction.type]
+                  const statusConfig = STATUS_BADGE_VARIANT[transaction.status]
+                  const TypeIcon = typeConfig.icon
+
+                  return (
+                    <tr
+                      key={transaction.id}
+                      className={cn(
+                        "transition-colors hover:bg-muted/50",
+                        onRowClick && "cursor-pointer"
+                      )}
+                      onClick={() => onRowClick?.(transaction)}
+                    >
+                      {/* Type */}
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-2">
+                          <TypeIcon className={cn("h-4 w-4 flex-shrink-0", typeConfig.colorClass)} />
+                          <span className="text-sm font-medium">{typeConfig.label}</span>
+                        </div>
+                      </td>
+
+                      {/* Description */}
+                      <td className="px-4 py-3">
+                        <span className="text-sm text-foreground truncate block max-w-[200px]">
+                          {transaction.description}
+                        </span>
+                      </td>
+
+                      {/* Service */}
+                      <td className="px-4 py-3">
+                        <span className="text-sm text-muted-foreground">
+                          {transaction.service || "\u2014"}
+                        </span>
+                      </td>
+
+                      {/* Amount */}
+                      <td className="px-4 py-3 text-right">
+                        <span
+                          className={cn(
+                            "text-sm font-semibold tabular-nums",
+                            getAmountColorClass(transaction.type)
+                          )}
+                        >
+                          {formatAmount(transaction.amount, transaction.type)}
+                        </span>
+                      </td>
+
+                      {/* Date */}
+                      <td className="px-4 py-3">
+                        <span className="text-sm text-muted-foreground whitespace-nowrap">
+                          {formatDate(transaction.timestamp)}
+                        </span>
+                      </td>
+
+                      {/* Status */}
+                      <td className="px-4 py-3">
+                        <Badge
+                          variant={statusConfig.variant}
+                          className={cn("text-[11px] capitalize", statusConfig.className)}
+                        >
+                          {transaction.status}
+                        </Badge>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="border-t">
+              <Pagination
+                currentPage={safePage}
+                totalPages={totalPages}
+                totalItems={sortedTransactions.length}
+                pageSize={pageSize}
+                onPageChange={setCurrentPage}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default WakaCreditHistory