[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # v0crmaltuzadigitalmain *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/iareattiveiculos-1578s-projects/v0-v0crmaltuzadigitalmain) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/RFcXfhFVyrw) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/iareattiveiculos-1578s-projects/v0-v0crmaltuzadigitalmain](https://vercel.com/iareattiveiculos-1578s-projects/v0-v0crmaltuzadigitalmain)** ## Build your app Continue building your app on: **[https://v0.app/chat/RFcXfhFVyrw](https://v0.app/chat/RFcXfhFVyrw)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/agendamentos/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { getCurrentUser } from "@/lib/auth" import { SidebarNav } from "@/components/sidebar-nav" import { AgendamentosKanban } from "@/components/agendamentos-kanban" import { AgendamentosListView } from "@/components/agendamentos-list-view" import { Button } from "@/components/ui/button" import { LayoutGrid, List } from "lucide-react" import { Card } from "@/components/ui/card" export default function Agendamentos() { const router = useRouter() const [viewMode, setViewMode] = useState<"kanban" | "list">("kanban") useEffect(() => { const user = getCurrentUser() if (!user) { router.push("/") } }, [router]) return (

{/* ======================== ESTILO GLOBAL NEON DARK ========================= */} {/* ======================== CONTEÚDO ========================= */}

Agendamentos

Gerencie os agendamentos de visitas com clientes

{/* BOTÃO KANBAN */} {/* BOTÃO LISTA */}

{/* Conteúdo das views */} {viewMode === "kanban" ? : }

) } [V0_FILE]typescript:file="app/api/auth/register/route.ts" isMerged="true" import { NextResponse } from "next/server" import { neon } from "@neondatabase/serverless" export async function POST(request: Request) { try { const body = await request.json() const { nome_empresa, nome_usuario, email, telefone, senha, confirmar_senha } = body // Validações básicas if (!nome_empresa || !nome_usuario || !email || !senha) { return NextResponse.json({ error: "Todos os campos obrigatórios devem ser preenchidos." }, { status: 400 }) } if (senha !== confirmar_senha) { return NextResponse.json({ error: "As senhas não coincidem." }, { status: 400 }) } if (senha.length < 6) { return NextResponse.json({ error: "A senha deve ter pelo menos 6 caracteres." }, { status: 400 }) } const sql = neon(process.env.POSTGRES_URL!) // Verificar se o email já existe const existingUser = await sql` SELECT email FROM "AUTORIZAÇÃO" WHERE LOWER(email) = LOWER(${email}) ` if (existingUser.length > 0) { return NextResponse.json({ error: "Este e-mail já está cadastrado no sistema." }, { status: 400 }) } // Criar novo usuário const result = await sql` INSERT INTO "AUTORIZAÇÃO" ( nome_empresa, nome_usuario, email, telefone, senha, plano, status, cargo, id_empresa, created_at ) VALUES ( ${nome_empresa}, ${nome_usuario}, ${email}, ${telefone || null}, ${senha}, 'gratuito', 'ativo', 'gestor', 1, NOW() ) RETURNING id, nome_usuario, email, nome_empresa ` const newUser = result[0] // Atualizar id_empresa para o próprio ID do usuário (cada empresa é independente) await sql` UPDATE "AUTORIZAÇÃO" SET id_empresa = ${newUser.id} WHERE id = ${newUser.id} ` return NextResponse.json( { success: true, message: "Conta criada com sucesso! Você pode fazer login agora.", user: { id: newUser.id, nome_usuario: newUser.nome_usuario, email: newUser.email, }, }, { status: 201 }, ) } catch (error) { console.error("[v0] Registration error:", error) return NextResponse.json({ error: "Erro ao processar solicitação. Tente novamente." }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/configuracoes/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { getCurrentUser } from "@/lib/auth" import { SidebarNav } from "@/components/sidebar-nav" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { User, Building, CreditCard, Users, Shield, Lock } from "lucide-react" import { EditProfileForm } from "@/components/edit-profile-form" import { AddMemberForm } from "@/components/add-member-form" import { MembersManagement } from "@/components/members-management" import { getCompanyMembers, STATUS_LABELS, CARGO_LABELS, canManageMembers } from "@/lib/auth" export default function Configuracoes() { const router = useRouter() const [user, setUser] = useState(null) const [isEditingProfile, setIsEditingProfile] = useState(false) const [companyMembers, setCompanyMembers] = useState([]) const [isAddingMember, setIsAddingMember] = useState(false) const [loadingMembers, setLoadingMembers] = useState(true) useEffect(() => { const currentUser = getCurrentUser() if (!currentUser) { router.push("/") } else { setUser(currentUser) loadCompanyMembers(currentUser.id_empresa) } }, [router]) const loadCompanyMembers = async (idEmpresa: number) => { setLoadingMembers(true) const members = await getCompanyMembers(idEmpresa) setCompanyMembers(members) setLoadingMembers(false) } const handleProfileUpdate = () => { const updatedUser = getCurrentUser() if (updatedUser) { setUser(updatedUser) } setIsEditingProfile(false) } const handleMembersUpdate = () => { if (user) { loadCompanyMembers(user.id_empresa) } } if (!user) return null const activeMembers = companyMembers.filter((m) => m.status === "ativo") const adminMembers = companyMembers.filter((m) => m.cargo === "administrador") const isUserAdmin = canManageMembers(user) return (

{/*===================== TEMA NEON VERDE =====================*/} {/*===================== CONTEÚDO =====================*/}

Configurações

Gerencie sua conta e preferências

{/*---------------------- CARD: PESSOAIS ----------------------*/} Informações Pessoais {isEditingProfile ? ( setIsEditingProfile(false)} onSuccess={handleProfileUpdate} /> ) : (

Nome

E-mail

Telefone

Cargo

{CARGO_LABELS[user.cargo]}

)} {/*---------------------- CARD: EMPRESA ----------------------*/} Informações da Empresa

Nome da Empresa

ID da Empresa

Status da Conta {STATUS_LABELS[user.status]}

{/*---------------------- CARD: PLANO ----------------------*/} Plano Atual

Plano {user.plano.charAt(0).toUpperCase() + user.plano.slice(1)}

• Membros ilimitados

• Dashboard completo

• Kanban de leads

• Relatórios básicos

{/*---------------------- CARD: GERENCIAR MEMBROS ----------------------*/}

Gerenciar Membros {!isUserAdmin && } {isUserAdmin && ( )}

{/* Caixas de métrica */}

Total de Membros

{companyMembers.length}

Membros Ativos

{activeMembers.length}

Administradores

{adminMembers.length}

{/* Alerta */} {!isUserAdmin && ( Apenas administradores podem gerenciar membros. )} {/* Lista de membros */} {loadingMembers ? ( <>

) : (

)}

{isAddingMember && ( setIsAddingMember(false)} onSuccess={handleMembersUpdate} currentUser={user} /> )}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { getCurrentUser } from "@/lib/auth" import { SidebarNav } from "@/components/sidebar-nav" import { DashboardStats } from "@/components/dashboard-stats" import { DashboardCharts } from "@/components/dashboard-charts" export default function Dashboard() { const router = useRouter() useEffect(() => { const user = getCurrentUser() if (!user) { router.push("/") } }, [router]) return (

{/* HEADER PRETO */}

Dashboard Inteligente

Análise completa dos seus leads e performance em tempo real

{/* CONTEÚDO – FUNDO PRETO (CORRIGIDO) */}

{/* FOOTER */}

) } [V0_FILE]typescriptreact:file="app/estoque/page.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { getCurrentUser } from "@/lib/auth" import { SidebarNav } from "@/components/sidebar-nav" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AdicionarVeiculoForm } from "@/components/adicionar-veiculo-form" import { ListaVeiculos } from "@/components/lista-veiculos" export default function Estoque() { const router = useRouter() useEffect(() => { const user = getCurrentUser() if (!user) { router.push("/") } }, [router]) return (

{/* ============================ GLOBAL DARK + NEON ============================ */}

Estoque

Gerencie o estoque de veículos da sua concessionária

{/* TABS */} {/* Botão 1 */} Adicionar Veículo ao Estoque {/* Botão 2 */} Veículo vendido ou removido

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { /* Tema Altuza Digital - Azul marinho escuro com verde neon */ --background: 222 47% 11%; /* #0F172A - azul marinho escuro */ --foreground: 210 17% 98%; /* #FAFAFA - texto branco */ --card: 222 47% 11%; /* #0F172A - azul marinho escuro */ --card-foreground: 210 17% 98%; --popover: 222 47% 11%; --popover-foreground: 210 17% 98%; --primary: 142 71% 45%; /* #22C55E - verde neon */ --primary-foreground: 222 47% 11%; /* texto preto/azul escuro sobre verde */ --secondary: 217 33% 17%; /* #1E293B - azul mais claro */ --secondary-foreground: 210 17% 98%; --muted: 217 33% 17%; --muted-foreground: 215 20% 65%; /* #94A3B8 - cinza azulado */ --accent: 142 71% 45%; /* #22C55E - verde neon */ --accent-foreground: 222 47% 11%; --destructive: 0 84% 60%; --destructive-foreground: 210 17% 98%; --border: 217 33% 17%; /* #1E293B - bordas azul escuro */ --input: 222 47% 11%; /* #0F172A - fundo dos inputs */ --ring: 142 71% 45%; /* #22C55E - anel de foco verde */ --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { /* Fundo preto puro para combinar com o tema */ @apply bg-black text-foreground; } } /* Scrollbar customizada com verde Altuza */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #0f172a; border-radius: 3px; } ::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #16a34a; } /* Smooth transitions */ * { transition: all 0.15s ease-in-out; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Altuza Digital - Plataforma de Leads", description: "Plataforma moderna para acompanhamento de leads para concessionárias", generator: 'v0.app' } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/negociacoes/page.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { getCurrentUser } from "@/lib/auth" import { SidebarNav } from "@/components/sidebar-nav" import { KanbanBoard } from "@/components/kanban-board" export default function Negociacoes() { const router = useRouter() useEffect(() => { const user = getCurrentUser() if (!user) { router.push("/") } }, [router]) return (

{/* ============================ TEMA GLOBAL PRETO + VERDE ============================ */} {/* ============================ CONTEÚDO DA PÁGINA ============================ */}

Negociações

Gerencie seus leads através do funil de vendas

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" export const dynamic = "force-dynamic" import { LoginForm } from "@/components/login-form" export default function Home() { return } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/add-member-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Alert, AlertDescription } from "@/components/ui/alert" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { addCompanyMember, STATUS_LABELS, CARGO_LABELS, type User } from "@/lib/auth" import { Loader2, UserPlus, Briefcase, Users, TrendingUp, UserCheck, ShieldCheck } from "lucide-react" interface AddMemberFormProps { isOpen: boolean onClose: () => void onSuccess: () => void currentUser: User } export function AddMemberForm({ isOpen, onClose, onSuccess, currentUser }: AddMemberFormProps) { const [formData, setFormData] = useState({ nome_usuario: "", email: "", senha: "", telefone: "", status: "ativo" as "ativo" | "pendente" | "inativo", cargo: "convidado" as "administrador" | "convidado" | "sdr" | "gestor" | "vendedor", }) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError("") try { const result = await addCompanyMember({ id_empresa: currentUser.id_empresa, nome_empresa: currentUser.nome_empresa, ...formData, }) if (result.success) { try { await fetch("https://n8n.eazy.tec.br/webhook/cadastro-vendedores", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id_empresa: currentUser.id_empresa, nome_empresa: currentUser.nome_empresa, nome_usuario: formData.nome_usuario, email: formData.email, telefone: formData.telefone, cargo: formData.cargo, status: formData.status, data_cadastro: new Date().toISOString(), }), }) console.log("[v0] Dados do vendedor enviados para webhook com sucesso") } catch (webhookError) { console.error("[v0] Erro ao enviar dados para webhook:", webhookError) // Não bloqueia o fluxo se o webhook falhar } // Fim da alteração setFormData({ nome_usuario: "", email: "", senha: "", telefone: "", status: "ativo", cargo: "convidado", }) onSuccess() onClose() } else { setError(result.error || "Erro ao adicionar membro.") } } catch (err) { setError("Erro ao adicionar membro. Tente novamente.") } finally { setLoading(false) } } const handleChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } const resetForm = () => { setFormData({ nome_usuario: "", email: "", senha: "", telefone: "", status: "ativo", cargo: "convidado", }) setError("") } const handleClose = () => { resetForm() onClose() } const getCargoIcon = (cargo: string) => { switch (cargo) { case "administrador": return case "gestor": return case "sdr": return case "vendedor": return case "convidado": return default: return null } } return ( ) } [V0_FILE]typescriptreact:file="components/adicionar-veiculo-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/hooks/use-toast" import { adicionarVeiculo, type NovoVeiculo } from "@/lib/estoque" import { Loader2 } from "lucide-react" const combustiveis = ["Gasolina", "Etanol", "Flex", "Diesel", "Elétrico", "Híbrido"] export function AdicionarVeiculoForm() { const { toast } = useToast() const [loading, setLoading] = useState(false) const [formData, setFormData] = useState({ marca: "", modelo: "", ano: new Date().getFullYear(), cor: "", combustivel: "", quilometragem: 0, }) const handleInputChange = (field: keyof NovoVeiculo, value: string | number) => { setFormData((prev) => ({ ...prev, [field]: value, })) } const isFormValid = () => { return ( formData.marca.trim() !== "" && formData.modelo.trim() !== "" && formData.ano > 1900 && formData.cor.trim() !== "" && formData.combustivel !== "" && formData.quilometragem >= 0 ) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!isFormValid()) { toast({ title: "Erro", description: "Todos os campos devem ser preenchidos corretamente.", variant: "destructive", }) return } setLoading(true) try { const result = await adicionarVeiculo(formData) if (result.success) { toast({ title: "Sucesso", description: "Veículo adicionado ao estoque com sucesso!", }) // Limpar formulário setFormData({ marca: "", modelo: "", ano: new Date().getFullYear(), cor: "", combustivel: "", quilometragem: 0, }) } else { toast({ title: "Erro", description: result.error || "Erro ao adicionar veículo", variant: "destructive", }) } } catch (error) { toast({ title: "Erro", description: "Erro interno do servidor", variant: "destructive", }) } finally { setLoading(false) } } return ( Adicionar Novo Veículo Preencha todos os campos para adicionar um veículo ao estoque

Marca handleInputChange("marca", e.target.value)} placeholder="Ex: Toyota, Honda, Ford..." required />

Modelo handleInputChange("modelo", e.target.value)} placeholder="Ex: Corolla, Civic, Focus..." required />

Ano handleInputChange("ano", Number.parseInt(e.target.value))} required />

Cor handleInputChange("cor", e.target.value)} placeholder="Ex: Branco, Preto, Prata..." required />

Combustível

Quilometragem handleInputChange("quilometragem", Number.parseInt(e.target.value) || 0)} placeholder="Ex: 50000" required />

) } [V0_FILE]typescriptreact:file="components/agendamentos-kanban.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Alert, AlertDescription } from "@/components/ui/alert" import { getAgendamentos, updateAgendamentoStage, deleteAgendamento, getVendedores, type Agendamento, type Vendedor, ESTAGIO_AGENDAMENTO_LABELS, VALID_ESTAGIOS_AGENDAMENTO, updateAgendamento, sendAgendamentoWebhook, } from "@/lib/agendamentos" import { getCurrentUser } from "@/lib/auth" import { Search, Filter, Phone, Calendar, Clock, User, Trash2, AlertTriangle, Move } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const COLUNAS_KANBAN_AGENDAMENTOS = ["Agendado", "Confirmado", "Realizado", "Cancelado", "Reagendado"] export function AgendamentosKanban() { const [agendamentos, setAgendamentos] = useState([]) const [filteredAgendamentos, setFilteredAgendamentos] = useState([]) const [loading, setLoading] = useState(true) const [selectedAgendamento, setSelectedAgendamento] = useState(null) const [vendedores, setVendedores] = useState([]) const [searchTerm, setSearchTerm] = useState("") const [statusMessage, setStatusMessage] = useState<{ type: "success" | "error"; text: string } | null>(null) const [movingAgendamento, setMovingAgendamento] = useState(null) const [deletingAgendamento, setDeletingAgendamento] = useState(null) const [formData, setFormData] = useState({ titulo: "", data_agendamento: "", descricao: "", vendedor_id: "", local: "", }) useEffect(() => { loadData() }, []) useEffect(() => { filterAgendamentos() }, [agendamentos, searchTerm]) const loadData = async () => { const user = getCurrentUser() if (user) { const [agendamentosData, vendedoresData] = await Promise.all([ getAgendamentos(user.id_empresa), getVendedores(user.id_empresa), ]) setAgendamentos(agendamentosData) setVendedores(vendedoresData) } setLoading(false) } const filterAgendamentos = () => { let filtered = [...agendamentos] if (searchTerm) { filtered = filtered.filter( (a) => a.titulo?.toLowerCase().includes(searchTerm.toLowerCase()) || a.nome_lead?.toLowerCase().includes(searchTerm.toLowerCase()) || a.telefone?.includes(searchTerm) || a.vendedor_nome?.toLowerCase().includes(searchTerm.toLowerCase()), ) } setFilteredAgendamentos(filtered) } const handleDragEnd = async (result: any) => { if (!result.destination) return const { source, destination, draggableId } = result if (source.droppableId === destination.droppableId) return const agendamentoId = draggableId const newStage = destination.droppableId const oldStage = source.droppableId if (!VALID_ESTAGIOS_AGENDAMENTO.includes(newStage)) { setStatusMessage({ type: "error", text: `Estágio inválido: ${newStage}`, }) setTimeout(() => setStatusMessage(null), 5000) return } setMovingAgendamento(agendamentoId) setAgendamentos((prev) => prev.map((a) => a.id === agendamentoId ? { ...a, status: newStage, atualizado_em: new Date().toISOString() } : a, ), ) try { const success = await updateAgendamentoStage(agendamentoId, newStage) if (!success) { setAgendamentos((prev) => prev.map((a) => (a.id === agendamentoId ? { ...a, status: oldStage } : a)), ) setStatusMessage({ type: "error", text: "Erro ao mover o agendamento", }) } else { setStatusMessage({ type: "success", text: "Agendamento movido com sucesso!", }) } } catch (error) { setAgendamentos((prev) => prev.map((a) => (a.id === agendamentoId ? { ...a, status: oldStage } : a))) setStatusMessage({ type: "error", text: "Erro ao mover o agendamento", }) } finally { setMovingAgendamento(null) setTimeout(() => setStatusMessage(null), 5000) } } const handleOpenAgendamento = (agendamento: Agendamento) => { setSelectedAgendamento(agendamento) setFormData({ titulo: agendamento.titulo || "", data_agendamento: agendamento.data_agendamento || "", descricao: agendamento.descricao || "", vendedor_id: agendamento.vendedor_id?.toString() || "", local: agendamento.local || "", }) } const handleSaveAgendamento = async () => { if (!selectedAgendamento) return const success = await updateAgendamento(selectedAgendamento.id, { titulo: formData.titulo, data_agendamento: formData.data_agendamento, descricao: formData.descricao, vendedor_id: formData.vendedor_id || undefined, local: formData.local, }) if (success) { // Buscar o vendedor selecionado para obter o nome const vendedorSelecionado = vendedores.find((v) => v.id.toString() === formData.vendedor_id) // Enviar webhook com os dados atualizados const agendamentoAtualizado: Agendamento = { ...selectedAgendamento, titulo: formData.titulo, data_agendamento: formData.data_agendamento, descricao: formData.descricao, vendedor_id: formData.vendedor_id || undefined, vendedor_nome: vendedorSelecionado?.nome || selectedAgendamento.vendedor_nome, local: formData.local, atualizado_em: new Date().toISOString(), } await sendAgendamentoWebhook(agendamentoAtualizado) await loadData() setSelectedAgendamento(null) setStatusMessage({ type: "success", text: "Agendamento atualizado com sucesso!", }) } else { setStatusMessage({ type: "error", text: "Erro ao atualizar agendamento", }) } setTimeout(() => setStatusMessage(null), 5000) } const handleDeleteAgendamento = async (agendamentoId: string) => { if (!confirm("Tem certeza que deseja excluir este agendamento?")) return setDeletingAgendamento(agendamentoId) try { const success = await deleteAgendamento(agendamentoId) if (success) { setAgendamentos((prev) => prev.filter((a) => a.id !== agendamentoId)) if (selectedAgendamento && selectedAgendamento.id === agendamentoId) { setSelectedAgendamento(null) } setStatusMessage({ type: "success", text: "Agendamento excluído com sucesso!", }) } else { setStatusMessage({ type: "error", text: "Erro ao excluir agendamento", }) } } catch (error) { setStatusMessage({ type: "error", text: "Erro inesperado ao excluir agendamento", }) } finally { setDeletingAgendamento(null) setTimeout(() => setStatusMessage(null), 5000) } } const getAgendamentosByStage = (stage: string) => { return filteredAgendamentos.filter((a) => a.status === stage) } if (loading) { return (

{COLUNAS_KANBAN_AGENDAMENTOS.map((_, index) => (

{[...Array(3)].map((_, i) => (

))} ))}

) } return (

{/* Filtros */} Filtros

setSearchTerm(e.target.value)} className="pl-10" />

{/* Status Message */} {statusMessage && ( {statusMessage.text} )} {/* Kanban Board */}

{COLUNAS_KANBAN_AGENDAMENTOS.map((stage) => ( {(provided, snapshot) => ( {snapshot.isDraggingOver && } {ESTAGIO_AGENDAMENTO_LABELS[stage as keyof typeof ESTAGIO_AGENDAMENTO_LABELS]} {getAgendamentosByStage(stage).length} {getAgendamentosByStage(stage).map((agendamento, index) => ( {(provided, snapshot) => ( handleOpenAgendamento(agendamento)} >

{agendamento.titulo || agendamento.nome_lead || "Sem título"}

{agendamento.telefone && (

{agendamento.telefone}

)} {agendamento.data_agendamento && (

{new Date(agendamento.data_agendamento).toLocaleDateString("pt-BR")}

)} {agendamento.local && (

{agendamento.local}

)} {agendamento.vendedor_nome && (

{agendamento.vendedor_nome}

)}

)} ))} {provided.placeholder} )} ))}

{/* Modal de Detalhes */}

) } [V0_FILE]typescriptreact:file="components/agendamentos-list-view.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { getAgendamentos, updateAgendamento, deleteAgendamento, getVendedores, type Agendamento, type Vendedor, ESTAGIO_AGENDAMENTO_LABELS, ESTAGIO_AGENDAMENTO_COLORS, } from "@/lib/agendamentos" import { getCurrentUser } from "@/lib/auth" import { Search, Filter, Trash2, Edit2, Phone, Calendar, Clock, User } from "lucide-react" export function AgendamentosListView() { const [agendamentos, setAgendamentos] = useState([]) const [filteredAgendamentos, setFilteredAgendamentos] = useState([]) const [loading, setLoading] = useState(true) const [searchTerm, setSearchTerm] = useState("") const [filterEstagio, setFilterEstagio] = useState("") const [selectedAgendamento, setSelectedAgendamento] = useState(null) const [vendedores, setVendedores] = useState([]) const [formData, setFormData] = useState({ modelo_veiculo: "", data_agendamento: "", hora_agendamento: "", id_vendedor: "", observacoes: "", }) useEffect(() => { loadData() }, []) useEffect(() => { filterAgendamentos() }, [agendamentos, searchTerm, filterEstagio]) const loadData = async () => { const user = getCurrentUser() if (user) { const [agendamentosData, vendedoresData] = await Promise.all([ getAgendamentos(user.id_empresa), getVendedores(user.id_empresa), ]) setAgendamentos(agendamentosData) setVendedores(vendedoresData) } setLoading(false) } const filterAgendamentos = () => { let filtered = [...agendamentos] if (searchTerm) { filtered = filtered.filter( (a) => a.nome_lead.toLowerCase().includes(searchTerm.toLowerCase()) || a.telefone?.includes(searchTerm) || a.vendedor?.toLowerCase().includes(searchTerm.toLowerCase()), ) } if (filterEstagio && filterEstagio !== "all") { filtered = filtered.filter((a) => a.estagio_agendamento === filterEstagio) } setFilteredAgendamentos(filtered) } const handleOpenAgendamento = (agendamento: Agendamento) => { setSelectedAgendamento(agendamento) setFormData({ modelo_veiculo: agendamento.modelo_veiculo || "", data_agendamento: agendamento.data_agendamento || "", hora_agendamento: agendamento.hora_agendamento || "", id_vendedor: agendamento.id_vendedor?.toString() || "", observacoes: agendamento.observacoes || "", }) } const handleSaveAgendamento = async () => { if (!selectedAgendamento) return await updateAgendamento(selectedAgendamento.id, { modelo_veiculo: formData.modelo_veiculo, data_agendamento: formData.data_agendamento, hora_agendamento: formData.hora_agendamento, id_vendedor: formData.id_vendedor ? Number.parseInt(formData.id_vendedor) : undefined, vendedor: vendedores.find((v) => v.id.toString() === formData.id_vendedor)?.vendedor, observacoes: formData.observacoes, }) await loadData() setSelectedAgendamento(null) } const handleDeleteAgendamento = async (agendamentoId: number) => { if (!confirm("Tem certeza que deseja excluir este agendamento?")) return await deleteAgendamento(agendamentoId) setAgendamentos((prev) => prev.filter((a) => a.id !== agendamentoId)) if (selectedAgendamento && selectedAgendamento.id === agendamentoId) { setSelectedAgendamento(null) } } if (loading) { return

Carregando...

} return (

{/* Filtros */} Filtros

setSearchTerm(e.target.value)} className="pl-10" />

{/* Lista */} Agendamentos

{filteredAgendamentos.length === 0 ? (

Nenhum agendamento encontrado

) : ( filteredAgendamentos.map((agendamento) => (

{agendamento.nome_lead}

{ ESTAGIO_AGENDAMENTO_LABELS[ agendamento.estagio_agendamento as keyof typeof ESTAGIO_AGENDAMENTO_LABELS ] }

{agendamento.telefone && (

{agendamento.telefone}

)} {agendamento.modelo_veiculo && (

Veículo: {agendamento.modelo_veiculo}

)} {agendamento.data_agendamento && (

{new Date(agendamento.data_agendamento).toLocaleDateString("pt-BR")} {agendamento.hora_agendamento && ( <> {" "} {agendamento.hora_agendamento} )}

)} {agendamento.vendedor && (

{agendamento.vendedor}

)}

)) )}

{/* Modal de Edição */}

) } [V0_FILE]typescriptreact:file="components/dashboard-charts.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, Area, AreaChart, } from "recharts" import { getDashboardData, type DashboardFilters } from "@/lib/dashboard-stats" import { getCurrentUser } from "@/lib/auth" import { TrendingUp, Users, Car, Target, Filter, RotateCcw, BarChart3, Activity } from "lucide-react" const COLORS = [ "#10b981", "#3b82f6", "#059669", "#f59e0b", "#ef4444", "#06b6d4", "#22c55e", "#f97316", "#84cc16", "#ec4899", ] const ESTAGIO_COLORS = { oportunidade: "#3b82f6", em_qualificacao: "#f59e0b", qualificado: "#10b981", follow_up: "#22c55e", nutricao: "#f97316", fechado: "#059669", nao_fechou: "#dc2626", } const GRADIENT_COLORS = { primary: "from-green-600 via-emerald-600 to-teal-500", secondary: "from-gray-800 via-gray-900 to-black", success: "from-green-400 to-emerald-500", warning: "from-yellow-400 to-orange-500", danger: "from-red-400 to-pink-500", } export function DashboardCharts() { const [dashboardData, setDashboardData] = useState(null) const [loading, setLoading] = useState(true) const [filters, setFilters] = useState({ periodo: "30d", }) useEffect(() => { loadDashboardData() }, [filters]) const loadDashboardData = async () => { setLoading(true) const user = getCurrentUser() if (user) { const data = await getDashboardData(user.id_empresa, filters) setDashboardData(data) } setLoading(false) } const handleFilterChange = (key: keyof DashboardFilters, value: string) => { setFilters((prev) => ({ ...prev, [key]: value === "all" ? undefined : value, })) } const resetFilters = () => { setFilters({ periodo: "30d" }) } // Ensure arrays have default values to prevent undefined errors const estagioResumo = dashboardData?.estagioResumo || [] const vendedorStats = dashboardData?.vendedorStats || [] const topVeiculos = dashboardData?.topVeiculos || [] const origemStats = dashboardData?.origemStats || [] const valorPorEstagio = dashboardData?.valorPorEstagio || [] const tendencias = dashboardData?.tendencias || [] const availableVendedores = dashboardData?.availableVendedores || [] const availableOrigens = dashboardData?.availableOrigens || [] if (loading || !dashboardData) { return (

{/* Loading Skeleton */}

{[...Array(4)].map((_, i) => (

))}

{[...Array(6)].map((_, i) => (

))}

) } return (

{/* Filtros com Design Moderno - CARD PRETO */}

Filtros Inteligentes

Período

Vendedor

Origem

{/* Filtros Ativos */} {(filters.vendedor || filters.origem) && (

Filtros ativos: {filters.vendedor && ( 👤 {filters.vendedor} )} {filters.origem && ( 📍 {filters.origem} )}

)} {/* Grid Principal de Gráficos */}

{/* Resumo dos Estágios - CARD PRETO */}

Resumo por Estágio

Distribuição dos leads

[value, "Quantidade de Leads"]} labelFormatter={(label) => { const labels = { oportunidade: "🎯 Oportunidade", em_qualificacao: "⏳ Em Qualificação", qualificado: "✅ Qualificado", follow_up: "📞 Follow Up", nutricao: "🌱 Nutrição", fechado: "🎉 Fechado", nao_fechou: "❌ Não Fechou", } return labels[label] || label }} /> {/* Lista compacta dos estágios */}

{dashboardData.estagioResumo .sort((a, b) => b.quantidade - a.quantidade) .slice(0, 5) .map((item, index) => (

{item.estagio === "oportunidade" ? "Oportunidade" : item.estagio === "em_qualificacao" ? "Em Qualificação" : item.estagio === "qualificado" ? "Qualificado" : item.estagio === "follow_up" ? "Follow Up" : item.estagio === "nutricao" ? "Nutrição" : item.estagio === "fechado" ? "Fechado" : item.estagio === "nao_fechou" ? "Não Fechou" : item.estagio}

{item.quantidade}

{item.percentual}%

))}

{/* Performance por Vendedor - CARD PRETO */}

Performance por Vendedor

Análise de resultados da equipe

[ name === "taxa_conversao" ? `${Number(value).toFixed(1)}%` : value, name === "total_leads" ? "📊 Total de Leads" : name === "leads_fechados" ? "🎉 Leads Fechados" : "📈 Taxa de Conversão", ]} /> {/* Top 3 Vendedores - caixas pretas */}

{dashboardData.vendedorStats.slice(0, 3).map((vendedor, index) => (

{index === 0 ? "🥇" : index === 1 ? "🥈" : "🥉"}

{vendedor.vendedor}

{vendedor.total_leads} leads • {vendedor.taxa_conversao.toFixed(1)}%

))}

{/* Top Veículos - CARD PRETO */}

Top Veículos

Modelos mais procurados

{COLORS.map((color, index) => ( ))} percent > 5 ? `${veiculo.split(" ").slice(0, 2).join(" ")} (${total_interesse})` : "" } outerRadius={100} innerRadius={40} fill="#8884d8" dataKey="total_interesse" stroke="#000" strokeWidth={2} > {dashboardData.veiculoStats.slice(0, 8).map((_: any, index: number) => ( ))} [value, "🚗 Interesse"]} labelFormatter={(label) => `Veículo: ${label}`} /> {/* Top 5 Veículos Lista - caixas pretas */}

{dashboardData.veiculoStats.slice(0, 5).map((veiculo: any, index: number) => (

{index + 1}

{veiculo.veiculo}

{veiculo.total_interesse}

{veiculo.taxa_conversao.toFixed(1)}%

))}

{/* Performance por Origem - CARD PRETO */}

Performance por Origem

Análise de canais de aquisição

{dashboardData.origemStats.slice(0, 4).map((origem, index) => (

📍 {origem.origem} {origem.taxa_conversao.toFixed(1)}%

{origem.total_leads} leads • {origem.leads_fechados} fechados

))}

{/* Evolução dos Estágios - CARD PRETO */}

Evolução dos Leads por Estágio

Tendências temporais dos últimos 30 dias

{Object.entries(ESTAGIO_COLORS).map(([key, color]) => ( ))}

) } [V0_FILE]typescriptreact:file="components/dashboard-stats.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { getLeadStats, ESTAGIO_LABELS } from "@/lib/leads" import { getCurrentUser } from "@/lib/auth" import { Users, TrendingUp, Award, Zap, Activity, DollarSign } from "lucide-react" // Função para formatar moeda function formatCurrency(value: number): string { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(value) } export function DashboardStats() { const [stats, setStats] = useState({ totalLeads: 0, leadsPorEstagio: {} as Record, leadsPorOrigem: {} as Record, conversao: "0", valorTotal: 0, valorMedio: 0, }) const [loading, setLoading] = useState(true) useEffect(() => { const loadStats = async () => { const user = getCurrentUser() if (user) { const data = await getLeadStats(user.id_empresa) setStats(data) } setLoading(false) } loadStats() }, []) if (loading) { return (

{[...Array(4)].map((_, i) => (

))}

) } const statCards = [ { title: "Total de Leads", value: stats.totalLeads, subtitle: "Leads cadastrados", icon: Users, gradient: "from-green-500 to-emerald-500", borderColor: "border-green-600", change: "+12%", changeType: "positive" as const, }, { title: "Taxa de Conversão", value: `${stats.conversao}%`, subtitle: "Leads fechados", icon: TrendingUp, gradient: "from-blue-500 to-cyan-500", borderColor: "border-blue-600", change: "+2.3%", changeType: "positive" as const, }, { title: "Valor Total", value: formatCurrency(stats.valorTotal || 0), subtitle: "Pipeline de vendas", icon: DollarSign, gradient: "from-green-500 to-emerald-500", borderColor: "border-green-600", change: "+15%", changeType: "positive" as const, }, { title: "Fechados", value: stats.leadsPorEstagio.fechado || 0, subtitle: "Vendas realizadas", icon: Award, gradient: "from-orange-500 to-red-500", borderColor: "border-orange-600", change: "+5", changeType: "positive" as const, }, ] return (

{/* CARDS PRINCIPAIS – FUNDO PRETO */}

{statCards.map((card) => (

{card.title}

{card.change}

{card.value}

{card.subtitle}

))}

{/* CARDS DE RESUMO – TAMBÉM PRETOS */}

{/* Distribuição por estágio */}

Distribuição por Estágio

{Object.entries(stats.leadsPorEstagio) .sort(([, a], [, b]) => (b as number) - (a as number)) .slice(0, 5) .map(([estagio, count], index) => (

{ ESTAGIO_LABELS[ estagio as keyof typeof ESTAGIO_LABELS ] }

{count as number}

))}

{/* Canais de origem */}

Canais de Origem

{Object.entries(stats.leadsPorOrigem) .sort(([, a], [, b]) => (b as number) - (a as number)) .slice(0, 5) .map(([origem, count], index) => (

{origem}

{count as number}

))}

) } [V0_FILE]typescriptreact:file="components/edit-profile-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { updateUser, type User } from "@/lib/auth" import { Loader2, Save, X } from "lucide-react" interface EditProfileFormProps { user: User onCancel: () => void onSuccess: () => void } export function EditProfileForm({ user, onCancel, onSuccess }: EditProfileFormProps) { const [formData, setFormData] = useState({ nome_usuario: user.nome_usuario, email: user.email, telefone: user.telefone || "", }) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError("") try { const success = await updateUser(user.id, formData) if (success) { onSuccess() } else { setError("Erro ao atualizar perfil. Tente novamente.") } } catch (err) { setError("Erro ao atualizar perfil. Tente novamente.") } finally { setLoading(false) } } const handleChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } return ( ) } [V0_FILE]typescriptreact:file="components/editable-email-field.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { updateLeadEmail } from "@/lib/leads" import { Check, X, Edit3, Mail } from "lucide-react" interface EditableEmailFieldProps { leadId: number currentEmail: string onEmailUpdate: (newEmail: string) => void className?: string } export function EditableEmailField({ leadId, currentEmail, onEmailUpdate, className = "" }: EditableEmailFieldProps) { const [isEditing, setIsEditing] = useState(false) const [editValue, setEditValue] = useState(currentEmail || "") const [loading, setLoading] = useState(false) const handleStartEdit = () => { setIsEditing(true) setEditValue(currentEmail || "") } const handleSave = async () => { setLoading(true) try { const success = await updateLeadEmail(leadId, editValue) if (success) { onEmailUpdate(editValue) setIsEditing(false) } else { // Reverter para o valor original em caso de erro setEditValue(currentEmail || "") } } catch (error) { console.error("Error updating email:", error) setEditValue(currentEmail || "") } finally { setLoading(false) } } const handleCancel = () => { setEditValue(currentEmail || "") setIsEditing(false) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { handleSave() } else if (e.key === "Escape") { handleCancel() } } const isValidEmail = (email: string) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } if (isEditing) { return (

setEditValue(e.target.value)} onKeyDown={handleKeyPress} className={`text-xs h-7 pl-6 pr-1 ${ editValue && !isValidEmail(editValue) ? "border-red-300 focus:border-red-500" : "border-green-300 focus:border-green-500" }`} placeholder="exemplo@email.com" autoFocus disabled={loading} />

) } return (

E-mail

{currentEmail || Clique para adicionar e-mail}

) } [V0_FILE]typescriptreact:file="components/editable-observacao-field.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button" import { updateLeadObservacao } from "@/lib/leads" import { Check, X, Edit3, MessageSquare } from "lucide-react" interface EditableObservacaoFieldProps { leadId: number currentObservacao: string onObservacaoUpdate: (newObservacao: string) => void className?: string } export function EditableObservacaoField({ leadId, currentObservacao, onObservacaoUpdate, className = "", }: EditableObservacaoFieldProps) { const [isEditing, setIsEditing] = useState(false) const [editValue, setEditValue] = useState(currentObservacao || "") const [loading, setLoading] = useState(false) const handleStartEdit = () => { setIsEditing(true) setEditValue(currentObservacao || "") } const handleSave = async () => { setLoading(true) try { const success = await updateLeadObservacao(leadId, editValue) if (success) { onObservacaoUpdate(editValue) setIsEditing(false) } else { // Reverter para o valor original em caso de erro setEditValue(currentObservacao || "") } } catch (error) { console.error("Error updating observacao:", error) setEditValue(currentObservacao || "") } finally { setLoading(false) } } const handleCancel = () => { setEditValue(currentObservacao || "") setIsEditing(false) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Escape") { handleCancel() } // Ctrl+Enter para salvar if (e.key === "Enter" && e.ctrlKey) { handleSave() } } if (isEditing) { return (

setEditValue(e.target.value)}
          onKeyDown={handleKeyPress}
          className="min-h-[120px] border-orange-300 focus:border-orange-500 resize-none"
          placeholder="Digite suas observações sobre este lead..."
          autoFocus
          disabled={loading}
        />
        <div className="flex gap-2 justify-end">
          <Button
            size="sm"
            onClick={handleSave}
            disabled={loading}
            className="bg-orange-500 hover:bg-orange-600 text-white"
          >
            <Check className="h-3 w-3 mr-1" />
            Salvar
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={handleCancel}
            disabled={loading}
            className="border-gray-300 hover:bg-gray-50 bg-transparent"
          >
            <X className="h-3 w-3 mr-1" />
            Cancelar
          </Button>
        </div>
        <p className="text-xs text-gray-500">💡 Dica: Use Ctrl+Enter para salvar rapidamente</p>
      </div>
    )
  }

return (
    <div
      className={`group cursor-pointer hover:bg-orange-50 rounded-lg p-3 border border-orange-200 transition-colors ${className}`}
      onClick={handleStartEdit}
    >
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-2">
            <MessageSquare className="h-4 w-4 text-orange-600" />
            <span className="text-sm font-medium text-orange-800">Observação do Vendedor</span>
          </div>
          <div className="text-sm text-gray-700 whitespace-pre-line leading-relaxed min-h-[60px]">
            {currentObservacao || (
              <span className="text-gray-400 italic">Clique para adicionar observações sobre este lead...</span>
            )}
          </div>
        </div>
        <Edit3 className="h-4 w-4 text-orange-400 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 ml-2" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/editable-value-field.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { formatCurrency, parseCurrency, updateLeadValue } from "@/lib/leads"
import { Check, X, Edit3, DollarSign } from "lucide-react"

interface EditableValueFieldProps {
  leadId: number
  currentValue: number
  onValueUpdate: (newValue: number) => void
  className?: string
}

export function EditableValueField({ leadId, currentValue, onValueUpdate, className = "" }: EditableValueFieldProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [editValue, setEditValue] = useState(formatCurrency(currentValue))
  const [loading, setLoading] = useState(false)

const handleStartEdit = () => {
    setIsEditing(true)
    setEditValue(formatCurrency(currentValue))
  }

const handleSave = async () => {
    setLoading(true)

try {
      const numericValue = parseCurrency(editValue)
      const success = await updateLeadValue(leadId, numericValue)

if (success) {
        onValueUpdate(numericValue)
        setIsEditing(false)
      } else {
        // Reverter para o valor original em caso de erro
        setEditValue(formatCurrency(currentValue))
      }
    } catch (error) {
      console.error("Error updating value:", error)
      setEditValue(formatCurrency(currentValue))
    } finally {
      setLoading(false)
    }
  }

const handleCancel = () => {
    setEditValue(formatCurrency(currentValue))
    setIsEditing(false)
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleSave()
    } else if (e.key === "Escape") {
      handleCancel()
    }
  }

const formatInputValue = (value: string) => {
    // Remove caracteres não numéricos exceto vírgula e ponto
    const cleanValue = value.replace(/[^\d,.-]/g, "")

// Se o valor estiver vazio, retorna vazio
    if (!cleanValue) return ""

// Converte para número usando a função parseCurrency melhorada
    const numericValue = parseCurrency(cleanValue)

// Se for um número válido (incluindo zero), formata como moeda
    if (!isNaN(numericValue) && numericValue >= 0) {
      return formatCurrency(numericValue)
    }

// Se não conseguir converter, retorna o valor original para permitir digitação
    return value
  }

if (isEditing) {
    return (
      <div className={`flex items-center gap-1 ${className}`}>
        <div className="relative flex-1">
          <DollarSign className="absolute left-2 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
          <Input
            value={editValue}
            onChange={(e) => setEditValue(e.target.value)}
            onKeyDown={handleKeyPress}
            onBlur={(e) => setEditValue(formatInputValue(e.target.value))}
            className="text-xs h-7 pl-6 pr-1 border-green-300 focus:border-green-500"
            placeholder="R$ 0,00"
            autoFocus
            disabled={loading}
            type="text" // Adicionado type="text" para permitir formatação personalizada
          />
        </div>
        <div className="flex gap-1">
          <Button
            size="sm"
            onClick={handleSave}
            disabled={loading}
            className="h-7 w-7 p-0 bg-green-500 hover:bg-green-600"
          >
            <Check className="h-3 w-3" />
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={handleCancel}
            disabled={loading}
            className="h-7 w-7 p-0 border-gray-300 hover:bg-gray-50 bg-transparent"
          >
            <X className="h-3 w-3" />
          </Button>
        </div>
      </div>
    )
  }

return (
    <div
      className={`flex items-center justify-between group cursor-pointer hover:bg-gray-50 rounded p-1 transition-colors ${className}`}
      onClick={handleStartEdit}
    >
      <div className="flex items-center gap-1">
        <DollarSign className="h-3 w-3 text-green-600" />
        <span className="text-xs font-semibold text-green-700">{formatCurrency(currentValue)}</span>
      </div>
      <Edit3 className="h-3 w-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/editable-veiculo-field.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { updateLeadVeiculo } from "@/lib/leads"
import { Check, X, Edit3, Car } from "lucide-react"

interface EditableVeiculoFieldProps {
  leadId: number
  currentVeiculo: string
  onVeiculoUpdate: (newVeiculo: string) => void
  className?: string
}

export function EditableVeiculoField({
  leadId,
  currentVeiculo,
  onVeiculoUpdate,
  className = "",
}: EditableVeiculoFieldProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [editValue, setEditValue] = useState(currentVeiculo || "")
  const [loading, setLoading] = useState(false)

const handleStartEdit = () => {
    setIsEditing(true)
    setEditValue(currentVeiculo || "")
  }

const handleSave = async () => {
    setLoading(true)

try {
      const success = await updateLeadVeiculo(leadId, editValue)

if (success) {
        onVeiculoUpdate(editValue)
        setIsEditing(false)
      } else {
        // Reverter para o valor original em caso de erro
        setEditValue(currentVeiculo || "")
      }
    } catch (error) {
      console.error("Error updating veiculo:", error)
      setEditValue(currentVeiculo || "")
    } finally {
      setLoading(false)
    }
  }

const handleCancel = () => {
    setEditValue(currentVeiculo || "")
    setIsEditing(false)
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleSave()
    } else if (e.key === "Escape") {
      handleCancel()
    }
  }

if (isEditing) {
    return (
      <div className={`flex items-center gap-1 ${className}`}>
        <div className="relative flex-1">
          <Car className="absolute left-2 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
          <Input
            value={editValue}
            onChange={(e) => setEditValue(e.target.value)}
            onKeyDown={handleKeyPress}
            className="text-xs h-7 pl-6 pr-1 border-blue-300 focus:border-blue-500"
            placeholder="Ex: Honda Civic 2020"
            autoFocus
            disabled={loading}
          />
        </div>
        <div className="flex gap-1">
          <Button
            size="sm"
            onClick={handleSave}
            disabled={loading}
            className="h-7 w-7 p-0 bg-blue-500 hover:bg-blue-600"
          >
            <Check className="h-3 w-3" />
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={handleCancel}
            disabled={loading}
            className="h-7 w-7 p-0 border-gray-300 hover:bg-gray-50 bg-transparent"
          >
            <X className="h-3 w-3" />
          </Button>
        </div>
      </div>
    )
  }

return (
    <div
      className={`flex items-center justify-between group cursor-pointer hover:bg-blue-50 rounded p-2 transition-colors border border-blue-200 ${className}`}
      onClick={handleStartEdit}
    >
      <div className="flex items-center gap-2">
        <Car className="h-4 w-4 text-blue-600" />
        <div>
          <span className="text-sm font-medium text-blue-800">Veículo de Interesse</span>
          <div className="text-sm text-gray-700">
            {currentVeiculo || <span className="text-gray-400 italic">Clique para adicionar veículo</span>}
          </div>
        </div>
      </div>
      <Edit3 className="h-4 w-4 text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/leads-list-view.tsx" isMerged="true"
"use client"

import React from "react"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { type Lead, ESTAGIO_LABELS, ESTAGIO_COLORS, updateLeadStage, generateResumoComercial, sendFollowUpWebhook, sendMensagemWebhook, deleteLead } from "@/lib/leads"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Search,
  Filter,
  Phone,
  Mail,
  User,
  Calendar,
  MapPin,
  Car,
  Eye,
  DollarSign,
  FileText,
  Sparkles,
  Loader2,
  RefreshCw,
  ChevronDown,
  Trash2,
  Send,
  MessageSquare,
} from "lucide-react"
import { EditableValueField } from "./editable-value-field"
import { EditableObservacaoField } from "./editable-observacao-field"
import { EditableVeiculoField } from "./editable-veiculo-field"
import { EditableEmailField } from "./editable-email-field"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Progress } from "@/components/ui/progress"

interface LeadsListViewProps {
  leads: Lead[]
  onLeadsUpdate: () => void
  empresaId: number
}

export function LeadsListView({ leads, onLeadsUpdate, empresaId }: LeadsListViewProps) {
  const [filteredLeads, setFilteredLeads] = useState<Lead[]>(leads)
  const [selectedLead, setSelectedLead] = useState<Lead | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [filterOrigem, setFilterOrigem] = useState("")
  const [filterEstagio, setFilterEstagio] = useState("")
  const [updatingStage, setUpdatingStage] = useState<number | null>(null)
  const [generatingResumo, setGeneratingResumo] = useState(false)
  const [resumoMessage, setResumoMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
  const [showProgressDialog, setShowProgressDialog] = useState(false)
  const [progressValue, setProgressValue] = useState(0)
  const [selectedLeadIds, setSelectedLeadIds] = useState<number[]>([])
  const [processingAction, setProcessingAction] = useState(false)
  const [showMessageModal, setShowMessageModal] = useState(false)
  const [messageText, setMessageText] = useState("")

React.useEffect(() => {
    filterLeads()
  }, [leads, searchTerm, filterOrigem, filterEstagio])

const filterLeads = () => {
    let filtered = [...leads]

if (searchTerm) {
      filtered = filtered.filter(
        (lead) =>
          lead.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          lead.telefone?.includes(searchTerm) ||
          lead.vendedor?.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (filterOrigem && filterOrigem !== "all") {
      filtered = filtered.filter((lead) => lead.origem === filterOrigem)
    }

if (filterEstagio && filterEstagio !== "all") {
      filtered = filtered.filter((lead) => lead.estagio_lead === filterEstagio)
    }

setFilteredLeads(filtered)
  }

const handleStageChange = async (leadId: number, newStage: string, currentStage: string) => {
    if (newStage === currentStage) return

setUpdatingStage(leadId)

try {
      const success = await updateLeadStage(leadId, newStage)

if (success) {
        // Atualizar localmente para feedback imediato
        setFilteredLeads((prevLeads) =>
          prevLeads.map((lead) =>
            lead.id === leadId ? { ...lead, estagio_lead: newStage, updated_at: new Date().toISOString() } : lead,
          ),
        )

// Atualizar o lead selecionado se for o mesmo
        if (selectedLead && selectedLead.id === leadId) {
          setSelectedLead({ ...selectedLead, estagio_lead: newStage })
        }

// Chamar callback para atualizar dados principais
        onLeadsUpdate()
      } else {
        setResumoMessage({
          type: "error",
          text: "Erro ao atualizar estágio do lead. Tente novamente.",
        })
        setTimeout(() => setResumoMessage(null), 3000)
      }
    } catch (error) {
      setResumoMessage({
        type: "error",
        text: "Erro de conexão. Verifique sua internet e tente novamente.",
      })
      setTimeout(() => setResumoMessage(null), 3000)
    } finally {
      setUpdatingStage(null)
    }
  }

const handleValueUpdate = (leadId: number, newValue: number) => {
    // Atualizar localmente para feedback imediato
    setFilteredLeads((prevLeads) => prevLeads.map((lead) => (lead.id === leadId ? { ...lead, valor: newValue } : lead)))

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, valor: newValue })
    }

// Chamar callback para atualizar dados principais
    onLeadsUpdate()
  }

const handleObservacaoUpdate = (leadId: number, newObservacao: string) => {
    // Atualizar localmente para feedback imediato
    setFilteredLeads((prevLeads) =>
      prevLeads.map((lead) => (lead.id === leadId ? { ...lead, observacao_vendedor: newObservacao } : lead)),
    )

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, observacao_vendedor: newObservacao })
    }

// Chamar callback para atualizar dados principais
    onLeadsUpdate()
  }

const handleVeiculoUpdate = (leadId: number, newVeiculo: string) => {
    // Atualizar localmente para feedback imediato
    setFilteredLeads((prevLeads) =>
      prevLeads.map((lead) => (lead.id === leadId ? { ...lead, veiculo_interesse: newVeiculo } : lead)),
    )

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, veiculo_interesse: newVeiculo })
    }

// Chamar callback para atualizar dados principais
    onLeadsUpdate()
  }

const handleEmailUpdate = (leadId: number, newEmail: string) => {
    // Atualizar localmente para feedback imediato
    setFilteredLeads((prevLeads) => prevLeads.map((lead) => (lead.id === leadId ? { ...lead, email: newEmail } : lead)))

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, email: newEmail })
    }

// Chamar callback para atualizar dados principais
    onLeadsUpdate()
  }

const handleGenerateResumo = async () => {
    if (!selectedLead) return

setGeneratingResumo(true)
    setResumoMessage(null)
    setShowProgressDialog(true)
    setProgressValue(0)

// Animar progresso de 0 a 100 em 30 segundos
    const duration = 30000 // 30 segundos
    const intervalTime = 100 // Atualiza a cada 100ms
    const increment = (100 / duration) * intervalTime

const progressInterval = setInterval(() => {
      setProgressValue((prev) => {
        const next = prev + increment
        if (next >= 100) {
          clearInterval(progressInterval)
          return 100
        }
        return next
      })
    }, intervalTime)

try {
      const success = await generateResumoComercial(selectedLead)

// Aguardar os 30 segundos completos
      await new Promise((resolve) => setTimeout(resolve, duration))

if (success) {
        setResumoMessage({
          type: "success",
          text: "Resumo comercial gerado com sucesso!",
        })
      } else {
        setResumoMessage({
          type: "error",
          text: "Erro ao gerar resumo comercial. Tente novamente.",
        })
      }
    } catch (error) {
      setResumoMessage({
        type: "error",
        text: "Erro ao processar solicitação. Verifique sua conexão.",
      })
    } finally {
      setGeneratingResumo(false)
      setShowProgressDialog(false)
      setProgressValue(0)

// Limpar mensagem após 5 segundos
      setTimeout(() => {
        setResumoMessage(null)
      }, 5000)
    }
  }

// Funções de seleção
  const toggleSelectLead = (leadId: number) => {
    setSelectedLeadIds((prev) =>
      prev.includes(leadId) ? prev.filter((id) => id !== leadId) : [...prev, leadId]
    )
  }

const toggleSelectAll = () => {
    if (selectedLeadIds.length === filteredLeads.length) {
      setSelectedLeadIds([])
    } else {
      setSelectedLeadIds(filteredLeads.map((lead) => lead.id))
    }
  }

const getSelectedLeads = () => {
    return filteredLeads.filter((lead) => selectedLeadIds.includes(lead.id))
  }

// Ações em massa
  const handleDeleteSelected = async () => {
    if (!confirm(`Tem certeza que deseja excluir ${selectedLeadIds.length} lead(s)?`)) return

setProcessingAction(true)
    try {
      for (const leadId of selectedLeadIds) {
        await deleteLead(leadId)
      }
      setSelectedLeadIds([])
      onLeadsUpdate()
      setResumoMessage({
        type: "success",
        text: `${selectedLeadIds.length} lead(s) excluído(s) com sucesso!`,
      })
    } catch (error) {
      setResumoMessage({
        type: "error",
        text: "Erro ao excluir leads. Tente novamente.",
      })
    } finally {
      setProcessingAction(false)
      setTimeout(() => setResumoMessage(null), 5000)
    }
  }

const handleSendFollowUp = async () => {
    const selectedLeads = getSelectedLeads()
    if (selectedLeads.length === 0) return

setProcessingAction(true)
    try {
      let successCount = 0
      for (const lead of selectedLeads) {
        const success = await sendFollowUpWebhook(lead)
        if (success) successCount++
      }
      setResumoMessage({
        type: "success",
        text: `Follow up enviado para ${successCount} de ${selectedLeads.length} lead(s)!`,
      })
      setSelectedLeadIds([])
    } catch (error) {
      setResumoMessage({
        type: "error",
        text: "Erro ao enviar follow up. Tente novamente.",
      })
    } finally {
      setProcessingAction(false)
      setTimeout(() => setResumoMessage(null), 5000)
    }
  }

const handleOpenMessageModal = () => {
    setMessageText("")
    setShowMessageModal(true)
  }

const handleSendMensagem = async () => {
    const selectedLeads = getSelectedLeads()
    if (selectedLeads.length === 0 || !messageText.trim()) return

setShowMessageModal(false)
    setProcessingAction(true)
    try {
      let successCount = 0
      for (const lead of selectedLeads) {
        const success = await sendMensagemWebhook(lead, messageText)
        if (success) successCount++
      }
      setResumoMessage({
        type: "success",
        text: `Mensagem enviada para ${successCount} de ${selectedLeads.length} lead(s)!`,
      })
      setSelectedLeadIds([])
      setMessageText("")
    } catch (error) {
      setResumoMessage({
        type: "error",
        text: "Erro ao enviar mensagem. Tente novamente.",
      })
    } finally {
      setProcessingAction(false)
      setTimeout(() => setResumoMessage(null), 5000)
    }
  }

const origens = [...new Set(leads.map((lead) => lead.origem).filter(Boolean))]

return (
    <div className="space-y-4">
      {/* Filtros */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-5 w-5" />
            Filtros
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar por nome, telefone ou vendedor..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={filterOrigem} onValueChange={setFilterOrigem}>
              <SelectTrigger>
                <SelectValue placeholder="Filtrar por origem" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as origens</SelectItem>
                {origens.map((origem) => (
                  <SelectItem key={origem} value={origem!}>
                    {origem}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select value={filterEstagio} onValueChange={setFilterEstagio}>
              <SelectTrigger>
                <SelectValue placeholder="Filtrar por estágio" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos os estágios</SelectItem>
                {Object.entries(ESTAGIO_LABELS).map(([key, label]) => (
                  <SelectItem key={key} value={key}>
                    {label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Barra de Seleção */}
      {selectedLeadIds.length > 0 && (
        <Card className="bg-slate-100 border-slate-300">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium text-slate-700">
                {selectedLeadIds.length} lead(s) selecionado(s)
              </span>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button 
                    className="bg-purple-600 hover:bg-purple-700 text-white"
                    disabled={processingAction}
                  >
                    {processingAction ? (
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    ) : null}
                    Ações
                    <ChevronDown className="h-4 w-4 ml-2" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                  <DropdownMenuItem 
                    onClick={handleDeleteSelected}
                    className="text-red-600 focus:text-red-600 cursor-pointer"
                  >
                    <Trash2 className="h-4 w-4 mr-2" />
                    Excluir
                  </DropdownMenuItem>
                  <DropdownMenuItem 
                    onClick={handleSendFollowUp}
                    className="cursor-pointer"
                  >
                    <Send className="h-4 w-4 mr-2" />
                    Enviar Follow Up
                  </DropdownMenuItem>
                  <DropdownMenuItem 
                    onClick={handleOpenMessageModal}
                    className="cursor-pointer"
                  >
                    <MessageSquare className="h-4 w-4 mr-2" />
                    Enviar Mensagem
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </CardContent>
        </Card>
      )}

{/* Mensagem de Status */}
      {resumoMessage && (
        <Alert
          className={`${resumoMessage.type === "success" ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"}`}
        >
          <AlertDescription className={resumoMessage.type === "success" ? "text-green-700" : "text-red-700"}>
            {resumoMessage.text}
          </AlertDescription>
        </Alert>
      )}

{/* Instruções */}
      <Card className="bg-white border-green-500">
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <RefreshCw className="h-5 w-5 text-green-600" />
            <div>
              <p className="text-sm font-medium text-black">
                💡 <strong>Como usar:</strong> Clique no dropdown de estágio para alterar o status do lead
              </p>
              <p className="text-xs text-gray-700 mt-1">As alterações são salvas automaticamente no banco de dados</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Lista de Leads */}
      <Card>
        <CardHeader>
          <CardTitle>Lista de Leads ({filteredLeads.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-12">
                    <Checkbox
                      checked={selectedLeadIds.length === filteredLeads.length && filteredLeads.length > 0}
                      onCheckedChange={toggleSelectAll}
                      aria-label="Selecionar todos"
                    />
                  </TableHead>
                  <TableHead>Nome</TableHead>
                  <TableHead className="hidden md:table-cell">Valor</TableHead>
                  <TableHead className="hidden md:table-cell">Telefone</TableHead>
                  <TableHead className="hidden lg:table-cell">Origem</TableHead>
                  <TableHead className="hidden lg:table-cell">Vendedor</TableHead>
                  <TableHead className="hidden xl:table-cell">Veículo</TableHead>
                  <TableHead>Estágio</TableHead>
                  <TableHead className="hidden md:table-cell">Data</TableHead>
                  <TableHead>Ações</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredLeads.map((lead) => (
                  <TableRow key={lead.id} className={`hover:bg-gray-50 ${selectedLeadIds.includes(lead.id) ? "bg-purple-50" : ""}`}>
                    <TableCell>
                      <Checkbox
                        checked={selectedLeadIds.includes(lead.id)}
                        onCheckedChange={() => toggleSelectLead(lead.id)}
                        aria-label={`Selecionar ${lead.nome}`}
                      />
                    </TableCell>
                    <TableCell className="font-medium">
                      <div>
                        <div className="font-semibold">{lead.nome}</div>
                        <div className="text-sm text-gray-500 md:hidden">
                          {lead.telefone && (
                            <span className="flex items-center gap-1 mt-1">
                              <Phone className="h-3 w-3" />
                              {lead.telefone}
                            </span>
                          )}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell className="hidden md:table-cell">
                      <div onClick={(e) => e.stopPropagation()}>
                        <EditableValueField
                          leadId={lead.id}
                          currentValue={lead.valor || 0}
                          onValueUpdate={(newValue) => handleValueUpdate(lead.id, newValue)}
                          className="min-w-[120px]"
                        />
                      </div>
                    </TableCell>
                    <TableCell className="hidden md:table-cell">{lead.telefone}</TableCell>
                    <TableCell className="hidden lg:table-cell">
                      {lead.origem && (
                        <Badge variant="outline" className="text-xs">
                          {lead.origem}
                        </Badge>
                      )}
                    </TableCell>
                    <TableCell className="hidden lg:table-cell">{lead.vendedor}</TableCell>
                    <TableCell className="hidden xl:table-cell">{lead.veiculo_interesse}</TableCell>
                    <TableCell>
                      <Select
                        value={lead.estagio_lead}
                        onValueChange={(value) => handleStageChange(lead.id, value, lead.estagio_lead)}
                        disabled={updatingStage === lead.id}
                      >
                        <SelectTrigger className="w-auto min-w-[140px]">
                          <div className="flex items-center gap-2">
                            {updatingStage === lead.id && <Loader2 className="h-3 w-3 animate-spin" />}
                            <Badge className={ESTAGIO_COLORS[lead.estagio_lead as keyof typeof ESTAGIO_COLORS]}>
                              {ESTAGIO_LABELS[lead.estagio_lead as keyof typeof ESTAGIO_LABELS]}
                            </Badge>
                          </div>
                        </SelectTrigger>
                        <SelectContent>
                          {Object.entries(ESTAGIO_LABELS).map(([key, label]) => (
                            <SelectItem key={key} value={key}>
                              <div className="flex items-center gap-2">
                                <Badge className={`${ESTAGIO_COLORS[key as keyof typeof ESTAGIO_COLORS]} text-xs`}>
                                  {label}
                                </Badge>
                              </div>
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </TableCell>
                    <TableCell className="hidden md:table-cell">
                      {new Date(lead.created_at).toLocaleDateString("pt-BR")}
                    </TableCell>
                    <TableCell>
                      <Button variant="ghost" size="sm" onClick={() => setSelectedLead(lead)} className="h-8 w-8 p-0">
                        <Eye className="h-4 w-4" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

{filteredLeads.length === 0 && (
            <div className="text-center py-8 text-gray-500">
              <p>Nenhum lead encontrado com os filtros aplicados.</p>
            </div>
          )}
        </CardContent>
      </Card>

{/* Modal de Detalhes do Lead - Com Campos Editáveis */}
      <Dialog open={!!selectedLead} onOpenChange={() => setSelectedLead(null)}>
        <DialogContent className="max-w-5xl max-h-[95vh] w-[95vw] overflow-hidden">
          <DialogHeader className="pb-4 border-b">
            <DialogTitle className="flex items-center gap-2 text-xl">
              <User className="h-6 w-6" />
              Detalhes do Lead
            </DialogTitle>
          </DialogHeader>
          {selectedLead && (
            <div className="flex flex-col h-full max-h-[80vh]">
              {/* Header Info - Fixed */}
              <div className="flex-shrink-0 space-y-4 pb-4 border-b">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-semibold text-2xl">{selectedLead.nome}</h3>
                    <Badge
                      className={`mt-2 ${ESTAGIO_COLORS[selectedLead.estagio_lead as keyof typeof ESTAGIO_COLORS]}`}
                    >
                      {ESTAGIO_LABELS[selectedLead.estagio_lead as keyof typeof ESTAGIO_LABELS]}
                    </Badge>
                  </div>
                </div>

{/* Informações Básicas em Grid */}
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                  {selectedLead.telefone && (
                    <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                      <Phone className="h-4 w-4 text-gray-500" />
                      <span className="text-sm font-medium">{selectedLead.telefone}</span>
                    </div>
                  )}

{selectedLead.email && (
                    <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                      <Mail className="h-4 w-4 text-gray-500" />
                      <span className="text-sm font-medium truncate">{selectedLead.email}</span>
                    </div>
                  )}

{selectedLead.origem && (
                    <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                      <MapPin className="h-4 w-4 text-gray-500" />
                      <span className="text-sm font-medium">{selectedLead.origem}</span>
                    </div>
                  )}

{selectedLead.vendedor && (
                    <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                      <User className="h-4 w-4 text-gray-500" />
                      <span className="text-sm font-medium">{selectedLead.vendedor}</span>
                    </div>
                  )}

{selectedLead.veiculo_interesse && (
                    <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                      <Car className="h-4 w-4 text-gray-500" />
                      <span className="text-sm font-medium">{selectedLead.veiculo_interesse}</span>
                    </div>
                  )}

<div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                    <Calendar className="h-4 w-4 text-gray-500" />
                    <span className="text-sm font-medium">
                      {new Date(selectedLead.created_at).toLocaleDateString("pt-BR")}
                    </span>
                  </div>
                </div>
              </div>

{/* Scrollable Content */}
              <ScrollArea className="flex-1 mt-4">
                <div className="space-y-6 pr-4">
                  {/* Campos Editáveis */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* Valor do Lead - Editável */}
                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-3">
                        <DollarSign className="h-5 w-5 text-green-600" />
                        <span className="text-lg font-semibold text-green-800">Valor do Negócio</span>
                      </div>
                      <EditableValueField
                        leadId={selectedLead.id}
                        currentValue={selectedLead.valor || 0}
                        onValueUpdate={(newValue) => handleValueUpdate(selectedLead.id, newValue)}
                        className="text-xl"
                      />
                    </div>

{/* Observação do Vendedor - Editável */}
                    <div>
                      <EditableObservacaoField
                        leadId={selectedLead.id}
                        currentObservacao={selectedLead.observacao_vendedor || ""}
                        onObservacaoUpdate={(newObservacao) => handleObservacaoUpdate(selectedLead.id, newObservacao)}
                      />
                    </div>
                  </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* Veículo - Editável */}
                    <div>
                      <EditableVeiculoField
                        leadId={selectedLead.id}
                        currentVeiculo={selectedLead.veiculo_interesse || ""}
                        onVeiculoUpdate={(newVeiculo) => handleVeiculoUpdate(selectedLead.id, newVeiculo)}
                      />
                    </div>

{/* E-mail - Editável */}
                    <div>
                      <EditableEmailField
                        leadId={selectedLead.id}
                        currentEmail={selectedLead.email || ""}
                        onEmailUpdate={(newEmail) => handleEmailUpdate(selectedLead.id, newEmail)}
                      />
                    </div>
                  </div>

{/* Resumos - Somente Leitura */}
                  {selectedLead.resumo_qualificacao && (
                    <div>
                      <h4 className="font-semibold text-lg mb-3 flex items-center gap-2">
                        <FileText className="h-5 w-5 text-blue-500" />
                        Resumo de Qualificação
                      </h4>
                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div className="text-sm text-gray-800 whitespace-pre-line leading-relaxed font-medium">
                          {selectedLead.resumo_qualificacao}
                        </div>
                      </div>
                    </div>
                  )}

{/* Resumo Comercial com Botão Gerar */}
                  <div>
                    <div className="flex items-center justify-between mb-3">
                      <h4 className="font-semibold text-lg flex items-center gap-2">
                        <FileText className="h-5 w-5 text-green-500" />
                        Resumo Comercial
                      </h4>
                      <Button
                        onClick={handleGenerateResumo}
                        disabled={generatingResumo}
                        className="bg-gradient-to-r from-green-600 to-gray-900 hover:from-green-700 hover:to-black text-white"
                        size="sm"
                      >
                        {generatingResumo ? (
                          <>
                            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                            Gerando...
                          </>
                        ) : (
                          <>
                            <Sparkles className="h-4 w-4 mr-2" />
                            Gerar Resumo Comercial
                          </>
                        )}
                      </Button>
                    </div>

<div className="bg-green-50 border border-green-200 rounded-lg p-4">
                      <div className="text-sm text-gray-800 whitespace-pre-line leading-relaxed font-medium">
                        {selectedLead.resumo_comercial || (
                          <span className="text-gray-500 italic">
                            Nenhum resumo comercial disponível. Clique em "Gerar Resumo Comercial" para criar um.
                          </span>
                        )}
                      </div>
                    </div>
                  </div>

{/* Espaço extra no final para scroll confortável */}
                  <div className="h-4"></div>
                </div>
              </ScrollArea>
            </div>
          )}
        </DialogContent>
      </Dialog>

{/* Dialog com barra de progresso */}
      <Dialog open={showProgressDialog} onOpenChange={setShowProgressDialog}>
        <DialogContent className="bg-slate-900 border-[#22C55E]">
          <DialogHeader>
            <DialogTitle className="text-white text-xl flex items-center gap-2">
              <Loader2 className="h-5 w-5 text-[#22C55E] animate-spin" />
              Gerando Resumo Comercial
            </DialogTitle>
            <DialogDescription className="text-gray-300">
              Aguarde enquanto analisamos as informações do lead...
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <Progress value={progressValue} className="h-3" />
            <p className="text-center text-sm text-gray-400">{Math.round(progressValue)}% completo</p>
          </div>
        </DialogContent>
      </Dialog>

{/* Modal Enviar Mensagem */}
      <Dialog open={showMessageModal} onOpenChange={setShowMessageModal}>
        <DialogContent className="bg-white border-gray-200 max-w-md">
          <DialogHeader>
            <DialogTitle className="text-gray-900 text-lg flex items-center gap-2">
              <MessageSquare className="h-5 w-5 text-purple-600" />
              Enviar Mensagem
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
              <p className="text-sm text-blue-700">
                Você está enviando uma mensagem para {selectedLeadIds.length} lead(s) selecionado(s).
              </p>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700 mb-2 block">
                Digite a mensagem para o Lead
              </label>
              <textarea
                value={messageText}
                onChange={(e) => setMessageText(e.target.value)}
                placeholder="Digite sua mensagem aqui..."
                className="w-full min-h-[120px] p-3 border-2 border-purple-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none resize-none text-gray-900"
              />
            </div>
            <div className="flex justify-end gap-3 pt-2">
              <Button
                variant="outline"
                onClick={() => setShowMessageModal(false)}
                className="border-gray-300 text-gray-700 hover:bg-gray-50"
              >
                Cancelar
              </Button>
              <Button
                onClick={handleSendMensagem}
                disabled={!messageText.trim() || processingAction}
                className="bg-purple-500 hover:bg-purple-600 text-white"
              >
                {processingAction ? (
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                ) : (
                  <Send className="h-4 w-4 mr-2" />
                )}
                Enviar
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/lista-veiculos.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { listarVeiculos, excluirVeiculo, marcarComoVendido, type Veiculo } from "@/lib/estoque"
import { Trash2, CheckCircle, Car, Fuel, Calendar, Palette, Gauge, Loader2 } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export function ListaVeiculos() {
  const { toast } = useToast()
  const [veiculos, setVeiculos] = useState<Veiculo[]>([])
  const [loading, setLoading] = useState(true)
  const [actionLoading, setActionLoading] = useState<number | null>(null)

const carregarVeiculos = async () => {
    setLoading(true)
    try {
      const result = await listarVeiculos()
      if (result.error) {
        toast({
          title: "Erro",
          description: result.error,
          variant: "destructive",
        })
      } else {
        setVeiculos(result.veiculos)
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro ao carregar veículos",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    carregarVeiculos()
  }, [])

const handleExcluir = async (id: number) => {
    setActionLoading(id)
    try {
      const result = await excluirVeiculo(id)
      if (result.success) {
        toast({
          title: "Sucesso",
          description: "Veículo excluído com sucesso!",
        })
        await carregarVeiculos()
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao excluir veículo",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro interno do servidor",
        variant: "destructive",
      })
    } finally {
      setActionLoading(null)
    }
  }

const handleMarcarVendido = async (id: number) => {
    setActionLoading(id)
    try {
      const result = await marcarComoVendido(id)
      if (result.success) {
        toast({
          title: "Sucesso",
          description: "Veículo marcado como vendido!",
        })
        await carregarVeiculos()
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao marcar veículo como vendido",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro interno do servidor",
        variant: "destructive",
      })
    } finally {
      setActionLoading(null)
    }
  }

if (loading) {
    return (
      <div className="flex justify-center items-center py-12">
        <Loader2 className="h-8 w-8 animate-spin" />
      </div>
    )
  }

if (veiculos.length === 0) {
    return (
      <Card className="text-center py-12">
        <CardContent>
          <Car className="h-12 w-12 mx-auto text-gray-400 mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">Nenhum veículo no estoque</h3>
          <p className="text-gray-500">Adicione veículos ao estoque para começar a gerenciar.</p>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {veiculos.map((veiculo) => (
        <Card key={veiculo.id} className="hover:shadow-lg transition-shadow">
          <CardHeader>
            <div className="flex justify-between items-start">
              <div>
                <CardTitle className="text-lg">
                  {veiculo.marca} {veiculo.modelo}
                </CardTitle>
                <CardDescription>Ano {veiculo.ano}</CardDescription>
              </div>
              <Badge variant={veiculo.status === "Vendido" ? "secondary" : "default"}>{veiculo.status}</Badge>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div className="flex items-center gap-2">
                <Palette className="h-4 w-4 text-gray-500" />
                <span>{veiculo.cor}</span>
              </div>
              <div className="flex items-center gap-2">
                <Fuel className="h-4 w-4 text-gray-500" />
                <span>{veiculo.combustivel}</span>
              </div>
              <div className="flex items-center gap-2">
                <Gauge className="h-4 w-4 text-gray-500" />
                <span>{veiculo.quilometragem.toLocaleString()} km</span>
              </div>
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-gray-500" />
                <span>{new Date(veiculo.created_at).toLocaleDateString("pt-BR")}</span>
              </div>
            </div>

{veiculo.status !== "Vendido" && (
              <div className="flex gap-2 pt-4">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleMarcarVendido(veiculo.id)}
                  disabled={actionLoading === veiculo.id}
                  className="flex-1"
                >
                  {actionLoading === veiculo.id ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    <>
                      <CheckCircle className="h-4 w-4 mr-2" />
                      Marcar como Vendido
                    </>
                  )}
                </Button>

<AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button
                      variant="outline"
                      size="sm"
                      disabled={actionLoading === veiculo.id}
                      className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>Excluir Veículo</AlertDialogTitle>
                      <AlertDialogDescription>
                        Tem certeza que deseja excluir este veículo do estoque? Esta ação não pode ser desfeita.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancelar</AlertDialogCancel>
                      <AlertDialogAction
                        onClick={() => handleExcluir(veiculo.id)}
                        className="bg-red-600 hover:bg-red-700"
                      >
                        Excluir
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            )}
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { signIn } from "@/lib/auth"
import { Loader2, AlertCircle } from "lucide-react"

export function LoginForm() {
  const [email, setEmail] = useState("")
  const [senha, setSenha] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

const [registerNomeEmpresa, setRegisterNomeEmpresa] = useState("")
  const [registerNomeUsuario, setRegisterNomeUsuario] = useState("")
  const [registerEmail, setRegisterEmail] = useState("")
  const [registerTelefone, setRegisterTelefone] = useState("")
  const [registerSenha, setRegisterSenha] = useState("")
  const [registerConfirmSenha, setRegisterConfirmSenha] = useState("")
  const [registerLoading, setRegisterLoading] = useState(false)
  const [registerError, setRegisterError] = useState("")
  const [registerSuccess, setRegisterSuccess] = useState(false)

const router = useRouter()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")

try {
      const user = await signIn(email, senha)

if (user) {
        // Vendedores são redirecionados para Negociações, outros para Dashboard
        if (user.cargo === "vendedor") {
          router.push("/negociacoes")
        } else {
          router.push("/dashboard")
        }
      } else {
        setError("Credenciais inválidas ou usuário não está ativo.")
      }
    } catch (err) {
      setError("Erro ao fazer login. Tente novamente.")
    } finally {
      setLoading(false)
    }
  }

const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault()
    setRegisterLoading(true)
    setRegisterError("")
    setRegisterSuccess(false)

const senhaLimpa = registerSenha.trim()
    const confirmSenhaLimpa = registerConfirmSenha.trim()

// Validações
    if (senhaLimpa !== confirmSenhaLimpa) {
      setRegisterError("As senhas não coincidem.")
      setRegisterLoading(false)
      return
    }

if (senhaLimpa.length < 6) {
      setRegisterError("A senha deve ter pelo menos 6 caracteres.")
      setRegisterLoading(false)
      return
    }

try {
      const response = await fetch("/api/auth/register", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          nome_empresa: registerNomeEmpresa,
          nome_usuario: registerNomeUsuario,
          email: registerEmail,
          telefone: registerTelefone,
          senha: senhaLimpa,
        }),
      })

const result = await response.json()

if (response.ok) {
        setRegisterSuccess(true)
        // Limpar formulário
        setRegisterNomeEmpresa("")
        setRegisterNomeUsuario("")
        setRegisterEmail("")
        setRegisterTelefone("")
        setRegisterSenha("")
        setRegisterConfirmSenha("")

// Após 2 segundos, redirecionar para o login
        setTimeout(() => {
          setEmail(registerEmail)
        }, 2000)
      } else {
        setRegisterError(result.error || "Erro ao criar conta. Tente novamente.")
      }
    } catch (err) {
      setRegisterError("Erro ao criar conta. Tente novamente.")
    } finally {
      setRegisterLoading(false)
    }
  }

return (
    <div
      className="min-h-screen flex items-center justify-center 
      bg-black p-4"
    >
      <Card className="w-full max-w-md shadow-2xl border-2 border-green-500/30 bg-[#0F172A]">
        <CardHeader className="text-center py-4 space-y-2">
          <div className="flex items-center justify-center gap-3">
            <Image 
              src="/altuza-icon.png" 
              alt="Altuza Digital Logo" 
              width={48} 
              height={48} 
              className="object-contain"
              priority
            />
            <h1 className="text-2xl font-bold text-green-500">Altuza Digital</h1>
          </div>

<CardTitle className="text-xl text-green-500">Plataforma de Gestão de Leads</CardTitle>
        </CardHeader>

<CardContent>
          <Tabs defaultValue="login" className="w-full">
            <TabsList className="grid w-full grid-cols-2 mb-6 bg-[#1E293B]">
              <TabsTrigger
                value="login"
                className="data-[state=active]:bg-green-500 data-[state=active]:text-[#0F172A] text-gray-400"
              >
                Login
              </TabsTrigger>
              <TabsTrigger
                value="register"
                className="data-[state=active]:bg-green-500 data-[state=active]:text-[#0F172A] text-gray-400"
              >
                Registro
              </TabsTrigger>
            </TabsList>

<TabsContent value="login">
              <CardDescription className="text-gray-400 text-center mb-4">
                Faça login para acessar sua plataforma
              </CardDescription>

<form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="email" className="text-gray-300">
                    E-mail
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="seu@email.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="senha" className="text-gray-300">
                    Senha
                  </Label>
                  <Input
                    id="senha"
                    type="password"
                    placeholder="••••••••"
                    value={senha}
                    onChange={(e) => setSenha(e.target.value)}
                    required
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

{error && (
                  <Alert className="border-red-500/50 bg-red-950/50">
                    <AlertCircle className="h-4 w-4 text-red-400" />
                    <AlertDescription className="text-red-300">{error}</AlertDescription>
                  </Alert>
                )}

<Button
                  type="submit"
                  className="w-full bg-green-500 hover:bg-green-600 text-[#0F172A] font-semibold py-2.5"
                  disabled={loading}
                >
                  {loading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Entrando...
                    </>
                  ) : (
                    "Entrar"
                  )}
                </Button>
              </form>
            </TabsContent>

<TabsContent value="register">
              <CardDescription className="text-gray-400 text-center mb-4">Crie sua conta para começar</CardDescription>

<form onSubmit={handleRegister} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="register-empresa" className="text-gray-300">
                    Nome da Empresa
                  </Label>
                  <Input
                    id="register-empresa"
                    type="text"
                    placeholder="Sua Empresa Ltda"
                    value={registerNomeEmpresa}
                    onChange={(e) => setRegisterNomeEmpresa(e.target.value)}
                    required
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="register-nome" className="text-gray-300">
                    Seu Nome
                  </Label>
                  <Input
                    id="register-nome"
                    type="text"
                    placeholder="João Silva"
                    value={registerNomeUsuario}
                    onChange={(e) => setRegisterNomeUsuario(e.target.value)}
                    required
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="register-email" className="text-gray-300">
                    E-mail
                  </Label>
                  <Input
                    id="register-email"
                    type="email"
                    placeholder="seu@email.com"
                    value={registerEmail}
                    onChange={(e) => setRegisterEmail(e.target.value)}
                    required
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="register-telefone" className="text-gray-300">
                    Telefone (opcional)
                  </Label>
                  <Input
                    id="register-telefone"
                    type="tel"
                    placeholder="(11) 99999-9999"
                    value={registerTelefone}
                    onChange={(e) => setRegisterTelefone(e.target.value)}
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="register-senha" className="text-gray-300">
                    Senha
                  </Label>
                  <Input
                    id="register-senha"
                    type="password"
                    placeholder="Mínimo 6 caracteres"
                    value={registerSenha}
                    onChange={(e) => {
                      setRegisterSenha(e.target.value)
                      if (registerError) setRegisterError("")
                    }}
                    required
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="register-confirm-senha" className="text-gray-300">
                    Confirmar Senha
                  </Label>
                  <Input
                    id="register-confirm-senha"
                    type="password"
                    placeholder="Digite a senha novamente"
                    value={registerConfirmSenha}
                    onChange={(e) => {
                      setRegisterConfirmSenha(e.target.value)
                      if (registerError) setRegisterError("")
                    }}
                    required
                    className="border-green-500 focus:border-green-500 focus:ring-green-500 bg-[#0F172A] text-white placeholder:text-gray-500"
                  />
                </div>

{registerError && (
                  <Alert className="border-red-500/50 bg-red-950/50">
                    <AlertCircle className="h-4 w-4 text-red-400" />
                    <AlertDescription className="text-red-300">{registerError}</AlertDescription>
                  </Alert>
                )}

{registerSuccess && (
                  <Alert className="border-green-500/50 bg-green-950/50">
                    <AlertDescription className="text-green-300">
                      Conta criada com sucesso! Use a aba Login para acessar.
                    </AlertDescription>
                  </Alert>
                )}

<Button
                  type="submit"
                  className="w-full bg-green-500 hover:bg-green-600 text-[#0F172A] font-semibold py-2.5"
                  disabled={registerLoading || registerSuccess}
                >
                  {registerLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Criando conta...
                    </>
                  ) : (
                    "Criar Conta"
                  )}
                </Button>
              </form>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/members-management.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import {
  type User,
  STATUS_LABELS,
  STATUS_COLORS,
  CARGO_LABELS,
  CARGO_COLORS,
  updateMemberStatus,
  updateMemberCargo,
  deleteMember,
  canManageMembers,
} from "@/lib/auth"
import {
  Trash2,
  Shield,
  Clock,
  XCircle,
  Briefcase,
  Users,
  TrendingUp,
  Lock,
  UserCheck,
  ShieldCheck,
} from "lucide-react"

interface MembersManagementProps {
  members: User[]
  currentUser: User
  onMembersUpdate: () => void
}

export function MembersManagement({ members, currentUser, onMembersUpdate }: MembersManagementProps) {
  const [loading, setLoading] = useState<number | null>(null)
  const [deleteConfirm, setDeleteConfirm] = useState<User | null>(null)
  const [error, setError] = useState("")

const canManage = canManageMembers(currentUser)

const handleStatusChange = async (memberId: number, newStatus: "ativo" | "pendente" | "inativo") => {
    if (!canManage) {
      setError("Você não tem permissão para alterar status de membros.")
      return
    }

setLoading(memberId)
    setError("")

try {
      const result = await updateMemberStatus(memberId, newStatus, currentUser)

if (result.success) {
        onMembersUpdate()
      } else {
        setError(result.error || "Erro ao atualizar status do membro.")
      }
    } catch (err) {
      setError("Erro ao atualizar status. Tente novamente.")
    } finally {
      setLoading(null)
    }
  }

const handleCargoChange = async (
    memberId: number,
    newCargo: "administrador" | "convidado" | "sdr" | "gestor" | "vendedor",
  ) => {
    if (!canManage) {
      setError("Você não tem permissão para alterar cargos.")
      return
    }

setLoading(memberId)
    setError("")

try {
      const result = await updateMemberCargo(memberId, newCargo, currentUser)

if (result.success) {
        onMembersUpdate()
      } else {
        setError(result.error || "Erro ao atualizar cargo do membro.")
      }
    } catch (err) {
      setError("Erro ao atualizar cargo. Tente novamente.")
    } finally {
      setLoading(null)
    }
  }

const handleDeleteMember = async (member: User) => {
    if (!canManage) {
      setError("Você não tem permissão para excluir membros.")
      return
    }

setLoading(member.id)
    setError("")

try {
      const result = await deleteMember(member.id, currentUser)

if (result.success) {
        onMembersUpdate()
        setDeleteConfirm(null)
      } else {
        setError(result.error || "Erro ao excluir membro.")
      }
    } catch (err) {
      setError("Erro ao excluir membro. Tente novamente.")
    } finally {
      setLoading(null)
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "ativo":
        return <Shield className="h-3 w-3" />
      case "pendente":
        return <Clock className="h-3 w-3" />
      case "inativo":
        return <XCircle className="h-3 w-3" />
      default:
        return null
    }
  }

const getCargoIcon = (cargo: string) => {
    switch (cargo) {
      case "administrador":
        return <ShieldCheck className="h-3 w-3" />
      case "gestor":
        return <Briefcase className="h-3 w-3" />
      case "sdr":
        return <UserCheck className="h-3 w-3" />
      case "vendedor":
        return <TrendingUp className="h-3 w-3" />
      case "convidado":
        return <Users className="h-3 w-3" />
      default:
        return null
    }
  }

return (
    <div className="space-y-4">
      {error && (
        <Alert className="border-red-200 bg-red-50">
          <AlertDescription className="text-red-700">{error}</AlertDescription>
        </Alert>
      )}

{!canManage && (
        <Alert className="border-yellow-200 bg-yellow-50">
          <Lock className="h-4 w-4 text-yellow-600" />
          <AlertDescription className="text-yellow-700">
            Apenas gestores podem gerenciar membros da equipe.
          </AlertDescription>
        </Alert>
      )}

<div className="space-y-3 max-h-60 overflow-y-auto">
        {members.map((member) => (
          <div key={member.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-1">
                <p className="text-sm font-medium truncate">{member.nome_usuario}</p>
                {member.id === currentUser.id && (
                  <Badge variant="outline" className="text-xs">
                    Você
                  </Badge>
                )}
              </div>
              <p className="text-xs text-gray-500 truncate">{member.email}</p>
              {member.telefone && <p className="text-xs text-gray-500">{member.telefone}</p>}
              <p className="text-xs text-gray-400">
                Criado em: {new Date(member.created_at).toLocaleDateString("pt-BR")}
              </p>
            </div>

<div className="flex flex-col gap-2 ml-2">
              {/* Cargo */}
              <Select
                value={member.cargo}
                onValueChange={(value) =>
                  handleCargoChange(member.id, value as "administrador" | "convidado" | "sdr" | "gestor" | "vendedor")
                }
                disabled={loading === member.id || !canManage || member.id === currentUser.id}
              >
                <SelectTrigger className="w-auto min-w-[120px] bg-transparent border-none hover:bg-transparent">
                  <div className="flex items-center gap-1">
                    {getCargoIcon(member.cargo)}
                    <Badge className={`text-xs ${CARGO_COLORS[member.cargo as keyof typeof CARGO_COLORS]}`}>
                      {CARGO_LABELS[member.cargo as keyof typeof CARGO_LABELS]}
                    </Badge>
                  </div>
                </SelectTrigger>
                <SelectContent className="bg-black border-[#22C55E] text-white">
                  {Object.entries(CARGO_LABELS).map(([key, label]) => (
                    <SelectItem key={key} value={key} className="text-white hover:bg-[#1a1a1a] focus:bg-[#1a1a1a]">
                      <div className="flex items-center gap-2">
                        {getCargoIcon(key)}
                        {label}
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

{/* Status */}
              <div className="flex items-center gap-2">
                <Select
                  value={member.status}
                  onValueChange={(value) => handleStatusChange(member.id, value as "ativo" | "pendente" | "inativo")}
                  disabled={loading === member.id || !canManage}
                >
                  <SelectTrigger className="w-auto min-w-[100px] bg-transparent border-none hover:bg-transparent">
                    <div className="flex items-center gap-1">
                      {getStatusIcon(member.status)}
                      <Badge className={`text-xs ${STATUS_COLORS[member.status as keyof typeof STATUS_COLORS]}`}>
                        {STATUS_LABELS[member.status as keyof typeof STATUS_LABELS]}
                      </Badge>
                    </div>
                  </SelectTrigger>
                  <SelectContent className="bg-black border-[#22C55E] text-white">
                    {Object.entries(STATUS_LABELS).map(([key, label]) => (
                      <SelectItem key={key} value={key} className="text-white hover:bg-[#1a1a1a] focus:bg-[#1a1a1a]">
                        <div className="flex items-center gap-2">
                          {getStatusIcon(key)}
                          {label}
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

{member.id !== currentUser.id && canManage && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setDeleteConfirm(member)}
                    disabled={loading === member.id}
                    className="h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

{members.length === 0 && (
        <div className="text-center py-4 text-gray-500">
          <p>Nenhum membro encontrado.</p>
        </div>
      )}

{/* Delete Confirmation Dialog */}
      <AlertDialog open={!!deleteConfirm} onOpenChange={() => setDeleteConfirm(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirmar Exclusão</AlertDialogTitle>
            <AlertDialogDescription>
              Tem certeza que deseja excluir o membro <strong>{deleteConfirm?.nome_usuario}</strong>? Esta ação não pode
              ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => deleteConfirm && handleDeleteMember(deleteConfirm)}
              className="bg-red-600 hover:bg-red-700"
            >
              Excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar-nav.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { getCurrentUser, signOut, CARGO_LABELS } from "@/lib/auth"
import { LayoutDashboard, Settings, LogOut, Menu, X, Shield, Car, Calendar, MessageCircle, Users, Handshake } from "lucide-react"
import Image from "next/image"

const allNavigation = [
  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard, vendorAccess: false },
  { name: "Negociações", href: "/negociacoes", icon: Users, vendorAccess: true },
  { name: "Agendamentos", href: "/agendamentos", icon: Calendar, vendorAccess: true },
  { name: "Estoque", href: "/estoque", icon: Car, vendorAccess: false },
  { name: "Configurações", href: "/configuracoes", icon: Settings, vendorAccess: false },
]

export function SidebarNav() {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const pathname = usePathname()
  const router = useRouter()
  const user = getCurrentUser()

// Filtrar navegação baseado no cargo do usuário
  const navigation = user?.cargo === "vendedor" 
    ? allNavigation.filter((item) => item.vendorAccess)
    : allNavigation

const handleSignOut = () => {
    signOut()
    router.push("/")
  }

return (
    <>
      {/* Mobile menu button */}
      <div className="lg:hidden fixed top-4 left-4 z-50">
        <Button
          variant="outline"
          size="icon"
          onClick={() => setSidebarOpen(!sidebarOpen)}
          className="bg-[#020617] text-white border-[#111827] hover:bg-[#0A0A0A]"
        >
          {sidebarOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
      </div>

{/* Sidebar */}
      <div
        className={`
          fixed inset-y-0 left-0 z-40 w-64 
          bg-black text-white shadow-2xl border-r border-[#111827]
          transform transition-transform duration-300 ease-in-out
          lg:translate-x-0 lg:static lg:inset-0
          ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
        `}
      >
        <div className="flex flex-col h-full">
          <div className="flex items-center justify-center h-16 px-4 bg-black border-b border-[#22C55E]">
            <div className="flex items-center space-x-2">
              <div className="relative w-8 h-8">
                <Image src="/altuza-logo.png" alt="Altuza Digital Logo" fill className="object-contain" />
              </div>
              <span className="text-xl font-bold text-[#22C55E]">Altuza Digital</span>
            </div>
          </div>

<div className="px-4 py-3 border-b border-[#111827] bg-[#0A0A0A]">
            <div className="text-xs text-[#9CA3AF] uppercase tracking-wider mb-1">Código do Cliente</div>
            <div className="text-lg font-mono font-bold text-[#22C55E]">322.598</div>
          </div>

{user && (
            <div className="p-4 border-b border-[#111827]">
              <div className="text-sm font-medium text-white">{user.nome_usuario}</div>
              <div className="text-xs text-[#9CA3AF]">{user.nome_empresa}</div>
              <div className="mt-2">
                <Badge className="text-xs bg-[#22C55E] text-black hover:bg-[#16A34A]">
                  <div className="flex items-center gap-1">
                    <Shield className="h-3 w-3" />
                    {CARGO_LABELS[user.cargo]}
                  </div>
                </Badge>
              </div>
            </div>
          )}

<nav className="flex-1 px-4 py-4 space-y-2">
            {navigation.map((item) => {
              const isActive =
                pathname === item.href || pathname.startsWith(item.href + "/")

// Força Negociações pelo href (não depende de nome/acento)
              const IconComponent =
                item.href === "/negociacoes" ? Users : item.icon

return (
                <Link
                  key={item.href}
                  href={item.href}
                  aria-current={isActive ? "page" : undefined}
                  style={isActive ? { backgroundColor: "#22C55E" } : undefined}
                  className={`
                    flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors
                    ${
                      isActive
                        ? "font-semibold text-black"
                        : "text-white hover:bg-[#0A0A0A] hover:border hover:border-[#111827]"
                    }
                  `}
                  onClick={() => setSidebarOpen(false)}
                >
                  <IconComponent
                    className="mr-3 h-5 w-5 shrink-0"
                    strokeWidth={2}
                    stroke={isActive ? "#000000" : "#FFFFFF"}
                    style={{ color: isActive ? "#000000" : "#FFFFFF" }}
                  />

<span className={isActive ? "text-black" : "text-white"}>
                    {item.name}
                  </span>
                </Link>
              )
            })}

{user?.cargo !== "vendedor" && (
              <a
                href="https://conexao.eazy.tec.br/login"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors text-white hover:bg-[#0A0A0A] hover:border hover:border-[#111827]"
                onClick={() => setSidebarOpen(false)}
              >
                <MessageCircle className="mr-3 h-5 w-5 text-white" />
                Conexão Whatsapp
              </a>
            )}
          </nav>

{/* Overlay background quando abrir no mobile */}
      {sidebarOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-80 z-30 lg:hidden" onClick={() => setSidebarOpen(false)} />
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-2 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = 'AlertDialogHeader'

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
AlertDialogFooter.displayName = 'AlertDialogFooter'

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn('text-lg font-semibold', className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: 'outline' }),
      'mt-2 sm:mt-0',
      className,
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const alertVariants = cva(
  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
  {
    variants: {
      variant: {
        default: 'bg-background text-foreground',
        destructive:
          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = 'Alert'

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
    {...props}
  />
))
AlertTitle.displayName = 'AlertTitle'

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('text-sm [&_p]:leading-relaxed', className)}
    {...props}
  />
))
AlertDescription.displayName = 'AlertDescription'

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive:
          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
        outline: 'text-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  },
)
Button.displayName = 'Button'

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'rounded-lg border bg-card text-card-foreground shadow-sm',
      className,
    )}
    {...props}
  />
))
Card.displayName = 'Card'

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex flex-col space-y-1.5 p-6', className)}
    {...props}
  />
))
CardHeader.displayName = 'CardHeader'

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'text-2xl font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
CardTitle.displayName = 'CardTitle'

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
CardDescription.displayName = 'CardDescription'

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
))
CardContent.displayName = 'CardContent'

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex items-center p-6 pt-0', className)}
    {...props}
  />
))
CardFooter.displayName = 'CardFooter'

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { Check } from 'lucide-react'

import { cn } from '@/lib/utils'

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      'peer h-4 w-4 shrink-0 rounded-sm border-2 border-gray-400 bg-white ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=checked]:border-green-500 data-[state=checked]:text-white',
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-1.5 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
DialogHeader.displayName = 'DialogHeader'

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
DialogFooter.displayName = 'DialogFooter'

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
          className,
        )}
        ref={ref}
        {...props}
      />
    )
  },
)
Input.displayName = 'Input'

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const labelVariants = cva(
  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'

import { cn } from '@/lib/utils'

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'

import { cn } from '@/lib/utils'

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn('relative overflow-hidden', className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      'flex touch-none select-none transition-colors',
      orientation === 'vertical' &&
        'h-full w-2.5 border-l border-l-transparent p-[1px]',
      orientation === 'horizontal' &&
        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { Check, ChevronDown, ChevronUp } from 'lucide-react'

import { cn } from '@/lib/utils'

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          'p-1',
          position === 'popper' &&
            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn('w-full caption-bottom text-sm', className)}
      {...props}
    />
  </div>
))
Table.displayName = 'Table'

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
))
TableHeader.displayName = 'TableHeader'

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn('[&_tr:last-child]:border-0', className)}
    {...props}
  />
))
TableBody.displayName = 'TableBody'

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
      className,
    )}
    {...props}
  />
))
TableFooter.displayName = 'TableFooter'

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
      className,
    )}
    {...props}
  />
))
TableRow.displayName = 'TableRow'

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
  />
))
TableHead.displayName = 'TableHead'

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
    {...props}
  />
))
TableCell.displayName = 'TableCell'

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn('mt-4 text-sm text-muted-foreground', className)}
    {...props}
  />
))
TableCaption.displayName = 'TableCaption'

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'

import { cn } from '@/lib/utils'

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<'textarea'>
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = 'Textarea'

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/agendamentos.ts" isMerged="true"
import { createClient } from "@/utils/supabase/client"

export interface Agendamento {
  id: string
  id_empresa?: number
  lead_id?: string
  nome_lead?: string
  telefone?: string
  email?: string
  titulo: string
  descricao?: string
  data_agendamento: string
  vendedor_nome?: string
  vendedor_id?: string
  status: string
  tipo?: string
  local?: string
  criado_em: string
  atualizado_em: string
}

export interface Vendedor {
  id: string
  nome: string
  telefone?: string
  cargo?: string
  id_empresa?: number
}

export const ESTAGIO_AGENDAMENTO_LABELS: Record<string, string> = {
  Agendado: "Agendado",
  Confirmado: "Confirmado",
  Realizado: "Realizado",
  Cancelado: "Cancelado",
  Reagendado: "Reagendado",
}

export const ESTAGIO_AGENDAMENTO_COLORS: Record<string, string> = {
  Agendado: "bg-blue-100 text-blue-800",
  Confirmado: "bg-cyan-100 text-cyan-800",
  Realizado: "bg-green-100 text-green-800",
  Cancelado: "bg-red-100 text-red-800",
  Reagendado: "bg-yellow-100 text-yellow-800",
}

export const VALID_ESTAGIOS_AGENDAMENTO = ["Agendado", "Confirmado", "Realizado", "Cancelado", "Reagendado"]

export async function getAgendamentos(idEmpresa: number): Promise<Agendamento[]> {
  const supabase = createClient()

// Primeiro, buscar os agendamentos
  const { data: agendamentos, error: agendamentosError } = await supabase
    .from("AGENDAMENTOS")
    .select("*")
    .eq("id_empresa", idEmpresa)
    .order("criado_em", { ascending: false })

if (agendamentosError) {
    console.error("[v0] Error fetching agendamentos:", agendamentosError.message)
    return []
  }

if (!agendamentos || agendamentos.length === 0) {
    return []
  }

// Buscar vendedores separadamente
  const { data: vendedores, error: vendedoresError } = await supabase
    .from("VENDEDORES")
    .select("id, nome")
    .eq("id_empresa", idEmpresa)

if (vendedoresError) {
    console.error("[v0] Error fetching vendedores for agendamentos:", vendedoresError.message)
  }

// Criar um mapa de vendedores por ID
  const vendedoresMap = new Map<string, string>()
  if (vendedores) {
    vendedores.forEach((v: any) => {
      vendedoresMap.set(v.id, v.nome)
    })
  }

// Buscar dados dos leads associados
  const leadIds = agendamentos
    .map((a: any) => a.lead_id)
    .filter(Boolean)
  
  let leadsMap = new Map<string, any>()
  if (leadIds.length > 0) {
    const { data: leads, error: leadsError } = await supabase
      .from("BASE_DE_LEADS")
      .select("id, nome, telefone, email, veiculo_interesse")
      .in("id", leadIds)

if (!leadsError && leads) {
      leads.forEach((lead: any) => {
        leadsMap.set(lead.id.toString(), lead)
      })
    }
  }

// Mapear os dados com o nome do vendedor e informações do lead
  return agendamentos.map((item: any) => {
    const lead = item.lead_id ? leadsMap.get(item.lead_id.toString()) : null
    return {
      ...item,
      vendedor_nome: item.vendedor_id ? vendedoresMap.get(item.vendedor_id) || null : null,
      nome_lead: lead?.nome || null,
      telefone: lead?.telefone || null,
      email: lead?.email || null,
    }
  })
}

export async function getAgendamentosByLead(idLead: string): Promise<Agendamento[]> {
  const supabase = createClient()

const { data, error } = await supabase
    .from("AGENDAMENTOS")
    .select("*")
    .eq("lead_id", idLead)
    .order("criado_em", { ascending: false })

if (error) {
    console.error("Error fetching agendamentos by lead:", error.message)
    return []
  }

return data || []
}

export async function createAgendamento(agendamento: Partial<Agendamento>): Promise<Agendamento | null> {
  const supabase = createClient()

try {
    const { data, error } = await supabase.from("AGENDAMENTOS").insert([agendamento]).select()

if (error) {
      console.error("Error creating agendamento:", error.message)
      return null
    }

return data?.[0] || null
  } catch (error) {
    console.error("Unexpected error creating agendamento:", error)
    return null
  }
}

export async function updateAgendamento(id: string, updates: Partial<Agendamento>): Promise<boolean> {
  const supabase = createClient()

try {
    const { error } = await supabase
      .from("AGENDAMENTOS")
      .update({
        ...updates,
        atualizado_em: new Date().toISOString(),
      })
      .eq("id", id)

if (error) {
      console.error("Error updating agendamento:", error.message)
      return false
    }

return true
  } catch (error) {
    console.error("Unexpected error updating agendamento:", error)
    return false
  }
}

export async function updateAgendamentoStage(id: string, novoEstagio: string): Promise<boolean> {
  if (!VALID_ESTAGIOS_AGENDAMENTO.includes(novoEstagio)) {
    console.error("Invalid agendamento stage:", novoEstagio)
    return false
  }

return updateAgendamento(id, { status: novoEstagio })
}

export async function deleteAgendamento(id: string): Promise<boolean> {
  const supabase = createClient()

try {
    const { error } = await supabase.from("AGENDAMENTOS").delete().eq("id", id)

if (error) {
      console.error("Error deleting agendamento:", error.message)
      return false
    }

return true
  } catch (error) {
    console.error("Unexpected error deleting agendamento:", error)
    return false
  }
}

export async function sendAgendamentoWebhook(agendamento: Agendamento): Promise<boolean> {
  try {
    const webhookUrl = "https://n8n.eazy.tec.br/webhook/5693f8c5-f54c-4940-9ec6-87a160be27be"

const payload = {
      id: agendamento.id,
      id_empresa: agendamento.id_empresa,
      lead_id: agendamento.lead_id,
      nome_lead: agendamento.nome_lead,
      telefone: agendamento.telefone,
      email: agendamento.email,
      titulo: agendamento.titulo,
      descricao: agendamento.descricao,
      data_agendamento: agendamento.data_agendamento,
      vendedor_nome: agendamento.vendedor_nome,
      vendedor_id: agendamento.vendedor_id,
      status: agendamento.status,
      tipo: agendamento.tipo,
      local: agendamento.local,
      criado_em: agendamento.criado_em,
      atualizado_em: agendamento.atualizado_em,
      timestamp: new Date().toISOString(),
      action: "agendamento_salvo",
    }

const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 30000)

const response = await fetch(webhookUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(payload),
      signal: controller.signal,
    })

clearTimeout(timeoutId)

if (!response.ok) {
      console.error("[v0] Agendamento webhook error:", response.status)
      return false
    }

return true
  } catch (error) {
    console.error("[v0] Error sending agendamento webhook:", error)
    return false
  }
}

export async function getVendedores(idEmpresa: string | number): Promise<Vendedor[]> {
  const supabase = createClient()
  const empresaId = typeof idEmpresa === "string" ? Number.parseInt(idEmpresa, 10) : idEmpresa

const { data, error } = await supabase
    .from("VENDEDORES")
    .select("id, nome, telefone, cargo, id_empresa")
    .eq("id_empresa", empresaId)
    .order("nome", { ascending: true })

if (error) {
    console.error("[v0] Error fetching vendedores:", error.message)
    return []
  }

return data || []
}
[V0_FILE]typescript:file="lib/auth.ts" isMerged="true"
import { createClient } from "@/utils/supabase/client"

export interface User {
  id: number
  id_empresa: number
  nome_empresa: string
  nome_usuario: string
  email: string
  telefone?: string
  plano: string
  status: "ativo" | "pendente" | "inativo"
  cargo: "administrador" | "convidado" | "sdr" | "gestor" | "vendedor"
  created_at: string
  updated_at: string
}

export const STATUS_LABELS = {
  ativo: "Ativo",
  pendente: "Pendente",
  inativo: "Inativo",
}

export const STATUS_COLORS = {
  ativo: "bg-green-100 text-green-800",
  pendente: "bg-yellow-100 text-yellow-800",
  inativo: "bg-red-100 text-red-800",
}

export const CARGO_LABELS = {
  administrador: "Administrador",
  convidado: "Convidado",
  sdr: "SDR",
  gestor: "Gestor",
  vendedor: "Vendedor",
}

export const CARGO_COLORS = {
  administrador: "bg-green-100 text-green-800",
  convidado: "bg-blue-100 text-blue-800",
  sdr: "bg-purple-100 text-purple-800",
  gestor: "bg-orange-100 text-orange-800",
  vendedor: "bg-cyan-100 text-cyan-800",
}

export async function signIn(email: string, senha: string): Promise<User | null> {
  const supabase = createClient()

console.log("[v0] Attempting login with email:", email)

const { data, error } = await supabase.from("AUTORIZAÇÃO").select("*").ilike("email", email).eq("senha", senha)

console.log("[v0] Query result:", { data, error, dataLength: data?.length })

if (error) {
    console.error("[v0] Login query error:", error)
    return null
  }

if (!data || data.length === 0) {
    console.error("[v0] No user found with provided credentials")
    return null
  }

if (data.length > 1) {
    console.error("[v0] Multiple users found - this should not happen")
    return null
  }

const user = data[0] as User

console.log("[v0] User status:", user.status, "Expected: ativo")
  if (user.status.toLowerCase() !== "ativo") {
    console.error("[v0] User is not active. Status:", user.status)
    return null
  }

console.log("[v0] Login successful for user:", user.nome_usuario)

localStorage.setItem("altuza_digital_user", JSON.stringify(user))

return user
}

export function getCurrentUser(): User | null {
  if (typeof window === "undefined") return null

const userData = localStorage.getItem("altuza_digital_user")
  return userData ? JSON.parse(userData) : null
}

export function signOut() {
  localStorage.removeItem("altuza_digital_user")
}

export function isAdmin(user: User | null): boolean {
  return user?.cargo === "administrador"
}

export function canManageMembers(user: User | null): boolean {
  return isAdmin(user)
}

export async function updateUser(userId: number, userData: Partial<User>): Promise<boolean> {
  const supabase = createClient()

const { error } = await supabase
    .from("AUTORIZAÇÃO")
    .update({
      nome_usuario: userData.nome_usuario,
      email: userData.email,
      telefone: userData.telefone,
      updated_at: new Date().toISOString(),
    })
    .eq("id", userId)

if (error) {
    console.error("Error updating user:", error)
    return false
  }

const currentUser = getCurrentUser()
  if (currentUser) {
    const updatedUser = { ...currentUser, ...userData }
    localStorage.setItem("altuza_digital_user", JSON.stringify(updatedUser))
  }

return true
}

export async function getCompanyMembers(idEmpresa: number): Promise<User[]> {
  const supabase = createClient()

const { data, error } = await supabase
    .from("AUTORIZAÇÃO")
    .select("*")
    .eq("id_empresa", idEmpresa)
    .order("cargo", { ascending: false })
    .order("created_at", { ascending: true })

if (error) {
    console.error("Error fetching company members:", error)
    return []
  }

return data || []
}

export async function addCompanyMember(memberData: {
  id_empresa: number
  nome_empresa: string
  nome_usuario: string
  email: string
  senha: string
  telefone?: string
  status?: "ativo" | "pendente" | "inativo"
  cargo?: "administrador" | "convidado" | "sdr" | "gestor" | "vendedor"
}): Promise<{ success: boolean; error?: string }> {
  const supabase = createClient()

const { data: existingUser } = await supabase
    .from("AUTORIZAÇÃO")
    .select("email")
    .eq("email", memberData.email)
    .single()

if (existingUser) {
    return { success: false, error: "Este e-mail já está cadastrado no sistema." }
  }

const { data, error } = await supabase
    .from("AUTORIZAÇÃO")
    .insert({
      id_empresa: memberData.id_empresa,
      nome_empresa: memberData.nome_empresa,
      nome: memberData.nome_usuario,
      nome_usuario: memberData.nome_usuario,
      email: memberData.email,
      senha: memberData.senha,
      telefone: memberData.telefone || null,
      plano: "gratuito",
      status: memberData.status || "ativo",
      cargo: memberData.cargo || "convidado",
    })
    .select()

if (error) {
    console.error("Error adding company member:", error)
    return { success: false, error: "Erro ao adicionar membro. Tente novamente." }
  }

return { success: true }
}

export async function updateMemberStatus(
  memberId: number,
  status: "ativo" | "pendente" | "inativo",
  currentUser: User,
): Promise<{ success: boolean; error?: string }> {
  if (!canManageMembers(currentUser)) {
    return { success: false, error: "Você não tem permissão para alterar status de membros." }
  }

const supabase = createClient()

const { error } = await supabase
    .from("AUTORIZAÇÃO")
    .update({
      status,
      updated_at: new Date().toISOString(),
    })
    .eq("id", memberId)
    .eq("id_empresa", currentUser.id_empresa)

if (error) {
    console.error("Error updating member status:", error)
    return { success: false, error: "Erro ao atualizar status do membro." }
  }

return { success: true }
}

export async function updateMemberCargo(
  memberId: number,
  cargo: "administrador" | "convidado" | "sdr" | "gestor" | "vendedor",
  currentUser: User,
): Promise<{ success: boolean; error?: string }> {
  if (!canManageMembers(currentUser)) {
    return { success: false, error: "Você não tem permissão para alterar cargos." }
  }

const supabase = createClient()

const { error } = await supabase
    .from("AUTORIZAÇÃO")
    .update({
      cargo,
      updated_at: new Date().toISOString(),
    })
    .eq("id", memberId)
    .eq("id_empresa", currentUser.id_empresa)

if (error) {
    console.error("Error updating member cargo:", error)
    return { success: false, error: "Erro ao atualizar cargo do membro." }
  }

return { success: true }
}

export async function deleteMember(memberId: number, currentUser: User): Promise<{ success: boolean; error?: string }> {
  if (!canManageMembers(currentUser)) {
    return { success: false, error: "Você não tem permissão para excluir membros." }
  }

if (memberId === currentUser.id) {
    return { success: false, error: "Você não pode excluir sua própria conta." }
  }

const supabase = createClient()

const { error } = await supabase
    .from("AUTORIZAÇÃO")
    .delete()
    .eq("id", memberId)
    .eq("id_empresa", currentUser.id_empresa)

if (error) {
    console.error("Error deleting member:", error)
    return { success: false, error: "Erro ao excluir membro." }
  }

return { success: true }
}
[V0_FILE]typescript:file="lib/dashboard-stats.ts" isMerged="true"
import { createClient } from "@/utils/supabase/client"

export interface DashboardFilters {
  vendedor?: string
  origem?: string
  periodo?: string
}

export interface VendedorStats {
  vendedor: string
  total_leads: number
  leads_fechados: number
  taxa_conversao: number
  valor_total: number
  valor_medio: number
  leads_por_estagio: Record<string, number>
}

export interface VeiculoStats {
  veiculo: string
  total_interesse: number
  leads_fechados: number
  taxa_conversao: number
  valor_total: number
  valor_medio: number
}

export interface OrigemStats {
  origem: string
  total_leads: number
  leads_fechados: number
  taxa_conversao: number
  valor_total: number
  valor_medio: number
}

export interface EstagioEvolution {
  data: string
  [key: string]: string | number
}

export async function getDashboardData(idEmpresa: number, filters: DashboardFilters = {}) {
  const supabase = createClient()

let query = supabase.from("BASE_DE_LEADS").select("*").eq("id_empresa", idEmpresa)

// Aplicar filtros
  if (filters.vendedor) {
    query = query.eq("vendedor", filters.vendedor)
  }

if (filters.origem) {
    query = query.eq("origem", filters.origem)
  }

if (filters.periodo) {
    const now = new Date()
    const startDate = new Date()

switch (filters.periodo) {
      case "7d":
        startDate.setDate(now.getDate() - 7)
        break
      case "30d":
        startDate.setDate(now.getDate() - 30)
        break
      case "90d":
        startDate.setDate(now.getDate() - 90)
        break
      default:
        startDate.setDate(now.getDate() - 30)
    }

query = query.gte("created_at", startDate.toISOString())
  }

const { data: leads, error } = await query

if (error || !leads) {
    console.error("Error fetching dashboard data:", error)
    return {
      totalLeads: 0,
      leadsPorEstagio: {},
      leadsPorOrigem: {},
      conversao: "0",
      vendedorStats: [],
      veiculoStats: [],
      origemStats: [],
      estagioEvolution: [],
      availableVendedores: [],
      availableOrigens: [],
      valorTotal: 0,
      valorMedio: 0,
    }
  }

// Estatísticas básicas espelhando BASE_DE_LEADS
  const totalLeads = leads.length

// Agrupamento por ESTAGIO_LEAD (coluna estagio_lead)
  const leadsPorEstagio = leads.reduce((acc: any, lead) => {
    const estagio = lead.estagio_lead
    acc[estagio] = (acc[estagio] || 0) + 1
    return acc
  }, {})

// Agrupamento por ORIGEM (coluna origem)
  const leadsPorOrigem = leads.reduce((acc: any, lead) => {
    if (lead.origem) {
      acc[lead.origem] = (acc[lead.origem] || 0) + 1
    }
    return acc
  }, {})

const fechados = leadsPorEstagio.fechado || 0
  const conversao = totalLeads > 0 ? ((fechados / totalLeads) * 100).toFixed(1) : "0"

// Calcular valores totais
  const valorTotal = leads.reduce((sum, lead) => sum + (Number(lead.valor) || 0), 0)
  const valorMedio = totalLeads > 0 ? valorTotal / totalLeads : 0

// Performance por VENDEDOR (coluna vendedor) - espelhando exatamente a tabela
  const vendedorAgrupamento = leads.reduce((acc: any, lead) => {
    if (!lead.vendedor) return acc

if (!acc[lead.vendedor]) {
      acc[lead.vendedor] = {
        vendedor: lead.vendedor,
        total_leads: 0,
        leads_fechados: 0,
        valor_total: 0,
        leads_por_estagio: {},
      }
    }

acc[lead.vendedor].total_leads++
    acc[lead.vendedor].valor_total += Number(lead.valor) || 0

if (lead.estagio_lead === "fechado") {
      acc[lead.vendedor].leads_fechados++
    }

// Contar leads por estágio para cada vendedor
    const estagio = lead.estagio_lead
    acc[lead.vendedor].leads_por_estagio[estagio] = (acc[lead.vendedor].leads_por_estagio[estagio] || 0) + 1

return acc
  }, {})

const vendedorStats: VendedorStats[] = Object.values(vendedorAgrupamento)
    .map((vendedor: any) => ({
      ...vendedor,
      taxa_conversao: vendedor.total_leads > 0 ? (vendedor.leads_fechados / vendedor.total_leads) * 100 : 0,
      valor_medio: vendedor.total_leads > 0 ? vendedor.valor_total / vendedor.total_leads : 0,
    }))
    .sort((a, b) => b.total_leads - a.total_leads) // Ordenar por quantidade (maior para menor)

// TOP VEÍCULOS (coluna veiculo_interesse) - agrupamento por quantidade do maior para o menor
  const veiculoAgrupamento = leads.reduce((acc: any, lead) => {
    if (!lead.veiculo_interesse) return acc

if (!acc[lead.veiculo_interesse]) {
      acc[lead.veiculo_interesse] = {
        veiculo: lead.veiculo_interesse,
        total_interesse: 0,
        leads_fechados: 0,
        valor_total: 0,
      }
    }

acc[lead.veiculo_interesse].total_interesse++
    acc[lead.veiculo_interesse].valor_total += Number(lead.valor) || 0

if (lead.estagio_lead === "fechado") {
      acc[lead.veiculo_interesse].leads_fechados++
    }

return acc
  }, {})

const veiculoStats: VeiculoStats[] = Object.values(veiculoAgrupamento)
    .map((veiculo: any) => ({
      ...veiculo,
      taxa_conversao: veiculo.total_interesse > 0 ? (veiculo.leads_fechados / veiculo.total_interesse) * 100 : 0,
      valor_medio: veiculo.total_interesse > 0 ? veiculo.valor_total / veiculo.total_interesse : 0,
    }))
    .sort((a, b) => b.total_interesse - a.total_interesse) // Ordenar do maior para o menor

// Performance por ORIGEM (coluna origem) - espelhando exatamente a tabela
  const origemAgrupamento = leads.reduce((acc: any, lead) => {
    if (!lead.origem) return acc

if (!acc[lead.origem]) {
      acc[lead.origem] = {
        origem: lead.origem,
        total_leads: 0,
        leads_fechados: 0,
        valor_total: 0,
      }
    }

acc[lead.origem].total_leads++
    acc[lead.origem].valor_total += Number(lead.valor) || 0

if (lead.estagio_lead === "fechado") {
      acc[lead.origem].leads_fechados++
    }

return acc
  }, {})

const origemStats: OrigemStats[] = Object.values(origemAgrupamento)
    .map((origem: any) => ({
      ...origem,
      taxa_conversao: origem.total_leads > 0 ? (origem.leads_fechados / origem.total_leads) * 100 : 0,
      valor_medio: origem.total_leads > 0 ? origem.valor_total / origem.total_leads : 0,
    }))
    .sort((a, b) => b.total_leads - a.total_leads) // Ordenar por quantidade (maior para menor)

// Evolução por ESTÁGIO (coluna estagio_lead) - resumo da quantidade de cada estágio
  // Agrupamento simples por estágio espelhando a coluna estagio_lead
  const estagioResumo = Object.entries(leadsPorEstagio).map(([estagio, quantidade]) => ({
    estagio,
    quantidade: quantidade as number,
    percentual: totalLeads > 0 ? (((quantidade as number) / totalLeads) * 100).toFixed(1) : "0",
  }))

// Para o gráfico de linha temporal (últimos 30 dias)
  const estagioEvolution: EstagioEvolution[] = []
  const last30Days = Array.from({ length: 30 }, (_, i) => {
    const date = new Date()
    date.setDate(date.getDate() - (29 - i))
    return date
  })

last30Days.forEach((date) => {
    const dayLeads = leads.filter((lead) => {
      const leadDate = new Date(lead.created_at)
      return leadDate.toDateString() === date.toDateString()
    })

const dayData: EstagioEvolution = {
      data: date.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" }),
    }

// Contar leads por estágio neste dia específico
    const estagios = [
      "oportunidade",
      "em_qualificacao",
      "em_negociacao",
      "follow_up",
      "pesquisa_atendimento",
      "fechado",
      "nao_fechou",
    ]

estagios.forEach((estagio) => {
      dayData[estagio] = dayLeads.filter((lead) => lead.estagio_lead === estagio).length
    })

estagioEvolution.push(dayData)
  })

// Listas para filtros - espelhando exatamente as colunas da tabela
  const availableVendedores = [...new Set(leads.map((lead) => lead.vendedor).filter(Boolean))].sort()
  const availableOrigens = [...new Set(leads.map((lead) => lead.origem).filter(Boolean))].sort()

return {
    totalLeads,
    leadsPorEstagio,
    leadsPorOrigem,
    conversao,
    vendedorStats,
    veiculoStats,
    origemStats,
    estagioResumo, // Novo: resumo simples dos estágios
    estagioEvolution,
    availableVendedores,
    availableOrigens,
    valorTotal,
    valorMedio,
  }
}
[V0_FILE]typescript:file="lib/estoque.ts" isMerged="true"
import { createClient } from "@/utils/supabase/client"

export interface Veiculo {
  id: number
  marca: string
  modelo: string
  ano: number
  cor: string
  combustivel: string
  quilometragem: number
  status: string
  created_at: string
  updated_at: string
}

export interface NovoVeiculo {
  marca: string
  modelo: string
  ano: number
  cor: string
  combustivel: string
  quilometragem: number
}

export async function adicionarVeiculo(veiculo: NovoVeiculo): Promise<{ success: boolean; error?: string }> {
  try {
    const supabase = createClient()

const { error } = await supabase.from("estoque").insert([veiculo])

if (error) {
      console.error("Erro ao adicionar veículo:", error)
      return { success: false, error: error.message }
    }

return { success: true }
  } catch (error) {
    console.error("Erro ao adicionar veículo:", error)
    return { success: false, error: "Erro interno do servidor" }
  }
}

export async function listarVeiculos(): Promise<{ veiculos: Veiculo[]; error?: string }> {
  try {
    const supabase = createClient()

const { data, error } = await supabase.from("estoque").select("*").order("created_at", { ascending: false })

if (error) {
      console.error("Erro ao listar veículos:", error)
      return { veiculos: [], error: error.message }
    }

return { veiculos: data || [] }
  } catch (error) {
    console.error("Erro ao listar veículos:", error)
    return { veiculos: [], error: "Erro interno do servidor" }
  }
}

export async function excluirVeiculo(id: number): Promise<{ success: boolean; error?: string }> {
  try {
    const supabase = createClient()

const { error } = await supabase.from("estoque").delete().eq("id", id)

if (error) {
      console.error("Erro ao excluir veículo:", error)
      return { success: false, error: error.message }
    }

return { success: true }
  } catch (error) {
    console.error("Erro ao excluir veículo:", error)
    return { success: false, error: "Erro interno do servidor" }
  }
}

export async function marcarComoVendido(id: number): Promise<{ success: boolean; error?: string }> {
  try {
    const supabase = createClient()

const { error } = await supabase.from("estoque").update({ status: "Vendido" }).eq("id", id)

if (error) {
      console.error("Erro ao marcar veículo como vendido:", error)
      return { success: false, error: error.message }
    }

return { success: true }
  } catch (error) {
    console.error("Erro ao marcar veículo como vendido:", error)
    return { success: false, error: "Erro interno do servidor" }
  }
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  experimental: {
    serverComponentsExternalPackages: ['@supabase/supabase-js']
  },
  images: {
    unoptimized: true,
  }
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "eazy-click-platform",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hello-pangea/dnd": "^16.5.0",
    "@neondatabase/serverless": "1.0.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-checkbox": "1.3.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "1.2.15",
    "@supabase/ssr": "^0.1.0",
    "@supabase/supabase-js": "^2.39.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.344.0",
    "next": "14.2.35",
    "next-themes": "0.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "recharts": "^2.8.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20.11.0",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "autoprefixer": "^10.4.0",
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.2.0",
    "postcss": "^8.4.0",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.3.0"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
}

export default config
[V0_FILE]sql:file="scripts/01-create-tables.sql" isMerged="true"
-- Criar tabela AUTORIZAÇÃO
CREATE TABLE IF NOT EXISTS "AUTORIZAÇÃO" (
  id SERIAL PRIMARY KEY,
  id_empresa INTEGER NOT NULL,
  nome_empresa VARCHAR(255) NOT NULL,
  nome_usuario VARCHAR(255) NOT NULL,
  email VARCHAR(255) UNIQUE NOT NULL,
  senha VARCHAR(255) NOT NULL,
  telefone VARCHAR(20),
  plano VARCHAR(50) DEFAULT 'gratuito',
  status VARCHAR(20) DEFAULT 'ativo' CHECK (status IN ('ativo', 'pendente', 'inativo')),
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Criar tabela BASE_DE_LEADS
CREATE TABLE IF NOT EXISTS "BASE_DE_LEADS" (
  id SERIAL PRIMARY KEY,
  id_empresa INTEGER NOT NULL,
  nome_lead VARCHAR(255) NOT NULL,
  telefone VARCHAR(20),
  email VARCHAR(255),
  origem VARCHAR(100),
  vendedor VARCHAR(255),
  veiculo_interesse VARCHAR(255),
  resumo_qualificacao TEXT,
  estagio_lead VARCHAR(50) DEFAULT 'oportunidade' CHECK (estagio_lead IN ('oportunidade', 'em_qualificacao', 'qualificado', 'follow_up', 'nutricao', 'fechado', 'nao_fechou')),
  resumo_comercial TEXT,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Inserir usuário admin padrão
INSERT INTO "AUTORIZAÇÃO" (id_empresa, nome_empresa, nome_usuario, email, senha, telefone, plano, status)
VALUES (1, 'Administração', 'Admin', 'admin@admin.com.br', 'admin123', '(11) 99999-9999', 'premium', 'ativo')
ON CONFLICT (email) DO NOTHING;

-- Inserir alguns leads de exemplo
INSERT INTO "BASE_DE_LEADS" (id_empresa, nome_lead, telefone, email, origem, vendedor, veiculo_interesse, resumo_qualificacao, estagio_lead, resumo_comercial)
VALUES 
  (1, 'João Silva', '(11) 98765-4321', 'joao@email.com', 'Site', 'Carlos Vendedor', 'Honda Civic', 'Cliente interessado em financiamento', 'oportunidade', 'Primeiro contato realizado'),
  (1, 'Maria Santos', '(11) 87654-3210', 'maria@email.com', 'Facebook', 'Ana Vendedora', 'Toyota Corolla', 'Cliente com boa renda', 'em_qualificacao', 'Aguardando documentação'),
  (1, 'Pedro Costa', '(11) 76543-2109', 'pedro@email.com', 'Google Ads', 'Carlos Vendedor', 'Volkswagen Jetta', 'Cliente qualificado', 'qualificado', 'Proposta enviada'),
  (1, 'Ana Oliveira', '(11) 65432-1098', 'ana@email.com', 'Indicação', 'Ana Vendedora', 'Nissan Sentra', 'Follow up necessário', 'follow_up', 'Reagendar visita'),
  (1, 'Carlos Lima', '(11) 54321-0987', 'carlos@email.com', 'Site', 'Carlos Vendedor', 'Hyundai HB20', 'Em processo de nutrição', 'nutricao', 'Enviando materiais');
[V0_FILE]sql:file="scripts/02-update-authorization-table.sql" isMerged="true"
-- Atualizar a tabela AUTORIZAÇÃO para garantir que o campo status tenha as opções corretas
ALTER TABLE "AUTORIZAÇÃO" 
DROP CONSTRAINT IF EXISTS "AUTORIZAÇÃO_status_check";

ALTER TABLE "AUTORIZAÇÃO" 
ADD CONSTRAINT "AUTORIZAÇÃO_status_check" 
CHECK (status IN ('ativo', 'pendente', 'inativo'));

-- Garantir que todos os registros existentes tenham status válido
UPDATE "AUTORIZAÇÃO" 
SET status = 'ativo' 
WHERE status NOT IN ('ativo', 'pendente', 'inativo');

-- Criar índice para melhorar performance nas consultas de login
CREATE INDEX IF NOT EXISTS idx_autorizacao_email_status 
ON "AUTORIZAÇÃO" (email, status);

CREATE INDEX IF NOT EXISTS idx_autorizacao_empresa_status 
ON "AUTORIZAÇÃO" (id_empresa, status);
[V0_FILE]sql:file="scripts/03-add-cargo-system.sql" isMerged="true"
-- Adicionar coluna cargo na tabela AUTORIZAÇÃO
ALTER TABLE "AUTORIZAÇÃO" 
ADD COLUMN IF NOT EXISTS cargo VARCHAR(20) DEFAULT 'convidado' 
CHECK (cargo IN ('administrador', 'convidado'));

-- Atualizar o usuário admin padrão para ter cargo de administrador
UPDATE "AUTORIZAÇÃO" 
SET cargo = 'administrador' 
WHERE email = 'admin@admin.com.br';

-- Criar índice para melhorar performance
CREATE INDEX IF NOT EXISTS idx_autorizacao_empresa_cargo 
ON "AUTORIZAÇÃO" (id_empresa, cargo);

-- Garantir que sempre existe pelo menos um administrador por empresa
CREATE OR REPLACE FUNCTION check_admin_exists()
RETURNS TRIGGER AS $$
BEGIN
    -- Se estamos tentando remover ou alterar o último admin
    IF (TG_OP = 'DELETE' OR (TG_OP = 'UPDATE' AND NEW.cargo != 'administrador')) 
       AND OLD.cargo = 'administrador' THEN
        
        -- Verificar se existe outro admin na mesma empresa
        IF NOT EXISTS (
            SELECT 1 FROM "AUTORIZAÇÃO" 
            WHERE id_empresa = OLD.id_empresa 
            AND cargo = 'administrador' 
            AND id != OLD.id
            AND status = 'ativo'
        ) THEN
            RAISE EXCEPTION 'Não é possível remover o último administrador da empresa';
        END IF;
    END IF;
    
    IF TG_OP = 'DELETE' THEN
        RETURN OLD;
    END IF;
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Criar trigger para proteger o último admin
DROP TRIGGER IF EXISTS protect_last_admin ON "AUTORIZAÇÃO";
CREATE TRIGGER protect_last_admin
    BEFORE UPDATE OR DELETE ON "AUTORIZAÇÃO"
    FOR EACH ROW
    EXECUTE FUNCTION check_admin_exists();
[V0_FILE]sql:file="scripts/04-add-valor-field.sql" isMerged="true"
-- Adicionar campo valor na tabela BASE_DE_LEADS
ALTER TABLE "BASE_DE_LEADS" 
ADD COLUMN IF NOT EXISTS valor DECIMAL(15,2) DEFAULT 0.00;

-- Criar índice para melhorar performance nas consultas de valor
CREATE INDEX IF NOT EXISTS idx_base_leads_valor 
ON "BASE_DE_LEADS" (valor);

-- Atualizar alguns leads existentes com valores de exemplo
UPDATE "BASE_DE_LEADS" 
SET valor = CASE 
  WHEN veiculo_interesse LIKE '%Civic%' THEN 85000.00
  WHEN veiculo_interesse LIKE '%Corolla%' THEN 95000.00
  WHEN veiculo_interesse LIKE '%Jetta%' THEN 110000.00
  WHEN veiculo_interesse LIKE '%Sentra%' THEN 78000.00
  WHEN veiculo_interesse LIKE '%HB20%' THEN 65000.00
  ELSE 75000.00
END
WHERE valor = 0.00;

-- Comentário explicativo
COMMENT ON COLUMN "BASE_DE_LEADS".valor IS 'Valor estimado do negócio em reais';
[V0_FILE]sql:file="scripts/04-update-cargo-constraint.sql" isMerged="true"
-- Remover a constraint antiga e adicionar nova com mais cargos
ALTER TABLE "AUTORIZAÇÃO" DROP CONSTRAINT IF EXISTS "AUTORIZAÇÃO_cargo_check";

-- Adicionar nova constraint com todos os cargos permitidos
ALTER TABLE "AUTORIZAÇÃO" ADD CONSTRAINT "AUTORIZAÇÃO_cargo_check" 
CHECK (cargo IN ('administrador', 'convidado', 'sdr', 'gestor', 'vendedor'));
[V0_FILE]sql:file="scripts/05-update-text-fields.sql" isMerged="true"
-- Alterar campos de texto para suportar conteúdo longo com quebras de linha
ALTER TABLE "BASE_DE_LEADS" 
ALTER COLUMN resumo_qualificacao TYPE TEXT;

ALTER TABLE "BASE_DE_LEADS" 
ALTER COLUMN resumo_comercial TYPE TEXT;

-- Atualizar alguns leads com dados de exemplo mais realistas
UPDATE "BASE_DE_LEADS" 
SET resumo_qualificacao = CASE 
  WHEN nome_lead = 'João Silva' THEN 'Cliente interessado em financiamento para Honda Civic.
Possui renda comprovada de R$ 8.000/mês.
Primeira habilitação há 5 anos.
Busca veículo para uso familiar e trabalho.'
  WHEN nome_lead = 'Maria Santos' THEN 'Cliente com boa renda, trabalha como gerente.
Interessada em Toyota Corolla automático.
Possui Fiat Uno 2018 para entrada.
Prioriza economia de combustível.'
  WHEN nome_lead = 'Pedro Costa' THEN 'Empresário, possui empresa própria.
Busca Volkswagen Jetta para uso executivo.
Pode dar entrada de 40% do valor.
Quer entrega em até 30 dias.'
  WHEN nome_lead = 'Ana Oliveira' THEN 'Professora universitária, renda estável.
Interessada em Nissan Sentra.
Primeira compra de carro 0km.
Precisa de orientação sobre financiamento.'
  WHEN nome_lead = 'Carlos Lima' THEN 'Jovem profissional, primeiro emprego CLT.
Busca Hyundai HB20 como primeiro carro.
Pais podem ajudar com entrada.
Prioriza baixo custo de manutenção.'
  ELSE resumo_qualificacao
END
WHERE resumo_qualificacao IS NOT NULL;

UPDATE "BASE_DE_LEADS" 
SET resumo_comercial = CASE 
  WHEN nome_lead = 'João Silva' THEN 'Primeira abordagem realizada com sucesso.
Cliente demonstrou interesse real no Honda Civic.
Agendada visita para test drive na próxima semana.
Enviada proposta inicial com condições especiais.

Próximos passos:
- Confirmar test drive
- Avaliar veículo usado
- Finalizar proposta de financiamento'
  WHEN nome_lead = 'Maria Santos' THEN 'Cliente em processo de análise de crédito.
Documentação enviada para financeira.
Aguardando aprovação do financiamento.

Status atual:
- Documentos: ✓ Enviados
- Análise: 🔄 Em andamento
- Previsão: 3-5 dias úteis

Observações:
Cliente ansiosa para fechar negócio.'
  WHEN nome_lead = 'Pedro Costa' THEN 'Proposta comercial enviada e aprovada.
Cliente confirmou interesse em fechar.
Aguardando apenas assinatura do contrato.

Detalhes da venda:
- Valor: R$ 110.000,00
- Entrada: R$ 44.000,00 (40%)
- Financiamento: R$ 66.000,00
- Prazo: 48x

Entrega prevista: 15 dias.'
  WHEN nome_lead = 'Ana Oliveira' THEN 'Cliente em fase de follow-up.
Necessita reagendar visita à loja.
Demonstrou interesse mas precisa decidir.

Ações realizadas:
- Apresentação do veículo
- Explicação sobre financiamento
- Envio de material informativo

Próxima ação: Ligar em 2 dias.'
  WHEN nome_lead = 'Carlos Lima' THEN 'Lead em processo de nutrição.
Enviando materiais educativos sobre financiamento.
Cliente jovem, precisa de mais informações.

Estratégia:
- Conteúdo educativo sobre primeiro carro
- Simulações de financiamento
- Apresentação de benefícios do HB20

Status: Nutrição ativa.'
  ELSE resumo_comercial
END
WHERE resumo_comercial IS NOT NULL;

-- Comentários explicativos
COMMENT ON COLUMN "BASE_DE_LEADS".resumo_qualificacao IS 'Resumo detalhado da qualificação do lead - suporta texto longo com quebras de linha';
COMMENT ON COLUMN "BASE_DE_LEADS".resumo_comercial IS 'Resumo comercial detalhado - suporta texto longo com quebras de linha';
[V0_FILE]sql:file="scripts/06-add-observacao-vendedor.sql" isMerged="true"
-- Adicionar campo observacao_vendedor na tabela BASE_DE_LEADS
ALTER TABLE "BASE_DE_LEADS" 
ADD COLUMN IF NOT EXISTS observacao_vendedor TEXT DEFAULT '';

-- Criar índice para melhorar performance
CREATE INDEX IF NOT EXISTS idx_base_leads_observacao 
ON "BASE_DE_LEADS" (id_empresa, observacao_vendedor);

-- Atualizar alguns leads com observações de exemplo
UPDATE "BASE_DE_LEADS" 
SET observacao_vendedor = CASE 
  WHEN nome_lead = 'João Silva' THEN 'Cliente muito interessado, demonstrou urgência na compra. Tem preferência por cores escuras.'
  WHEN nome_lead = 'Maria Santos' THEN 'Primeira compradora, precisa de mais orientação sobre financiamento. Muito educada e pontual.'
  WHEN nome_lead = 'Pedro Costa' THEN 'Empresário sério, decisão rápida. Quer entrega urgente para viagem de negócios.'
  WHEN nome_lead = 'Ana Oliveira' THEN 'Professora, horário restrito para atendimento. Prefere contato após 18h.'
  WHEN nome_lead = 'Carlos Lima' THEN 'Jovem ansioso, primeiro carro. Pais acompanham nas decisões. Muito simpático.'
  ELSE 'Observações do vendedor sobre este lead...'
END
WHERE observacao_vendedor = '' OR observacao_vendedor IS NULL;

-- Comentário explicativo
COMMENT ON COLUMN "BASE_DE_LEADS".observacao_vendedor IS 'Observações pessoais do vendedor sobre o lead - campo editável';
[V0_FILE]sql:file="scripts/07-update-estagio-labels.sql" isMerged="true"
-- Atualizar os estágios existentes no banco de dados
UPDATE "BASE_DE_LEADS" 
SET estagio_lead = 'em_negociacao' 
WHERE estagio_lead = 'qualificado';

UPDATE "BASE_DE_LEADS" 
SET estagio_lead = 'pesquisa_atendimento' 
WHERE estagio_lead = 'nutricao';

-- Atualizar a constraint para incluir os novos valores
ALTER TABLE "BASE_DE_LEADS" 
DROP CONSTRAINT IF EXISTS "BASE_DE_LEADS_estagio_lead_check";

ALTER TABLE "BASE_DE_LEADS" 
ADD CONSTRAINT "BASE_DE_LEADS_estagio_lead_check" 
CHECK (estagio_lead IN ('oportunidade', 'em_qualificacao', 'em_negociacao', 'fechado', 'nao_fechou', 'pesquisa_atendimento', 'follow_up'));

-- Comentários explicativos
COMMENT ON CONSTRAINT "BASE_DE_LEADS_estagio_lead_check" ON "BASE_DE_LEADS" IS 'Novos estágios: qualificado->em_negociacao, nutricao->pesquisa_atendimento';
[V0_FILE]sql:file="scripts/08-fix-estagio-constraint.sql" isMerged="true"
-- Remover a constraint antiga
ALTER TABLE "BASE_DE_LEADS" 
DROP CONSTRAINT IF EXISTS "BASE_DE_LEADS_estagio_lead_check";

-- Verificar os valores atuais na tabela
SELECT DISTINCT estagio_lead FROM "BASE_DE_LEADS";

-- Atualizar valores inconsistentes se existirem
UPDATE "BASE_DE_LEADS" 
SET estagio_lead = 'em_negociacao' 
WHERE estagio_lead = 'qualificado';

UPDATE "BASE_DE_LEADS" 
SET estagio_lead = 'pesquisa_atendimento' 
WHERE estagio_lead = 'nutricao';

-- Criar nova constraint com todos os valores corretos
ALTER TABLE "BASE_DE_LEADS" 
ADD CONSTRAINT "BASE_DE_LEADS_estagio_lead_check" 
CHECK (estagio_lead IN (
  'oportunidade', 
  'em_qualificacao', 
  'em_negociacao', 
  'fechado', 
  'nao_fechou', 
  'pesquisa_atendimento', 
  'follow_up'
));

-- Verificar se todos os registros estão válidos
SELECT estagio_lead, COUNT(*) as quantidade
FROM "BASE_DE_LEADS" 
GROUP BY estagio_lead
ORDER BY quantidade DESC;

-- Comentário explicativo
COMMENT ON CONSTRAINT "BASE_DE_LEADS_estagio_lead_check" ON "BASE_DE_LEADS" 
IS 'Constraint atualizada com os novos estágios: oportunidade, em_qualificacao, em_negociacao, fechado, nao_fechou, pesquisa_atendimento, follow_up';
[V0_FILE]sql:file="scripts/09-create-all-tables-complete.sql" isMerged="true"
-- Script completo para criar todas as tabelas do CRM Altuza Digital
-- Tabelas: AUTORIZAÇÃO, BASE_DE_LEADS, AGENDAMENTOS, VENDEDORES, estoque, altuzadigital_chat_history

-- =====================================================
-- 1. TABELA AUTORIZAÇÃO (Usuários do sistema)
-- =====================================================
CREATE TABLE IF NOT EXISTS "AUTORIZAÇÃO" (
  id SERIAL PRIMARY KEY,
  id_empresa INTEGER NOT NULL,
  nome_empresa VARCHAR(255) NOT NULL,
  nome_usuario VARCHAR(255) NOT NULL,
  email VARCHAR(255) UNIQUE NOT NULL,
  senha VARCHAR(255) NOT NULL,
  telefone VARCHAR(20),
  plano VARCHAR(50) DEFAULT 'gratuito',
  status VARCHAR(20) DEFAULT 'ativo',
  cargo VARCHAR(20) DEFAULT 'convidado',
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Constraints para AUTORIZAÇÃO
ALTER TABLE "AUTORIZAÇÃO" 
DROP CONSTRAINT IF EXISTS "AUTORIZAÇÃO_status_check";
ALTER TABLE "AUTORIZAÇÃO" 
ADD CONSTRAINT "AUTORIZAÇÃO_status_check" 
CHECK (status IN ('ativo', 'pendente', 'inativo'));

ALTER TABLE "AUTORIZAÇÃO" 
DROP CONSTRAINT IF EXISTS "AUTORIZAÇÃO_cargo_check";
ALTER TABLE "AUTORIZAÇÃO" 
ADD CONSTRAINT "AUTORIZAÇÃO_cargo_check" 
CHECK (cargo IN ('administrador', 'convidado'));

-- Índices para AUTORIZAÇÃO
CREATE INDEX IF NOT EXISTS idx_autorizacao_email_status 
ON "AUTORIZAÇÃO" (email, status);
CREATE INDEX IF NOT EXISTS idx_autorizacao_empresa_status 
ON "AUTORIZAÇÃO" (id_empresa, status);
CREATE INDEX IF NOT EXISTS idx_autorizacao_empresa_cargo 
ON "AUTORIZAÇÃO" (id_empresa, cargo);

-- =====================================================
-- 2. TABELA VENDEDORES
-- =====================================================
CREATE TABLE IF NOT EXISTS "VENDEDORES" (
  "ID_VENDEDOR" SERIAL PRIMARY KEY,
  "NOME" VARCHAR(255) NOT NULL,
  "TELEFONE" VARCHAR(20),
  "EMAIL" VARCHAR(255),
  "CARGO" VARCHAR(100),
  "ID_EMPRESA" INTEGER NOT NULL,
  "ATIVO" BOOLEAN DEFAULT TRUE,
  "CREATED_AT" TIMESTAMP DEFAULT NOW(),
  "UPDATED_AT" TIMESTAMP DEFAULT NOW()
);

-- Índices para VENDEDORES
CREATE INDEX IF NOT EXISTS idx_vendedores_empresa 
ON "VENDEDORES" ("ID_EMPRESA");
CREATE INDEX IF NOT EXISTS idx_vendedores_ativo 
ON "VENDEDORES" ("ID_EMPRESA", "ATIVO");

-- =====================================================
-- 3. TABELA BASE_DE_LEADS
-- =====================================================
CREATE TABLE IF NOT EXISTS "BASE_DE_LEADS" (
  id SERIAL PRIMARY KEY,
  id_empresa INTEGER NOT NULL,
  nome_lead VARCHAR(255) NOT NULL,
  telefone VARCHAR(20),
  email VARCHAR(255),
  origem VARCHAR(100),
  vendedor VARCHAR(255),
  veiculo_interesse VARCHAR(255),
  resumo_qualificacao TEXT,
  estagio_lead VARCHAR(50) DEFAULT 'oportunidade',
  resumo_comercial TEXT,
  valor DECIMAL(15,2) DEFAULT 0.00,
  observacao_vendedor TEXT DEFAULT '',
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Constraint para estagio_lead
ALTER TABLE "BASE_DE_LEADS" 
DROP CONSTRAINT IF EXISTS "BASE_DE_LEADS_estagio_lead_check";
ALTER TABLE "BASE_DE_LEADS" 
ADD CONSTRAINT "BASE_DE_LEADS_estagio_lead_check" 
CHECK (estagio_lead IN (
  'oportunidade', 
  'em_qualificacao', 
  'em_negociacao', 
  'fechado', 
  'nao_fechou', 
  'pesquisa_atendimento', 
  'follow_up'
));

-- Índices para BASE_DE_LEADS
CREATE INDEX IF NOT EXISTS idx_base_leads_empresa 
ON "BASE_DE_LEADS" (id_empresa);
CREATE INDEX IF NOT EXISTS idx_base_leads_estagio 
ON "BASE_DE_LEADS" (id_empresa, estagio_lead);
CREATE INDEX IF NOT EXISTS idx_base_leads_valor 
ON "BASE_DE_LEADS" (valor);
CREATE INDEX IF NOT EXISTS idx_base_leads_observacao 
ON "BASE_DE_LEADS" (id_empresa, observacao_vendedor);

-- =====================================================
-- 4. TABELA AGENDAMENTOS
-- =====================================================
CREATE TABLE IF NOT EXISTS "AGENDAMENTOS" (
  "ID_AGENDAMENTO" SERIAL PRIMARY KEY,
  "id_empresa" VARCHAR(50) NOT NULL,
  "ID_LEAD" INTEGER,
  "nome_lead" VARCHAR(255),
  "telefone" VARCHAR(20),
  "email" VARCHAR(255),
  "MODELO_VEICULO" VARCHAR(255),
  "DATA_AGENDAMENTO" DATE,
  "HORA_AGENDAMENTO" TIME,
  "ID_VENDEDOR" INTEGER,
  "ESTAGIO" VARCHAR(50) DEFAULT 'agendar',
  "OBSERVACOES" TEXT,
  "CREATED_AT" TIMESTAMP DEFAULT NOW(),
  "UPDATED_AT" TIMESTAMP DEFAULT NOW()
);

-- Constraint para ESTAGIO de agendamentos
ALTER TABLE "AGENDAMENTOS" 
DROP CONSTRAINT IF EXISTS "AGENDAMENTOS_estagio_check";
ALTER TABLE "AGENDAMENTOS" 
ADD CONSTRAINT "AGENDAMENTOS_estagio_check" 
CHECK ("ESTAGIO" IN ('agendar', 'agendado', 'realizou_visita', 'fechou', 'nao_fechou'));

-- Índices para AGENDAMENTOS
CREATE INDEX IF NOT EXISTS idx_agendamentos_empresa 
ON "AGENDAMENTOS" ("id_empresa");
CREATE INDEX IF NOT EXISTS idx_agendamentos_lead 
ON "AGENDAMENTOS" ("ID_LEAD");
CREATE INDEX IF NOT EXISTS idx_agendamentos_vendedor 
ON "AGENDAMENTOS" ("ID_VENDEDOR");
CREATE INDEX IF NOT EXISTS idx_agendamentos_data 
ON "AGENDAMENTOS" ("DATA_AGENDAMENTO");
CREATE INDEX IF NOT EXISTS idx_agendamentos_estagio 
ON "AGENDAMENTOS" ("id_empresa", "ESTAGIO");

-- =====================================================
-- 5. TABELA estoque
-- =====================================================
CREATE TABLE IF NOT EXISTS "estoque" (
  id SERIAL PRIMARY KEY,
  marca VARCHAR(100) NOT NULL,
  modelo VARCHAR(100) NOT NULL,
  ano INTEGER NOT NULL,
  cor VARCHAR(50),
  combustivel VARCHAR(50),
  quilometragem INTEGER DEFAULT 0,
  status VARCHAR(50) DEFAULT 'Disponível',
  preco DECIMAL(15,2),
  id_empresa INTEGER,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Índices para estoque
CREATE INDEX IF NOT EXISTS idx_estoque_status 
ON "estoque" (status);
CREATE INDEX IF NOT EXISTS idx_estoque_empresa 
ON "estoque" (id_empresa);
CREATE INDEX IF NOT EXISTS idx_estoque_marca_modelo 
ON "estoque" (marca, modelo);

-- =====================================================
-- 6. TABELA altuzadigital_chat_history
-- =====================================================
CREATE TABLE IF NOT EXISTS "altuzadigital_chat_history" (
  id SERIAL PRIMARY KEY,
  id_empresa INTEGER NOT NULL,
  id_lead INTEGER,
  id_usuario INTEGER,
  tipo_mensagem VARCHAR(50) DEFAULT 'texto',
  conteudo TEXT NOT NULL,
  remetente VARCHAR(50) NOT NULL,
  canal VARCHAR(50) DEFAULT 'whatsapp',
  lido BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Índices para altuzadigital_chat_history
CREATE INDEX IF NOT EXISTS idx_chat_history_empresa 
ON "altuzadigital_chat_history" (id_empresa);
CREATE INDEX IF NOT EXISTS idx_chat_history_lead 
ON "altuzadigital_chat_history" (id_lead);
CREATE INDEX IF NOT EXISTS idx_chat_history_usuario 
ON "altuzadigital_chat_history" (id_usuario);
CREATE INDEX IF NOT EXISTS idx_chat_history_created 
ON "altuzadigital_chat_history" (created_at DESC);

-- =====================================================
-- DADOS INICIAIS DE EXEMPLO
-- =====================================================

-- Inserir usuário admin padrão
INSERT INTO "AUTORIZAÇÃO" (id_empresa, nome_empresa, nome_usuario, email, senha, telefone, plano, status, cargo)
VALUES (1, 'Administração', 'Admin', 'admin@admin.com.br', 'admin123', '(11) 99999-9999', 'premium', 'ativo', 'administrador')
ON CONFLICT (email) DO NOTHING;

-- Inserir vendedores de exemplo
INSERT INTO "VENDEDORES" ("NOME", "TELEFONE", "EMAIL", "CARGO", "ID_EMPRESA")
VALUES 
  ('Carlos Vendedor', '(11) 98765-4321', 'carlos@empresa.com', 'Vendedor Senior', 1),
  ('Ana Vendedora', '(11) 87654-3210', 'ana@empresa.com', 'Vendedora', 1)
ON CONFLICT DO NOTHING;

-- Inserir alguns leads de exemplo
INSERT INTO "BASE_DE_LEADS" (id_empresa, nome_lead, telefone, email, origem, vendedor, veiculo_interesse, resumo_qualificacao, estagio_lead, resumo_comercial, valor, observacao_vendedor)
VALUES 
  (1, 'João Silva', '(11) 98765-4321', 'joao@email.com', 'Site', 'Carlos Vendedor', 'Honda Civic', 'Cliente interessado em financiamento', 'oportunidade', 'Primeiro contato realizado', 85000.00, 'Cliente muito interessado'),
  (1, 'Maria Santos', '(11) 87654-3210', 'maria@email.com', 'Facebook', 'Ana Vendedora', 'Toyota Corolla', 'Cliente com boa renda', 'em_qualificacao', 'Aguardando documentação', 95000.00, 'Boa comunicação'),
  (1, 'Pedro Costa', '(11) 76543-2109', 'pedro@email.com', 'Google Ads', 'Carlos Vendedor', 'Volkswagen Jetta', 'Cliente qualificado', 'em_negociacao', 'Proposta enviada', 110000.00, 'Empresário'),
  (1, 'Ana Oliveira', '(11) 65432-1098', 'ana@email.com', 'Indicação', 'Ana Vendedora', 'Nissan Sentra', 'Follow up necessário', 'follow_up', 'Reagendar visita', 78000.00, 'Professora'),
  (1, 'Carlos Lima', '(11) 54321-0987', 'carlos@email.com', 'Site', 'Carlos Vendedor', 'Hyundai HB20', 'Em processo de nutrição', 'pesquisa_atendimento', 'Enviando materiais', 65000.00, 'Primeiro carro')
ON CONFLICT DO NOTHING;

-- Inserir veículos de exemplo no estoque
INSERT INTO "estoque" (marca, modelo, ano, cor, combustivel, quilometragem, status, preco, id_empresa)
VALUES 
  ('Honda', 'Civic', 2024, 'Preto', 'Flex', 0, 'Disponível', 145000.00, 1),
  ('Toyota', 'Corolla', 2023, 'Branco', 'Híbrido', 15000, 'Disponível', 165000.00, 1),
  ('Volkswagen', 'Jetta', 2024, 'Cinza', 'Flex', 5000, 'Disponível', 175000.00, 1),
  ('Hyundai', 'HB20', 2024, 'Vermelho', 'Flex', 0, 'Disponível', 85000.00, 1),
  ('Nissan', 'Sentra', 2023, 'Prata', 'Flex', 20000, 'Vendido', 125000.00, 1)
ON CONFLICT DO NOTHING;

-- Inserir agendamentos de exemplo
INSERT INTO "AGENDAMENTOS" ("id_empresa", "nome_lead", "telefone", "email", "MODELO_VEICULO", "DATA_AGENDAMENTO", "HORA_AGENDAMENTO", "ESTAGIO", "OBSERVACOES")
VALUES 
  ('1', 'João Silva', '(11) 98765-4321', 'joao@email.com', 'Honda Civic', CURRENT_DATE + INTERVAL '1 day', '10:00', 'agendado', 'Test drive agendado'),
  ('1', 'Maria Santos', '(11) 87654-3210', 'maria@email.com', 'Toyota Corolla', CURRENT_DATE + INTERVAL '2 days', '14:00', 'agendar', 'Aguardando confirmação'),
  ('1', 'Pedro Costa', '(11) 76543-2109', 'pedro@email.com', 'Volkswagen Jetta', CURRENT_DATE - INTERVAL '1 day', '16:00', 'realizou_visita', 'Cliente gostou do veículo')
ON CONFLICT DO NOTHING;

-- Comentários nas tabelas
COMMENT ON TABLE "AUTORIZAÇÃO" IS 'Tabela de usuários e autenticação do sistema';
COMMENT ON TABLE "VENDEDORES" IS 'Tabela de vendedores da empresa';
COMMENT ON TABLE "BASE_DE_LEADS" IS 'Tabela de leads/clientes potenciais';
COMMENT ON TABLE "AGENDAMENTOS" IS 'Tabela de agendamentos de visitas e test drives';
COMMENT ON TABLE "estoque" IS 'Tabela de veículos em estoque';
COMMENT ON TABLE "altuzadigital_chat_history" IS 'Histórico de conversas do chat';
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from 'tailwindcss'

// all in fixtures is set to tailwind v3 as interims solutions

const config: Config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    '*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))',
        },
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}
export default config
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]typescript:file="utils/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]typescript:file="utils/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // The `setAll` method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}
[V0_FILE]png:file="public/altuza-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/4Thek5cGEcGhOXCOFd7HOV/public/altuza-icon.png" isMerged="true"
[V0_FILE]png:file="public/altuza-logo-horizontal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/1vRiN-9TX10ZiCVUU6sSAr/public/altuza-logo-horizontal.png" isMerged="true"
[V0_FILE]png:file="public/altuza-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/65LaA7F2MGcudyAXCYm27K/public/altuza-logo.png" isMerged="true"
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/qFMQBTMDp6-th9t3GCSrFt/public/icon.svg" isMerged="true"
[V0_FILE]png:file="public/logo-altuza-ofc.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/BTg69Zz8duDC0IdFi0S6h5/public/logo-altuza-ofc.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_Ov8Iwfso6TRS5flCTIZ6nyq69BF5/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]typescript:file="lib/leads.ts" isMerged="true"
import { createClient } from "@/utils/supabase/client"

export interface Lead {
  id: number | string
  id_empresa: number
  nome: string
  telefone?: string
  email?: string
  origem?: string
  vendedor?: string
  veiculo_interesse?: string
  resumo_qualificacao?: string
  estagio_lead: string
  resumo_comercial?: string
  valor: number
  observacao_vendedor?: string
  created_at: string
  updated_at: string
}

export const ESTAGIO_LABELS = {
  oportunidade: "Oportunidade",
  em_qualificacao: "Em Qualificação",
  em_negociacao: "Em Negociação",
  resgate: "Resgate",
  fechado: "Fechado",
  nao_fechou: "Não Fechou",
  pesquisa_atendimento: "Pesquisa de Atendimento",
  follow_up: "Follow Up",
}

export const ESTAGIO_COLORS = {
  oportunidade: "bg-blue-100 text-blue-800",
  em_qualificacao: "bg-yellow-100 text-yellow-800",
  em_negociacao: "bg-green-100 text-green-800",
  resgate: "bg-purple-100 text-purple-800",
  fechado: "bg-emerald-100 text-emerald-800",
  nao_fechou: "bg-red-100 text-red-800",
  pesquisa_atendimento: "bg-orange-100 text-orange-800",
  follow_up: "bg-indigo-100 text-indigo-800",
}

// Lista dos estágios válidos para validação
export const VALID_ESTAGIOS = [
  "oportunidade",
  "em_qualificacao",
  "em_negociacao",
  "resgate",
  "fechado",
  "nao_fechou",
  "pesquisa_atendimento",
  "follow_up",
]

export async function getLeads(idEmpresa: number): Promise<Lead[]> {
  const supabase = createClient()

const { data, error } = await supabase
    .from("BASE_DE_LEADS")
    .select("*")
    .eq("id_empresa", idEmpresa)
    .order("created_at", { ascending: false })

if (error) {
    console.error("Error fetching leads:", error)
    return []
  }

return data || []
}

export async function updateLeadStage(leadId: number | string, newStage: string): Promise<boolean> {
  // Validar se o estágio é válido
  if (!VALID_ESTAGIOS.includes(newStage)) {
    console.error("Invalid stage:", newStage)
    return false
  }

const supabase = createClient()

try {
    const { data, error } = await supabase
      .from("BASE_DE_LEADS")
      .update({
        estagio_lead: newStage,
        updated_at: new Date().toISOString(),
      })
      .eq("id", leadId)
      .select()

if (error) {
      console.error("Error updating lead stage:", error)
      console.error("Error details:", {
        message: error.message,
        details: error.details,
        hint: error.hint,
        code: error.code,
      })
      return false
    }

if (!data || data.length === 0) {
      console.error("No lead found with ID:", leadId)
      return false
    }

console.log("Lead stage updated successfully:", {
      leadId,
      newStage,
      updatedLead: data[0],
    })

if (newStage === "em_negociacao") {
      try {
        const lead = data[0]
        console.log("[v0] Lead moved to em_negociacao, creating agendamento for lead:", leadId)

// Check if agendamento already exists for this lead
        const { data: existingAgendamentos, error: checkError } = await supabase
          .from("AGENDAMENTOS")
          .select("id")
          .eq("lead_id", leadId.toString())

if (!checkError && !existingAgendamentos?.length) {
          const agendamentoData = {
            id_empresa: lead.id_empresa,
            lead_id: leadId.toString(),
            titulo: `Agendamento - ${lead.nome}`,
            descricao: lead.veiculo_interesse ? `Interesse: ${lead.veiculo_interesse}` : null,
            data_agendamento: new Date().toISOString(),
            status: "Agendado",
            tipo: "visita",
            local: null,
          }

const { data: newAgendamento, error: agendamentoError } = await supabase
            .from("AGENDAMENTOS")
            .insert([agendamentoData])
            .select()

if (agendamentoError) {
            console.error("[v0] Error creating agendamento:", agendamentoError)
          } else {
            console.log("[v0] Agendamento created successfully:", newAgendamento?.[0])
          }
        } else {
          console.log("[v0] Agendamento already exists for lead:", leadId)
        }
      } catch (agendamentoError) {
        console.error("[v0] Unexpected error in auto-sync agendamento creation:", agendamentoError)
      }
    }

return true
  } catch (error) {
    console.error("Unexpected error updating lead stage:", error)
    return false
  }
}

export async function updateLeadValue(leadId: number | string, newValue: number): Promise<boolean> {
  const supabase = createClient()

try {
    const { error } = await supabase
      .from("BASE_DE_LEADS")
      .update({
        valor: newValue,
        updated_at: new Date().toISOString(),
      })
      .eq("id", leadId)

if (error) {
      console.error("Error updating lead value:", error)
      return false
    }

return true
  } catch (error) {
    console.error("Unexpected error updating lead value:", error)
    return false
  }
}

export async function updateLeadObservacao(leadId: number | string, newObservacao: string): Promise<boolean> {
  const supabase = createClient()

try {
    const { error } = await supabase
      .from("BASE_DE_LEADS")
      .update({
        observacao_vendedor: newObservacao,
        updated_at: new Date().toISOString(),
      })
      .eq("id", leadId)

if (error) {
      console.error("Error updating lead observacao:", error)
      return false
    }

return true
  } catch (error) {
    console.error("Unexpected error updating lead observacao:", error)
    return false
  }
}

export async function updateLeadVeiculo(leadId: number | string, newVeiculo: string): Promise<boolean> {
  const supabase = createClient()

try {
    const { error } = await supabase
      .from("BASE_DE_LEADS")
      .update({
        veiculo_interesse: newVeiculo,
        updated_at: new Date().toISOString(),
      })
      .eq("id", leadId)

if (error) {
      console.error("Error updating lead veiculo:", error)
      return false
    }

return true
  } catch (error) {
    console.error("Unexpected error updating lead veiculo:", error)
    return false
  }
}

export async function updateLeadEmail(leadId: number | string, newEmail: string): Promise<boolean> {
  const supabase = createClient()

try {
    const { error } = await supabase
      .from("BASE_DE_LEADS")
      .update({
        email: newEmail,
        updated_at: new Date().toISOString(),
      })
      .eq("id", leadId)

if (error) {
      console.error("Error updating lead email:", error)
      return false
    }

return true
  } catch (error) {
    console.error("Unexpected error updating lead email:", error)
    return false
  }
}

function toBrasiliaTime(date: Date): string {
  // Criar nova data com offset de -3 horas (Brasília)
  const brasiliaOffset = -3 * 60 // -3 horas em minutos
  const utc = date.getTime() + date.getTimezoneOffset() * 60000
  const brasiliaTime = new Date(utc + brasiliaOffset * 60000)

return brasiliaTime.toISOString()
}

export async function generateResumoComercial(lead: Lead): Promise<boolean> {
  try {
    console.log("[v0] Starting webhook call for lead:", lead.id)

const webhookUrl = "https://n8n.eazy.tec.br/webhook/e66d8dd4-59ce-451e-a729-32758694a228"

const now = new Date()
    const brasiliaTimestamp = toBrasiliaTime(now)

// Converter created_at e updated_at para horário de Brasília
    const createdAtBrasilia = toBrasiliaTime(new Date(lead.created_at))
    const updatedAtBrasilia = toBrasiliaTime(new Date(lead.updated_at))

const payload = {
      id: lead.id,
      id_empresa: lead.id_empresa,
      nome_lead: lead.nome,
      telefone: lead.telefone,
      email: lead.email,
      origem: lead.origem,
      vendedor: lead.vendedor,
      veiculo_interesse: lead.veiculo_interesse,
      resumo_qualificacao: lead.resumo_qualificacao,
      estagio_lead: lead.estagio_lead,
      resumo_comercial: lead.resumo_comercial,
      valor: lead.valor,
      observacao_vendedor: lead.observacao_vendedor,
      created_at: createdAtBrasilia,
      updated_at: updatedAtBrasilia,
      timestamp: brasiliaTimestamp,
    }

console.log("[v0] Webhook payload:", payload)

const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 30000) // 30 second timeout

const response = await fetch(webhookUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        "User-Agent": "CRM-Atual-Veiculos/1.0",
      },
      body: JSON.stringify(payload),
      signal: controller.signal,
      mode: "cors", // Explicitly set CORS mode
    })

clearTimeout(timeoutId)

console.log("[v0] Webhook response status:", response.status)
    console.log("[v0] Webhook response headers:", Object.fromEntries(response.headers.entries()))

if (!response.ok) {
      const errorText = await response.text().catch(() => "Unable to read error response")
      console.error("[v0] Webhook error response:", errorText)
      throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
    }

const responseData = await response.text().catch(() => "No response body")
    console.log("[v0] Webhook success response:", responseData)

return true
  } catch (error) {
    console.error("[v0] Error sending webhook:", error)

if (error instanceof Error) {
      if (error.name === "AbortError") {
        console.error("[v0] Webhook request timed out after 30 seconds")
      } else if (error.message.includes("Failed to fetch")) {
        console.error("[v0] Network error - check if webhook URL is accessible and CORS is configured")
      }
      console.error("[v0] Error details:", {
        name: error.name,
        message: error.message,
        stack: error.stack,
      })
    }

return false
  }
}

export async function sendPesquisaAtendimentoWebhook(lead: Lead): Promise<boolean> {
  try {
    console.log("[v0] Starting pesquisa atendimento webhook call for lead:", lead.id)

const webhookUrl = "https://eazytech-n8n.gsl3ku.easypanel.host/webhook/7f1e49f9-a476-49b7-9883-8a01fe6622e2"

const now = new Date()
    const brasiliaTimestamp = toBrasiliaTime(now)

const payload = {
      id: lead.id,
      id_empresa: lead.id_empresa,
      nome_lead: lead.nome,
      telefone: lead.telefone,
      email: lead.email,
      origem: lead.origem,
      vendedor: lead.vendedor,
      nome_vendedor: lead.vendedor, // adicionando nome_vendedor como campo separado
      veiculo_interesse: lead.veiculo_interesse,
      resumo_qualificacao: lead.resumo_qualificacao,
      estagio_lead: lead.estagio_lead,
      resumo_comercial: lead.resumo_comercial,
      valor: lead.valor,
      observacao_vendedor: lead.observacao_vendedor,
      created_at: createdAtBrasilia,
      updated_at: updatedAtBrasilia,
      timestamp: brasiliaTimestamp,
      action: "moved_to_pesquisa_atendimento", // identificador da ação
    }

console.log("[v0] Pesquisa atendimento webhook payload:", payload)

const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 30000) // 30 second timeout

clearTimeout(timeoutId)

console.log("[v0] Pesquisa atendimento webhook response status:", response.status)
    console.log("[v0] Pesquisa atendimento webhook response headers:", Object.fromEntries(response.headers.entries()))

if (!response.ok) {
      const errorText = await response.text().catch(() => "Unable to read error response")
      console.error("[v0] Pesquisa atendimento webhook error response:", errorText)
      throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
    }

const responseData = await response.text().catch(() => "No response body")
    console.log("[v0] Pesquisa atendimento webhook success response:", responseData)

return true
  } catch (error) {
    console.error("[v0] Error sending pesquisa atendimento webhook:", error)

if (error instanceof Error) {
      if (error.name === "AbortError") {
        console.error("[v0] Pesquisa atendimento webhook request timed out after 30 seconds")
      } else if (error.message.includes("Failed to fetch")) {
        console.error("[v0] Network error - check if webhook URL is accessible and CORS is configured")
      }
      console.error("[v0] Error details:", {
        name: error.name,
        message: error.message,
        stack: error.stack,
      })
    }

return false
  }
}

export async function sendFollowUpWebhook(lead: Lead): Promise<boolean> {
  try {
    console.log("[v0] Starting follow up webhook call for lead:", lead.id)

const webhookUrl = "https://n8n.eazy.tec.br/webhook/7baf8d1e-9002-4c99-8ae8-04f9b820611e"

const now = new Date()
    const brasiliaTimestamp = toBrasiliaTime(now)
    const createdAtBrasilia = toBrasiliaTime(new Date(lead.created_at))
    const updatedAtBrasilia = toBrasiliaTime(new Date(lead.updated_at))

const payload = {
      id: lead.id,
      id_empresa: lead.id_empresa,
      nome_lead: lead.nome,
      telefone: lead.telefone,
      email: lead.email,
      origem: lead.origem,
      vendedor: lead.vendedor,
      veiculo_interesse: lead.veiculo_interesse,
      estagio_lead: lead.estagio_lead,
      valor: lead.valor,
      observacao_vendedor: lead.observacao_vendedor,
      created_at: createdAtBrasilia,
      updated_at: updatedAtBrasilia,
      timestamp: brasiliaTimestamp,
      action: "follow_up",
    }

console.log("[v0] Follow up webhook payload:", payload)

const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 30000)

clearTimeout(timeoutId)

console.log("[v0] Follow up webhook response status:", response.status)

if (!response.ok) {
      const errorText = await response.text().catch(() => "Unable to read error response")
      console.error("[v0] Follow up webhook error response:", errorText)
      throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
    }

return true
  } catch (error) {
    console.error("[v0] Error sending follow up webhook:", error)
    return false
  }
}

export async function sendMensagemWebhook(lead: Lead, mensagem?: string): Promise<boolean> {
  try {
    console.log("[v0] Starting mensagem webhook call for lead:", lead.id)

const webhookUrl = "https://n8n.eazy.tec.br/webhook/2aa1b398-67a7-40fd-abe2-1b71f77c9161"

const payload = {
      id: lead.id,
      id_empresa: lead.id_empresa,
      nome_lead: lead.nome,
      telefone: lead.telefone,
      email: lead.email,
      origem: lead.origem,
      vendedor: lead.vendedor,
      veiculo_interesse: lead.veiculo_interesse,
      estagio_lead: lead.estagio_lead,
      valor: lead.valor,
      observacao_vendedor: lead.observacao_vendedor,
      created_at: createdAtBrasilia,
      updated_at: updatedAtBrasilia,
      timestamp: brasiliaTimestamp,
      action: "send_message",
      mensagem: mensagem || "",
    }

console.log("[v0] Mensagem webhook payload:", payload)

const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 30000)

clearTimeout(timeoutId)

console.log("[v0] Mensagem webhook response status:", response.status)

if (!response.ok) {
      const errorText = await response.text().catch(() => "Unable to read error response")
      console.error("[v0] Mensagem webhook error response:", errorText)
      throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
    }

return true
  } catch (error) {
    console.error("[v0] Error sending mensagem webhook:", error)
    return false
  }
}

export function formatCurrency(value: number): string {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(value)
}

export function parseCurrency(value: string): number {
  if (!value || typeof value !== "string") return 0

// Remove espaços e caracteres especiais, mantendo apenas números, vírgulas e pontos
  let cleanValue = value.replace(/[^\d,.-]/g, "")

// Se estiver vazio após limpeza, retorna 0
  if (!cleanValue) return 0

// Lidar com diferentes formatos de entrada:
  // 35000 -> 35000
  // 35.000 -> 35000 (formato brasileiro de milhares)
  // 35,00 -> 35 (formato brasileiro de decimais)
  // 35.000,00 -> 35000 (formato brasileiro completo)

// Se tem vírgula, assumimos que é separador decimal brasileiro
  if (cleanValue.includes(",")) {
    // Se tem ponto E vírgula, o ponto é separador de milhares
    if (cleanValue.includes(".") && cleanValue.includes(",")) {
      // Formato: 35.000,00 -> remove pontos e substitui vírgula por ponto
      cleanValue = cleanValue.replace(/\./g, "").replace(",", ".")
    } else {
      // Formato: 35000,00 -> substitui vírgula por ponto
      cleanValue = cleanValue.replace(",", ".")
    }
  }
  // Se tem apenas pontos, pode ser separador de milhares ou decimal
  else if (cleanValue.includes(".")) {
    // Se tem mais de um ponto, são separadores de milhares
    const dotCount = (cleanValue.match(/\./g) || []).length
    if (dotCount > 1) {
      // Remove todos os pontos (separadores de milhares)
      cleanValue = cleanValue.replace(/\./g, "")
    }
    // Se tem apenas um ponto, pode ser decimal ou milhares
    // Se tem mais de 3 dígitos após o ponto, é separador de milhares
    else {
      const parts = cleanValue.split(".")
      if (parts[1] && parts[1].length > 2) {
        // É separador de milhares, remove o ponto
        cleanValue = cleanValue.replace(".", "")
      }
      // Senão, mantém como separador decimal
    }
  }

// Converte para número
  const numericValue = Number.parseFloat(cleanValue)

return isNaN(numericValue) ? 0 : numericValue
}

export async function getLeadStats(idEmpresa: number) {
  const supabase = createClient()

const { data: leads, error } = await supabase
    .from("BASE_DE_LEADS")
    .select("estagio_lead, origem, valor")
    .eq("id_empresa", idEmpresa)

if (error || !leads) {
    return {
      totalLeads: 0,
      leadsPorEstagio: {},
      leadsPorOrigem: {},
      conversao: {},
      valorTotal: 0,
      valorMedio: 0,
    }
  }

const totalLeads = leads.length
  const leadsPorEstagio = leads.reduce((acc: any, lead) => {
    acc[lead.estagio_lead] = (acc[lead.estagio_lead] || 0) + 1
    return acc
  }, {})

const leadsPorOrigem = leads.reduce((acc: any, lead) => {
    if (lead.origem) {
      acc[lead.origem] = (acc[lead.origem] || 0) + 1
    }
    return acc
  }, {})

const fechados = leadsPorEstagio.fechado || 0
  const conversao = totalLeads > 0 ? ((fechados / totalLeads) * 100).toFixed(1) : "0"

// Calcular valores totais e médios
  const valorTotal = leads.reduce((sum, lead) => sum + (lead.valor || 0), 0)
  const valorMedio = totalLeads > 0 ? valorTotal / totalLeads : 0

return {
    totalLeads,
    leadsPorEstagio,
    leadsPorOrigem,
    conversao,
    valorTotal,
    valorMedio,
  }
}

export async function deleteLead(leadId: number | string): Promise<boolean> {
  const supabase = createClient()

try {
    const { error } = await supabase.from("BASE_DE_LEADS").delete().eq("id", leadId)

if (error) {
      console.error("Error deleting lead:", error)
      return false
    }

console.log("Lead deleted successfully:", leadId)
    return true
  } catch (error) {
    console.error("Unexpected error deleting lead:", error)
    return false
  }
}
[V0_FILE]sql:file="scripts/10-add-resgate-estagio.sql" isMerged="true"
-- Remover a constraint antiga
ALTER TABLE "BASE_DE_LEADS" 
DROP CONSTRAINT IF EXISTS "BASE_DE_LEADS_estagio_lead_check";

-- Criar nova constraint com "resgate" incluído
ALTER TABLE "BASE_DE_LEADS" 
ADD CONSTRAINT "BASE_DE_LEADS_estagio_lead_check" 
CHECK (estagio_lead IN (
  'oportunidade', 
  'em_qualificacao', 
  'em_negociacao', 
  'resgate',
  'fechado', 
  'nao_fechou', 
  'pesquisa_atendimento', 
  'follow_up'
));
[V0_FILE]typescriptreact:file="components/kanban-board.tsx"
"use client"

import { useEffect, useState } from "react"
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Progress } from "@/components/ui/progress"
import {
  getLeads,
  updateLeadStage,
  generateResumoComercial,
  sendPesquisaAtendimentoWebhook,
  deleteLead,
  type Lead,
  ESTAGIO_LABELS,
  ESTAGIO_COLORS,
  VALID_ESTAGIOS,
  formatCurrency,
} from "@/lib/leads"
import { getCurrentUser } from "@/lib/auth"
import {
  Search,
  Filter,
  Phone,
  Mail,
  User,
  Calendar,
  MapPin,
  Car,
  LayoutGrid,
  List,
  DollarSign,
  FileText,
  Sparkles,
  Loader2,
  Move,
  AlertTriangle,
  Trash2,
} from "lucide-react"
import { LeadsListView } from "./leads-list-view"
import { EditableValueField } from "./editable-value-field"
import { EditableObservacaoField } from "./editable-observacao-field"
import { EditableVeiculoField } from "./editable-veiculo-field"
import { EditableEmailField } from "./editable-email-field"

// Nova ordem das colunas conforme solicitado
const COLUNAS_KANBAN = [
  "oportunidade",
  "em_qualificacao",
  "em_negociacao",
  "resgate",
  "fechado",
  "nao_fechou",
  "pesquisa_atendimento",
  "follow_up",
]

// Colunas que o vendedor pode visualizar (ordem específica)
const COLUNAS_VENDEDOR = [
  "em_negociacao",
  "fechado",
  "nao_fechou",
  "follow_up",
  "resgate",
]

interface KanbanBoardProps {
  empresaId: number
}

export function KanbanBoard({ empresaId }: KanbanBoardProps) {
  const [leads, setLeads] = useState<Lead[]>([])
  const [filteredLeads, setFilteredLeads] = useState<Lead[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedLead, setSelectedLead] = useState<Lead | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [filterOrigem, setFilterOrigem] = useState("")
  const [filterEstagio, setFilterEstagio] = useState("")
  const [viewMode, setViewMode] = useState<"kanban" | "list">("kanban")
  const [generatingResumo, setGeneratingResumo] = useState(false)
  const [resumoMessage, setResumoMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
  const [draggedLead, setDraggedLead] = useState<Lead | null>(null)
  const [movingLead, setMovingLead] = useState<number | string | null>(null)
  const [deletingLead, setDeletingLead] = useState<number | string | null>(null)
  const [showProgressDialog, setShowProgressDialog] = useState(false)
  const [progressValue, setProgressValue] = useState(0)
  const [visibleColumns, setVisibleColumns] = useState<string[]>(COLUNAS_KANBAN)

useEffect(() => {
    loadLeads()
    // Definir colunas visíveis baseado no cargo do usuário
    const user = getCurrentUser()
    if (user?.cargo === "vendedor") {
      setVisibleColumns(COLUNAS_VENDEDOR)
    } else {
      setVisibleColumns(COLUNAS_KANBAN)
    }
  }, [])

useEffect(() => {
    filterLeads()
  }, [leads, searchTerm, filterOrigem, filterEstagio])

const loadLeads = async () => {
    const user = getCurrentUser()
    if (user) {
      let data = await getLeads(user.id_empresa)
      
      // Se o usuário for vendedor, filtrar apenas os leads atribuídos a ele
      if (user.cargo === "vendedor") {
        data = data.filter((lead) => 
          lead.vendedor?.toLowerCase() === user.nome_usuario?.toLowerCase() ||
          lead.vendedor?.toLowerCase() === user.nome?.toLowerCase()
        )
      }
      
      setLeads(data)
    }
    setLoading(false)
  }

const filterLeads = () => {
    let filtered = [...leads]

if (filterOrigem && filterOrigem !== "all") {
      filtered = filtered.filter((lead) => lead.origem === filterOrigem)
    }

if (filterEstagio && filterEstagio !== "all") {
      filtered = filtered.filter((lead) => lead.estagio_lead === filterEstagio)
    }

setFilteredLeads(filtered)
  }

const handleDragStart = (start: any) => {
    const lead = leads.find((l) => String(l.id) === String(start.draggableId))
    setDraggedLead(lead || null)
  }

const handleDragEnd = async (result: any) => {
    setDraggedLead(null)

if (!result.destination) {
      return
    }

const { source, destination, draggableId } = result

// Se foi solto na mesma coluna, não faz nada
    if (source.droppableId === destination.droppableId) {
      return
    }

// O draggableId vem como string do react-beautiful-dnd
    // O id pode ser integer ou uuid dependendo do banco - preservar como veio do lead original
    const matchedLead = leads.find((l) => String(l.id) === String(draggableId))
    const leadId = matchedLead ? matchedLead.id : draggableId
    const newStage = destination.droppableId
    const oldStage = source.droppableId

// Validar se o novo estágio é válido
    if (!VALID_ESTAGIOS.includes(newStage)) {
      console.error("Invalid stage:", newStage)
      setResumoMessage({
        type: "error",
        text: `Estágio inválido: ${newStage}. Recarregue a página e tente novamente.`,
      })
      setTimeout(() => setResumoMessage(null), 5000)
      return
    }

console.log("Moving lead:", {
      leadId,
      leadIdType: typeof leadId,
      from: oldStage,
      to: newStage,
      validStages: VALID_ESTAGIOS,
    })

setMovingLead(leadId)

const leadData = matchedLead

// Atualização otimista da UI
    setLeads((prevLeads) =>
      prevLeads.map((lead) =>
        String(lead.id) === String(leadId) ? { ...lead, estagio_lead: newStage, updated_at: new Date().toISOString() } : lead,
      ),
    )

try {
      // Atualizar no banco de dados
      const success = await updateLeadStage(leadId, newStage)

if (!success) {
        // Reverter se falhou
        setLeads((prevLeads) =>
          prevLeads.map((lead) => (String(lead.id) === String(leadId) ? { ...lead, estagio_lead: oldStage } : lead)),
        )

// Mostrar erro
        setResumoMessage({
          type: "error",
          text: "Erro ao mover o lead. Verifique o console para mais detalhes e tente novamente.",
        })

setTimeout(() => setResumoMessage(null), 5000)
      } else {
        console.log("Lead moved successfully")

if (newStage === "pesquisa_atendimento" && leadData) {

try {
            const webhookSuccess = await sendPesquisaAtendimentoWebhook(leadData)

if (webhookSuccess) {
              setResumoMessage({
                type: "success",
                text: "Lead movido para Pesquisa de Atendimento e webhook enviado com sucesso!",
              })
            } else {
              setResumoMessage({
                type: "error",
                text: "Lead movido, mas houve erro ao enviar webhook de Pesquisa de Atendimento.",
              })
            }

setTimeout(() => setResumoMessage(null), 5000)
          } catch (webhookError) {
            console.error("[v0] Error sending pesquisa atendimento webhook:", webhookError)
            setResumoMessage({
              type: "error",
              text: "Lead movido, mas houve erro ao processar webhook de Pesquisa de Atendimento.",
            })
            setTimeout(() => setResumoMessage(null), 5000)
          }
        }
      }
    } catch (error) {
      console.error("Unexpected error moving lead:", error)

// Reverter se falhou
      setLeads((prevLeads) =>
        prevLeads.map((lead) => (String(lead.id) === String(leadId) ? { ...lead, estagio_lead: oldStage } : lead)),
      )

setResumoMessage({
        type: "error",
        text: "Erro inesperado ao mover o lead. Tente novamente.",
      })

setTimeout(() => setResumoMessage(null), 5000)
    } finally {
      setMovingLead(null)
    }
  }

const handleValueUpdate = (leadId: number, newValue: number) => {
    setLeads((prevLeads) => prevLeads.map((lead) => (lead.id === leadId ? { ...lead, valor: newValue } : lead)))

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, valor: newValue })
    }
  }

const handleObservacaoUpdate = (leadId: number, newObservacao: string) => {
    setLeads((prevLeads) =>
      prevLeads.map((lead) => (lead.id === leadId ? { ...lead, observacao_vendedor: newObservacao } : lead)),
    )

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, observacao_vendedor: newObservacao })
    }
  }

const handleVeiculoUpdate = (leadId: number, newVeiculo: string) => {
    setLeads((prevLeads) =>
      prevLeads.map((lead) => (lead.id === leadId ? { ...lead, veiculo_interesse: newVeiculo } : lead)),
    )

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, veiculo_interesse: newVeiculo })
    }
  }

const handleEmailUpdate = (leadId: number, newEmail: string) => {
    setLeads((prevLeads) => prevLeads.map((lead) => (lead.id === leadId ? { ...lead, email: newEmail } : lead)))

// Atualizar o lead selecionado se for o mesmo
    if (selectedLead && selectedLead.id === leadId) {
      setSelectedLead({ ...selectedLead, email: newEmail })
    }
  }

const handleGenerateResumo = async () => {
    if (!selectedLead) return

setGeneratingResumo(true)
    setResumoMessage(null)
    setShowProgressDialog(true)
    setProgressValue(0)

// Animar progresso de 0 a 100 em 30 segundos
    const duration = 30000 // 30 segundos
    const intervalTime = 100 // Atualiza a cada 100ms
    const increment = (100 / duration) * intervalTime

try {
      const success = await generateResumoComercial(selectedLead)

// Aguardar os 30 segundos completos
      await new Promise((resolve) => setTimeout(resolve, duration))

// Limpar mensagem após 5 segundos
      setTimeout(() => {
        setResumoMessage(null)
      }, 5000)
    }
  }

const handleDeleteLead = async (leadId: number) => {
    if (!confirm("Tem certeza que deseja excluir este lead? Esta ação não pode ser desfeita.")) {
      return
    }

setDeletingLead(leadId)

try {
      const success = await deleteLead(leadId)

if (success) {
        // Remover o lead da lista local
        setLeads((prevLeads) => prevLeads.filter((lead) => lead.id !== leadId))

// Fechar o modal se o lead excluído estava selecionado
        if (selectedLead && selectedLead.id === leadId) {
          setSelectedLead(null)
        }

setResumoMessage({
          type: "success",
          text: "Lead excluído com sucesso!",
        })
      } else {
        setResumoMessage({
          type: "error",
          text: "Erro ao excluir o lead. Tente novamente.",
        })
      }
    } catch (error) {
      setResumoMessage({
        type: "error",
        text: "Erro inesperado ao excluir o lead.",
      })
    } finally {
      setDeletingLead(null)

// Limpar mensagem após 5 segundos
      setTimeout(() => {
        setResumoMessage(null)
      }, 5000)
    }
  }

const getLeadsByStage = (stage: string) => {
    return filteredLeads.filter((lead) => lead.estagio_lead === stage)
  }

const getStageTotal = (stage: string) => {
    const stageLeads = getLeadsByStage(stage)
    return stageLeads.reduce((total, lead) => total + (lead.valor || 0), 0)
  }

const origens = [...new Set(leads.map((lead) => lead.origem).filter(Boolean))]

const handleLeadsUpdate = () => {
    loadLeads()
  }

if (loading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-4">
        {COLUNAS_KANBAN.map((_, index) => (
          <Card key={index} className="animate-pulse">
            <CardHeader className="pb-3">
              <div className="h-4 bg-gray-200 rounded w-24"></div>
            </CardHeader>
            <CardContent className="space-y-2">
              {[...Array(3)].map((_, i) => (
                <div key={i} className="h-20 bg-gray-100 rounded"></div>
              ))}
            </CardContent>
          </Card>
        ))}
      </div>
    )
  }

return (
    <div className="flex flex-col h-full gap-4">
      {/* View Toggle */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <Filter className="h-5 w-5" />
              Visualização
            </CardTitle>
            <div className="flex gap-2">
              <Button
                variant={viewMode === "kanban" ? "default" : "outline"}
                size="sm"
                onClick={() => setViewMode("kanban")}
                className="flex items-center gap-2 !bg-[#22C55E] !text-black !border-[#22C55E] hover:!bg-[#22C55E] hover:!text-black"
                style={{ display: "inline-flex", visibility: "visible", opacity: 1 }}
              >
                <LayoutGrid className="h-4 w-4" />
                Kanban
              </Button>
              <Button
                variant={viewMode === "list" ? "default" : "outline"}
                size="sm"
                onClick={() => setViewMode("list")}
                className="flex items-center gap-2 !bg-transparent !text-[#22C55E] !border-[#22C55E] hover:!bg-[#22C55E] hover:!text-black"
                style={{ display: "inline-flex", visibility: "visible", opacity: 1 }}
              >
                <List className="h-4 w-4" />
                Lista
              </Button>
            </div>
          </div>
        </CardHeader>
      </Card>

{/* Mensagem de Status Global */}
      {resumoMessage && (
        <Alert
          className={`${resumoMessage.type === "success" ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"}`}
        >
          <AlertTriangle className="h-4 w-4" />
          <AlertDescription className={resumoMessage.type === "success" ? "text-green-700" : "text-red-700"}>
            {resumoMessage.text}
          </AlertDescription>
        </Alert>
      )}

{viewMode === "list" ? (
        <LeadsListView leads={leads} onLeadsUpdate={handleLeadsUpdate} />
      ) : (
        <>
          {/* Filtros */}
          <div className="flex flex-wrap items-center gap-3 flex-shrink-0">
            <div className="relative flex-1 min-w-[200px] max-w-[300px]">
              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar lead..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 h-9"
              />
            </div>
            <Select value={filterOrigem} onValueChange={setFilterOrigem}>
              <SelectTrigger className="w-[160px] h-9">
                <SelectValue placeholder="Origem" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as origens</SelectItem>
                {origens.map((origem) => (
                  <SelectItem key={origem} value={origem!}>
                    {origem}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select value={filterEstagio} onValueChange={setFilterEstagio}>
              <SelectTrigger className="w-[160px] h-9">
                <SelectValue placeholder="Estagio" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos os estagios</SelectItem>
                {Object.entries(ESTAGIO_LABELS).map(([key, label]) => (
                  <SelectItem key={key} value={key}>
                    {label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{/* Kanban Board */}
          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
            <div className="flex-1 overflow-x-auto overflow-y-hidden min-h-0">
              <div className="flex gap-4 min-w-max h-full min-h-[calc(100vh-220px)] pb-2">
                {visibleColumns.map((stage) => (
                  <Droppable key={stage} droppableId={stage}>
                    {(provided, snapshot) => (
                      <Card
                        className={`w-80 flex-shrink-0 flex flex-col transition-all duration-200 h-full min-h-[calc(100vh-220px)] ${
                          snapshot.isDraggingOver
                            ? "border-[#22C55E] shadow-lg"
                            : "hover:shadow-md"
                        }`}
                      >
                        <CardHeader className="pb-3 flex-shrink-0">
                          <CardTitle className="text-sm font-medium flex items-center justify-between">
                            <span className="flex items-center gap-2">
                              {snapshot.isDraggingOver && <Move className="h-4 w-4 text-blue-500 animate-pulse" />}
                              {ESTAGIO_LABELS[stage as keyof typeof ESTAGIO_LABELS]}
                            </span>
                            <div className="flex flex-col items-end gap-1">
                              <Badge variant="secondary" className="text-xs">
                                {getLeadsByStage(stage).length}
                              </Badge>
                              <Badge variant="outline" className="text-xs text-green-600 border-green-200">
                                {formatCurrency(getStageTotal(stage))}
                              </Badge>
                            </div>
                          </CardTitle>
                          {snapshot.isDraggingOver && (
                            <div className="text-xs text-blue-600 font-medium animate-pulse">
                              ↓ Solte aqui para mover
                            </div>
                          )}
                        </CardHeader>
                        <CardContent ref={provided.innerRef} {...provided.droppableProps} className="space-y-2 flex-1 overflow-y-auto">
                          {getLeadsByStage(stage).map((lead, index) => (
                            <Draggable key={lead.id} draggableId={lead.id.toString()} index={index}>
                              {(provided, snapshot) => (
                                <Card
                                  ref={provided.innerRef}
                                  {...provided.draggableProps}
                                  {...provided.dragHandleProps}
                                  className={`cursor-grab active:cursor-grabbing transition-all duration-200 ${
                                    snapshot.isDragging
                                      ? "shadow-2xl rotate-3 scale-105 bg-white border-blue-300 z-50"
                                      : "hover:shadow-md hover:-translate-y-1"
                                  } ${String(movingLead) === String(lead.id) ? "opacity-50" : ""}`}
                                  onClick={(e) => {
                                    // Só abre o modal se não estiver arrastando
                                    if (!snapshot.isDragging) {
                                      setSelectedLead(lead)
                                    }
                                  }}
                                >
                                  <CardContent className="p-3">
                                    <div className="space-y-2">
                                      <div className="flex items-center justify-between text-foreground">
                                        <h4 className="font-medium text-sm text-gray-900 truncate flex-1">
                                          {lead.nome}
                                        </h4>
                                        <div className="flex items-center gap-1">
                                          {String(movingLead) === String(lead.id) && (
                                            <Loader2 className="h-3 w-3 animate-spin text-blue-500" />
                                          )}
                                          <Move className="h-3 w-3 text-gray-400 flex-shrink-0" />
                                        </div>
                                      </div>

{/* Campo de Valor Editável */}
                                      <div
                                        className="border border-gray-200 rounded p-1"
                                        onClick={(e) => e.stopPropagation()}
                                      >
                                        <EditableValueField
                                          leadId={lead.id}
                                          currentValue={lead.valor || 0}
                                          onValueUpdate={(newValue) => handleValueUpdate(lead.id, newValue)}
                                        />
                                      </div>

{lead.telefone && (
                                        <p className="text-xs text-gray-600 flex items-center gap-1">
                                          <Phone className="h-3 w-3" />
                                          {lead.telefone}
                                        </p>
                                      )}
                                      {lead.veiculo_interesse && (
                                        <p className="text-xs text-gray-600 flex items-center gap-1 truncate">
                                          <Car className="h-3 w-3 flex-shrink-0" />
                                          <span className="truncate">{lead.veiculo_interesse}</span>
                                        </p>
                                      )}
                                      <div className="flex justify-between items-center">
                                        {lead.origem && (
                                          <Badge variant="outline" className="text-xs">
                                            {lead.origem}
                                          </Badge>
                                        )}
                                        {lead.vendedor && (
                                          <span className="text-xs text-gray-500 truncate ml-2">{lead.vendedor}</span>
                                        )}
                                      </div>
                                    </div>
                                  </CardContent>
                                </Card>
                              )}
                            </Draggable>
                          ))}
                          {provided.placeholder}

{/* Placeholder quando vazio */}
                          {getLeadsByStage(stage).length === 0 && (
                            <div className="text-center py-8 text-gray-400 border-2 border-dashed border-gray-200 rounded-lg">
                              <div className="text-xs">Nenhum lead neste estágio</div>
                              <div className="text-xs mt-1">Arraste leads aqui</div>
                            </div>
                          )}
                        </CardContent>
                      </Card>
                    )}
                  </Droppable>
                ))}
              </div>
            </div>
          </DragDropContext>

{/* Modal de Detalhes do Lead - Com Botão Gerar Resumo */}
          <Dialog open={!!selectedLead} onOpenChange={() => setSelectedLead(null)}>
            <DialogContent className="max-w-5xl max-h-[95vh] w-[95vw] overflow-hidden">
              <DialogHeader className="pb-4 border-b">
                <DialogTitle className="flex items-center justify-between text-xl">
                  <div className="flex items-center gap-2">
                    <User className="h-6 w-6" />
                    Detalhes do Lead
                  </div>
                  {selectedLead && (
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => handleDeleteLead(selectedLead.id)}
                      disabled={String(deletingLead) === String(selectedLead.id)}
                      className="flex items-center gap-2"
                    >
                      {String(deletingLead) === String(selectedLead.id) ? (
                        <>
                          <Loader2 className="h-4 w-4 animate-spin" />
                          Excluindo...
                        </>
                      ) : (
                        <>
                          <Trash2 className="h-4 w-4" />
                          Excluir Lead
                        </>
                      )}
                    </Button>
                  )}
                </DialogTitle>
              </DialogHeader>
              {selectedLead && (
                <div className="flex flex-col h-full max-h-[80vh]">
                  {/* Header Info - Fixed */}
                  <div className="flex-shrink-0 space-y-4 pb-4 border-b">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold text-2xl">{selectedLead.nome}</h3>
                        <Badge
                          className={`mt-2 ${ESTAGIO_COLORS[selectedLead.estagio_lead as keyof typeof ESTAGIO_COLORS]}`}
                        >
                          {ESTAGIO_LABELS[selectedLead.estagio_lead as keyof typeof ESTAGIO_LABELS]}
                        </Badge>
                      </div>
                    </div>

{/* Informações Básicas em Grid */}
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                      {selectedLead.telefone && (
                        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                          <Phone className="h-4 w-4 text-gray-500" />
                          <span className="text-sm font-medium">{selectedLead.telefone}</span>
                        </div>
                      )}

{selectedLead.email && (
                        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                          <Mail className="h-4 w-4 text-gray-500" />
                          <span className="text-sm font-medium truncate">{selectedLead.email}</span>
                        </div>
                      )}

{selectedLead.origem && (
                        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                          <MapPin className="h-4 w-4 text-gray-500" />
                          <span className="text-sm font-medium">{selectedLead.origem}</span>
                        </div>
                      )}

{selectedLead.vendedor && (
                        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                          <User className="h-4 w-4 text-gray-500" />
                          <span className="text-sm font-medium">{selectedLead.vendedor}</span>
                        </div>
                      )}

{selectedLead.veiculo_interesse && (
                        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                          <Car className="h-4 w-4 text-gray-500" />
                          <span className="text-sm font-medium">{selectedLead.veiculo_interesse}</span>
                        </div>
                      )}

<div className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                        <Calendar className="h-4 w-4 text-gray-500" />
                        <span className="text-sm font-medium">
                          {new Date(selectedLead.created_at).toLocaleDateString("pt-BR")}
                        </span>
                      </div>
                    </div>
                  </div>

{/* Scrollable Content */}
                  <ScrollArea className="flex-1 mt-4">
                    <div className="space-y-6 pr-4">
                      {/* Campos Editáveis */}
                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        {/* Valor do Lead - Editável */}
                        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                          <div className="flex items-center gap-2 mb-3">
                            <DollarSign className="h-5 w-5 text-green-600" />
                            <span className="text-lg font-semibold text-green-800">Valor do Negócio</span>
                          </div>
                          <EditableValueField
                            leadId={selectedLead.id}
                            currentValue={selectedLead.valor || 0}
                            onValueUpdate={(newValue) => handleValueUpdate(selectedLead.id, newValue)}
                            className="text-xl"
                          />
                        </div>

{/* Observação do Vendedor - Editável */}
                        <div>
                          <EditableObservacaoField
                            leadId={selectedLead.id}
                            currentObservacao={selectedLead.observacao_vendedor || ""}
                            onObservacaoUpdate={(newObservacao) =>
                              handleObservacaoUpdate(selectedLead.id, newObservacao)
                            }
                          />
                        </div>
                      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        {/* Veículo - Editável */}
                        <div>
                          <EditableVeiculoField
                            leadId={selectedLead.id}
                            currentVeiculo={selectedLead.veiculo_interesse || ""}
                            onVeiculoUpdate={(newVeiculo) => handleVeiculoUpdate(selectedLead.id, newVeiculo)}
                          />
                        </div>

{/* E-mail - Editável */}
                        <div>
                          <EditableEmailField
                            leadId={selectedLead.id}
                            currentEmail={selectedLead.email || ""}
                            onEmailUpdate={(newEmail) => handleEmailUpdate(selectedLead.id, newEmail)}
                          />
                        </div>
                      </div>

{/* Resumos - Somente Leitura */}
                      {selectedLead.resumo_qualificacao && (
                        <div>
                          <h4 className="font-semibold text-lg mb-3 flex items-center gap-2">
                            <FileText className="h-5 w-5 text-blue-500" />
                            Resumo de Qualificação
                          </h4>
                          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div className="text-sm text-gray-800 whitespace-pre-line leading-relaxed font-medium">
                              {selectedLead.resumo_qualificacao}
                            </div>
                          </div>
                        </div>
                      )}

{/* Resumo Comercial com Botão Gerar */}
                      <div>
                        <div className="flex items-center justify-between mb-3">
                          <h4 className="font-semibold text-lg flex items-center gap-2">
                            <FileText className="h-5 w-5 text-green-500" />
                            Resumo Comercial
                          </h4>
                          <Button
                            onClick={handleGenerateResumo}
                            disabled={generatingResumo}
                            className="bg-gradient-to-r from-green-600 to-gray-900 hover:from-green-700 hover:to-black text-white"
                            size="sm"
                          >
                            {generatingResumo ? (
                              <>
                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                                Gerando...
                              </>
                            ) : (
                              <>
                                <Sparkles className="h-4 w-4 mr-2" />
                                Gerar Resumo Comercial
                              </>
                            )}
                          </Button>
                        </div>

<div className="bg-green-50 border border-green-200 rounded-lg p-4">
                          <div className="text-sm text-gray-800 whitespace-pre-line leading-relaxed font-medium">
                            {selectedLead.resumo_comercial || (
                              <span className="text-gray-500 italic">
                                Nenhum resumo comercial disponível. Clique em "Gerar Resumo Comercial" para criar um.
                              </span>
                            )}
                          </div>
                        </div>
                      </div>

{/* Espaço extra no final para scroll confortável */}
                      <div className="h-4"></div>
                    </div>
                  </ScrollArea>
                </div>
              )}
            </DialogContent>
          </Dialog>
        </>
      )}
    </div>
  )
}</article></body></html>