{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dashboard-visao-geral","type":"registry:block","title":"Dashboard visão geral","description":"Sidebar, header com busca, KPIs, gráfico de área e tabela de negócios.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["recharts"],"registryDependencies":["avatar","badge","button","card","chart","input","table"],"files":[{"path":"components/pages/dashboard-visao-geral.tsx","type":"registry:component","content":"'use client'\n\nimport { ArrowUpRight, Bell, Home, Inbox, KanbanSquare, LineChart, Search, Settings, Users } from 'lucide-react'\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'\nimport { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nconst NAV = [\n  { Icon: Home, label: 'Visão geral', active: true },\n  { Icon: Inbox, label: 'Inbox' },\n  { Icon: KanbanSquare, label: 'Pipeline' },\n  { Icon: Users, label: 'Contatos' },\n  { Icon: LineChart, label: 'Relatórios' },\n  { Icon: Settings, label: 'Configurações' },\n]\nconst KPIS = [\n  ['Receita (mês)', 'R$ 184.320', '+18,4%'],\n  ['Novos leads', '1.284', '+6,1%'],\n  ['Taxa de resposta', '96%', '+2 pp'],\n  ['Ticket médio', 'R$ 1.902', '+4,8%'],\n]\nconst DATA = Array.from({ length: 12 }, (_, i) => ({ d: `${i + 1}`, v: 20 + Math.round(Math.sin(i / 2) * 8 + i * 2.2) }))\nconst CONFIG = { v: { label: 'Receita', color: 'var(--chart-1)' } } satisfies ChartConfig\nconst DEALS = [\n  ['Lumi Tecnologia', 'Proposta', 'R$ 24.000', 'AS'],\n  ['Kavo Ltda', 'Negociação', 'R$ 12.500', 'BR'],\n  ['Nuvem Fit', 'Fechamento', 'R$ 31.200', 'CM'],\n  ['Prisma Dados', 'Qualificado', 'R$ 8.900', 'DL'],\n]\n\nexport default function DashboardVisaoGeral() {\n  return (\n    <div className=\"flex min-h-[720px] w-full bg-background text-foreground\">\n      <aside className=\"hidden w-56 shrink-0 flex-col border-r bg-sidebar p-3 md:flex\">\n        <div className=\"flex items-center gap-2 px-2 py-1.5 font-semibold\">\n          <span className=\"size-5 rounded-md bg-primary\" /> Acme\n        </div>\n        <nav className=\"mt-4 flex flex-col gap-0.5\">\n          {NAV.map((n) => (\n            <a key={n.label} href=\"#\" className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-sm ${n.active ? 'bg-sidebar-accent font-medium' : 'text-muted-foreground hover:bg-sidebar-accent'}`}>\n              <n.Icon className=\"size-4\" /> {n.label}\n            </a>\n          ))}\n        </nav>\n        <div className=\"mt-auto flex items-center gap-2 rounded-md border p-2 text-sm\">\n          <Avatar size=\"sm\">\n            <AvatarFallback>AS</AvatarFallback>\n          </Avatar>\n          <div className=\"min-w-0\">\n            <div className=\"truncate font-medium\">Ana Souza</div>\n            <div className=\"truncate text-xs text-muted-foreground\">Plano Pro</div>\n          </div>\n        </div>\n      </aside>\n\n      <div className=\"min-w-0 flex-1\">\n        <header className=\"flex h-14 items-center gap-3 border-b px-6\">\n          <h1 className=\"font-medium\">Visão geral</h1>\n          <div className=\"relative ml-auto hidden w-64 sm:block\">\n            <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n            <Input placeholder=\"Buscar…\" className=\"pl-8\" />\n          </div>\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Notificações\">\n            <Bell />\n          </Button>\n          <Button size=\"sm\">Novo negócio</Button>\n        </header>\n\n        <main className=\"space-y-6 p-6\">\n          <div className=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n            {KPIS.map(([l, v, d]) => (\n              <Card key={l} size=\"sm\">\n                <CardHeader>\n                  <CardDescription>{l}</CardDescription>\n                  <CardTitle className=\"text-2xl tabular-nums\">{v}</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <Badge variant=\"secondary\" className=\"gap-1\">\n                    <ArrowUpRight className=\"size-3\" /> {d}\n                  </Badge>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n\n          <div className=\"grid gap-4 lg:grid-cols-[1.6fr_1fr]\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Receita diária</CardTitle>\n                <CardDescription>Últimos 12 dias</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <ChartContainer config={CONFIG} className=\"h-[220px] w-full\">\n                  <AreaChart data={DATA} margin={{ left: 8, right: 8 }}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis dataKey=\"d\" tickLine={false} axisLine={false} tickMargin={8} />\n                    <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n                    <Area dataKey=\"v\" type=\"natural\" fill=\"var(--color-v)\" fillOpacity={0.3} stroke=\"var(--color-v)\" />\n                  </AreaChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n            <Card>\n              <CardHeader>\n                <CardTitle>Negócios quentes</CardTitle>\n                <CardDescription>Fecham esta semana</CardDescription>\n              </CardHeader>\n              <CardContent className=\"px-0\">\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead className=\"pl-4\">Empresa</TableHead>\n                      <TableHead>Etapa</TableHead>\n                      <TableHead className=\"pr-4 text-right\">Valor</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {DEALS.map(([c, s, v, a]) => (\n                      <TableRow key={c}>\n                        <TableCell className=\"pl-4\">\n                          <div className=\"flex items-center gap-2\">\n                            <Avatar size=\"sm\">\n                              <AvatarFallback>{a}</AvatarFallback>\n                            </Avatar>\n                            {c}\n                          </div>\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">{s}</Badge>\n                        </TableCell>\n                        <TableCell className=\"pr-4 text-right tabular-nums\">{v}</TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </CardContent>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"}]}