extended-24

1<script setup lang="ts">
2import { Badge } from "@/registry/default/ui/badge";
3import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
4import {
5  Select,
6  SelectContent,
7  SelectItem,
8  SelectTrigger,
9  SelectValue,
10} from "@/registry/default/ui/select";
11import { Separator } from "@/registry/default/ui/separator";
12import {
13  Tooltip,
14  TooltipContent,
15  TooltipProvider,
16  TooltipTrigger,
17} from "@/registry/default/ui/tooltip";
18import { LucideInfo } from "lucide-vue-next";
19 
20const alerts = [
21  { name: "Acme Corp", plan: "Enterprise", daysLeft: 3, renewUrl: "#" },
22  { name: "Beta LLC", plan: "Pro", daysLeft: 5, renewUrl: "#" },
23  { name: "Gamma Inc", plan: "Pro", daysLeft: 7, renewUrl: "#" },
24];
25</script>
26 
27<template>
28  <div class="*:not-first:mt-2">
29    <Card class="mx-auto w-full md:w-[450px]">
30      <CardHeader class="flex items-center justify-between">
31        <CardTitle>Subscription Alerts</CardTitle>
32        <div class="ml-auto">
33          <Select defaultValue="this-month">
34            <SelectTrigger class="w-32">
35              <SelectValue placeholder="Select a plan" />
36            </SelectTrigger>
37            <SelectContent>
38              <SelectItem value="this-month">This Month</SelectItem>
39              <SelectItem value="last-month">Last Month</SelectItem>
40              <SelectItem value="this-year">This Year</SelectItem>
41              <SelectItem value="last-year">Last Year</SelectItem>
42            </SelectContent>
43          </Select>
44        </div>
45      </CardHeader>
46      <CardContent>
47        <!-- Stats Row -->
48        <div class="mb-4 flex items-center gap-2.5">
49          <div class="flex flex-1 flex-col gap-1.5">
50            <div class="text-muted-foreground text-xs font-medium tracking-wide uppercase">
51              Total Revenue
52            </div>
53            <div class="text-foreground text-2xl font-bold">$128,400</div>
54          </div>
55          <div class="flex flex-1 flex-col gap-1.5">
56            <div class="text-muted-foreground text-xs font-medium tracking-wide uppercase">
57              Subscriptions
58            </div>
59            <div class="text-foreground text-2xl font-bold">312</div>
60          </div>
61        </div>
62        <!-- Segmented Progress Bar -->
63        <div
64          class="bg-muted mb-3.5 flex h-2.5 w-full items-center gap-0.5 overflow-hidden rounded-full"
65        >
66          <div class="h-full bg-teal-400" style="width: 60%"></div>
67// … truncated