Points Awards

1"use client"
2 
3import * as React from "react"
4import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5import {
6  Award,
7  Clock,
8  Flame,
9  Sparkles,
10  Target,
11  UserPlus,
12  type LucideIcon,
13} from "lucide-react"
14 
15import { cn } from "@/lib/utils"
16 
17export interface PointsAwardTrigger {
18  id: string
19  type: string
20  points: number
21  metricName?: string | null
22  metricThreshold?: number | null
23  achievementName?: string | null
24  streakLengthThreshold?: number | null
25  timeUnit?: "hour" | "day"
26  timeInterval?: number | null
27}
28 
29export interface PointsAward {
30  id: string
31  awarded: number
32  /** ISO 8601 datetime */
33  date: string
34  /** User's total points after this award */
35  total: number
36  trigger: PointsAwardTrigger
37}
38 
39interface PointsAwardsProps extends React.HTMLAttributes<HTMLDivElement> {
40  awards: PointsAward[]
41  formatTotalPoints?: (value: number) => string
42  formatAwardedPoints?: (value: number) => string
43  /** Format the award `date` for the first column (default: short locale date). */
44  formatDate?: (isoDate: string) => string
45}
46 
47const TooltipProvider = TooltipPrimitive.Provider
48const Tooltip = TooltipPrimitive.Root
49const TooltipTrigger = TooltipPrimitive.Trigger
50const TooltipContent = React.forwardRef<
51  React.ElementRef<typeof TooltipPrimitive.Content>,
52  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
53>(({ className, sideOffset = 6, ...props }, ref) => (
54  <TooltipPrimitive.Content
55    ref={ref}
56    sideOffset={sideOffset}
57    className={cn(
58      "bg-popover text-popover-foreground z-50 max-w-xs overflow-hidden rounded-md border px-3 py-1.5 text-xs shadow-md",
59      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
60      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
61      className
62    )}
63    {...props}
64  />
65))
66TooltipContent.displayName = TooltipPrimitive.Content.displayName
67 
68const triggerIconMap: Record<string, LucideIcon> = {
69  metric: Target,
70  achievement: Award,
71  streak: Flame,
72  time: Clock,
73  user_creation: UserPlus,
74}
75 
76function triggerIcon(type: string): LucideIcon {
77  return triggerIconMap[type] ?? Sparkles
78}
79 
80/** Human-readable action line for tooltips — prefers `metricName` when present. */
81function awardActionDescription(trigger: PointsAwardTrigger): string {
82  if (trigger.metricName) {
83    if (
84// … truncated