[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "./globals.css" import { Poppins } from "next/font/google" const poppins = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"], display: "swap", variable: "--font-poppins", }) export const metadata = { title: "RevendAI - Login", description: "Sistema RevendAI para revendas", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; html, body { font-family: "Poppins", sans-serif; height: 100%; } @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 355 83% 50%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 355 83% 50%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["Poppins", "sans-serif"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#E31B1B", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, 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")], } satisfies Config export default config [V0_FILE]png:file="public/images/revendai-logo-black.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/revendai-logo-black-dNFpb4JMm5wvK1XeSgypPRFWrzx9g9.png" isMerged="true" [V0_FILE]png:file="public/images/revendai-logo-white.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/revendai%20logo%20white%5B1%5D-0g29gxHee06IXP6ryxFuw6nhBzgioZ.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * 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, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/dashboard/filter-bar.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { CalendarIcon, Filter, X, ChevronDown } from "lucide-react" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" interface FilterBarProps { dateRange: { from: Date | undefined to: Date | undefined } setDateRange: React.Dispatch< React.SetStateAction<{ from: Date | undefined to: Date | undefined }> > selectedChannel: string setSelectedChannel: React.Dispatch> } export function FilterBar({ dateRange, setDateRange, selectedChannel, setSelectedChannel }: FilterBarProps) { const [calendarOpen, setCalendarOpen] = useState(false) // Opções de canais const channelOptions = [ { value: "todos", label: "Todos os canais" }, { value: "whatsapp", label: "WhatsApp" }, { value: "instagram", label: "Instagram" }, { value: "email", label: "E-mail" }, ] // Função para limpar os filtros const clearFilters = () => { setDateRange({ from: new Date(new Date().setDate(new Date().getDate() - 30)), to: new Date(), }) setSelectedChannel("todos") } // Função para obter o label do canal selecionado const getChannelLabel = (value: string) => { return channelOptions.find((option) => option.value === value)?.label || "Todos os canais" } // Verificar se há filtros ativos const hasActiveFilters = selectedChannel !== "todos" return (

{/* Cabeçalho dos filtros */}

Filtros

{hasActiveFilters && ( {hasActiveFilters ? "Filtros ativos" : ""} )}

{hasActiveFilters && ( )}

{/* Conteúdo dos filtros */}

{/* Filtro de período */}

Período

Selecione o período

{ setDateRange(range || { from: undefined, to: undefined }) if (range?.to) { setCalendarOpen(false) } }} numberOfMonths={2} locale={ptBR} />

{/* Filtro de canal */}

Canal

{/* Filtros adicionais */} <>

Status do Lead

Vendedor

{/* Resumo dos filtros aplicados */} {hasActiveFilters && (

Filtros aplicados:

{selectedChannel !== "todos" && ( Canal: {getChannelLabel(selectedChannel)} )}

)}

) } [V0_FILE]typescriptreact:file="components/dashboard/sales-funnel.tsx" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { Chart, registerables } from "chart.js" Chart.register(...registerables) interface SalesFunnelProps { data: { name: string value: number }[] } export function SalesFunnel({ data }: SalesFunnelProps) { const chartRef = useRef(null) const chartInstance = useRef(null) useEffect(() => { if (!chartRef.current) return // Destruir o gráfico anterior se existir if (chartInstance.current) { chartInstance.current.destroy() } const ctx = chartRef.current.getContext("2d") if (!ctx) return // Criar gradientes lineares para as barras const createGradient = (ctx: CanvasRenderingContext2D, index: number) => { const gradient = ctx.createLinearGradient(0, 0, 400, 0) // Cor base: #E31B1B (vermelho) switch (index) { case 0: gradient.addColorStop(0, "rgba(227, 27, 27, 0.9)") gradient.addColorStop(1, "rgba(227, 27, 27, 0.7)") break case 1: gradient.addColorStop(0, "rgba(227, 27, 27, 0.85)") gradient.addColorStop(1, "rgba(227, 27, 27, 0.65)") break case 2: gradient.addColorStop(0, "rgba(227, 27, 27, 0.8)") gradient.addColorStop(1, "rgba(227, 27, 27, 0.6)") break case 3: gradient.addColorStop(0, "rgba(227, 27, 27, 0.75)") gradient.addColorStop(1, "rgba(227, 27, 27, 0.55)") break default: gradient.addColorStop(0, "rgba(227, 27, 27, 0.7)") gradient.addColorStop(1, "rgba(227, 27, 27, 0.5)") break } return gradient } // Cores para bordas const borderColors = [ "rgba(227, 27, 27, 0.9)", "rgba(227, 27, 27, 0.85)", "rgba(227, 27, 27, 0.8)", "rgba(227, 27, 27, 0.75)", "rgba(227, 27, 27, 0.7)", ] // Preparar gradientes para cada barra const gradients = data.map((_, index) => createGradient(ctx, index)) // Formatar números para exibição const formatNumber = (value: number) => { return new Intl.NumberFormat("pt-BR").format(value) } // Criar novo gráfico chartInstance.current = new Chart(ctx, { type: "bar", data: { labels: data.map((item) => item.name), datasets: [ { label: "Quantidade", data: data.map((item) => item.value), backgroundColor: gradients, borderColor: borderColors, borderWidth: 1, borderRadius: 8, // Aumentado para cantos mais arredondados borderSkipped: false, // Para arredondar todos os cantos barThickness: 20, maxBarThickness: 24, }, ], }, options: { indexAxis: "y", responsive: true, maintainAspectRatio: false, animation: { duration: 1000, easing: "easeInOutQuart", }, plugins: { legend: { display: false, }, tooltip: { backgroundColor: "rgba(255, 255, 255, 0.95)", titleColor: "#333", bodyColor: "#666", borderColor: "rgba(227, 27, 27, 0.3)", borderWidth: 1, padding: 12, cornerRadius: 8, titleFont: { size: 14, weight: "bold", }, bodyFont: { size: 13, }, displayColors: false, callbacks: { title: (context) => `${context[0].label}`, label: (context) => `Quantidade: ${formatNumber(context.raw as number)}`, labelTextColor: () => "#333", }, }, }, scales: { x: { beginAtZero: true, grid: { display: true, drawBorder: false, color: "rgba(0, 0, 0, 0.05)", }, ticks: { font: { size: 11, }, color: "#666", callback: (value) => formatNumber(value as number), }, border: { display: false, }, }, y: { grid: { display: false, drawBorder: false, }, ticks: { font: { size: 12, weight: "500", }, color: "#333", }, border: { display: false, }, }, }, layout: { padding: { left: 15, right: 40, top: 25, bottom: 15, }, }, datasets: { bar: { barPercentage: 0.8, categoryPercentage: 0.7, }, }, }, }) // Adicionar rótulos de valor no final das barras const originalDraw = chartInstance.current.draw chartInstance.current.draw = function () { originalDraw.apply(this, arguments) const ctx = this.ctx const dataset = this.data.datasets[0] const meta = this.getDatasetMeta(0) ctx.save() ctx.font = "bold 11px Inter, sans-serif" ctx.fillStyle = "#333" ctx.textAlign = "left" meta.data.forEach((bar, index) => { const data = dataset.data[index] as number const position = bar.getCenterPoint() const width = (bar as any).width const x = position.x + width / 2 + 10 ctx.fillText(formatNumber(data), x, position.y) }) ctx.restore() } return () => { if (chartInstance.current) { chartInstance.current.destroy() } } }, [data]) return (

) } [V0_FILE]typescriptreact:file="app/dashboard/chat/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/chat/layout.tsx" isMerged="true" import type React from "react" export default function ChatLayout({ children, }: { children: React.ReactNode }) { return

{children}

} [V0_FILE]typescriptreact:file="app/dashboard/leads/layout.tsx" isMerged="true" import type React from "react" export default function LeadsLayout({ children, }: { children: React.ReactNode }) { return

{children}

} [V0_FILE]typescriptreact:file="app/dashboard/leads/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { z } from "zod" import { Mail, Lock } from "lucide-react" import { useRouter } from "next/navigation" const loginSchema = z.object({ email: z.string().email("Email inválido"), password: z.string().min(6, "A senha deve ter pelo menos 6 caracteres"), }) export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [errors, setErrors] = useState<{ email?: string; password?: string }>({}) const [isSubmitting, setIsSubmitting] = useState(false) const router = useRouter() const validateField = (field: "email" | "password", value: string) => { try { if (field === "email") { loginSchema.shape.email.parse(value) setErrors((prev) => ({ ...prev, email: undefined })) } else { loginSchema.shape.password.parse(value) setErrors((prev) => ({ ...prev, password: undefined })) } } catch (error) { if (error instanceof z.ZodError) { const fieldError = error.errors[0]?.message setErrors((prev) => ({ ...prev, [field]: fieldError })) } } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const validatedData = loginSchema.parse({ email, password }) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) console.log("Login successful", validatedData) // Redirecionar para o dashboard após login bem-sucedido router.push("/dashboard") } catch (error) { if (error instanceof z.ZodError) { const newErrors: { [key: string]: string } = {} error.errors.forEach((err) => { if (err.path[0]) { newErrors[err.path[0] as string] = err.message } }) setErrors(newErrors) } } finally { setIsSubmitting(false) } } return (

{/* Lado esquerdo - Formulário de login */}

Bem-Vindo

Preencha seus dados de login para acessar o CRM da sua revenda.

{ setEmail(e.target.value) validateField("email", e.target.value) }} className={`w-full rounded-md border border-gray-300 py-2.5 pl-10 pr-3 shadow-sm transition-all duration-200 ease-in-out focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20 focus:shadow-md ${ errors.email ? "border-red-500" : "" }`} placeholder="Example@email.com" />

{errors.email &&

{errors.email}

}

Senha

{ setPassword(e.target.value) validateField("password", e.target.value) }} className={`w-full rounded-md border border-gray-300 py-2.5 pl-10 pr-3 shadow-sm transition-all duration-200 ease-in-out focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20 focus:shadow-md ${ errors.password ? "border-red-500" : "" }`} placeholder="********" />

{errors.password &&

{errors.password}

}

Esqueceu a senha?

{/* Lado direito - Imagem e logo */}

{/* Imagem de fundo */}

{/* Filtro escuro */}

{/* Logo centralizado */}

) } [V0_FILE]typescriptreact:file="components/dashboard/kpi-card.tsx" isQuickEdit="true" isMerged="true" import { ArrowUpIcon, ArrowDownIcon } from "lucide-react" interface KpiCardProps { title: string value: number change: number } export function KpiCard({ title, value, change }: KpiCardProps) { const isPositive = change >= 0 return (

{title}

{value}

{isPositive ? ( ) : ( )} {Math.abs(change)}%

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) 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, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="app/dashboard/kanban/layout.tsx" isMerged="true"
import type React from "react"

export default function KanbanLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="h-screen">{children}</div>
}
[V0_FILE]typescriptreact:file="app/dashboard/kanban/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-[#E31B1B]"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/tags/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-[#E31B1B]"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/tags/layout.tsx" isMerged="true"
import type React from "react"

export default function TagsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="h-screen">{children}</div>
}
[V0_FILE]typescriptreact:file="app/dashboard/tags/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/dashboard/sidebar"
import { Header } from "@/components/dashboard/header"
import { Plus, Edit, Copy, Trash2, Search, MoreHorizontal } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

// Tipos
type Tag = {
  id: string
  nome: string
  cor: string
  leadsCount: number
}

export default function TagsPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [searchValue, setSearchValue] = useState("")
  const [novaTagModalAberta, setNovaTagModalAberta] = useState(false)
  const [editTagModalAberta, setEditTagModalAberta] = useState(false)
  const [tagEmEdicao, setTagEmEdicao] = useState<Tag | null>(null)
  const [novaTag, setNovaTag] = useState<Omit<Tag, "id" | "leadsCount">>({
    nome: "",
    cor: "bg-blue-500",
  })

// Estado inicial com algumas tags de exemplo
  const [tags, setTags] = useState<Tag[]>([
    { id: "tag1", nome: "Novo", cor: "bg-blue-500", leadsCount: 12 },
    { id: "tag2", nome: "Quente", cor: "bg-red-500", leadsCount: 8 },
    { id: "tag3", nome: "Frio", cor: "bg-gray-500", leadsCount: 5 },
    { id: "tag4", nome: "Em negociação", cor: "bg-yellow-500", leadsCount: 10 },
    { id: "tag5", nome: "Financiamento", cor: "bg-purple-500", leadsCount: 7 },
    { id: "tag6", nome: "À Vista", cor: "bg-green-500", leadsCount: 4 },
    { id: "tag7", nome: "SUV", cor: "bg-indigo-500", leadsCount: 6 },
    { id: "tag8", nome: "Sedan", cor: "bg-pink-500", leadsCount: 3 },
  ])

// Cores disponíveis para tags
  const coresDisponiveis = [
    { id: "bg-blue-500", nome: "Azul" },
    { id: "bg-red-500", nome: "Vermelho" },
    { id: "bg-green-500", nome: "Verde" },
    { id: "bg-yellow-500", nome: "Amarelo" },
    { id: "bg-purple-500", nome: "Roxo" },
    { id: "bg-pink-500", nome: "Rosa" },
    { id: "bg-indigo-500", nome: "Índigo" },
    { id: "bg-gray-500", nome: "Cinza" },
    { id: "bg-orange-500", nome: "Laranja" },
    { id: "bg-teal-500", nome: "Turquesa" },
  ]

// Filtrar tags com base na busca
  const tagsFiltradas = tags.filter((tag) => tag.nome.toLowerCase().includes(searchValue.toLowerCase()))

// Funções para manipulação de tags
  const adicionarTag = () => {
    if (novaTag.nome.trim()) {
      const novaTagCompleta: Tag = {
        id: `tag-${Date.now()}`,
        nome: novaTag.nome,
        cor: novaTag.cor,
        leadsCount: 0,
      }
      setTags([...tags, novaTagCompleta])
      setNovaTag({ nome: "", cor: "bg-blue-500" })
      setNovaTagModalAberta(false)
    }
  }

const editarTag = () => {
    if (tagEmEdicao && tagEmEdicao.nome.trim()) {
      setTags(tags.map((tag) => (tag.id === tagEmEdicao.id ? tagEmEdicao : tag)))
      setTagEmEdicao(null)
      setEditTagModalAberta(false)
    }
  }

const duplicarTag = (tag: Tag) => {
    const tagDuplicada: Tag = {
      id: `tag-${Date.now()}`,
      nome: `${tag.nome} (cópia)`,
      cor: tag.cor,
      leadsCount: 0,
    }
    setTags([...tags, tagDuplicada])
  }

const excluirTag = (id: string) => {
    if (window.confirm("Tem certeza que deseja excluir esta tag?")) {
      setTags(tags.filter((tag) => tag.id !== id))
    }
  }

const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen)
  }

return (
    <div className="flex h-screen overflow-hidden bg-gray-50">
      {/* Sidebar para desktop */}
      <div className={`hidden lg:block`}>
        <Sidebar />
      </div>

{/* Sidebar móvel */}
      {sidebarOpen && (
        <div className="absolute inset-0 z-20 lg:hidden">
          <div className="absolute inset-0 bg-gray-600 bg-opacity-75" onClick={toggleSidebar}></div>
          <div className="relative h-full w-64">
            <Sidebar />
          </div>
        </div>
      )}

{/* Conteúdo principal */}
      <div className="flex flex-1 flex-col overflow-hidden">
        <Header onMenuToggle={toggleSidebar} />

<div className="flex-1 overflow-auto">
          <main className="p-4 sm:p-6">
            <div className="mb-4 sm:mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
              <div>
                <h1 className="text-xl sm:text-2xl font-bold text-gray-900">Gerenciar Tags</h1>
                <p className="text-xs sm:text-sm text-gray-500">Crie e gerencie tags para organizar seus leads</p>
              </div>
              <div>
                <button
                  onClick={() => setNovaTagModalAberta(true)}
                  className="w-full sm:w-auto inline-flex items-center justify-center rounded-md bg-[#E31B1B] px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm font-medium text-white shadow-sm hover:bg-[#c41818]"
                >
                  <Plus className="mr-1.5 sm:mr-2 h-3.5 w-3.5 sm:h-4 sm:w-4" />
                  Nova Tag
                </button>
              </div>
            </div>

{/* Barra de pesquisa */}
            <div className="mb-4 sm:mb-6 rounded-lg border border-gray-200 bg-white shadow-sm">
              <div className="p-3 sm:p-4">
                <div className="relative w-full sm:max-w-md">
                  <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                    <Search className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-gray-400" />
                  </div>
                  <input
                    type="text"
                    placeholder="Buscar tags..."
                    className="w-full rounded-md border border-gray-300 py-1.5 sm:py-2 pl-8 sm:pl-10 pr-3 sm:pr-4 text-xs sm:text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
                    value={searchValue}
                    onChange={(e) => setSearchValue(e.target.value)}
                  />
                </div>
              </div>
            </div>

{/* Grid de Tags */}
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {tagsFiltradas.length > 0 ? (
                tagsFiltradas.map((tag) => (
                  <div key={tag.id} className="rounded-lg border border-gray-200 bg-white shadow-sm overflow-hidden">
                    <div className={`h-2 ${tag.cor}`}></div>
                    <div className="p-4">
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center">
                          <span className={`inline-block h-3 w-3 rounded-full ${tag.cor} mr-2`}></span>
                          <h3 className="font-medium text-gray-900">{tag.nome}</h3>
                        </div>
                        <Popover>
                          <PopoverTrigger asChild>
                            <button className="rounded p-1 text-gray-500 hover:bg-gray-100">
                              <MoreHorizontal className="h-4 w-4" />
                            </button>
                          </PopoverTrigger>
                          <PopoverContent className="w-48 p-0">
                            <div className="py-1">
                              <button
                                className="flex w-full items-center px-4 py-2 text-left text-xs text-gray-700 hover:bg-gray-100"
                                onClick={() => {
                                  setTagEmEdicao(tag)
                                  setEditTagModalAberta(true)
                                }}
                              >
                                <Edit className="mr-2 h-3.5 w-3.5 text-gray-500" />
                                Editar
                              </button>
                              <button
                                className="flex w-full items-center px-4 py-2 text-left text-xs text-gray-700 hover:bg-gray-100"
                                onClick={() => duplicarTag(tag)}
                              >
                                <Copy className="mr-2 h-3.5 w-3.5 text-gray-500" />
                                Duplicar
                              </button>
                              <button
                                className="flex w-full items-center px-4 py-2 text-left text-xs text-gray-700 hover:bg-gray-100 text-red-600"
                                onClick={() => excluirTag(tag.id)}
                              >
                                <Trash2 className="mr-2 h-3.5 w-3.5 text-red-500" />
                                Excluir
                              </button>
                            </div>
                          </PopoverContent>
                        </Popover>
                      </div>
                      <div className="mt-2 text-xs text-gray-500">
                        {tag.leadsCount} {tag.leadsCount === 1 ? "lead utiliza" : "leads utilizam"} esta tag
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <div className="col-span-full flex justify-center items-center p-8 rounded-lg border border-gray-200 bg-white">
                  <p className="text-gray-500 text-sm">Nenhuma tag encontrada</p>
                </div>
              )}
            </div>
          </main>
        </div>
      </div>

{/* Modal de Nova Tag */}
      <Dialog open={novaTagModalAberta} onOpenChange={setNovaTagModalAberta}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle className="text-lg font-semibold text-gray-900">Adicionar Nova Tag</DialogTitle>
          </DialogHeader>

<div className="py-4">
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="nomeTag" className="text-xs font-medium">
                  Nome da Tag
                </Label>
                <Input
                  id="nomeTag"
                  value={novaTag.nome}
                  onChange={(e) => setNovaTag({ ...novaTag, nome: e.target.value })}
                  className="h-9 text-sm"
                  placeholder="Ex: Financiamento"
                />
              </div>

<div className="space-y-2">
                <Label className="text-xs font-medium">Cor da Tag</Label>
                <div className="flex flex-wrap gap-2">
                  {coresDisponiveis.map((cor) => (
                    <button
                      key={cor.id}
                      onClick={() => setNovaTag({ ...novaTag, cor: cor.id })}
                      className={`h-6 w-6 rounded-full ${cor.id} ${novaTag.cor === cor.id ? "ring-2 ring-offset-2 ring-[#E31B1B]" : ""}`}
                      title={cor.nome}
                    />
                  ))}
                </div>
              </div>

<div className="flex justify-end space-x-2 pt-4">
                <button
                  type="button"
                  onClick={() => setNovaTagModalAberta(false)}
                  className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-900 border border-gray-300 hover:bg-gray-50"
                >
                  Cancelar
                </button>
                <button
                  type="button"
                  onClick={adicionarTag}
                  className="inline-flex items-center rounded-md bg-[#E31B1B] px-3 py-2 text-sm font-medium text-white hover:bg-[#c41818]"
                  disabled={!novaTag.nome.trim()}
                >
                  Adicionar
                </button>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Modal de Editar Tag */}
      <Dialog open={editTagModalAberta} onOpenChange={setEditTagModalAberta}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle className="text-lg font-semibold text-gray-900">Editar Tag</DialogTitle>
          </DialogHeader>

{tagEmEdicao && (
            <div className="py-4">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="editNomeTag" className="text-xs font-medium">
                    Nome da Tag
                  </Label>
                  <Input
                    id="editNomeTag"
                    value={tagEmEdicao.nome}
                    onChange={(e) => setTagEmEdicao({ ...tagEmEdicao, nome: e.target.value })}
                    className="h-9 text-sm"
                    placeholder="Ex: Financiamento"
                  />
                </div>

<div className="space-y-2">
                  <Label className="text-xs font-medium">Cor da Tag</Label>
                  <div className="flex flex-wrap gap-2">
                    {coresDisponiveis.map((cor) => (
                      <button
                        key={cor.id}
                        onClick={() => setTagEmEdicao({ ...tagEmEdicao, cor: cor.id })}
                        className={`h-6 w-6 rounded-full ${cor.id} ${tagEmEdicao.cor === cor.id ? "ring-2 ring-offset-2 ring-[#E31B1B]" : ""}`}
                        title={cor.nome}
                      />
                    ))}
                  </div>
                </div>

<div className="flex justify-end space-x-2 pt-4">
                  <button
                    type="button"
                    onClick={() => setEditTagModalAberta(false)}
                    className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-900 border border-gray-300 hover:bg-gray-50"
                  >
                    Cancelar
                  </button>
                  <button
                    type="button"
                    onClick={editarTag}
                    className="inline-flex items-center rounded-md bg-[#E31B1B] px-3 py-2 text-sm font-medium text-white hover:bg-[#c41818]"
                    disabled={!tagEmEdicao.nome.trim()}
                  >
                    Salvar
                  </button>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/usuarios/layout.tsx" isMerged="true"
import type React from "react"

export default function UsuariosLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="h-screen">{children}</div>
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/usuarios/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-[#E31B1B]"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/funcoes/layout.tsx" isMerged="true"
import type React from "react"

export default function FuncoesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="h-screen">{children}</div>
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/funcoes/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-[#E31B1B]"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/filas/layout.tsx" isMerged="true"
import type React from "react"

export default function FilasLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="h-screen">{children}</div>
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/filas/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-[#E31B1B]"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/integracao/layout.tsx" isMerged="true"
import type React from "react"
export default function IntegracaoLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="h-full">{children}</div>
}
[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/integracao/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="p-6 space-y-6">
      <Skeleton className="h-8 w-64" />
      <div className="space-y-4">
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-10 w-40" />
      </div>
      <Skeleton className="h-8 w-48" />
      <div className="space-y-4">
        <div className="flex space-x-4">
          <Skeleton className="h-10 w-32" />
          <Skeleton className="h-10 w-40" />
          <Skeleton className="h-10 w-36" />
        </div>
        <Skeleton className="h-64 w-full" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/integrations/evolution-api-config.tsx" isMerged="true"
"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface EvolutionConfigProps {
  evolutionConfig: {
    url: string
    token: string
    instanceName: string
  }
  handleEvolutionChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export function EvolutionApiConfig({ evolutionConfig, handleEvolutionChange }: EvolutionConfigProps) {
  return (
    <div className="space-y-6 bg-white p-6 rounded-lg shadow-sm">
      <h2 className="text-xl font-semibold">Configuração do Evolution API</h2>
      <div className="grid gap-4 md:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="evolutionUrl" className="text-xs font-medium">
            URL do Evolution API
          </Label>
          <Input
            id="evolutionUrl"
            name="url"
            value={evolutionConfig.url}
            onChange={handleEvolutionChange}
            className="h-10"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="evolutionToken" className="text-xs font-medium">
            Token da API
          </Label>
          <Input
            id="evolutionToken"
            name="token"
            type="password"
            value={evolutionConfig.token}
            onChange={handleEvolutionChange}
            className="h-10"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="evolutionInstance" className="text-xs font-medium">
            Nome da Instância
          </Label>
          <Input
            id="evolutionInstance"
            name="instanceName"
            value={evolutionConfig.instanceName}
            onChange={handleEvolutionChange}
            className="h-10"
          />
        </div>
      </div>
      <Button className="mt-4">Salvar Configuração</Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/integrations/whatsapp-channels.tsx" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import { QrCode, Phone, Power, RefreshCcw } from "lucide-react"

interface Canal {
  id: number
  titulo: string
  numero: string
  estado: string
  conectado: boolean
}

interface WhatsAppChannelsProps {
  iaAtiva: boolean
  canaisWhatsApp: Canal[]
  toggleIa: () => void
  desconectarCanal: (id: number) => void
  reconectarCanal: (id: number) => void
}

export function WhatsAppChannels({
  iaAtiva,
  canaisWhatsApp,
  toggleIa,
  desconectarCanal,
  reconectarCanal,
}: WhatsAppChannelsProps) {
  return (
    <div className="space-y-6 bg-white p-6 rounded-lg shadow-sm">
      <div className="space-y-4">
        <h3 className="text-lg font-medium flex items-center gap-2">
          <Phone size={20} /> Canais WhatsApp
        </h3>
        <div className="flex flex-wrap gap-3">
          <Button className="flex items-center gap-2">
            <QrCode size={16} /> Gerar QR Code
          </Button>
          <Button className="flex items-center gap-2">
            <Phone size={16} /> Conectar Novo Canal
          </Button>
          <Button variant={iaAtiva ? "destructive" : "default"} className="flex items-center gap-2" onClick={toggleIa}>
            <Power size={16} /> {iaAtiva ? "Desligar IA" : "Ligar IA"}
          </Button>
        </div>

{/* Lista de Canais Conectados */}
        <div className="mt-4">
          <h4 className="text-md font-medium mb-3">Canais Conectados</h4>
          <div className="space-y-4">
            {canaisWhatsApp.map((canal) => (
              <div key={canal.id} className="border rounded-lg p-4 bg-gray-50">
                <div className="flex justify-between items-start">
                  <div>
                    <h5 className="font-medium">{canal.titulo}</h5>
                    <p className="text-sm text-gray-600">{canal.numero}</p>
                    <div className="flex items-center mt-1">
                      <span
                        className={`inline-block w-2 h-2 rounded-full mr-2 ${
                          canal.conectado ? "bg-green-500" : "bg-red-500"
                        }`}
                      ></span>
                      <span className="text-sm">Estado: {canal.estado}</span>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">
                      {canal.conectado ? "Canal conectado e funcionando normalmente." : "Canal desconectado."}
                    </p>
                  </div>
                  <div className="flex gap-2">
                    {canal.conectado ? (
                      <Button variant="outline" size="sm" onClick={() => desconectarCanal(canal.id)}>
                        Desconectar
                      </Button>
                    ) : (
                      <Button size="sm" onClick={() => reconectarCanal(canal.id)} className="flex items-center gap-1">
                        <RefreshCcw size={14} /> Reconectar
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/integrations/instagram-direct-config.tsx" isMerged="true"
"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { QrCode, Instagram } from "lucide-react"

interface InstagramConfigProps {
  instagramConfig: {
    url: string
    token: string
    instanceName: string
  }
  handleInstagramChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export function InstagramDirectConfig({ instagramConfig, handleInstagramChange }: InstagramConfigProps) {
  return (
    <div className="space-y-6 bg-white p-6 rounded-lg shadow-sm">
      <h2 className="text-xl font-semibold flex items-center gap-2">
        <Instagram size={20} /> Configuração do Instagram Direct
      </h2>
      <div className="grid gap-4 md:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="instagramUrl" className="text-xs font-medium">
            URL da API do Instagram Direct
          </Label>
          <Input
            id="instagramUrl"
            name="url"
            value={instagramConfig.url}
            onChange={handleInstagramChange}
            className="h-10"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="instagramToken" className="text-xs font-medium">
            Token de Acesso
          </Label>
          <Input
            id="instagramToken"
            name="token"
            type="password"
            value={instagramConfig.token}
            onChange={handleInstagramChange}
            className="h-10"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="instagramInstance" className="text-xs font-medium">
            Nome da Instância
          </Label>
          <Input
            id="instagramInstance"
            name="instanceName"
            value={instagramConfig.instanceName}
            onChange={handleInstagramChange}
            className="h-10"
          />
        </div>
      </div>
      <Button className="mt-4">Salvar Configuração</Button>

{/* Canais Instagram */}
      <div className="mt-6 space-y-4">
        <h3 className="text-lg font-medium flex items-center gap-2">
          <Instagram size={20} /> Canais Instagram
        </h3>
        <div className="flex flex-wrap gap-3">
          <Button className="flex items-center gap-2">
            <QrCode size={16} /> Gerar Código de Conexão
          </Button>
          <Button className="flex items-center gap-2">
            <Instagram size={16} /> Conectar Novo Canal
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/integrations/facebook-messenger-config.tsx" isMerged="true"
"use client"

interface MessengerConfigProps {
  messengerConfig: {
    url: string
    token: string
    pageId: string
  }
  handleMessengerChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export function FacebookMessengerConfig({ messengerConfig, handleMessengerChange }: MessengerConfigProps) {
  return (
    <div className="space-y-6 bg-white p-6 rounded-lg shadow-sm">
      <h2 className="text-xl font-semibold flex items-center gap-2">
        <Facebook size={20} /> Configuração do Facebook Messenger
      </h2>
      <div className="grid gap-4 md:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="messengerUrl" className="text-xs font-medium">
            URL da API do Messenger
          </Label>
          <Input
            id="messengerUrl"
            name="url"
            value={messengerConfig.url}
            onChange={handleMessengerChange}
            className="h-10"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="messengerToken" className="text-xs font-medium">
            Token de Acesso
          </Label>
          <Input
            id="messengerToken"
            name="token"
            type="password"
            value={messengerConfig.token}
            onChange={handleMessengerChange}
            className="h-10"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="messengerPageId" className="text-xs font-medium">
            ID da Página
          </Label>
          <Input
            id="messengerPageId"
            name="pageId"
            value={messengerConfig.pageId}
            onChange={handleMessengerChange}
            className="h-10"
          />
        </div>
      </div>
      <Button className="mt-4">Salvar Configuração</Button>

{/* Canais Messenger */}
      <div className="mt-6 space-y-4">
        <h3 className="text-lg font-medium flex items-center gap-2">💬 Canais Messenger</h3>
        <div className="flex flex-wrap gap-3">
          <Button className="flex items-center gap-2">
            <QrCode size={16} /> Gerar Link de Autorização
          </Button>
          <Button className="flex items-center gap-2">
            <Facebook size={16} /> Conectar Nova Página
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-avatars-K1qVYge2trPWCNm6kkjY04d7LcErVe.png" isMerged="true"
[V0_FILE]png:file="public/diverse-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-woman-portrait-1kEzS9tpkfIxvwLlduyviCsXZ40QAf.png" isMerged="true"
[V0_FILE]png:file="public/thoughtful-man.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thoughtful-man-MfMm8o08cN6dwbWAxCUruh1fLHOQo9.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/kanban/new-column-modal.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import type { CorDisponivel } from "@/types/kanban"

interface NewColumnModalProps {
  novaColunaDlgAberta: boolean
  setNovaColunaDlgAberta: (open: boolean) => void
  novaColuna: { titulo: string; cor: string }
  setNovaColuna: (coluna: { titulo: string; cor: string }) => void
  adicionarColuna: () => void
  coresDisponiveis: CorDisponivel[]
}

export function NewColumnModal({
  novaColunaDlgAberta,
  setNovaColunaDlgAberta,
  novaColuna,
  setNovaColuna,
  adicionarColuna,
  coresDisponiveis,
}: NewColumnModalProps) {
  return (
    <Dialog open={novaColunaDlgAberta} onOpenChange={setNovaColunaDlgAberta}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold text-gray-900">Adicionar Nova Coluna</DialogTitle>
        </DialogHeader>

<div className="py-4">
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="tituloColuna" className="text-xs font-medium">
                Título da Coluna
              </Label>
              <Input
                id="tituloColuna"
                value={novaColuna.titulo}
                onChange={(e) => setNovaColuna({ ...novaColuna, titulo: e.target.value })}
                className="h-9 text-sm"
                placeholder="Ex: Em Negociação"
              />
            </div>

<div className="space-y-2">
              <Label className="text-xs font-medium">Cor da Coluna</Label>
              <div className="flex flex-wrap gap-2">
                {coresDisponiveis.map((cor) => (
                  <button
                    key={cor.id}
                    onClick={() => setNovaColuna({ ...novaColuna, cor: cor.id })}
                    className={`h-6 w-6 rounded-full ${cor.id} ${novaColuna.cor === cor.id ? "ring-2 ring-offset-2 ring-[#E31B1B]" : ""}`}
                    title={cor.nome}
                  />
                ))}
              </div>
            </div>

<div className="flex justify-end space-x-2 pt-4">
              <button
                type="button"
                onClick={() => setNovaColunaDlgAberta(false)}
                className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-900 border border-gray-300 hover:bg-gray-50"
              >
                Cancelar
              </button>
              <button
                type="button"
                onClick={adicionarColuna}
                className="inline-flex items-center rounded-md bg-[#E31B1B] px-3 py-2 text-sm font-medium text-white hover:bg-[#c41818]"
                disabled={!novaColuna.titulo.trim()}
              >
                Adicionar
              </button>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/leads/leads-filter.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Search, X, Calendar } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar as CalendarComponent } from "@/components/ui/calendar"

type Tag = {
  id: string
  nome: string
  cor: string
}

type FormaPagamento = {
  id: string
  nome: string
}

interface LeadsFilterProps {
  searchValue: string
  setSearchValue: (value: string) => void
  filtroStatus: string
  setFiltroStatus: (value: string) => void
  filtroFormaPagamento: string
  setFiltroFormaPagamento: (value: string) => void
  filtroTags: string[]
  setFiltroTags: (value: string[]) => void
  dateRange: {
    from: Date | undefined
    to: Date | undefined
  }
  setDateRange: (value: { from: Date | undefined; to: Date | undefined }) => void
  calendarOpen: boolean
  setCalendarOpen: (value: boolean) => void
  tagsDisponiveis: Tag[]
  formasPagamento: FormaPagamento[]
  getStatusText: (status: string) => string
  limparFiltros: () => void
  toggleTagFilter: (tagNome: string) => void
}

export function LeadsFilter({
  searchValue,
  setSearchValue,
  filtroStatus,
  setFiltroStatus,
  filtroFormaPagamento,
  setFiltroFormaPagamento,
  filtroTags,
  setFiltroTags,
  dateRange,
  setDateRange,
  calendarOpen,
  setCalendarOpen,
  tagsDisponiveis,
  formasPagamento,
  getStatusText,
  limparFiltros,
  toggleTagFilter,
}: LeadsFilterProps) {
  // Função para formatar data no formato dd/MM/yyyy
  const formatDate = (date: Date) => {
    const day = date.getDate().toString().padStart(2, "0")
    const month = (date.getMonth() + 1).toString().padStart(2, "0")
    const year = date.getFullYear()
    return `${day}/${month}/${year}`
  }

// Verificar se há filtros ativos
  const temFiltrosAtivos =
    filtroStatus !== "todos" ||
    filtroFormaPagamento !== "todas" ||
    filtroTags.length > 0 ||
    dateRange.from !== undefined

return (
    <div className="mb-4 sm:mb-6 rounded-lg border border-gray-200 bg-white shadow-sm">
      <div className="p-3 sm:p-4">
        <div className="mb-3 sm:mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="relative w-full sm:max-w-md">
            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <Search className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-gray-400" />
            </div>
            <input
              type="text"
              placeholder="Buscar por nome, veículo ou WhatsApp..."
              className="w-full rounded-md border border-gray-300 py-1.5 sm:py-2 pl-8 sm:pl-10 pr-3 sm:pr-4 text-xs sm:text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
            />
          </div>

{temFiltrosAtivos && (
            <button
              onClick={limparFiltros}
              className="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
            >
              <X className="mr-1.5 sm:mr-2 h-3.5 w-3.5 sm:h-4 sm:w-4" />
              Limpar Filtros
            </button>
          )}
        </div>
        {/* Área de filtros (sempre visível) */}
        <div className="border-t border-gray-200 pt-3 sm:pt-4">
          <div className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {/* Filtro de Status */}
            <div>
              <label className="mb-1 block text-xs sm:text-sm font-medium text-gray-700">Status</label>
              <select
                value={filtroStatus}
                onChange={(e) => setFiltroStatus(e.target.value)}
                className="w-full rounded-md border border-gray-300 py-1.5 sm:py-2 pl-2.5 sm:pl-3 pr-8 sm:pr-10 text-xs sm:text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
              >
                <option value="todos">Todos os status</option>
                <option value="novo">Novo</option>
                <option value="em_atendimento">Em Atendimento</option>
                <option value="finalizado">Finalizado</option>
              </select>
            </div>

{/* Filtro de Forma de Pagamento */}
            <div>
              <label className="mb-1 block text-xs sm:text-sm font-medium text-gray-700">Forma de Pagamento</label>
              <select
                value={filtroFormaPagamento}
                onChange={(e) => setFiltroFormaPagamento(e.target.value)}
                className="w-full rounded-md border border-gray-300 py-1.5 sm:py-2 pl-2.5 sm:pl-3 pr-8 sm:pr-10 text-xs sm:text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
              >
                {formasPagamento.map((forma) => (
                  <option key={forma.id} value={forma.id}>
                    {forma.nome}
                  </option>
                ))}
              </select>
            </div>

{/* Filtro de Tags */}
            <div>
              <label className="mb-1 block text-xs sm:text-sm font-medium text-gray-700">Tags</label>
              <div className="relative">
                <Popover>
                  <PopoverTrigger asChild>
                    <button className="flex w-full items-center justify-between rounded-md border border-gray-300 bg-white py-1.5 sm:py-2 pl-2.5 sm:pl-3 pr-2.5 sm:pr-3 text-xs sm:text-sm text-left focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20">
                      <span className="truncate">
                        {filtroTags.length > 0
                          ? `${filtroTags.length} tag${filtroTags.length > 1 ? "s" : ""} selecionada${
                              filtroTags.length > 1 ? "s" : ""
                            }`
                          : "Selecionar tags"}
                      </span>
                    </button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-2" align="start">
                    <div className="space-y-2">
                      {tagsDisponiveis.map((tag) => (
                        <div key={tag.id} className="flex items-center">
                          <input
                            type="checkbox"
                            id={`tag-${tag.id}`}
                            checked={filtroTags.includes(tag.nome)}
                            onChange={() => toggleTagFilter(tag.nome)}
                            className="h-3.5 w-3.5 sm:h-4 sm:w-4 rounded border-gray-300 text-[#E31B1B] focus:ring-[#E31B1B]"
                          />
                          <label htmlFor={`tag-${tag.id}`} className="ml-2 flex items-center">
                            <span className={`mr-1.5 sm:mr-2 h-2 w-2 rounded-full ${tag.cor}`}></span>
                            <span className="text-xs sm:text-sm">{tag.nome}</span>
                          </label>
                        </div>
                      ))}
                    </div>
                  </PopoverContent>
                </Popover>
              </div>
            </div>

{/* Filtro de Período */}
            <div>
              <label className="mb-1 block text-xs sm:text-sm font-medium text-gray-700">Período</label>
              <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
                <PopoverContent className="w-auto p-0" align="start">
                  <div className="p-3">
                    <h4 className="mb-2 text-xs sm:text-sm font-medium">Selecione o período</h4>
                    <CalendarComponent
                      initialFocus
                      mode="range"
                      defaultMonth={dateRange.from}
                      selected={dateRange}
                      onSelect={(range) => {
                        setDateRange(range || { from: undefined, to: undefined })
                        if (range?.to) {
                          setCalendarOpen(false)
                        }
                      }}
                      numberOfMonths={window.innerWidth < 768 ? 1 : 2}
                    />
                  </div>
                </PopoverContent>
                <div className="flex w-full items-center justify-between rounded-md border border-gray-300 bg-white py-1.5 sm:py-2 pl-2.5 sm:pl-3 pr-2.5 sm:pr-3 text-xs sm:text-sm text-left focus-within:border-[#E31B1B] focus-within:ring-2 focus-within:ring-[#E31B1B]/20">
                  <PopoverTrigger asChild>
                    <button className="mr-1.5 sm:mr-2 p-0 focus:outline-none">
                      <Calendar className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-gray-500" />
                    </button>
                  </PopoverTrigger>
                  <div className="flex-1 truncate">
                    {dateRange.from ? (
                      dateRange.to ? (
                        <>
                          {formatDate(dateRange.from)} - {formatDate(dateRange.to)}
                        </>
                      ) : (
                        formatDate(dateRange.from)
                      )
                    ) : (
                      "Selecione um período"
                    )}
                  </div>
                </div>
              </Popover>
            </div>
          </div>

{/* Resumo dos filtros aplicados */}
          {temFiltrosAtivos && (
            <div className="mt-3 sm:mt-4 flex flex-wrap gap-1.5 sm:gap-2">
              <span className="text-xs font-medium text-gray-500">Filtros aplicados:</span>

{filtroStatus !== "todos" && (
                <Badge variant="outline" className="bg-blue-50 text-blue-700 text-xs">
                  Status: {getStatusText(filtroStatus)}
                  <button onClick={() => setFiltroStatus("todos")} className="ml-1 rounded-full hover:text-[#E31B1B]">
                    <X className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
                  </button>
                </Badge>
              )}

{filtroFormaPagamento !== "todas" && (
                <Badge variant="outline" className="bg-purple-50 text-purple-700 text-xs">
                  Pagamento: {formasPagamento.find((f) => f.id === filtroFormaPagamento)?.nome || filtroFormaPagamento}
                  <button
                    onClick={() => setFiltroFormaPagamento("todas")}
                    className="ml-1 rounded-full hover:text-[#E31B1B]"
                  >
                    <X className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
                  </button>
                </Badge>
              )}

{filtroTags.map((tag) => (
                <Badge key={tag} variant="outline" className="bg-green-50 text-green-700 text-xs">
                  Tag: {tag}
                  <button onClick={() => toggleTagFilter(tag)} className="ml-1 rounded-full hover:text-[#E31B1B]">
                    <X className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
                  </button>
                </Badge>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/leads/status-modal.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"

interface Lead {
  id: string
  nome: string
  status: string
}

interface StatusModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  lead: Lead | null
  novoStatus: string
  setNovoStatus: (status: string) => void
  onSave: () => void
}

export function StatusModal({ open, onOpenChange, lead, novoStatus, setNovoStatus, onSave }: StatusModalProps) {
  if (!lead) return null

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold text-gray-900">Alterar Status do Lead</DialogTitle>
        </DialogHeader>
        <div className="py-4">
          <div className="mb-4">
            <p className="text-sm text-gray-500">
              Alterando status do lead <span className="font-medium text-gray-900">{lead.nome}</span>
            </p>
          </div>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="status" className="text-xs font-medium">
                Status
              </Label>
              <select
                id="status"
                value={novoStatus}
                onChange={(e) => setNovoStatus(e.target.value)}
                className="w-full rounded-md border border-gray-300 py-2 pl-3 pr-10 text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
              >
                <option value="novo">Novo</option>
                <option value="em_atendimento">Em Atendimento</option>
                <option value="finalizado">Finalizado</option>
              </select>
            </div>
            <div className="flex justify-end space-x-2 pt-4">
              <button
                type="button"
                onClick={() => onOpenChange(false)}
                className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-900 border border-gray-300 hover:bg-gray-50"
              >
                Cancelar
              </button>
              <button
                type="button"
                onClick={onSave}
                className="inline-flex items-center rounded-md bg-[#E31B1B] px-3 py-2 text-sm font-medium text-white hover:bg-[#c41818]"
              >
                Salvar
              </button>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/leads/nota-modal.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"

interface Lead {
  id: string
  nome: string
}

interface NotaModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  lead: Lead | null
  novaNota: string
  setNovaNota: (nota: string) => void
  onSave: () => void
}

export function NotaModal({ open, onOpenChange, lead, novaNota, setNovaNota, onSave }: NotaModalProps) {
  if (!lead) return null

) } [V0_FILE]typescriptreact:file="components/leads/agendar-modal.tsx" isQuickEdit="true" isMerged="true" "use client" import { Calendar } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar as CalendarComponent } from "@/components/ui/calendar" interface Lead { id: string nome: string } interface AgendarModalProps { open: boolean onOpenChange: (open: boolean) => void lead: Lead | null dataAgendamento: Date | undefined setDataAgendamento: (data: Date | undefined) => void horaAgendamento: string setHoraAgendamento: (hora: string) => void descricaoAgendamento: string setDescricaoAgendamento: (descricao: string) => void onSave: () => void } export function AgendarModal({ open, onOpenChange, lead, dataAgendamento, setDataAgendamento, horaAgendamento, setHoraAgendamento, descricaoAgendamento, setDescricaoAgendamento, onSave, }: AgendarModalProps) { if (!lead) return null // Função para formatar data no formato dd/MM/yyyy const formatDate = (date: Date) => { const day = date.getDate().toString().padStart(2, "0") const month = (date.getMonth() + 1).toString().padStart(2, "0") const year = date.getFullYear() return `${day}/${month}/${year}` } return ( ) } [V0_FILE]typescriptreact:file="components/dashboard/sidebar.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { usePathname } from "next/navigation" import { LayoutDashboard, MessageSquare, Users, Trello, Tag, Settings, User, ChevronDown, LogOut } from "lucide-react" export function Sidebar() { const [openProfile, setOpenProfile] = useState(false) const [openSettings, setOpenSettings] = useState(false) const pathname = usePathname() return (

{/* Logo */}

{/* Links de navegação */}

Painel de Gestão
Chat
Leads
Funil de Vendas
Gerenciar Tags
{openSettings && (
Usuários Funções Filas de Atendimento {/* Adicionar link para a página de integrações */} Integrações Origens
)}

{/* Perfil do usuário */}

{openProfile && (

Meu Perfil Suporte Sair

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/configuracoes/origens/loading.tsx" isMerged="true" import { Sidebar } from "@/components/dashboard/sidebar" import { Header } from "@/components/dashboard/header" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="components/dashboard/mobile-bottom-nav.tsx" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { useState } from "react" import { LayoutDashboard, MessageSquare, Users, Trello, Settings, User, X, ChevronRight } from "lucide-react" export function MobileBottomNav() { const pathname = usePathname() const [showConfigModal, setShowConfigModal] = useState(false) const navItems = [ { href: "/dashboard", icon: LayoutDashboard, label: "Dashboard", isActive: pathname === "/dashboard", }, { href: "/dashboard/chat", icon: MessageSquare, label: "Chat", isActive: pathname === "/dashboard/chat", }, { href: "/dashboard/leads", icon: Users, label: "Leads", isActive: pathname === "/dashboard/leads", }, { href: "/dashboard/kanban", icon: Trello, label: "Kanban", isActive: pathname === "/dashboard/kanban", }, { href: "/dashboard/configuracoes/usuarios", icon: Settings, label: "Config", isActive: pathname.startsWith("/dashboard/configuracoes"), }, ] return (

{navItems.map((item) => { const Icon = item.icon if (item.label === "Config") { return ( ) } return (

{item.label} ) })}

{/* Modal de Configurações */} {showConfigModal && (

{/* Header do Modal */}

Configurações

{/* Perfil do Usuário */}

João Silva

Administrador

joao@empresa.com

{/* Menu de Configurações */}

setShowConfigModal(false)} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 border border-gray-200" > Usuários setShowConfigModal(false)} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 border border-gray-200" > Funções setShowConfigModal(false)} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 border border-gray-200" > Filas setShowConfigModal(false)} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 border border-gray-200" > Integração setShowConfigModal(false)} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 border border-gray-200" > Origens

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/configuracoes/origens/layout.tsx" isMerged="true" import type React from "react" import { Sidebar } from "@/components/dashboard/sidebar" import { Header } from "@/components/dashboard/header" export default function OrigensLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/configuracoes/integracao/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { EvolutionApiConfig } from "@/components/integrations/evolution-api-config" import { WhatsAppChannels } from "@/components/integrations/whatsapp-channels" import { InstagramDirectConfig } from "@/components/integrations/instagram-direct-config" import { FacebookMessengerConfig } from "@/components/integrations/facebook-messenger-config" export default function IntegracaoPage() { // Estados para as configurações const [evolutionConfig, setEvolutionConfig] = useState({ url: "https://api.evolution.com", token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", instanceName: "Instância Principal", }) const [instagramConfig, setInstagramConfig] = useState({ url: "https://api.instagram.direct.com", token: "IGQVJYeUk1ZA3N0QzNmRFpYaHVIZAGlta...", instanceName: "Instagram Direct Principal", }) const [messengerConfig, setMessengerConfig] = useState({ url: "https://api.messenger.com", token: "EAAZAgnZAZAMZAMBALrZBZADVZCZAGlta...", pageId: "123456789012345", }) const [iaAtiva, setIaAtiva] = useState(true) // Canais conectados const [canaisWhatsApp, setCanaisWhatsApp] = useState([ { id: 1, titulo: "Atendimento Geral", numero: "+55 11 98765-4321", estado: "Ativo", conectado: true, }, ]) // Funções de manipulação const handleEvolutionChange = (e: React.ChangeEvent) => { const { name, value } = e.target setEvolutionConfig((prev) => ({ ...prev, [name]: value })) } const handleInstagramChange = (e: React.ChangeEvent) => { const { name, value } = e.target setInstagramConfig((prev) => ({ ...prev, [name]: value })) } const handleMessengerChange = (e: React.ChangeEvent) => { const { name, value } = e.target setMessengerConfig((prev) => ({ ...prev, [name]: value })) } const toggleIa = () => { setIaAtiva(!iaAtiva) } const desconectarCanal = (id: number) => { setCanaisWhatsApp((prev) => prev.map((canal) => (canal.id === id ? { ...canal, conectado: false, estado: "Desconectado" } : canal)), ) } const reconectarCanal = (id: number) => { setCanaisWhatsApp((prev) => prev.map((canal) => (canal.id === id ? { ...canal, conectado: true, estado: "Ativo" } : canal)), ) } return (

Configurações de Integração

) } [V0_FILE]typescriptreact:file="app/dashboard/configuracoes/origens/page.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Plus, Search, Edit, Trash2 } from "lucide-react" interface Origem { id: number nome: string descricao: string tipo: "campanha" | "indicacao" | "link_bio" | "redes_sociais" | "outros" ativo: boolean criadoEm: string totalLeads: number } const mockOrigens: Origem[] = [ { id: 1, nome: "Campanha Black Friday", descricao: "Campanha promocional da Black Friday 2024", tipo: "campanha", ativo: true, criadoEm: "2024-01-15", totalLeads: 45, }, { id: 2, nome: "Indicação de Clientes", descricao: "Leads vindos de indicações de clientes atuais", tipo: "indicacao", ativo: true, criadoEm: "2024-01-10", totalLeads: 23, }, { id: 3, nome: "Link da Bio Instagram", descricao: "Leads captados através do link na bio do Instagram", tipo: "link_bio", ativo: true, criadoEm: "2024-01-08", totalLeads: 67, }, { id: 4, nome: "Facebook Ads", descricao: "Campanha de anúncios no Facebook", tipo: "redes_sociais", ativo: false, criadoEm: "2024-01-05", totalLeads: 12, }, ] const tiposOrigem = [ { value: "campanha", label: "Campanha" }, { value: "indicacao", label: "Indicação" }, { value: "link_bio", label: "Link da Bio" }, { value: "redes_sociais", label: "Redes Sociais" }, { value: "outros", label: "Outros" }, ] export default function OrigensPage() { const [origens, setOrigens] = React.useState(mockOrigens) const [searchTerm, setSearchTerm] = React.useState("") const [isModalOpen, setIsModalOpen] = React.useState(false) const [editingOrigem, setEditingOrigem] = React.useState(null) const [formData, setFormData] = React.useState({ nome: "", descricao: "", tipo: "campanha" as const, ativo: true, }) const filteredOrigens = origens.filter( (origem) => origem.nome.toLowerCase().includes(searchTerm.toLowerCase()) || origem.descricao.toLowerCase().includes(searchTerm.toLowerCase()), ) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (editingOrigem) { setOrigens((prev) => prev.map((origem) => (origem.id === editingOrigem.id ? { ...origem, ...formData } : origem))) } else { const newOrigem: Origem = { id: Date.now(), ...formData, criadoEm: new Date().toISOString().split("T")[0], totalLeads: 0, } setOrigens((prev) => [...prev, newOrigem]) } setIsModalOpen(false) setEditingOrigem(null) setFormData({ nome: "", descricao: "", tipo: "campanha", ativo: true }) } const handleEdit = (origem: Origem) => { setEditingOrigem(origem) setFormData({ nome: origem.nome, descricao: origem.descricao, tipo: origem.tipo, ativo: origem.ativo, }) setIsModalOpen(true) } const handleDelete = (id: number) => { setOrigens((prev) => prev.filter((origem) => origem.id !== id)) } const getTipoBadgeColor = (tipo: string) => { switch (tipo) { case "campanha": return "bg-blue-100 text-blue-800" case "indicacao": return "bg-green-100 text-green-800" case "link_bio": return "bg-purple-100 text-purple-800" case "redes_sociais": return "bg-orange-100 text-orange-800" default: return "bg-gray-100 text-gray-800" } } const getTipoLabel = (tipo: string) => { return tiposOrigem.find((t) => t.value === tipo)?.label || tipo } return (

{/* Header */}

Origens

Gerencie as origens dos seus leads

{/* Search and Actions */}

setSearchTerm(e.target.value)} className="pl-8 w-full md:w-[300px]" />

) : (

Nenhuma conversa selecionada

Selecione uma conversa na lista ao lado para começar a interagir.

)}

{/* Modais permanecem os mesmos... */} {/* Modal de Finalização */} {finalizarModalAberto && (

Finalizar Conversa

Tem certeza que deseja finalizar esta conversa? Adicione um motivo para a finalização:

setMotivoFinalizacao(e.target.value)}
              placeholder="Motivo da finalização..."
              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20 resize-none"
              rows={3}
            />

<div className="flex justify-end space-x-3 mt-6">
              <button
                onClick={handleFecharFinalizarModal}
                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                Cancelar
              </button>
              <button
                onClick={handleConfirmarFinalizacao}
                className="px-4 py-2 text-sm font-medium text-white bg-[#E31B1B] rounded-md hover:bg-[#c41818]"
              >
                Finalizar Conversa
              </button>
            </div>
          </div>
        </div>
      )}

{/* Modal de Transferência */}
      {transferirModalAberto && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Transferir Atendimento</h3>
            <p className="text-sm text-gray-600 mb-4">Selecione a fila para onde deseja transferir esta conversa:</p>

<div className="space-y-3 mb-6">
              {filasDisponiveis.map((fila) => (
                <label key={fila.id} className="flex items-start space-x-3 cursor-pointer">
                  <input
                    type="radio"
                    name="fila"
                    value={fila.id.toString()}
                    checked={filaSelecionada === fila.id.toString()}
                    onChange={(e) => setFilaSelecionada(e.target.value)}
                    className="mt-1 h-4 w-4 text-[#E31B1B] border-gray-300 focus:ring-[#E31B1B]"
                  />
                  <div className="flex-1">
                    <div className="text-sm font-medium text-gray-900">{fila.nome}</div>
                    <div className="text-xs text-gray-500">{fila.descricao}</div>
                  </div>
                </label>
              ))}
            </div>

<div className="flex justify-end space-x-3">
              <button
                onClick={handleFecharTransferirModal}
                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                Cancelar
              </button>
              <button
                onClick={handleConfirmarTransferencia}
                className="px-4 py-2 text-sm font-medium text-white bg-[#E31B1B] rounded-md hover:bg-[#c41818]"
              >
                Transferir
              </button>
            </div>
          </div>
        </div>
      )}

{/* Modal de Ativação/Desativação do Bot */}
      {botAtivacaoModalAberto && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-medium text-gray-900 mb-4">{botAtivado ? "Desativar Bot" : "Ativar Bot"}</h3>
            <p className="text-sm text-gray-600 mb-6">
              {botAtivado
                ? "Tem certeza que deseja desativar o bot para esta conversa? O atendimento passará a ser totalmente manual."
                : "Tem certeza que deseja ativar o bot para esta conversa? O bot poderá responder automaticamente algumas mensagens."}
            </p>

<div className="flex justify-end space-x-3">
              <button
                onClick={handleFecharBotAtivacaoModal}
                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                Cancelar
              </button>
              <button
                onClick={handleConfirmarBotAtivacao}
                className="px-4 py-2 text-sm font-medium text-white bg-[#E31B1B] rounded-md hover:bg-[#c41818]"
              >
                {botAtivado ? "Desativar Bot" : "Ativar Bot"}
              </button>
            </div>
          </div>
        </div>
      )}

{/* Modal de Bloqueio de Contato */}
      {bloquearContatoModalAberto && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Bloquear Contato</h3>
            <p className="text-sm text-gray-600 mb-6">
              Tem certeza que deseja bloquear este contato? Esta ação impedirá que o contato envie novas mensagens e não
              poderá ser desfeita facilmente.
            </p>

<div className="flex justify-end space-x-3">
              <button
                onClick={handleFecharBloquearModal}
                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                Cancelar
              </button>
              <button
                onClick={handleConfirmarBloqueio}
                className="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700"
              >
                Bloquear Contato
              </button>
            </div>
          </div>
        </div>
      )}

{/* Modal de Arquivar Conversa */}
      {arquivarConversaModalAberto && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-medium text-gray-900 mb-4">Arquivar Conversa</h3>
            <p className="text-sm text-gray-600 mb-6">
              Tem certeza que deseja arquivar esta conversa? A conversa será movida para a seção de arquivos e não
              aparecerá mais na lista principal.
            </p>

<div className="flex justify-end space-x-3">
              <button
                onClick={handleFecharArquivarModal}
                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
              >
                Cancelar
              </button>
              <button
                onClick={handleConfirmarArquivamento}
                className="px-4 py-2 text-sm font-medium text-white bg-[#E31B1B] rounded-md hover:bg-[#c41818]"
              >
                Arquivar Conversa
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/leads/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type * as React from "react"

import { useState } from "react"
import { Plus } from "lucide-react"
import { LeadsFilter } from "@/components/leads/leads-filter"
import { LeadsTable } from "@/components/leads/leads-table"
import { NewLeadModal } from "@/components/leads/new-lead-modal"
import { LeadDetailsModal } from "@/components/leads/lead-details-modal"
import { StatusModal } from "@/components/leads/status-modal"
import { NotaModal } from "@/components/leads/nota-modal"
import { AgendarModal } from "@/components/leads/agendar-modal"

export default function LeadsPage() {
  const [novoLeadModalAberto, setNovoLeadModalAberto] = useState(false)
  const [novoLead, setNovoLead] = useState({
    nome: "",
    whatsapp: "",
    email: "",
    cpf: "",
    dataNascimento: "",
    cep: "",
    rua: "",
    numero: "",
    complemento: "",
    bairro: "",
    cidade: "",
    estado: "",
    origem: "Facebook",
    veiculoInteresse: "",
    formaPagamento: "À Vista",
    observacoes: "",
  })
  const [searchValue, setSearchValue] = useState("")
  const [filtroStatus, setFiltroStatus] = useState("todos")
  const [filtroFormaPagamento, setFiltroFormaPagamento] = useState("todas")
  const [filtroTags, setFiltroTags] = useState<string[]>([])
  const [dateRange, setDateRange] = useState<{
    from: Date | undefined
    to: Date | undefined
  }>({
    from: undefined,
    to: undefined,
  })
  const [calendarOpen, setCalendarOpen] = useState(false)
  const [detalhesModalAberto, setDetalhesModalAberto] = useState(false)
  const [statusModalAberto, setStatusModalAberto] = useState(false)
  const [notaModalAberto, setNotaModalAberto] = useState(false)
  const [agendarModalAberto, setAgendarModalAberto] = useState(false)
  const [leadSelecionado, setLeadSelecionado] = useState<any>(null)
  const [novaNota, setNovaNota] = useState("")
  const [novoStatus, setNovoStatus] = useState("")
  const [dataAgendamento, setDataAgendamento] = useState<Date | undefined>(undefined)
  const [horaAgendamento, setHoraAgendamento] = useState("")
  const [descricaoAgendamento, setDescricaoAgendamento] = useState("")

// Dados estáticos para simulação
  const tagsDisponiveis = [
    { id: "tag1", nome: "Novo", cor: "bg-blue-500" },
    { id: "tag2", nome: "Quente", cor: "bg-red-500" },
    { id: "tag3", nome: "Frio", cor: "bg-gray-500" },
    { id: "tag4", nome: "Em negociação", cor: "bg-yellow-500" },
  ]

const leads = [
    {
      id: "lead1",
      nome: "João Silva",
      whatsapp: "(11) 99999-9999",
      veiculo: "HB20",
      formaPagamento: "Financiamento",
      tags: ["Novo", "Quente"],
      status: "novo",
      email: "joao.silva@email.com",
      cpf: "123.456.789-00",
      dataNascimento: "10/05/1985",
      cep: "01001-000",
      rua: "Rua Exemplo",
      numero: "123",
      complemento: "Apto 456",
      bairro: "Centro",
      cidade: "São Paulo",
      estado: "SP",
      origem: "Facebook",
      observacoes: "Interessado em HB20 para uso diário.",
    },
    {
      id: "lead2",
      nome: "Maria Oliveira",
      whatsapp: "(21) 98888-8888",
      veiculo: "Onix",
      formaPagamento: "À Vista",
      tags: ["Quente"],
      status: "em_atendimento",
      email: "maria.oliveira@email.com",
      cpf: "987.654.321-00",
      dataNascimento: "25/12/1990",
      cep: "20010-000",
      rua: "Avenida Principal",
      numero: "456",
      complemento: null,
      bairro: "Copacabana",
      cidade: "Rio de Janeiro",
      estado: "RJ",
      origem: "Instagram",
      observacoes: "Prefere pagamento à vista.",
    },
    {
      id: "lead3",
      nome: "Carlos Pereira",
      whatsapp: "(31) 97777-7777",
      veiculo: "Corolla",
      formaPagamento: "Consórcio",
      tags: ["Frio"],
      status: "finalizado",
      email: "carlos.pereira@email.com",
      cpf: "456.789.123-00",
      dataNascimento: "01/01/1980",
      cep: "30000-000",
      rua: "Rua da Bahia",
      numero: "789",
      complemento: null,
      bairro: "Savassi",
      cidade: "Belo Horizonte",
      estado: "MG",
      origem: "Google",
      observacoes: "Aberto a propostas de consórcio.",
    },
    {
      id: "lead4",
      nome: "Ana Souza",
      whatsapp: "(41) 96666-6666",
      veiculo: "Civic",
      formaPagamento: "Leasing",
      tags: ["Em negociação"],
      status: "em_atendimento",
      email: "ana.souza@email.com",
      cpf: "654.321.987-00",
      dataNascimento: "15/06/1995",
      cep: "80000-000",
      rua: "Rua XV de Novembro",
      numero: "1011",
      complemento: null,
      bairro: "Centro",
      cidade: "Curitiba",
      estado: "PR",
      origem: "Indicação",
      observacoes: "Interessada em leasing para o Civic.",
    },
    {
      id: "lead5",
      nome: "Ricardo Almeida",
      whatsapp: "(51) 95555-5555",
      veiculo: "Golf",
      formaPagamento: "Financiamento",
      tags: ["Novo", "Em negociação"],
      status: "novo",
      email: "ricardo.almeida@email.com",
      cpf: "321.654.987-00",
      dataNascimento: "03/09/1988",
      cep: "90000-000",
      rua: "Avenida Ipiranga",
      numero: "1213",
      complemento: null,
      bairro: "Menino Deus",
      cidade: "Porto Alegre",
      estado: "RS",
      origem: "Site",
      observacoes: "Buscando financiamento para o Golf.",
    },
  ]

// Formas de pagamento disponíveis
  const formasPagamento = [
    { id: "todas", nome: "Todas" },
    { id: "financiamento", nome: "Financiamento" },
    { id: "a_vista", nome: "À vista" },
    { id: "consorcio", nome: "Consórcio" },
    { id: "leasing", nome: "Leasing" },
  ]

// Funções para formatação de campos com máscara
  const formatWhatsApp = (value: string) => {
    // Remove todos os caracteres não numéricos
    const numbers = value.replace(/\D/g, "")

// Aplica a máscara (99) 99999-9999
    if (numbers.length <= 2) {
      return `(${numbers}`
    } else if (numbers.length <= 7) {
      return `(${numbers.slice(0, 2)}) ${numbers.slice(2)}`
    } else if (numbers.length <= 11) {
      return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(7)}`
    } else {
      return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(7, 11)}`
    }
  }

const formatCPF = (value: string) => {
    // Remove todos os caracteres não numéricos
    const numbers = value.replace(/\D/g, "")

// Aplica a máscara 999.999.999-99
    if (numbers.length <= 3) {
      return numbers
    } else if (numbers.length <= 6) {
      return `${numbers.slice(0, 3)}.${numbers.slice(3)}`
    } else if (numbers.length <= 9) {
      return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(6)}`
    } else {
      return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(6, 9)}-${numbers.slice(9, 11)}`
    }
  }

const formatCEP = (value: string) => {
    // Remove todos os caracteres não numéricos
    const numbers = value.replace(/\D/g, "")

// Aplica a máscara 99999-999
    if (numbers.length <= 5) {
      return numbers
    } else {
      return `${numbers.slice(0, 5)}-${numbers.slice(5, 8)}`
    }
  }

const formatDateInput = (value: string) => {
    // Remove todos os caracteres não numéricos
    const numbers = value.replace(/\D/g, "")

// Aplica a máscara 99/99/9999
    if (numbers.length <= 2) {
      return numbers
    } else if (numbers.length <= 4) {
      return `${numbers.slice(0, 2)}/${numbers.slice(2)}`
    } else {
      return `${numbers.slice(0, 2)}/${numbers.slice(2, 4)}/${numbers.slice(4, 8)}`
    }
  }

const formatNumero = (value: string) => {
    // Remove todos os caracteres não numéricos
    return value.replace(/\D/g, "")
  }

const formatNome = (value: string) => {
    // Capitaliza as primeiras letras de cada palavra
    return value
      .toLowerCase()
      .split(" ")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ")
  }

const formatEmail = (value: string) => {
    // Remove espaços
    return value.replace(/\s/g, "").toLowerCase()
  }

const formatRua = (value: string) => {
    // Capitaliza a primeira letra
    if (value.length === 0) return value
    return value.charAt(0).toUpperCase() + value.slice(1)
  }

const formatBairro = (value: string) => {
    // Capitaliza a primeira letra
    if (value.length === 0) return value
    return value.charAt(0).toUpperCase() + value.slice(1)
  }

const formatCidade = (value: string) => {
    // Capitaliza a primeira letra
    if (value.length === 0) return value
    return value.charAt(0).toUpperCase() + value.slice(1)
  }

const formatVeiculoInteresse = (value: string) => {
    // Capitaliza a primeira letra
    if (value.length === 0) return value
    return value.charAt(0).toUpperCase() + value.slice(1)
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const name = e.target.name
    const value = e.target.value

// Aplicar máscaras conforme o campo
    let formattedValue = value

switch (name) {
      case "nome":
        formattedValue = formatNome(value)
        break
      case "whatsapp":
        formattedValue = formatWhatsApp(value)
        break
      case "email":
        formattedValue = formatEmail(value)
        break
      case "cpf":
        formattedValue = formatCPF(value)
        break
      case "dataNascimento":
        if (e.target.type !== "date") {
          formattedValue = formatDateInput(value)
        }
        break
      case "cep":
        formattedValue = formatCEP(value)
        break
      case "numero":
        formattedValue = formatNumero(value)
        break
      case "rua":
        formattedValue = formatRua(value)
        break
      case "bairro":
        formattedValue = formatBairro(value)
        break
      case "cidade":
        formattedValue = formatCidade(value)
        break
      case "veiculoInteresse":
        formattedValue = formatVeiculoInteresse(value)
        break
      case "observacoes":
        // Sem formatação especial para observações
        break
      default:
        // Sem formatação para outros campos
        break
    }

setNovoLead((prev) => ({ ...prev, [name]: formattedValue }))
  }

const handleSubmitNovoLead = (e: React.FormEvent) => {
    e.preventDefault()
    // Aqui você adicionaria a lógica para salvar o novo lead
    console.log("Novo lead:", novoLead)

// Simulação de sucesso
    alert("Lead adicionado com sucesso!")
    setNovoLeadModalAberto(false)
    // Resetar o formulário
    setNovoLead({
      nome: "",
      whatsapp: "",
      email: "",
      cpf: "",
      dataNascimento: "",
      cep: "",
      rua: "",
      numero: "",
      complemento: "",
      bairro: "",
      cidade: "",
      estado: "",
      origem: "Facebook",
      veiculoInteresse: "",
      formaPagamento: "À Vista",
      observacoes: "",
    })
  }

// Função para obter a cor da tag
  const getTagColor = (tagNome: string) => {
    const tag = tagsDisponiveis.find((t) => t.nome === tagNome)
    return tag ? tag.cor : "bg-gray-500"
  }

// Função para obter a cor do status
  const getStatusColor = (status: string) => {
    switch (status) {
      case "novo":
        return "bg-blue-500"
      case "em_atendimento":
        return "bg-yellow-500"
      case "finalizado":
        return "bg-green-500"
      default:
        return "bg-gray-500"
    }
  }

// Função para obter o texto do status
  const getStatusText = (status: string) => {
    switch (status) {
      case "novo":
        return "Novo"
      case "em_atendimento":
        return "Em Atendimento"
      case "finalizado":
        return "Finalizado"
      default:
        return "Desconhecido"
    }
  }

// Função para alternar a seleção de uma tag no filtro
  const toggleTagFilter = (tagNome: string) => {
    if (filtroTags.includes(tagNome)) {
      setFiltroTags(filtroTags.filter((t) => t !== tagNome))
    } else {
      setFiltroTags([...filtroTags, tagNome])
    }
  }

// Função para limpar todos os filtros
  const limparFiltros = () => {
    setFiltroStatus("todos")
    setFiltroFormaPagamento("todas")
    setFiltroTags([])
    setDateRange({ from: undefined, to: undefined })
    setSearchValue("")
  }

// Filtrar leads com base nos filtros selecionados
  const leadsFiltrados = leads.filter((lead) => {
    // Filtro de busca
    if (
      searchValue &&
      !lead.nome.toLowerCase().includes(searchValue.toLowerCase()) &&
      !lead.whatsapp.includes(searchValue) &&
      !lead.veiculo.toLowerCase().includes(searchValue.toLowerCase())
    ) {
      return false
    }

// Filtro de status
    if (filtroStatus !== "todos" && lead.status !== filtroStatus) {
      return false
    }

// Filtro de forma de pagamento
    if (
      filtroFormaPagamento !== "todas" &&
      lead.formaPagamento.toLowerCase() !==
        formasPagamento.find((f) => f.id === filtroFormaPagamento)?.nome.toLowerCase()
    ) {
      return false
    }

// Filtro de tags
    if (filtroTags.length > 0 && !filtroTags.some((tag) => lead.tags.includes(tag))) {
      return false
    }

return true
  })

const handleViewDetails = (lead: any) => {
    setLeadSelecionado(lead)
    setDetalhesModalAberto(true)
  }

const handleChangeStatus = (lead: any) => {
    setLeadSelecionado(lead)
    setNovoStatus(lead.status)
    setStatusModalAberto(true)
  }

const handleAddNote = (lead: any) => {
    setLeadSelecionado(lead)
    setNovaNota("")
    setNotaModalAberto(true)
  }

const handleScheduleContact = (lead: any) => {
    setLeadSelecionado(lead)
    setDataAgendamento(undefined)
    setHoraAgendamento("")
    setDescricaoAgendamento("")
    setAgendarModalAberto(true)
  }

const handleSaveStatus = () => {
    alert(`Status alterado para: ${getStatusText(novoStatus)}`)
    setStatusModalAberto(false)
  }

const handleSaveNote = () => {
    alert("Nota adicionada com sucesso!")
    setNotaModalAberto(false)
  }

const handleSaveSchedule = () => {
    if (!dataAgendamento || !horaAgendamento) {
      alert("Por favor, selecione data e hora para o agendamento.")
      return
    }
    alert("Agendamento realizado com sucesso!")
    setAgendarModalAberto(false)
  }

return (
    <div className="flex h-screen overflow-hidden bg-gray-50">
      {/* Conteúdo principal */}
      <div className="flex flex-1 flex-col overflow-hidden">
        <div className="flex-1 overflow-auto">
          <main className="p-4 sm:p-6">
            <div className="mb-4 sm:mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
              <div>
                <h1 className="text-xl sm:text-2xl font-bold text-gray-900">Leads</h1>
                <p className="text-xs sm:text-sm text-gray-500">Gerencie todos os leads da sua revenda</p>
              </div>
              <div>
                <button
                  onClick={() => setNovoLeadModalAberto(true)}
                  className="w-full sm:w-auto inline-flex items-center justify-center rounded-md bg-[#E31B1B] px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm font-medium text-white shadow-sm hover:bg-[#c41818]"
                >
                  <Plus className="mr-1.5 sm:mr-2 h-3.5 w-3.5 sm:h-4 sm:w-4" />
                  Adicionar Lead
                </button>
              </div>
            </div>

{/* Filtros */}
            <LeadsFilter
              searchValue={searchValue}
              setSearchValue={setSearchValue}
              filtroStatus={filtroStatus}
              setFiltroStatus={setFiltroStatus}
              filtroFormaPagamento={filtroFormaPagamento}
              setFiltroFormaPagamento={setFiltroFormaPagamento}
              filtroTags={filtroTags}
              setFiltroTags={setFiltroTags}
              dateRange={dateRange}
              setDateRange={setDateRange}
              calendarOpen={calendarOpen}
              setCalendarOpen={setCalendarOpen}
              tagsDisponiveis={tagsDisponiveis}
              formasPagamento={formasPagamento}
              getStatusText={getStatusText}
              limparFiltros={limparFiltros}
              toggleTagFilter={toggleTagFilter}
            />

{/* Tabela de Leads */}
            <LeadsTable
              leads={leadsFiltrados}
              getTagColor={getTagColor}
              getStatusColor={getStatusColor}
              getStatusText={getStatusText}
              onViewDetails={handleViewDetails}
              onChangeStatus={handleChangeStatus}
              onAddNote={handleAddNote}
              onScheduleContact={handleScheduleContact}
            />
          </main>
        </div>
      </div>

{/* Modais */}
      <NewLeadModal
        open={novoLeadModalAberto}
        onOpenChange={setNovoLeadModalAberto}
        novoLead={novoLead}
        handleInputChange={handleInputChange}
        handleSubmit={handleSubmitNovoLead}
      />

<AgendarModal
        open={agendarModalAberto}
        onOpenChange={setAgendarModalAberto}
        lead={leadSelecionado}
        dataAgendamento={dataAgendamento}
        setDataAgendamento={setDataAgendamento}
        horaAgendamento={horaAgendamento}
        setHoraAgendamento={setHoraAgendamento}
        descricaoAgendamento={descricaoAgendamento}
        setDescricaoAgendamento={setDescricaoAgendamento}
        onSave={handleSaveSchedule}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/header.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Bell, Search, X } from "lucide-react"
import Image from "next/image"

interface HeaderProps {
  onMenuToggle?: () => void
}

export function Header({ onMenuToggle }: HeaderProps) {
  const [showNotifications, setShowNotifications] = useState(false)
  const [searchValue, setSearchValue] = useState("")

// Dados simulados de notificações
  const notifications = [
    {
      id: 1,
      title: "Novo lead recebido",
      message: "Você recebeu um novo lead de WhatsApp",
      time: "5 min atrás",
      read: false,
    },
    {
      id: 2,
      title: "Atendimento pendente",
      message: "Cliente aguardando resposta há mais de 1 hora",
      time: "1 hora atrás",
      read: false,
    },
    {
      id: 3,
      title: "Meta atingida",
      message: "Sua equipe atingiu 80% da meta mensal",
      time: "3 horas atrás",
      read: true,
    },
    {
      id: 4,
      title: "Atualização do sistema",
      message: "Nova versão disponível com melhorias",
      time: "1 dia atrás",
      read: true,
    },
  ]

const unreadCount = notifications.filter((notification) => !notification.read).length

return (
    <header className="sticky top-0 z-10 flex h-16 items-center justify-between border-b border-gray-200 bg-black lg:bg-white px-4 shadow-sm">
      {/* Logo no mobile */}
      <div className="flex items-center lg:hidden">
        <div className="relative h-8 w-32">
          <Image src="/images/revendai-logo-white.png" alt="RevendAI Logo" fill className="object-contain" priority />
        </div>
      </div>

{/* Barra de pesquisa no desktop */}
      <div className="hidden flex-1 px-4 lg:block">
        <div className="relative max-w-md">
          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
            <Search className="h-4 w-4 text-gray-400" />
          </div>
          <input
            type="text"
            placeholder="Buscar leads, conversas..."
            className="w-full rounded-md border border-gray-300 py-1.5 pl-10 pr-4 text-xs focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
          />
        </div>
      </div>

{/* Ações do header */}
      <div className="flex items-center space-x-2">
        {/* Busca no mobile */}
        <button className="rounded-full p-1.5 text-white hover:bg-gray-800 lg:hidden" aria-label="Buscar">
          <Search className="h-5 w-5" />
        </button>

{/* Notificações */}
        <div className="relative">
          <button
            onClick={() => setShowNotifications(!showNotifications)}
            className="relative rounded-full p-1.5 text-white hover:bg-gray-800 lg:text-gray-500 lg:hover:bg-gray-100"
            aria-label="Notificações"
          >
            <Bell className="h-5 w-5" />
            {unreadCount > 0 && (
              <span className="absolute right-0.5 top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#E31B1B] text-xs font-bold text-white">
                {unreadCount}
              </span>
            )}
          </button>

{showNotifications && (
            <div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-md border border-gray-200 bg-white shadow-lg">
              <div className="flex items-center justify-between border-b border-gray-200 p-4">
                <h3 className="font-medium">Notificações</h3>
                <button
                  onClick={() => setShowNotifications(false)}
                  className="rounded-full p-1 text-gray-500 hover:bg-gray-100"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
              <div className="max-h-96 overflow-y-auto">
                {notifications.length > 0 ? (
                  <div>
                    {notifications.map((notification) => (
                      <div
                        key={notification.id}
                        className={`border-b border-gray-100 p-4 hover:bg-gray-50 ${
                          !notification.read ? "bg-gray-50" : ""
                        }`}
                      >
                        <div className="flex items-start">
                          <div
                            className={`mr-3 mt-1 h-2 w-2 flex-shrink-0 rounded-full ${
                              !notification.read ? "bg-[#E31B1B]" : "bg-gray-300"
                            }`}
                          ></div>
                          <div>
                            <p className="font-medium">{notification.title}</p>
                            <p className="text-sm text-gray-600">{notification.message}</p>
                            <p className="mt-1 text-xs text-gray-500">{notification.time}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="p-4 text-center text-gray-500">Nenhuma notificação</div>
                )}
              </div>
              <div className="border-t border-gray-200 p-2">
                <button className="block w-full rounded-md p-2 text-center text-sm font-medium text-[#E31B1B] hover:bg-gray-50">
                  Ver todas as notificações
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/leads/leads-table.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { MessageSquare, Edit, Trash2, MoreHorizontal } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface Lead {
  id: string
  nome: string
  whatsapp: string
  veiculo: string
  formaPagamento: string
  tags: string[]
  status: string
  email: string
  cpf: string
  dataNascimento: string
  cep: string
  rua: string
  numero: string
  complemento: string | null
  bairro: string
  cidade: string
  estado: string
  origem: string
  observacoes: string
}

interface LeadsTableProps {
  leads: Lead[]
  getTagColor: (tagNome: string) => string
  getStatusColor: (status: string) => string
  getStatusText: (status: string) => string
  onViewDetails: (lead: Lead) => void
  onChangeStatus: (lead: Lead) => void
  onAddNote: (lead: Lead) => void
  onScheduleContact: (lead: Lead) => void
}

export function LeadsTable({
  leads,
  getTagColor,
  getStatusColor,
  getStatusText,
  onViewDetails,
  onChangeStatus,
  onAddNote,
  onScheduleContact,
}: LeadsTableProps) {
  return (
    <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
      <div className="overflow-x-auto">
        <div className="min-w-full">
          {/* Versão para desktop */}
          <table className="hidden md:table min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th
                  scope="col"
                  className="px-4 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                >
                  Nome
                </th>
                <th
                  scope="col"
                  className="px-4 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                >
                  WhatsApp
                </th>
                <th
                  scope="col"
                  className="px-4 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                >
                  Veículo de Interesse
                </th>
                <th
                  scope="col"
                  className="px-4 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                >
                  Forma de Pagamento
                </th>
                <th
                  scope="col"
                  className="px-4 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                >
                  Tags
                </th>
                <th
                  scope="col"
                  className="px-4 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                >
                  Status
                </th>
                <th
                  scope="col"
                  className="px-4 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                >
                  Ações
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 bg-white">
              {leads.length > 0 ? (
                leads.map((lead) => (
                  <tr key={lead.id} className="hover:bg-gray-50">
                    <td className="whitespace-nowrap px-4 sm:px-6 py-3 sm:py-4">
                      <div className="text-xs sm:text-sm font-medium text-gray-900">{lead.nome}</div>
                    </td>
                    <td className="whitespace-nowrap px-4 sm:px-6 py-3 sm:py-4">
                      <div className="text-xs sm:text-sm text-gray-500">{lead.whatsapp}</div>
                    </td>
                    <td className="whitespace-nowrap px-4 sm:px-6 py-3 sm:py-4">
                      <div className="text-xs sm:text-sm text-gray-500">{lead.veiculo}</div>
                    </td>
                    <td className="whitespace-nowrap px-4 sm:px-6 py-3 sm:py-4">
                      <div className="text-xs sm:text-sm text-gray-500">{lead.formaPagamento}</div>
                    </td>
                    <td className="px-4 sm:px-6 py-3 sm:py-4">
                      <div className="flex flex-wrap gap-1">
                        {lead.tags.map((tag, index) => (
                          <span
                            key={index}
                            className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] sm:text-xs font-medium text-white ${getTagColor(
                              tag,
                            )}`}
                          >
                            {tag}
                          </span>
                        ))}
                      </div>
                    </td>
                    <td className="whitespace-nowrap px-4 sm:px-6 py-3 sm:py-4">
                      <span
                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] sm:text-xs font-medium text-white ${getStatusColor(
                          lead.status,
                        )}`}
                      >
                        {getStatusText(lead.status)}
                      </span>
                    </td>
                    <td className="whitespace-nowrap px-4 sm:px-6 py-3 sm:py-4">
                      <div className="flex space-x-1 sm:space-x-2">
                        <button
                          className="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-[#E31B1B]"
                          title="Chat"
                        >
                          <MessageSquare className="h-4 w-4 sm:h-5 sm:w-5" />
                        </button>
                        <button
                          className="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-[#E31B1B]"
                          title="Editar"
                        >
                          <Edit className="h-4 w-4 sm:h-5 sm:w-5" />
                        </button>
                        <button
                          className="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-[#E31B1B]"
                          title="Excluir"
                        >
                          <Trash2 className="h-4 w-4 sm:h-5 sm:w-5" />
                        </button>
                        <div className="relative">
                          <Popover>
                            <PopoverTrigger asChild>
                              <button
                                className="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-[#E31B1B]"
                                title="Mais opções"
                              >
                                <MoreHorizontal className="h-4 w-4 sm:h-5 sm:w-5" />
                              </button>
                            </PopoverTrigger>
                            <PopoverContent className="w-48 p-0">
                              <div className="py-1">
                                <button
                                  className="flex w-full items-center px-4 py-2 text-left text-xs sm:text-sm text-gray-700 hover:bg-gray-100"
                                  onClick={() => onViewDetails(lead)}
                                >
                                  Ver detalhes
                                </button>
                                <button
                                  className="flex w-full items-center px-4 py-2 text-left text-xs sm:text-sm text-gray-700 hover:bg-gray-100"
                                  onClick={() => onScheduleContact(lead)}
                                >
                                  Agendar visita
                                </button>
                                <button
                                  className="flex w-full items-center px-4 py-2 text-left text-xs sm:text-sm text-gray-700 hover:bg-gray-100"
                                  onClick={() => onAddNote(lead)}
                                >
                                  Adicionar nota
                                </button>
                              </div>
                            </PopoverContent>
                          </Popover>
                        </div>
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={7} className="px-4 sm:px-6 py-4 text-center text-xs sm:text-sm text-gray-500">
                    Nenhum lead encontrado com os filtros selecionados.
                  </td>
                </tr>
              )}
            </tbody>
          </table>

{/* Versão para mobile */}
          <div className="md:hidden divide-y divide-gray-200">
            {leads.length > 0 ? (
              leads.map((lead) => (
                <div key={lead.id} className="p-4 hover:bg-gray-50">
                  <div className="flex justify-between items-start mb-2">
                    <div>
                      <h3 className="font-medium text-sm text-gray-900">{lead.nome}</h3>
                      <p className="text-xs text-gray-500">{lead.whatsapp}</p>
                    </div>
                    <span
                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium text-white ${getStatusColor(
                        lead.status,
                      )}`}
                    >
                      {getStatusText(lead.status)}
                    </span>
                  </div>

<div className="mb-2">
                    <p className="text-xs text-gray-700">
                      Veículo: <span className="text-gray-500">{lead.veiculo}</span>
                    </p>
                    <p className="text-xs text-gray-700">
                      Pagamento: <span className="text-gray-500">{lead.formaPagamento}</span>
                    </p>
                  </div>

<div className="flex flex-wrap gap-1 mb-3">
                    {lead.tags.map((tag, index) => (
                      <span
                        key={index}
                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium text-white ${getTagColor(
                          tag,
                        )}`}
                      >
                        {tag}
                      </span>
                    ))}
                  </div>

<div className="relative">
                      <Popover>
                        <PopoverTrigger asChild>
                          <button
                            className="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-[#E31B1B]"
                            title="Mais opções"
                          >
                            <MoreHorizontal className="h-4 w-4" />
                          </button>
                        </PopoverTrigger>
                        <PopoverContent className="w-48 p-0">
                          <div className="py-1">
                            <button
                              className="flex w-full items-center px-4 py-2 text-left text-xs text-gray-700 hover:bg-gray-100"
                              onClick={() => onViewDetails(lead)}
                            >
                              Ver detalhes
                            </button>
                            <button
                              className="flex w-full items-center px-4 py-2 text-left text-xs text-gray-700 hover:bg-gray-100"
                              onClick={() => onScheduleContact(lead)}
                            >
                              Agendar visita
                            </button>
                            <button
                              className="flex w-full items-center px-4 py-2 text-left text-xs text-gray-700 hover:bg-gray-100"
                              onClick={() => onAddNote(lead)}
                            >
                              Adicionar nota
                            </button>
                          </div>
                        </PopoverContent>
                      </Popover>
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <div className="p-4 text-center text-xs text-gray-500">
                Nenhum lead encontrado com os filtros selecionados.
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/leads/new-lead-modal.tsx" isQuickEdit="true" isMerged="true"
"use client"
import type * as React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface NovoLeadProps {
  nome: string
  whatsapp: string
  email: string
  cpf: string
  dataNascimento: string
  cep: string
  rua: string
  numero: string
  complemento: string
  bairro: string
  cidade: string
  estado: string
  origem: string
  veiculoInteresse: string
  formaPagamento: string
  detalhes: string
  observacoes: string
}

interface NewLeadModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  novoLead: NovoLeadProps
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void
  handleSubmit: (e: React.FormEvent) => void
}

export function NewLeadModal({ open, onOpenChange, novoLead, handleInputChange, handleSubmit }: NewLeadModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold text-gray-900">Adicionar Novo Lead</DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6 py-4">
          <div className="space-y-4">
            <h3 className="text-base font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-2">Dados Pessoais</h3>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="nome" className="text-xs font-medium">
                  Nome
                </Label>
                <Input
                  id="nome"
                  name="nome"
                  value={novoLead.nome}
                  onChange={handleInputChange}
                  className="h-9 text-sm"
                  required
                  placeholder="Nome completo"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="whatsapp" className="text-xs font-medium">
                  WhatsApp
                </Label>
                <Input
                  id="whatsapp"
                  name="whatsapp"
                  value={novoLead.whatsapp}
                  onChange={handleInputChange}
                  className="h-9 text-sm"
                  placeholder="(99) 99999-9999"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="dataNascimento" className="text-xs font-medium">
                  Data de Nascimento
                </Label>
                <Input
                  id="dataNascimento"
                  name="dataNascimento"
                  type="text"
                  placeholder="DD/MM/AAAA"
                  value={novoLead.dataNascimento}
                  onChange={handleInputChange}
                  className="h-9 text-sm"
                />
              </div>
            </div>

<div className="space-y-4">
              <h4 className="text-base font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-2">
                Endereço Completo
              </h4>
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="cep" className="text-xs font-medium">
                    CEP
                  </Label>
                  <Input
                    id="cep"
                    name="cep"
                    value={novoLead.cep || ""}
                    onChange={handleInputChange}
                    className="h-9 text-sm"
                    placeholder="99999-999"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="numero" className="text-xs font-medium">
                    Número
                  </Label>
                  <Input
                    id="numero"
                    name="numero"
                    value={novoLead.numero || ""}
                    onChange={handleInputChange}
                    className="h-9 text-sm"
                    placeholder="Apenas números"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="complemento" className="text-xs font-medium">
                    Complemento
                  </Label>
                  <Input
                    id="complemento"
                    name="complemento"
                    value={novoLead.complemento || ""}
                    onChange={handleInputChange}
                    className="h-9 text-sm"
                    placeholder="Apto, Bloco, etc."
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="bairro" className="text-xs font-medium">
                    Bairro
                  </Label>
                  <Input
                    id="bairro"
                    name="bairro"
                    value={novoLead.bairro || ""}
                    onChange={handleInputChange}
                    className="h-9 text-sm"
                    placeholder="Nome do bairro"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="cidade" className="text-xs font-medium">
                    Cidade
                  </Label>
                  <Input
                    id="cidade"
                    name="cidade"
                    value={novoLead.cidade || ""}
                    onChange={handleInputChange}
                    className="h-9 text-sm"
                    placeholder="Nome da cidade"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="estado" className="text-xs font-medium">
                    Estado
                  </Label>
                  <select
                    id="estado"
                    name="estado"
                    value={novoLead.estado || ""}
                    onChange={handleInputChange}
                    className="w-full h-9 rounded-md border border-gray-300 py-1.5 pl-3 pr-10 text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
                  >
                    <option value="">Selecione</option>
                    <option value="AC">Acre</option>
                    <option value="AL">Alagoas</option>
                    <option value="AP">Amapá</option>
                    <option value="AM">Amazonas</option>
                    <option value="BA">Bahia</option>
                    <option value="CE">Ceará</option>
                    <option value="DF">Distrito Federal</option>
                    <option value="ES">Espírito Santo</option>
                    <option value="GO">Goiás</option>
                    <option value="MA">Maranhão</option>
                    <option value="MT">Mato Grosso</option>
                    <option value="MS">Mato Grosso do Sul</option>
                    <option value="MG">Minas Gerais</option>
                    <option value="PA">Pará</option>
                    <option value="PB">Paraíba</option>
                    <option value="PR">Paraná</option>
                    <option value="PE">Pernambuco</option>
                    <option value="PI">Piauí</option>
                    <option value="RJ">Rio de Janeiro</option>
                    <option value="RN">Rio Grande do Norte</option>
                    <option value="RS">Rio Grande do Sul</option>
                    <option value="RO">Rondônia</option>
                    <option value="RR">Roraima</option>
                    <option value="SC">Santa Catarina</option>
                    <option value="SP">São Paulo</option>
                    <option value="SE">Sergipe</option>
                    <option value="TO">Tocantins</option>
                  </select>
                </div>
              </div>
            </div>

<div className="space-y-4">
              <h4 className="text-base font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-2">
                Informações Adicionais
              </h4>
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="origem" className="text-xs font-medium">
                    Origem
                  </Label>
                  <select
                    id="origem"
                    name="origem"
                    value={novoLead.origem || ""}
                    onChange={handleInputChange}
                    className="w-full h-9 rounded-md border border-gray-300 py-1.5 pl-3 pr-10 text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
                  >
                    <option value="Facebook">Facebook</option>
                    <option value="Instagram">Instagram</option>
                    <option value="Google">Google</option>
                    <option value="Indicação">Indicação</option>
                    <option value="Site">Site</option>
                  </select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="veiculoInteresse" className="text-xs font-medium">
                    Veículo de Interesse
                  </Label>
                  <Input
                    id="veiculoInteresse"
                    name="veiculoInteresse"
                    value={novoLead.veiculoInteresse || ""}
                    onChange={handleInputChange}
                    className="h-9 text-sm"
                    placeholder="Modelo do veículo"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="formaPagamento" className="text-xs font-medium">
                    Forma de Pagamento
                  </Label>
                  <select
                    id="formaPagamento"
                    name="formaPagamento"
                    value={novoLead.formaPagamento || ""}
                    onChange={handleInputChange}
                    className="w-full h-9 rounded-md border border-gray-300 py-1.5 pl-3 pr-10 text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
                  >
                    <option value="À Vista">À Vista</option>
                    <option value="Financiamento">Financiamento</option>
                    <option value="Consórcio">Consórcio</option>
                    <option value="Leasing">Leasing</option>
                  </select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="detalhes" className="text-xs font-medium">
                    Detalhes
                  </Label>
                  <Input
                    id="detalhes"
                    name="detalhes"
                    value={novoLead.detalhes || ""}
                    onChange={handleInputChange}
                    className="h-9 text-sm"
                    placeholder="Detalhes adicionais"
                  />
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="observacoes" className="text-xs font-medium">
                Observações
              </Label>
              <textarea
                id="observacoes"
                name="observacoes"
                value={novoLead.observacoes || ""}
                onChange={handleInputChange}
                className="w-full rounded-md border border-gray-300 py-1.5 pl-3 pr-3 text-sm focus:border-[#E31B1B] focus:outline-none focus:ring-2 focus:ring-[#E31B1B]/20"
                rows={3}
                placeholder="Informações adicionais sobre o lead"
              >

) } [V0_FILE]typescriptreact:file="components/leads/lead-details-modal.tsx" isQuickEdit="true" isMerged="true" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { MessageCircle } from "lucide-react" interface Lead { id: string nome: string whatsapp: string veiculo: string formaPagamento: string tags: string[] status: string email: string cpf: string dataNascimento: string cep: string rua: string numero: string complemento: string | null bairro: string cidade: string estado: string origem: string | number observacoes: string } interface LeadDetailsModalProps { open: boolean onOpenChange: (open: boolean) => void lead: Lead | null getTagColor: (tagNome: string) => string getStatusColor: (status: string) => string getStatusText: (status: string) => string } const getOrigemName = (origem: string | number) => { const origens: Record = { 1: "Campanha black", 2: "Indicação", 3: "Link da bio", campanha_black: "Campanha black", indicacao: "Indicação", link_bio: "Link da bio", facebook: "Facebook", instagram: "Instagram", google: "Google Ads", site: "Site oficial", } return origens[origem] || origem?.toString() || "Não informado" } export function LeadDetailsModal({ open, onOpenChange, lead, getTagColor, getStatusColor, getStatusText, }: LeadDetailsModalProps) { if (!lead) return null return ( ) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Sidebar } from "@/components/dashboard/sidebar" import { Header } from "@/components/dashboard/header" import { MobileBottomNav } from "@/components/dashboard/mobile-bottom-nav" import { useEffect, useState } from "react" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { const [isMobile, setIsMobile] = useState(false) const [sidebarOpen, setSidebarOpen] = useState(false) useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 1024) if (window.innerWidth < 1024) { setSidebarOpen(false) // Sempre fechar sidebar no mobile } } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) const toggleSidebar = () => { if (!isMobile) { setSidebarOpen(!sidebarOpen) } } if (isMobile) { // Layout mobile - apenas header e bottom nav, SEM sidebar return (

{}} />

{children}

) } // Layout desktop - com sidebar return (

{children}

) } [V0_FILE]typescriptreact:file="components/kanban/new-negotiation-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { CalendarIcon } from "lucide-react" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { cn } from "@/lib/utils" interface NewNegotiationModalProps { novaNegociacaoDlgAberta: boolean setNovaNegociacaoDlgAberta: (open: boolean) => void } interface NegotiationForm { titulo: string cliente: string valor: string prazo: Date | undefined responsavel: string prioridade: string descricao: string } export function NewNegotiationModal({ novaNegociacaoDlgAberta, setNovaNegociacaoDlgAberta }: NewNegotiationModalProps) { const [form, setForm] = useState({ titulo: "", cliente: "", valor: "", prazo: undefined, responsavel: "", prioridade: "", descricao: "", }) const [errors, setErrors] = useState>({}) const resetForm = () => { setForm({ titulo: "", cliente: "", valor: "", prazo: undefined, responsavel: "", prioridade: "", descricao: "", }) setErrors({}) } const validateForm = () => { const newErrors: Record = {} if (!form.titulo.trim()) { newErrors.titulo = "Título é obrigatório" } if (!form.cliente.trim()) { newErrors.cliente = "Cliente é obrigatório" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = () => { if (!validateForm()) { return } // TODO: Implementar lógica de criação da negociação console.log("Criando negociação:", form) // Reset form e fechar modal resetForm() setNovaNegociacaoDlgAberta(false) } const handleCancel = () => { resetForm() setNovaNegociacaoDlgAberta(false) } const formatCurrency = (value: string) => { // Remove tudo que não é número const numbers = value.replace(/\D/g, "") // Converte para formato de moeda const formatted = new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", }).format(Number(numbers) / 100) return formatted } const handleValueChange = (value: string) => { const formatted = formatCurrency(value) setForm({ ...form, valor: formatted }) } return (

Filtros

Selecione o período

Filtros aplicados:

Bem-Vindo

{title}

Configurações

João Silva

Configurações de Integração

Origens

Nenhuma conversa selecionada

Finalizar Conversa

Resumo

Informações Completas

Dados Pessoais

Endereço

Observações

Histórico de Interações

Agendamentos