KPI Cards And Activity Feed

1"use client"
2 
3import * as React from "react"
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
5import { Badge } from "@/components/ui/badge"
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card"
13import {
14  Select,
15  SelectContent,
16  SelectItem,
17  SelectTrigger,
18  SelectValue,
19} from "@/components/ui/select"
20import { Separator } from "@/components/ui/separator"
21import { cn } from "@/lib/utils"
22import { IconPlaceholder } from "@/components/icons/icon-placeholder"
23 
24/** Props a call site may pass through to an icon. */
25type IconProps = { className?: string; size?: number | string }
26 
27const PERIODS = [
28  { value: "jun-2026", label: "June 2026" },
29  { value: "may-2026", label: "May 2026" },
30  { value: "apr-2026", label: "April 2026" },
31  { value: "q2-2026", label: "Q2 2026" },
32]
33 
34type Stat = {
35  label: string
36  value: string
37  delta: string
38  trend: "up" | "down"
39  good: boolean
40  sub: string
41}
42 
43const STATS_BY_PERIOD: Record<string, Stat[]> = {
44  "jun-2026": [
45    {
46      label: "Monthly Revenue",
47      value: "$94,310",
48      delta: "+8.2%",
49      trend: "up",
50      good: true,
51      sub: "Vs. Last Month",
52    },
53    {
54      label: "New Signups",
55      value: "1,482",
56      delta: "+23.5%",
57      trend: "up",
58      good: true,
59      sub: "Vs. Last Month",
60    },
61    {
62      label: "Churn Rate",
63      value: "1.7%",
64      delta: "+0.4%",
65      trend: "up",
66      good: false,
67      sub: "Vs. Last Month",
68    },
69    {
70      label: "Support Tickets",
71      value: "38",
72      delta: "-14.9%",
73      trend: "down",
74      good: true,
75      sub: "Vs. Last Month",
76    },
77  ],
78  "may-2026": [
79    {
80      label: "Monthly Revenue",
81      value: "$87,140",
82      delta: "+5.1%",
83      trend: "up",
84      good: true,
85      sub: "Vs. Last Month",
86    },
87    {
88      label: "New Signups",
89      value: "1,199",
90      delta: "+11.2%",
91      trend: "up",
92      good: true,
93      sub: "Vs. Last Month",
94    },
95    {
96      label: "Churn Rate",
97      value: "1.6%",
98      delta: "-0.2%",
99      trend: "down",
100      good: true,
101      sub: "Vs. Last Month",
102    },
103    {
104      label: "Support Tickets",
105      value: "45",
106      delta: "-8.0%",
107      trend: "down",
108      good: true,
109      sub: "Vs. Last Month",
110    },
111  ],
112  "apr-2026": [
113    {
114      label: "Monthly Revenue",
115      value: "$82,920",
116      delta: "+3.4%",
117      trend: "up",
118      good: true,
119      sub: "Vs. Last Month",
120    },
121    {
122// … truncated