Data Display

1
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
2
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3
import { faUsers, faDollarSign } from "@fortawesome/free-solid-svg-icons";
4
5
// Your data — swap these for your own metrics + activity.
6
const stats = [
7
  {
8
    title: "Total Users",
9
    value: "1,250",
10
    icon: faUsers,
11
    description: "Registered employees",
12
    trend: "+12% from last month",
13
    accent: "var(--metric-blue)",
14
  },
15
  {
16
    title: "Monthly Revenue",
17
    value: "$125K",
18
    icon: faDollarSign,
19
    description: "Recurring revenue",
20
    trend: "+8% growth",
21
    accent: "var(--metric-yellow)",
22
  },
23
];
24
25
const recentActivities = [
26
  { user: "Erik Yun", action: "Clocked in", time: "2 minutes ago" },
27
  { user: "Jane Smith", action: "Submitted leave request", time: "15 minutes ago" },
28
  { user: "Mike Johnson", action: "Updated profile", time: "1 hour ago" },
29
  { user: "Sarah Wilson", action: "Clocked out", time: "2 hours ago" },
30
  { user: "Tom Brown", action: "Approved expense claim", time: "3 hours ago" },
31
];
32
33
// Stats grid — each card gets a solid color fill from the Tailwind palette
34
// (the lighter "200" shade in light mode, the deeper "300" shade in dark mode),
35
// applied by the .metric-accents class on the wrapper.
36
<div className="metric-accents grid gap-4 md:grid-cols-2">
37
  {stats.map((stat) => (
38
    <Card
39
      key={stat.title}
40
      className="text-neutral-900"
41
      style={{
42
        backgroundColor: stat.accent,
43
        borderColor: `color-mix(in oklch, ${stat.accent} 82%, black)`,
44
      }}
45
    >
46
      <CardHeader className="flex flex-row items-center justify-between pb-2">
47
        <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
48
        <FontAwesomeIcon icon={stat.icon} className="h-4 w-4 opacity-60" />
49
      </CardHeader>
50
      <CardContent>
51
        <div className="text-2xl font-bold">{stat.value}</div>
52
        <p className="text-xs opacity-70">{stat.description}</p>
53
        <p className="text-xs font-medium opacity-80 mt-1">{stat.trend}</p>
54
      </CardContent>
55
    </Card>
56
  ))}
57
</div>
58
59
// Activity feed
60
<Card>
61
  <CardHeader>
62
    <CardTitle>Recent Activity</CardTitle>
63
  </CardHeader>
64
  <CardContent>
65
    <div className="space-y-4">
66
      {recentActivities.map((activity) => (
67
        <div className="flex items-center justify-between border-b pb-3 last:border-0">
68
          <div className="flex items-center gap-3">
69
            <div className="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center">
70
              <span className="text-xs font-medium text-primary">
71
                {activity.user.split(" ").map((n) => n[0]).join("")}
72
              </span>
73
            </div>
74
            <div>
75
              <p className="text-sm font-medium">{activity.user}</p>
76
              <p className="text-xs text-muted-foreground">{activity.action}</p>
77
            </div>
78
          </div>
79
          <span className="text-xs text-muted-foreground">{activity.time}</span>
80
        </div>
81
      ))}
82
    </div>
83
  </CardContent>
84
</Card>