extended-25

1<script setup lang="ts">
2import { cn } from "@/lib/utils";
3import { Badge } from "@/registry/default/ui/badge";
4import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
5import {
6  Select,
7  SelectContent,
8  SelectItem,
9  SelectTrigger,
10  SelectValue,
11} from "@/registry/default/ui/select";
12import {
13  Tooltip,
14  TooltipContent,
15  TooltipProvider,
16  TooltipTrigger,
17} from "@/registry/default/ui/tooltip";
18import { LucideInfo } from "lucide-vue-next";
19 
20const leadsData = {
21  newLeads: 54,
22  returningLeads: 198,
23  newPercent: 21.43,
24  returningPercent: 78.57,
25  topSource: "LinkedIn",
26  conversionRate: 12.8,
27};
28</script>
29 
30<template>
31  <div class="*:not-first:mt-2">
32    <Card class="mx-auto w-full md:w-[450px]">
33      <CardHeader class="flex items-center justify-between">
34        <CardTitle>Leads Overview</CardTitle>
35        <div class="ml-auto">
36          <Select defaultValue="this-month">
37            <SelectTrigger class="w-32">
38              <SelectValue placeholder="Select range" />
39            </SelectTrigger>
40            <SelectContent>
41              <SelectItem value="this-month">This Month</SelectItem>
42              <SelectItem value="last-month">Last Month</SelectItem>
43              <SelectItem value="this-year">This Year</SelectItem>
44              <SelectItem value="last-year">Last Year</SelectItem>
45            </SelectContent>
46          </Select>
47        </div>
48      </CardHeader>
49      <CardContent>
50        <div class="mb-4 flex items-stretch gap-x-6">
51          <!-- New Leads -->
52          <div class="flex flex-1 flex-col items-start gap-1">
53            <div class="mb-1 flex items-center gap-1">
54              <span class="text-foreground text-2xl font-bold">
55                {{ leadsData.newLeads }}
56              </span>
57              <Badge size="sm" variant="default">{{ leadsData.newPercent }}%</Badge>
58            </div>
59            <span class="text-muted-foreground text-sm font-medium">New leads</span>
60            <!-- Solid Progress Bar -->
61            <div class="mt-1 w-full">
62              <div class="bg-muted h-2.5 overflow-hidden rounded-xs">
63                <div
64                  class="bg-primary h-full rounded-xs transition-all"
65                  :style="{ width: `${leadsData.newPercent}%` }"
66                ></div>
67              </div>
68            </div>
69          </div>
70          <!-- Returning Leads -->
71          <div
72// … truncated