extended-27

1<script setup lang="ts">
2import { cn } from "@/lib/utils";
3import { Badge } from "@/registry/default/ui/badge";
4import { Button } from "@/registry/default/ui/button";
5import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/registry/default/ui/card";
6import {
7  DropdownMenu,
8  DropdownMenuContent,
9  DropdownMenuItem,
10  DropdownMenuSeparator,
11  DropdownMenuTrigger,
12} from "@/registry/default/ui/dropdown-menu";
13import { Progress } from "@/registry/default/ui/progress";
14import { Separator } from "@/registry/default/ui/separator";
15import {
16  LucideCheckCircle,
17  LucideMoreHorizontal,
18  LucidePin,
19  LucideSettings,
20  LucideShare2,
21  LucideTrash,
22  LucideTrendingDown,
23  LucideTrendingUp,
24  LucideTriangleAlert,
25} from "lucide-vue-next";
26 
27const performance = [
28  {
29    label: "Deals Closed",
30    value: 27,
31    trend: 12,
32    trendDir: "up",
33  },
34  {
35    label: "Revenue",
36    value: "$182.4k",
37    trend: 6,
38    trendDir: "up",
39  },
40  {
41    label: "Conversion",
42    value: "72%",
43    trend: 3,
44    trendDir: "down",
45  },
46];
47 
48const pipelineProgress = 76;
49 
50const activity = [
51  {
52    text: "Closed deal with FinSight Inc.",
53    date: "Today",
54    state: "secondary",
55    color: "text-green-500",
56  },
57  {
58    text: "3 new leads added to Pipeline.",
59    date: "Yesterday",
60    state: "secondary",
61    color: "text-green-500",
62  },
63  {
64    text: "Follow-up scheduled.",
65    date: "2 days ago",
66    state: "destructive",
67    color: "text-destructive",
68  },
69];
70</script>
71 
72<template>
73  <div class="*:not-first:mt-2">
74    <Card class="mx-auto w-full md:w-96">
75      <CardHeader class="flex items-center justify-between">
76        <CardTitle class="flex flex-col gap-1">
77          <span>Staff Performance</span>
78          <span class="text-muted-foreground text-xs font-normal">Sales Manager</span>
79        </CardTitle>
80        <div class="ml-auto">
81          <DropdownMenu>
82            <DropdownMenuTrigger as-child>
83              <Button variant="ghost" size="icon">
84                <LucideMoreHorizontal />
85              </Button>
86            </DropdownMenuTrigger>
87            <DropdownMenuContent align="end" side="bottom">
88              <DropdownMenuItem>
89                <LucideSettings />
90                Settings
91              </DropdownMenuItem>
92              <DropdownMenuItem>
93                <LucideTriangleAlert />
94                Add Alert
95              </DropdownMenuItem>
96              <DropdownMenuItem>
97                <LucidePin />
98                Pin to Dashboard
99// … truncated