extended-21

1<script setup lang="ts">
2import { Badge } from "@/registry/default/ui/badge";
3import { Button } from "@/registry/default/ui/button";
4import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuItem,
9  DropdownMenuSeparator,
10  DropdownMenuTrigger,
11} from "@/registry/default/ui/dropdown-menu";
12import {
13  LucideArrowDown,
14  LucideArrowUp,
15  LucideMoreHorizontal,
16  LucidePin,
17  LucideSettings,
18  LucideShare2,
19  LucideTrash,
20  LucideTriangleAlert,
21} from "lucide-vue-next";
22 
23const stats = [
24  {
25    title: "Total Sales",
26    value: 892200000,
27    delta: 0.2,
28    lastMonth: 889100000,
29    positive: true,
30    prefix: "$",
31    suffix: "M",
32    format: (v: number) => `$${(v / 1_000_000).toFixed(1)}M`,
33    lastFormat: (v: number) => `$${(v / 1_000_000).toFixed(1)}M`,
34    bg: "bg-zinc-950",
35    svg: "total-sales",
36  },
37  {
38    title: "New Customers",
39    value: 12800,
40    delta: 3.1,
41    lastMonth: 12400,
42    positive: true,
43    prefix: "",
44    suffix: "",
45    bg: "bg-fuchsia-600",
46    svg: "new-customers",
47  },
48  {
49    title: "Refunds",
50    value: 320,
51    delta: -1.2,
52    lastMonth: 340,
53    positive: false,
54    prefix: "",
55    suffix: "",
56    bg: "bg-blue-600",
57    svg: "refunds",
58  },
59  {
60    title: "Churn Rate",
61    value: 2.3,
62    delta: -0.1,
63    lastMonth: 2.4,
64    positive: false,
65    prefix: "",
66    suffix: "%",
67    bg: "bg-teal-600",
68    svg: "churn-rate",
69  },
70];
71 
72function formatNumber(n: number) {
73  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
74  if (n >= 1_000) return n.toLocaleString();
75  return n.toString();
76}
77</script>
78 
79<template>
80  <div class="*:not-first:mt-2">
81    <div class="grid grow grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
82      <Card
83        v-for="(stat, index) in stats"
84        :key="index"
85        :class="`relative overflow-hidden ${stat.bg} text-white`"
86      >
87        <!-- SVG Background Decorations -->
88        <div class="pointer-events-none absolute top-0 right-0 h-full w-2/3 opacity-40">
89          <!-- Total Sales SVG -->
90          <svg
91            v-if="stat.svg === 'total-sales'"
92            class="h-full w-full"
93            viewBox="0 0 300 200"
94            fill="none"
95          >
96            <circle cx="220" cy="100" r="90" fill="#fff" fill-opacity="0.08" />
97            <circle cx="260" cy="60" r="60" fill="#fff" fill-opacity="0.10" />
98            <circle cx="200" cy="160" r="50" fill="#fff" fill-opacity="0.07" />
99// … truncated