[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import ZumChatLogo from "@/components/zum-chat-logo" export default function RegisterPage() { return (

{/* Left side with illustration and text */}

ZumChat

Atendimento ágil,
soluções inteligentes
- seu assistente
comercial sempre
pronto para ajudar!

{/* Right side with form */}

Cadastrar

Já tem uma conta?{" "} Entrar agora

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import ZumChatLogo from "@/components/zum-chat-logo" export default function LoginPage() { return (

{/* Left side with illustration and text */}

ZumChat

Atendimento ágil,
soluções inteligentes
- seu assistente
comercial sempre
pronto para ajudar!

{/* Right side with form */}

Entrar

Ainda não tem conta?{" "} Cadastre-se agora

) } [V0_FILE]typescriptreact:file="components/zum-chat-logo.tsx" isMerged="true" interface ZumChatLogoProps { className?: string } export default function ZumChatLogo({ className = "" }: ZumChatLogoProps) { return (

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", 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")], } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @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: 221.2 83.2% 53.3%; --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: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ZumChat - Atendimento ágil, soluções inteligentes", description: "Seu assistente comercial sempre pronto para ajudar!", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/dashboard/usuarios/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Search, Plus, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import NovoUsuarioModal from "@/components/novo-usuario-modal" import NovoDepartamentoModal from "@/components/novo-departamento-modal" // Sample data const users = [ { id: 1, name: "Christine Brooks", department: "Vendas", email: "seuemail@hotmail.com", workHours: "09:00-18:00", status: "Ativo", }, { id: 2, name: "Rosie Pearson", department: "Vendas", email: "seuemail@hotmail.com", workHours: "09:00-18:00", status: "Ativo", }, { id: 3, name: "Darrell Caldwell", department: "Administração", email: "seuemail@hotmail.com", workHours: "09:00-18:00", status: "Inativo", }, { id: 4, name: "Gilbert Johnston", department: "Administração", email: "seuemail@hotmail.com", workHours: "09:00-18:00", status: "Ativo", }, { id: 5, name: "Alan Cain", department: "Técnico", email: "seuemail@hotmail.com", workHours: "09:00-18:00", status: "Ativo", }, { id: 6, name: "Alfred Murray", department: "Técnico", email: "seuemail@hotmail.com", workHours: "09:00-18:00", status: "Ativo", }, ] export default function UsuariosPage() { const [showUserModal, setShowUserModal] = useState(false) const [showDepartmentModal, setShowDepartmentModal] = useState(false) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("Todos") const [departmentFilter, setDepartmentFilter] = useState("Todos") return (

Usuários

{/* Filters */}

Status

Departamento

Pesquisar

setSearchQuery(e.target.value)} className="pl-10 bg-white" />

{/* Action buttons */}

{/* Users table */}

{users.map((user) => ( ))}

Usuário	Departamento	Email	Horários de trabalho	Status	Ações
{user.name}	{user.department}	{user.email}	{user.workHours}	{user.status}

{/* Pagination */}

Mostrando 1-09 de 78

{/* Modals */} {showUserModal && setShowUserModal(false)} />} {showDepartmentModal && setShowDepartmentModal(false)} />}

) } [V0_FILE]typescriptreact:file="components/novo-usuario-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface NovoUsuarioModalProps { onClose: () => void } export default function NovoUsuarioModal({ onClose }: NovoUsuarioModalProps) { const [name, setName] = useState("") const [email, setEmail] = useState("") const [department, setDepartment] = useState("") const [status, setStatus] = useState("") const [workDays, setWorkDays] = useState({ monday: true, tuesday: true, wednesday: true, thursday: true, friday: true, saturday: false, sunday: false, }) const handleSave = () => { // Here you would handle saving the new user console.log({ name, email, department, status, workDays }) onClose() } return (

Novo Usuário

Preencha os campos abaixo para cadastrar um novo usuário

Nome completo setName(e.target.value)} className="mt-1" />

Email setEmail(e.target.value)} className="mt-1" />

Departamento

Status

{/* Work schedule */}

Dias e horários de trabalho

Dias

Inicia às

Encerra às

{/* Monday */}

setWorkDays({ ...workDays, monday: checked as boolean })} /> Segunda-feira

{/* Tuesday */}

setWorkDays({ ...workDays, tuesday: checked as boolean })} /> Terça-feira

{/* Wednesday */}

setWorkDays({ ...workDays, wednesday: checked as boolean })} /> Quarta-feira

{/* Thursday */}

setWorkDays({ ...workDays, thursday: checked as boolean })} /> Quinta-feira

{/* Friday */}

setWorkDays({ ...workDays, friday: checked as boolean })} /> Sexta-feira

{/* Saturday */}

setWorkDays({ ...workDays, saturday: checked as boolean })} /> Sábado

{/* Sunday */}

setWorkDays({ ...workDays, sunday: checked as boolean })} /> Domingo

) } [V0_FILE]typescriptreact:file="components/novo-departamento-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface NovoDepartamentoModalProps { onClose: () => void } export default function NovoDepartamentoModal({ onClose }: NovoDepartamentoModalProps) { const [name, setName] = useState("") const [permissions, setPermissions] = useState("") const handleSave = () => { // Here you would handle saving the new department console.log({ name, permissions }) onClose() } return (

Novo Departamento

Preencha os campos abaixo para cadastrar um novo departamento

Nome do departamento setName(e.target.value)} className="mt-1" />

Permissões

) } [V0_FILE]typescriptreact:file="app/dashboard/contatos/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Search, Plus, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import NovoContatoModal from "@/components/novo-contato-modal" // Sample data const contacts = [ { id: 1, name: "Christine Brooks", phone: "(00) 000000000", tags: [{ name: "Novo cliente", color: "#4B6BFB" }], calls: "3 chamados", }, { id: 2, name: "Rosie Pearson", phone: "(00) 000000000", tags: [{ name: "Finalizado", color: "#FB4B4B" }], calls: "1 chamado", }, { id: 3, name: "Darrell Caldwell", phone: "(00) 000000000", tags: [{ name: "Chamar", color: "#4BFB4B" }], calls: "2 chamados", }, { id: 4, name: "Gilbert Johnston", phone: "(00) 000000000", tags: [{ name: "Finalizado", color: "#FB4B4B" }], calls: "5 chamados", }, { id: 5, name: "Alan Cain", phone: "(00) 000000000", tags: [{ name: "Chamar", color: "#4BFB4B" }], calls: "2 chamados", }, { id: 6, name: "Alfred Murray", phone: "(00) 000000000", tags: [], calls: "1 chamado", }, ] export default function ContatosPage() { const [showContactModal, setShowContactModal] = useState(false) const [searchQuery, setSearchQuery] = useState("") const [tagFilter, setTagFilter] = useState("Todos") const [callsFilter, setCallsFilter] = useState("Todos") return (

Contatos

{/* Filters */}

Tags

Chamados

Pesquisar

setSearchQuery(e.target.value)} className="pl-10 bg-white" />

{/* Action button */}

{/* Contacts table */}

{contacts.map((contact) => ( ))}

Nome	Número de telefone	Tags	Chamados realizados	Ações
{contact.name}	{contact.phone}	{contact.tags.map((tag, index) => ( {tag.name} ))}	{contact.calls}

{/* Pagination */}

Mostrando 1-09 de 78

{/* Modal */} {showContactModal && setShowContactModal(false)} />}

) } [V0_FILE]typescriptreact:file="app/dashboard/relatorios/page.tsx" isEdit="true" isMerged="true" "use client" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card } from "@/components/ui/card" import { Bot } from "lucide-react" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts" const barData = [ { name: "Etapa 1", value: 50 }, { name: "Etapa 2", value: 45 }, { name: "Etapa 3", value: 48 }, { name: "Etapa 4", value: 30 }, { name: "Etapa 5", value: 20 }, ] const pieData = [ { name: "João", value: 30 }, { name: "Renata", value: 30 }, { name: "Miguel", value: 40 }, ] const COLORS = ["#4B6BFB", "#FB4B4B", "#808080"] export default function RelatoriosPage() { return (

Principais indicadores

{/* Filters */}

Departamentos

Período

Tags

Usuário

{/* KPI Cards */}

Novas mensagens

Atendimentos finalizados

Atendimentos ativos

Tempo médio de resposta

5 min

Retorno

20%

{/* Charts */}

Gráfico Atendimento em cada etapa

Atendimento por responsável

`${name} ${(percent * 100).toFixed(0)}%`} > {pieData.map((entry, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/dashboard/tags/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Search, Plus, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import NovaTagModal from "@/components/nova-tag-modal" // Sample data const tags = [ { id: 1, name: "Novo cliente", color: "#4B6BFB", contacts: 30 }, { id: 2, name: "Finalizado", color: "#FB4B4B", contacts: 60 }, { id: 3, name: "Chamar", color: "#4BFB4B", contacts: 10 }, ] export default function TagsPage() { const [showTagModal, setShowTagModal] = useState(false) const [searchQuery, setSearchQuery] = useState("") return (

Tags

{/* Search and Actions */}

Pesquisar

setSearchQuery(e.target.value)} className="pl-10 bg-white" />

{/* Tags table */}

{tags.map((tag) => ( ))}

Nome	Cor	Contatos	Ações
{tag.name}		{tag.contacts}

{/* Pagination */}

Mostrando 1-09 de 78

{/* Modal */} {showTagModal && setShowTagModal(false)} />}

) } [V0_FILE]typescriptreact:file="app/dashboard/mensagens-rapidas/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Search, Plus, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import NovaMensagemModal from "@/components/nova-mensagem-modal" // Sample data const messages = [ { id: 1, message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat [...]", department: "Vendas", }, { id: 2, message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat [...]", department: "Administração", }, { id: 3, message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat [...]", department: "Técnico", }, ] export default function MensagensRapidasPage() { const [showMessageModal, setShowMessageModal] = useState(false) const [searchQuery, setSearchQuery] = useState("") return (

Mensagens rápidas

{/* Search and Actions */}

Pesquisar

setSearchQuery(e.target.value)} className="pl-10 bg-white" />

{/* Messages table */}

{messages.map((msg) => ( ))}

Mensagem	Departamento	Ações
{msg.message}	{msg.department}

{/* Pagination */}

Mostrando 1-09 de 78

{/* Modal */} {showMessageModal && setShowMessageModal(false)} />}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import Link from "next/link" import { Users, MessageSquare, Contact, BarChart2, Settings, Tag, Zap } from "lucide-react" export default function DashboardPage() { return (

Dashboard

Usuários

Gerenciar usuários do sistema

Mensagens

Gerenciar mensagens

Contatos

Gerenciar contatos

Relatórios

Visualizar relatórios

Configurações

Configurar o sistema

Tags

Gerenciar tags

Mensagens Rápidas

Gerenciar mensagens rápidas

) } [V0_FILE]typescriptreact:file="components/nova-tag-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface NovaTagModalProps { onClose: () => void } const colorOptions = [ { value: "#4B6BFB", label: "Azul" }, { value: "#FB4B4B", label: "Vermelho" }, { value: "#4BFB4B", label: "Verde" }, { value: "#FB4BFB", label: "Rosa" }, { value: "#ABABAB", label: "Cinza" }, { value: "#800000", label: "Marrom" }, ] export default function NovaTagModal({ onClose }: NovaTagModalProps) { const [name, setName] = useState("") const [color, setColor] = useState("") const [department, setDepartment] = useState("") const handleSave = () => { // Here you would handle saving the new tag console.log({ name, color, department }) onClose() } return (

Nova Tag

Preencha os campos abaixo para cadastrar uma nova tag

Nome setName(e.target.value)} className="mt-1" />

Escolha a cor

{colorOptions.map((option) => (

Departamento

) } [V0_FILE]typescriptreact:file="components/novo-contato-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface NovoContatoModalProps { onClose: () => void } export default function NovoContatoModal({ onClose }: NovoContatoModalProps) { const [name, setName] = useState("") const [email, setEmail] = useState("") const [phone, setPhone] = useState("") const [tags, setTags] = useState("") const handleSave = () => { // Here you would handle saving the new contact console.log({ name, email, phone, tags }) onClose() } return (

Novo Contato

Preencha os campos abaixo para cadastrar um novo contato

Nome completo setName(e.target.value)} className="mt-1" />

Email setEmail(e.target.value)} className="mt-1" />

Número de telefone setPhone(e.target.value)} className="mt-1" />

Tags

) } [V0_FILE]typescriptreact:file="components/nova-mensagem-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface NovaMensagemModalProps { onClose: () => void } export default function NovaMensagemModal({ onClose }: NovaMensagemModalProps) { const [message, setMessage] = useState("") const [department, setDepartment] = useState("") const handleSave = () => { // Here you would handle saving the new message console.log({ message, department }) onClose() } return (

Nova Mensagem automática

Preencha os campos abaixo para cadastrar uma nova mensagem automática

Mensagem

setMessage(e.target.value)}
                className="mt-1 h-40"
              />
            </div>

<div>
              <Label htmlFor="department">Departamento</Label>
              <Select value={department} onValueChange={setDepartment}>
                <SelectTrigger id="department" className="mt-1">
                  <SelectValue placeholder="Selecione o departamento" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="vendas">Vendas</SelectItem>
                  <SelectItem value="administracao">Administração</SelectItem>
                  <SelectItem value="tecnico">Técnico</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="mt-8 flex justify-center">
            <Button onClick={handleSave} className="w-full max-w-xs bg-blue-700 hover:bg-blue-800">
              Salvar
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/customer-info.tsx" isMerged="true"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

export default function CustomerInfo() {
  return (
    <div className="w-80 bg-white border-l overflow-y-auto">
      <div className="p-6 text-center">
        <Image
          src="/placeholder.svg?height=96&width=96"
          alt="Customer avatar"
          width={96}
          height={96}
          className="rounded-full mx-auto mb-4"
        />
        <h2 className="text-2xl font-bold">Patrícia Pereira</h2>
      </div>

<div className="px-6 pb-6">
        <div className="space-y-6">
          {/* Media and documents */}
          <div>
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Mídia e documentos</h3>
              <Button variant="link" className="text-blue-600 p-0">
                Ver tudo
              </Button>
            </div>
            <div className="grid grid-cols-3 gap-2">
              <Image
                src="/placeholder.svg?height=80&width=80"
                alt="Media 1"
                width={80}
                height={80}
                className="rounded-lg object-cover"
              />
              <Image
                src="/placeholder.svg?height=80&width=80"
                alt="Media 2"
                width={80}
                height={80}
                className="rounded-lg object-cover"
              />
              <Image
                src="/placeholder.svg?height=80&width=80"
                alt="Media 3"
                width={80}
                height={80}
                className="rounded-lg object-cover"
              />
            </div>
          </div>

{/* Tags */}
          <div>
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Tags</h3>
              <Button variant="link" className="text-blue-600 p-0">
                Editar
              </Button>
            </div>
            <div className="flex flex-wrap gap-2">
              <Badge className="bg-blue-100 text-blue-800">Novo cliente</Badge>
            </div>
          </div>

{/* Observations */}
          <div>
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Observações</h3>
              <Button variant="link" className="text-blue-600 p-0">
                Editar
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/quick-messages-modal.tsx" isMerged="true"
import { Search, Filter, X } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

interface QuickMessagesModalProps {
  onClose: () => void
}

const messages = [
  {
    id: 1,
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 2,
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
  {
    id: 3,
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
]

export default function QuickMessagesModal({ onClose }: QuickMessagesModalProps) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-lg w-full max-w-2xl">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">Mensagens rápidas</h2>
            <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
              <X className="h-6 w-6" />
            </button>
          </div>

<div className="space-y-4 max-h-96 overflow-y-auto">
            {messages.map((message) => (
              <button
                key={message.id}
                className="w-full text-left p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
              >
                <p className="text-sm text-gray-600">{message.text}</p>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/perfil/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"

const permissions = ["Agendamentos", "Informações gerais", "Funcionamento", "Avaliações", "Financeiro", "Configurações"]

export default function PerfilPage() {
  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">Perfil</h1>

<div className="space-y-6">
        {/* General Information */}
        <Card className="p-6">
          <div className="flex justify-between items-start mb-6">
            <h2 className="text-xl font-semibold">Informações Gerais do Usuário</h2>
            <Button variant="link" className="text-blue-600">
              Editar
            </Button>
          </div>

<div className="space-y-4">
            <div>
              <span className="font-medium">Nome:</span> Nome do usuário
            </div>
            <div>
              <span className="font-medium">Status:</span> Ativo
            </div>
            <div>
              <span className="font-medium">Telefone:</span> (00) 000000000
            </div>
            <div>
              <span className="font-medium">Departamento:</span> Administrador
            </div>
          </div>
        </Card>

{/* Permissions */}
        <Card className="p-6">
          <div className="flex justify-between items-start mb-6">
            <h2 className="text-xl font-semibold">Permissões</h2>
            <Button variant="link" className="text-blue-600">
              Editar
            </Button>
          </div>

<div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="text-left">
                  <th className="pb-4">Recurso</th>
                  <th className="pb-4">Ver</th>
                  <th className="pb-4">Editar</th>
                  <th className="pb-4">Excluir</th>
                  <th className="pb-4">Cadastrar</th>
                </tr>
              </thead>
              <tbody>
                {permissions.map((permission) => (
                  <tr key={permission} className="border-t">
                    <td className="py-4">{permission}</td>
                    <td className="py-4">
                      <Checkbox defaultChecked />
                    </td>
                    <td className="py-4">
                      <Checkbox defaultChecked />
                    </td>
                    <td className="py-4">
                      <Checkbox defaultChecked />
                    </td>
                    <td className="py-4">
                      <Checkbox defaultChecked />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>

{/* Account */}
        <Card className="p-6">
          <div className="flex justify-between items-start mb-6">
            <h2 className="text-xl font-semibold">Conta</h2>
            <Button variant="link" className="text-blue-600">
              Editar
            </Button>
          </div>

<div className="space-y-4">
            <div>
              <span className="font-medium">Email:</span> meuemail@gmail.com
            </div>
            <div>
              <span className="font-medium">Senha:</span> 123
            </div>
          </div>
        </Card>

{/* Account Actions */}
        <div className="flex gap-4">
          <Button variant="outline" className="flex-1 border-blue-700 text-blue-700 hover:bg-blue-50">
            Desativar conta
          </Button>
          <Button variant="destructive" className="flex-1">
            Excluir conta
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/modals/notes-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

interface NotesModalProps {
  onClose: () => void
}

export default function NotesModal({ onClose }: NotesModalProps) {
  const [notes, setNotes] = useState("")

const handleSave = () => {
    // Here you would handle saving the notes
    console.log({ notes })
    onClose()
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-lg w-full max-w-lg">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">Anotações</h2>
            <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
              <X className="h-6 w-6" />
            </button>
          </div>

<Textarea
            placeholder="Escrever anotações sobre o cliente"
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            className="min-h-[200px] mb-6"
          />

<Button onClick={handleSave} className="w-full bg-blue-700 hover:bg-blue-800">
            Salvar
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/modals/transfer-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface TransferModalProps {
  onClose: () => void
}

export default function TransferModal({ onClose }: TransferModalProps) {
  const [department, setDepartment] = useState("")
  const [agent, setAgent] = useState("")
  const [notes, setNotes] = useState("")

const handleTransfer = () => {
    // Here you would handle the transfer
    console.log({ department, agent, notes })
    onClose()
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-lg w-full max-w-lg">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">Transferir para atendente</h2>
            <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
              <X className="h-6 w-6" />
            </button>
          </div>

<div className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Departamento</label>
              <Select value={department} onValueChange={setDepartment}>
                <SelectTrigger>
                  <SelectValue placeholder="Selecionar departamento" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="vendas">Vendas</SelectItem>
                  <SelectItem value="suporte">Suporte</SelectItem>
                  <SelectItem value="financeiro">Financeiro</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Atendente</label>
              <Select value={agent} onValueChange={setAgent}>
                <SelectTrigger>
                  <SelectValue placeholder="Selecione o atendente" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="joao">João</SelectItem>
                  <SelectItem value="maria">Maria</SelectItem>
                  <SelectItem value="pedro">Pedro</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Observações</label>
              <Textarea
                placeholder="Escreve alguma observação"
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
              />
            </div>

<Button onClick={handleTransfer} className="w-full bg-blue-700 hover:bg-blue-800">
              Transferir
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/modals/schedule-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, Calendar } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface ScheduleModalProps {
  onClose: () => void
  contactName?: string
}

export default function ScheduleModal({ onClose, contactName = "" }: ScheduleModalProps) {
  const [message, setMessage] = useState("")
  const [date, setDate] = useState("")
  const [time, setTime] = useState("")

const handleSchedule = () => {
    // Here you would handle scheduling the message
    console.log({ contactName, message, date, time })
    onClose()
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-lg w-full max-w-lg">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">Agendamento</h2>
            <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
              <X className="h-6 w-6" />
            </button>
          </div>

<div className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Contato</label>
              <Input value={contactName} disabled />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Mensagem automática</label>
              <Select value={message} onValueChange={setMessage}>
                <SelectTrigger>
                  <SelectValue placeholder="Selecione a mensagem" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="msg1">Mensagem 1</SelectItem>
                  <SelectItem value="msg2">Mensagem 2</SelectItem>
                  <SelectItem value="msg3">Mensagem 3</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Data</label>
                <div className="relative">
                  <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
                  <Calendar className="absolute right-3 top-2.5 h-5 w-5 text-gray-400" />
                </div>
              </div>

<div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Horário</label>
                <Select value={time} onValueChange={setTime}>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione o horário" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="09:00">09:00</SelectItem>
                    <SelectItem value="10:00">10:00</SelectItem>
                    <SelectItem value="11:00">11:00</SelectItem>
                    <SelectItem value="14:00">14:00</SelectItem>
                    <SelectItem value="15:00">15:00</SelectItem>
                    <SelectItem value="16:00">16:00</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<Button onClick={handleSchedule} className="w-full bg-blue-700 hover:bg-blue-800">
              Agendar
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"
import Link from "next/link"
import Image from "next/image"
import { usePathname } from "next/navigation"

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const pathname = usePathname()
  return (
    <div className="min-h-screen flex flex-col">
      {/* Top navigation bar */}
      <header className="bg-blue-800 text-white p-4">
        <div className="container mx-auto flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Link href="/dashboard" className="flex items-center gap-2">
              <div className="w-12 h-12 relative">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
                  {/* Robot body */}
                  <rect x="60" y="80" width="80" height="70" rx="10" fill="#60A5FA" />

{/* Robot head */}
                  <rect x="70" y="40" width="60" height="50" rx="10" fill="#93C5FD" />

{/* Robot eyes */}
                  <circle cx="85" cy="60" r="8" fill="white" />
                  <circle cx="115" cy="60" r="8" fill="white" />
                  <circle cx="85" cy="60" r="4" fill="#1E40AF" />
                  <circle cx="115" cy="60" r="4" fill="#1E40AF" />

{/* Robot mouth */}
                  <path d="M80 75 Q100 85 120 75" stroke="white" strokeWidth="3" fill="none" />

{/* Headset */}
                  <path d="M70 50 Q60 40 60 60 V70" stroke="#1E3A8A" strokeWidth="3" fill="none" />
                  <circle cx="60" cy="70" r="5" fill="#1E3A8A" />
                  <path d="M130 50 Q140 40 140 60 V70" stroke="#1E3A8A" strokeWidth="3" fill="none" />
                  <path d="M70 50 H130" stroke="#1E3A8A" strokeWidth="3" fill="none" />
                </svg>
              </div>
              <span className="text-xl font-bold">ZumChat</span>
            </Link>
          </div>

<nav className="flex items-center space-x-2">
            <Link
              href="/dashboard/usuarios"
              className={`px-4 py-2 rounded-md transition-colors ${
                pathname === "/dashboard/usuarios"
                  ? "bg-white text-blue-700"
                  : "hover:bg-blue-700 text-white hover:text-white"
              }`}
            >
              Usuários
            </Link>
            <Link
              href="/dashboard/mensagens"
              className={`px-4 py-2 rounded-md transition-colors ${
                pathname === "/dashboard/mensagens"
                  ? "bg-white text-blue-700"
                  : "hover:bg-blue-700 text-white hover:text-white"
              }`}
            >
              Mensagens
            </Link>
            <Link
              href="/dashboard/contatos"
              className={`px-4 py-2 rounded-md transition-colors ${
                pathname === "/dashboard/contatos"
                  ? "bg-white text-blue-700"
                  : "hover:bg-blue-700 text-white hover:text-white"
              }`}
            >
              Contatos
            </Link>
            <Link
              href="/dashboard/relatorios"
              className={`px-4 py-2 rounded-md transition-colors ${
                pathname === "/dashboard/relatorios"
                  ? "bg-white text-blue-700"
                  : "hover:bg-blue-700 text-white hover:text-white"
              }`}
            >
              Relatórios
            </Link>
            <Link
              href="/dashboard/configuracoes"
              className={`px-4 py-2 rounded-md transition-colors ${
                pathname === "/dashboard/configuracoes"
                  ? "bg-white text-blue-700"
                  : "hover:bg-blue-700 text-white hover:text-white"
              }`}
            >
              Configurações
            </Link>
            <Link
              href="/dashboard/tags"
              className={`px-4 py-2 rounded-md transition-colors ${
                pathname === "/dashboard/tags"
                  ? "bg-white text-blue-700"
                  : "hover:bg-blue-700 text-white hover:text-white"
              }`}
            >
              Tags
            </Link>
            <Link
              href="/dashboard/mensagens-rapidas"
              className={`px-4 py-2 rounded-md transition-colors ${
                pathname === "/dashboard/mensagens-rapidas"
                  ? "bg-white text-blue-700"
                  : "hover:bg-blue-700 text-white hover:text-white"
              }`}
            >
              Mensagens rápidas
            </Link>
          </nav>

{/* Main content */}
      <main className="flex-1 bg-gray-50">{children}</main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/mensagens/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Search, Filter, Paperclip, Smile, Send, Mic, X, ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import Image from "next/image"
import QuickMessagesModal from "@/components/quick-messages-modal"
import CustomerInfo from "@/components/customer-info"

// Sample data
const conversations = [
  {
    id: 1,
    name: "Gabriel Silva",
    message: "Boa tarde, preciso de uma informação",
    time: "13:30",
    unread: true,
    avatar: "/placeholder.svg?height=40&width=40",
  },
  {
    id: 2,
    name: "Ricardo",
    message: "Certo, já te retorno",
    time: "15:02",
    unread: false,
    avatar: "/placeholder.svg?height=40&width=40",
    verified: true,
  },
  {
    id: 3,
    name: "Patrícia Pereira",
    message: "Preciso de uma informação",
    time: "09:10",
    unread: false,
    avatar: "/placeholder.svg?height=40&width=40",
  },
]

const messages = [
  {
    id: 1,
    content: "Bom dia, gostaria de uma informação. Vocês tem bateria Moto G7?",
    time: "18:12",
    sender: "customer",
    read: true,
  },
  {
    id: 2,
    content:
      "Lamento informar, mas atualmente estamos sem estoque para a Bateria Moto G7 Play. Temos algumas outras opções de bateria disponíveis para outros modelos de Motorola, você precisa de alguma outra peça ou tem interesse em outro modelo de celular?",
    time: "18:16",
    sender: "agent",
    read: true,
  },
]

export default function MensagensPage() {
  const [showQuickMessages, setShowQuickMessages] = useState(false)
  const [showCustomerInfo, setShowCustomerInfo] = useState(true)
  const [isCustomerInfoCollapsed, setIsCustomerInfoCollapsed] = useState(false)
  const [messageInput, setMessageInput] = useState("")

return (
    <div className="flex h-[calc(100vh-64px)]">
      {/* Left sidebar - Chat list */}
      <div className="w-80 border-r bg-white flex flex-col">
        <div className="p-4 border-b">
          <div className="relative">
            <Input type="text" placeholder="Pesquisar" className="pl-10" />
            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
            <Button variant="ghost" size="icon" className="absolute right-2 top-2">
              <Filter className="h-5 w-5" />
            </Button>
          </div>
        </div>

<Tabs defaultValue="hoje" className="flex-1">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="hoje">Hoje</TabsTrigger>
            <TabsTrigger value="semana">Essa semana</TabsTrigger>
            <TabsTrigger value="mes">Esse mês</TabsTrigger>
          </TabsList>

<TabsContent value="hoje" className="m-0">
            <div className="divide-y">
              {conversations.map((chat) => (
                <div key={chat.id} className="p-4 hover:bg-gray-50 cursor-pointer">
                  <div className="flex items-center gap-3">
                    <div className="relative">
                      <Image
                        src={chat.avatar || "/placeholder.svg"}
                        alt={chat.name}
                        width={40}
                        height={40}
                        className="rounded-full"
                      />
                      {chat.verified && (
                        <div className="absolute -bottom-1 -right-1 bg-blue-500 rounded-full p-1">
                          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="4">
                            <polyline points="20 6 9 17 4 12" />
                          </svg>
                        </div>
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex justify-between items-start">
                        <p className="font-medium truncate">{chat.name}</p>
                        <span className="text-sm text-gray-500 flex-shrink-0">{chat.time}</span>
                      </div>
                      <p className="text-sm text-gray-600 truncate">{chat.message}</p>
                    </div>
                    {chat.unread && <div className="w-2 h-2 bg-red-500 rounded-full flex-shrink-0" />}
                  </div>
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </div>

{/* Center - Chat area */}
      <div className="flex-1 flex flex-col bg-gray-50">
        {/* Chat header */}
        <div className="p-4 bg-white border-b flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Image
              src="/placeholder.svg?height=48&width=48"
              alt="Company Logo"
              width={48}
              height={48}
              className="rounded-full"
            />
            <div>
              <h2 className="font-semibold">Papaléguas Mix</h2>
              <div className="flex items-center gap-2">
                <span className="text-sm text-gray-600">Patrícia Pereira</span>
                <Badge variant="secondary" className="bg-blue-100 text-blue-800">
                  Ronaldo atendimento
                </Badge>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" onClick={() => setShowCustomerInfo(!showCustomerInfo)}>
              <X className="h-5 w-5" />
            </Button>
          </div>
        </div>

{/* Chat messages */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          <div className="bg-blue-100 text-blue-800 text-sm p-2 rounded text-center">
            Início do Chamado - Atendimento (Fila) - 15/02/2025 13:32:45
          </div>

{messages.map((message) => (
            <div key={message.id} className={`flex ${message.sender === "customer" ? "justify-start" : "justify-end"}`}>
              <div
                className={`max-w-[70%] rounded-lg p-3 ${
                  message.sender === "customer" ? "bg-white" : "bg-blue-600 text-white"
                }`}
              >
                <p>{message.content}</p>
                <div
                  className={`text-xs mt-1 flex justify-end items-center gap-1 ${
                    message.sender === "customer" ? "text-gray-500" : "text-blue-200"
                  }`}
                >
                  {message.time}
                  {message.read && (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Message input */}
        <div className="p-4 bg-white border-t">
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon">
              <Paperclip className="h-5 w-5" />
            </Button>
            <Button variant="ghost" size="icon">
              <Smile className="h-5 w-5" />
            </Button>
            <Input
              type="text"
              placeholder="Digite uma mensagem..."
              value={messageInput}
              onChange={(e) => setMessageInput(e.target.value)}
              className="flex-1"
            />
            <Button variant="ghost" size="icon" onClick={() => setShowQuickMessages(true)}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
                <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
              </svg>
            </Button>
            <Button variant="ghost" size="icon">
              <Mic className="h-5 w-5" />
            </Button>
            <Button>
              <Send className="h-5 w-5" />
            </Button>
          </div>
        </div>
      </div>

{/* Right sidebar - Customer info */}
      {showCustomerInfo && (
        <div className={`bg-white border-l transition-all duration-300 ${isCustomerInfoCollapsed ? "w-20" : "w-80"}`}>
          <div className="p-4 border-b flex justify-between items-center">
            <h2 className={`font-semibold ${isCustomerInfoCollapsed ? "hidden" : "block"}`}>Informações</h2>
            <div className="flex gap-2">
              <Button variant="ghost" size="icon" onClick={() => setIsCustomerInfoCollapsed(!isCustomerInfoCollapsed)}>
                {isCustomerInfoCollapsed ? <ChevronLeft className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
              </Button>
              <Button variant="ghost" size="icon" onClick={() => setShowCustomerInfo(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>
          </div>
          {!isCustomerInfoCollapsed && <CustomerInfo />}
        </div>
      )}

{/* Quick messages modal */}
      {showQuickMessages && <QuickMessagesModal onClose={() => setShowQuickMessages(false)} />}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/configuracoes/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Check } from "lucide-react"
import WhatsAppModal from "@/components/modals/whatsapp-modal"

export default function ConfiguracoesPage() {
  const [activeTab, setActiveTab] = useState("conexoes")
  const [showQRCode, setShowQRCode] = useState(false)

return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">Configurações</h1>

<div className="flex gap-8">
        {/* Left sidebar */}
        <div className="w-64">
          <div className="space-y-1">
            <Button
              variant={activeTab === "conexoes" ? "default" : "ghost"}
              className="w-full justify-start"
              onClick={() => setActiveTab("conexoes")}
            >
              Conexões
            </Button>
            <Button
              variant={activeTab === "plano" ? "default" : "ghost"}
              className="w-full justify-start"
              onClick={() => setActiveTab("plano")}
            >
              Seu plano
            </Button>
            <Button
              variant={activeTab === "notificacoes" ? "default" : "ghost"}
              className="w-full justify-start"
              onClick={() => setActiveTab("notificacoes")}
            >
              Notificações
            </Button>
          </div>
        </div>

{/* Main content */}
        <div className="flex-1">
          {activeTab === "conexoes" && (
            <Card className="p-6">
              <div className="space-y-8">
                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <h2 className="text-xl font-semibold">Conectar com WhatsApp</h2>
                    <svg viewBox="0 0 24 24" className="w-6 h-6 text-green-500" fill="currentColor">
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
                    </svg>
                  </div>
                  <p className="text-gray-600 mb-4">Conecte seu WhatsApp para começar a usar o chatbot</p>
                  <Button className="bg-blue-700 hover:bg-blue-800" onClick={() => setShowQRCode(true)}>
                    Conectar agora
                  </Button>
                </div>

<div>
                  <div className="flex items-center gap-2 mb-2">
                    <h2 className="text-xl font-semibold">Conectado com WhatsApp</h2>
                    <svg viewBox="0 0 24 24" className="w-6 h-6 text-green-500" fill="currentColor">
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
                    </svg>
                  </div>
                  <p className="text-gray-600 mb-4">Seu chatbot já está conectado com o número (00) 000000000</p>
                  <Button variant="outline" className="text-blue-700 border-blue-700">
                    Desconectar
                  </Button>
                </div>
              </div>
            </Card>
          )}

{activeTab === "plano" && (
            <Card className="p-6">
              <div className="space-y-8">
                <div>
                  <div className="flex items-center gap-2 mb-4">
                    <p className="text-gray-600">
                      Faltam <span className="text-blue-700 font-medium">15 dias</span> para o vencimento
                    </p>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div className="bg-blue-700 h-2 rounded-full w-3/4"></div>
                  </div>
                </div>

<div className="bg-gray-50 p-6 rounded-lg">
                  <div className="flex justify-between items-start mb-4">
                    <div>
                      <h3 className="text-xl font-semibold">Plano Premium</h3>
                      <p className="text-2xl font-bold text-blue-700 mt-2">
                        R$ 99,90<span className="text-sm text-gray-600 font-normal">/mês</span>
                      </p>
                    </div>
                  </div>

<ul className="space-y-2 mb-6">
                    {["Benefício 1", "Benefício 2", "Benefício 3"].map((benefit, index) => (
                      <li key={index} className="flex items-center gap-2">
                        <Check className="h-5 w-5 text-blue-700" />
                        <span>{benefit}</span>
                      </li>
                    ))}
                  </ul>

<Button className="w-full bg-blue-700 hover:bg-blue-800">Alterar meu plano</Button>
                </div>

<div>
                  <h3 className="text-xl font-semibold mb-4">Pagamento</h3>
                  <div className="space-y-2">
                    <p>
                      <span className="font-medium">Forma de pagamento:</span> Boleto
                    </p>
                    <p>
                      <span className="font-medium">Status:</span> Pendente
                    </p>
                  </div>
                </div>
              </div>
            </Card>
          )}

{activeTab === "notificacoes" && (
            <Card className="p-6">
              <div className="space-y-6">
                <div className="flex items-center space-x-2">
                  <Checkbox id="newMessages" defaultChecked />
                  <label
                    htmlFor="newMessages"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Novas mensagens
                  </label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="planExpiration" defaultChecked />
                  <label
                    htmlFor="planExpiration"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Alertas sobre o vencimento do seu plano atual
                  </label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="connectionStatus" defaultChecked />
                  <label
                    htmlFor="connectionStatus"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Alertas sobre o status das suas conexões (ex: desconexão, falha)
                  </label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="systemUpdates" defaultChecked />
                  <label
                    htmlFor="systemUpdates"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Receba novidades sobre atualizações do sistema e novos recursos
                  </label>
                </div>
              </div>
            </Card>
          )}
        </div>
      </div>
      {showQRCode && <WhatsAppModal onClose={() => setShowQRCode(false)} />}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/modals/whatsapp-modal.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { X } from "lucide-react"

interface WhatsAppModalProps {
  onClose: () => void
}

export default function WhatsAppModal({ onClose }: WhatsAppModalProps) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">Conectar</h2>
            <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
              <X className="h-6 w-6" />
            </button>
          </div>

<p className="text-gray-600 mb-6">Leia o QR Code com seu WhatsApp para conectar</p>