{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"card-de-metas-com-progresso","type":"registry:component","title":"Card de metas com progresso","description":"Três metas com barra, rótulo e valor; avatares do time no rodapé.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":["avatar","button","card","progress"],"files":[{"path":"components/card-de-metas-com-progresso.tsx","type":"registry:component","content":"'use client'\n\nimport { Target } from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress, ProgressLabel, ProgressValue } from '@/components/ui/progress'\n\nconst GOALS = [\n  { label: 'Receita do trimestre', value: 72, hint: 'R$ 648k de R$ 900k' },\n  { label: 'Novos clientes', value: 48, hint: '24 de 50' },\n  { label: 'NPS', value: 91, hint: '91 de 100' },\n]\n\nexport default function CardProgressoMeta() {\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle className=\"flex items-center gap-2\">\n          <Target className=\"size-4\" /> Metas do Q4\n        </CardTitle>\n        <CardDescription>Atualizado há 5 min</CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-5\">\n        {GOALS.map((g) => (\n          <div key={g.label} className=\"space-y-1.5\">\n            <Progress value={g.value}>\n              <ProgressLabel>{g.label}</ProgressLabel>\n              <ProgressValue />\n            </Progress>\n            <p className=\"text-xs text-muted-foreground\">{g.hint}</p>\n          </div>\n        ))}\n      </CardContent>\n      <CardFooter className=\"items-center justify-between border-t\">\n        <AvatarGroup>\n          {['AS', 'BR', 'CM'].map((n) => (\n            <Avatar key={n} size=\"sm\">\n              <AvatarFallback>{n}</AvatarFallback>\n            </Avatar>\n          ))}\n          <AvatarGroupCount>+4</AvatarGroupCount>\n        </AvatarGroup>\n        <Button size=\"sm\" variant=\"outline\">\n          Ver detalhes\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n"}]}