[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.488 0.243 264.376); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.488 0.243 264.376); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.9 0 0); --input: oklch(0.9 0 0); --ring: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --success: oklch(0.696 0.17 162.48); --warning: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.488 0.243 264.376); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.22 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.22 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.488 0.243 264.376); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.22 0 0); --input: oklch(0.22 0 0); --ring: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --success: oklch(0.696 0.17 162.48); --warning: oklch(0.769 0.188 70.08); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-success: var(--success); --color-warning: var(--warning); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/sales-chart.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Area, AreaChart, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const data = [ { month: "Jan", sales: 186000 }, { month: "Fev", sales: 305000 }, { month: "Mar", sales: 237000 }, { month: "Abr", sales: 273000 }, { month: "Mai", sales: 409000 }, { month: "Jun", sales: 514000 }, ] export function SalesChart() { return ( Vendas - Últimos 6 Meses Evolução do faturamento total `R$ ${(value / 1000).toFixed(0)}k`} /> `R$ ${Number(value).toLocaleString("pt-BR")}`} />} /> ) } [V0_FILE]typescriptreact:file="components/channel-comparison.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Bar, BarChart, CartesianGrid, XAxis, YAxis, ResponsiveContainer, Legend } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const data = [ { month: "Jan", ecommerce: 120000, pdv: 66000 }, { month: "Fev", ecommerce: 195000, pdv: 110000 }, { month: "Mar", ecommerce: 147000, pdv: 90000 }, { month: "Abr", ecommerce: 173000, pdv: 100000 }, { month: "Mai", ecommerce: 259000, pdv: 150000 }, { month: "Jun", ecommerce: 314000, pdv: 200000 }, ] export function ChannelComparison() { return ( E-commerce vs PDV Comparação de vendas por canal `R$ ${(value / 1000).toFixed(0)}k`} /> `R$ ${Number(value).toLocaleString("pt-BR")}`} />} /> ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/top-sites.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { TrendingUp, ExternalLink } from "lucide-react" import { Badge } from "@/components/ui/badge" import { useState, useEffect } from "react" const generateTopSites = () => [ { name: "Loja Fashion Store", visits: 45000 + Math.floor(Math.random() * 1000), change: `+${(12 + Math.random() * 3).toFixed(1)}%`, trend: "up", }, { name: "Tech Gadgets BR", visits: 38000 + Math.floor(Math.random() * 1000), change: `+${(8 + Math.random() * 2).toFixed(1)}%`, trend: "up", }, { name: "Casa & Decoração", visits: 32000 + Math.floor(Math.random() * 1000), change: `+${(15 + Math.random() * 3).toFixed(1)}%`, trend: "up", }, { name: "Sports Equipment", visits: 28000 + Math.floor(Math.random() * 1000), change: `+${(5 + Math.random() * 2).toFixed(1)}%`, trend: "up", }, { name: "Beauty & Care", visits: 24000 + Math.floor(Math.random() * 1000), change: `+${(9 + Math.random() * 2).toFixed(1)}%`, trend: "up", }, ] export function TopSites() { const [topSites, setTopSites] = useState(generateTopSites()) useEffect(() => { const interval = setInterval(() => { setTopSites(generateTopSites()) }, 30000) // 30 seconds return () => clearInterval(interval) }, []) return ( Top 5 Sites Mais Visitados Últimas 24 horas

{topSites.map((site, index) => (

{index + 1}

{site.name}

{site.visits.toLocaleString("pt-BR")} visitas

{site.change}

))}

) } [V0_FILE]typescriptreact:file="app/lojas/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { LojasContent } from "@/components/lojas-content" export default function LojasPage() { return (

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isEdit="true" isMerged="true" "use client" import { Store, Bell, Settings, LayoutDashboard, Package } from "lucide-react" import { Button } from "@/components/ui/button" import { useState } from "react" import { cn } from "@/lib/utils" import Link from "next/link" export function DashboardHeader() { const [activeMenu, setActiveMenu] = useState("dashboard") const menuItems = [ { id: "dashboard", label: "Dashboard", icon: LayoutDashboard, href: "/" }, { id: "lojas", label: "Lojas", icon: Store, href: "/lojas" }, { id: "aplicativos", label: "Aplicativos", icon: Package, href: "/aplicativos" }, { id: "configuracoes", label: "Configurações", icon: Settings, href: "/configuracoes" }, ] return (

E-commerce Hub

Plataforma Concentradora

) } [V0_FILE]typescriptreact:file="app/lojas/[id]/editar/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { EditLojaForm } from "@/components/edit-loja-form" export default function EditLojaPage({ params }: { params: { id: string } }) { return (

) } [V0_FILE]typescriptreact:file="app/lojas/nova/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { EditLojaForm } from "@/components/edit-loja-form" export default function NovaLojaPage() { return (

Nova Loja

Preencha os dados para cadastrar uma nova loja na plataforma

) } [V0_FILE]typescriptreact:file="app/lojas/[id]/visualizar/page.tsx" isMerged="true" import { ViewLojaContent } from "@/components/view-loja-content" export default function VisualizarLojaPage({ params }: { params: { id: string } }) { return } [V0_FILE]typescriptreact:file="components/view-loja-content.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft, Save } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import Link from "next/link" interface Loja { numero: string nome: string cnpj: string razaoSocial: string slug: string urlSite: string urlTemporaria: string email: string telefone: string cep: string endereco: string numero: string complemento: string bairro: string cidade: string estado: string responsavel: string emailResponsavel: string telefoneResponsavel: string valorPlano: number servicosExtras: Array<{ nome: string; valor: number }> totalMensal: number status: "ativo" | "inativo" statusPagamento: "pago" | "pendente" | "atrasado" observacoes: string } interface Pagamento { id: string data: string valor: number status: "pago" | "pendente" | "atrasado" metodoPagamento: string referencia: string } // Dados simulados const getLojaById = (id: string): Loja => { return { numero: id, nome: "Loja Fashion Store", cnpj: "12.345.678/0001-90", razaoSocial: "Fashion Store Comércio Ltda", slug: "fashionstore", urlSite: "fashionstore.com.br", urlTemporaria: "fashionstore.temp.loja.com.br", email: "contato@fashionstore.com.br", telefone: "(11) 98765-4321", cep: "01310-100", endereco: "Avenida Paulista", numero: "1578", complemento: "Loja 10", bairro: "Bela Vista", cidade: "São Paulo", estado: "SP", responsavel: "João Silva", emailResponsavel: "joao@fashionstore.com.br", telefoneResponsavel: "(11) 91234-5678", valorPlano: 299.9, servicosExtras: [ { nome: "API Personalizada", valor: 100.0 }, { nome: "Suporte Premium", valor: 50.0 }, ], totalMensal: 449.9, status: "ativo", statusPagamento: "pago", observacoes: "Cliente VIP. Sempre paga em dia. Possui integração customizada com ERP.", } } const getPagamentosByLojaId = (id: string): Pagamento[] => { return [ { id: "1", data: "2026-01-05", valor: 449.9, status: "pago", metodoPagamento: "Cartão de Crédito", referencia: "PAG-2026-01-001", }, { id: "2", data: "2025-12-05", valor: 449.9, status: "pago", metodoPagamento: "Boleto", referencia: "PAG-2025-12-001", }, { id: "3", data: "2025-11-05", valor: 449.9, status: "pago", metodoPagamento: "Cartão de Crédito", referencia: "PAG-2025-11-001", }, { id: "4", data: "2025-10-05", valor: 449.9, status: "pago", metodoPagamento: "PIX", referencia: "PAG-2025-10-001", }, { id: "5", data: "2025-09-05", valor: 449.9, status: "pago", metodoPagamento: "Cartão de Crédito", referencia: "PAG-2025-09-001", }, { id: "6", data: "2025-08-05", valor: 449.9, status: "pago", metodoPagamento: "Boleto", referencia: "PAG-2025-08-001", }, ] } export function ViewLojaContent({ lojaId }: { lojaId: string }) { const [loja, setLoja] = useState(null) const [pagamentos, setPagamentos] = useState([]) const [observacoes, setObservacoes] = useState("") const [isSaving, setIsSaving] = useState(false) const [showSuccess, setShowSuccess] = useState(false) useEffect(() => { const lojaData = getLojaById(lojaId) setLoja(lojaData) setObservacoes(lojaData.observacoes) setPagamentos(getPagamentosByLojaId(lojaId)) }, [lojaId]) const formatCurrency = (value: number) => { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", }).format(value) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("pt-BR") } const getPaymentStatusVariant = (status: "pago" | "pendente" | "atrasado") => { switch (status) { case "pago": return { label: "Pago", className: "bg-green-500 text-white" } case "pendente": return { label: "Pendente", className: "bg-yellow-500 text-white" } case "atrasado": return { label: "Atrasado", className: "bg-red-500 text-white" } } } const handleSaveObservacoes = async () => { setIsSaving(true) // Simular salvamento await new Promise((resolve) => setTimeout(resolve, 1000)) setIsSaving(false) setShowSuccess(true) setTimeout(() => setShowSuccess(false), 3000) } if (!loja) { return

Carregando...

} const totalExtras = loja.servicosExtras.reduce((sum, servico) => sum + servico.valor, 0) const paymentStatus = getPaymentStatusVariant(loja.statusPagamento) return (

{/* Header */}

Visualizar Loja #{loja.numero}

{loja.nome}

{loja.status === "ativo" ? "Ativo" : "Inativo"} {paymentStatus.label}

{/* Informações da Loja */}

{/* Informações Básicas */} Informações Básicas

Nome da Loja

{loja.nome}

Razão Social

{loja.razaoSocial}

CNPJ

{loja.cnpj}

Slug / Nome da Base

{loja.slug}

URL do Site

{loja.urlSite}

URL Temporária

{loja.urlTemporaria}

{/* Contato */} Contato

E-mail

{loja.email}

Telefone

{loja.telefone}

Responsável

{loja.responsavel}

E-mail do Responsável

{loja.emailResponsavel}

Telefone do Responsável

{loja.telefoneResponsavel}

{/* Endereço */} Endereço

CEP

{loja.cep}

Endereço

{loja.endereco}, {loja.numero}

Complemento

{loja.complemento || "-"}

Bairro

{loja.bairro}

Cidade

{loja.cidade}

Estado

{loja.estado}

{/* Plano e Valores */} Plano e Valores

Valor do Plano

{formatCurrency(loja.valorPlano)}

Serviços Extras

{loja.servicosExtras.map((servico, index) => (

{servico.nome} {formatCurrency(servico.valor)}

))}

Total de Extras {formatCurrency(totalExtras)}

Total Mensal {formatCurrency(loja.totalMensal)}

{/* Histórico de Pagamentos */} Histórico de Pagamentos

Referência Data Método Valor Status {pagamentos.map((pagamento) => { const status = getPaymentStatusVariant(pagamento.status) return ( {pagamento.referencia} {formatDate(pagamento.data)} {pagamento.metodoPagamento} {formatCurrency(pagamento.valor)} {status.label} ) })}

{/* Observações */} Observações

setObservacoes(e.target.value)}
            rows={6}
            className="resize-none"
          />
          <div className="flex items-center justify-end gap-3 mt-4">
            {showSuccess && (
              <span className="text-sm text-green-600 dark:text-green-400 font-medium">
                Observações salvas com sucesso!
              </span>
            )}
            <Button onClick={handleSaveObservacoes} disabled={isSaving} className="gap-2">
              {isSaving ? (
                <>
                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-background border-t-transparent" />
                  Salvando...
                </>
              ) : (
                <>
                  <Save className="h-4 w-4" />
                  Salvar Observações
                </>
              )}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/aplicativos/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Construction } from "lucide-react"
import { Card } from "@/components/ui/card"

export default function AplicativosPage() {
  return (
    <div className="min-h-screen bg-background">
      <DashboardHeader />
      <main className="container mx-auto px-4 py-8">
        <Card className="flex flex-col items-center justify-center py-24">
          <div className="flex h-24 w-24 items-center justify-center rounded-full bg-muted mb-6">
            <Construction className="h-12 w-12 text-muted-foreground" />
          </div>
          <h1 className="text-3xl font-bold text-foreground mb-2">Página em Construção</h1>
          <p className="text-muted-foreground text-center max-w-md">
            A página de Aplicativos está sendo desenvolvida. Em breve você poderá gerenciar todos os aplicativos
            integrados à plataforma.
          </p>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/configuracoes/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Construction } from "lucide-react"
import { Card } from "@/components/ui/card"

export default function ConfiguracoesPage() {
  return (
    <div className="min-h-screen bg-background">
      <DashboardHeader />
      <main className="container mx-auto px-4 py-8">
        <Card className="flex flex-col items-center justify-center py-24">
          <div className="flex h-24 w-24 items-center justify-center rounded-full bg-muted mb-6">
            <Construction className="h-12 w-12 text-muted-foreground" />
          </div>
          <h1 className="text-3xl font-bold text-foreground mb-2">Página em Construção</h1>
          <p className="text-muted-foreground text-center max-w-md">
            A página de Configurações está sendo desenvolvida. Em breve você poderá personalizar todas as configurações
            da plataforma.
          </p>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sales-metrics.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { TrendingUp, TrendingDown, DollarSign, ShoppingCart, CreditCard, Zap, Package } from "lucide-react"
import { useState, useEffect } from "react"

const generateMetrics = () => [
  {
    title: "GMV Hoje",
    value: `R$ ${(45000 + Math.random() * 5000).toFixed(2).replace(".", ",")}`,
    change: `+${(12 + Math.random() * 3).toFixed(1)}%`,
    trend: "up",
    icon: DollarSign,
  },
  {
    title: "GMV Ontem",
    value: `R$ ${(40000 + Math.random() * 3000).toFixed(2).replace(".", ",")}`,
    change: `+${(8 + Math.random() * 2).toFixed(1)}%`,
    trend: "up",
    icon: ShoppingCart,
  },
  {
    title: "GMV Últimos 6 Meses",
    value: `R$ ${(2800000 + Math.random() * 100000).toFixed(2).replace(".", ",")}`,
    change: `+${(23 + Math.random() * 5).toFixed(1)}%`,
    trend: "up",
    icon: TrendingUp,
  },
  {
    title: "GMV Últimos 12 Meses",
    value: `R$ ${(5200000 + Math.random() * 100000).toFixed(2).replace(".", ",")}`,
    change: `+${(18 + Math.random() * 3).toFixed(1)}%`,
    trend: "up",
    icon: CreditCard,
  },
  {
    title: "GMV Últimos 30 Dias",
    value: `R$ ${(3500000 + Math.random() * 150000).toFixed(2).replace(".", ",")}`,
    change: `+${(15 + Math.random() * 4).toFixed(1)}%`,
    trend: "up",
    icon: Zap,
    subtitle: "TPV Pagarme",
    subtitleValue: `R$ ${(1800000 + Math.random() * 80000).toFixed(2).replace(".", ",")}`,
  },
  {
    title: "Pedidos Hoje",
    value: `${Math.floor(150 + Math.random() * 50)}`,
    change: `+${(10 + Math.random() * 5).toFixed(1)}%`,
    trend: "up",
    icon: Package,
  },
]

export function SalesMetrics() {
  const [metrics, setMetrics] = useState(generateMetrics())

useEffect(() => {
    const interval = setInterval(() => {
      setMetrics(generateMetrics())
    }, 30000) // 30 seconds

return () => clearInterval(interval)
  }, [])

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-6">
      {metrics.map((metric) => {
        const Icon = metric.icon
        const TrendIcon = metric.trend === "up" ? TrendingUp : TrendingDown

return (
          <Card key={metric.title}>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">{metric.title}</CardTitle>
              <Icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-foreground">{metric.value}</div>
              {metric.subtitle && (
                <div className="mt-3 pt-3 border-t border-border">
                  <div className="text-xs text-muted-foreground mb-1">{metric.subtitle}</div>
                  <div className="text-lg font-semibold text-foreground">{metric.subtitleValue}</div>
                </div>
              )}
              <div className="mt-1 flex items-center gap-1 text-xs">
                <TrendIcon className={`h-3 w-3 ${metric.trend === "up" ? "text-success" : "text-destructive"}`} />
                <span className={metric.trend === "up" ? "text-success" : "text-destructive"}>{metric.change}</span>
                <span className="text-muted-foreground">vs período anterior</span>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { SalesMetrics } from "@/components/sales-metrics"
import { OnlineUsers } from "@/components/online-users"
import { TopSites } from "@/components/top-sites"
import { BrazilHeatmap } from "@/components/brazil-heatmap"
import { SitesList } from "@/components/sites-list"

export default function DashboardPage() {
  return (
    <div className="min-h-screen bg-background">
      <DashboardHeader />

<main className="container mx-auto px-4 py-6 space-y-6">
        {/* Sales Metrics Grid */}
        <SalesMetrics />

{/* Real-time Data Section */}
        <div className="grid gap-6 lg:grid-cols-3">
          <OnlineUsers />
          <TopSites />
          <BrazilHeatmap />
        </div>

{/* Sites List */}
        <SitesList />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/brazil-heatmap.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { TrendingUp } from "lucide-react"
import { useState, useEffect } from "react"

interface CityData {
  name: string
  state: string
  sales: number
  orders: number
  percentage: number
}

const generateCityData = (): CityData[] => {
  const cities = [
    { name: "São Paulo", state: "SP" },
    { name: "Rio de Janeiro", state: "RJ" },
    { name: "Belo Horizonte", state: "MG" },
    { name: "Curitiba", state: "PR" },
    { name: "Brasília", state: "DF" },
  ]

const total = 1000000 + Math.random() * 500000

return cities.map((city, index) => {
    const percentage = [35, 25, 18, 12, 10][index]
    const sales = total * (percentage / 100)
    const orders = Math.floor(50 + Math.random() * 150)

return {
      ...city,
      sales: Math.floor(sales),
      orders,
      percentage,
    }
  })
}

const getRankColor = (rank: number) => {
  if (rank === 1) return "bg-yellow-500"
  if (rank === 2) return "bg-gray-400"
  if (rank === 3) return "bg-orange-600"
  return "bg-blue-400"
}

export function BrazilHeatmap() {
  const [cities, setCities] = useState<CityData[]>(generateCityData())

useEffect(() => {
    const interval = setInterval(() => {
      setCities(generateCityData())
    }, 30000)

return () => clearInterval(interval)
  }, [])

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-3">
        <CardTitle className="text-base font-semibold">Top 5 Cidades - Últimos 30 dias</CardTitle>
        <TrendingUp className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {cities.map((city, index) => (
            <div key={city.name} className="space-y-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div
                    className={`w-6 h-6 rounded-full ${getRankColor(index + 1)} flex items-center justify-center text-white text-xs font-bold`}
                  >
                    {index + 1}
                  </div>
                  <div>
                    <span className="font-medium text-foreground text-sm">{city.name}</span>
                    <span className="text-xs text-muted-foreground ml-1">({city.state})</span>
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-sm font-semibold text-foreground">
                    {city.sales.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })}
                  </div>
                  <div className="text-xs text-muted-foreground">{city.orders} pedidos</div>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                  <div
                    className="h-full bg-primary transition-all duration-500"
                    style={{ width: `${city.percentage}%` }}
                  />
                </div>
                <span className="text-xs font-medium text-muted-foreground w-10 text-right">{city.percentage}%</span>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/sites-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"

const now = new Date()
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())

const generateOrders = () => {
  const stores = [
    "Loja Fashion Store",
    "Tech Gadgets BR",
    "Casa & Decoração",
    "Sports Equipment",
    "Beauty & Care",
    "Pet Shop Online",
  ]
  const paymentMethods = ["Cartão de Crédito", "PIX", "Boleto", "Cartão de Débito"]
  const statuses = ["approved", "pending", "processing"]
  const customerNames = [
    "João Silva",
    "Maria Santos",
    "Pedro Oliveira",
    "Ana Costa",
    "Carlos Ferreira",
    "Juliana Lima",
    "Roberto Alves",
    "Fernanda Souza",
    "Lucas Pereira",
    "Patricia Rodrigues",
  ]

return Array.from({ length: 25 }, (_, i) => ({
    orderNumber: `#ORD-2024-${String(i + 1).padStart(3, "0")}`,
    storeName: stores[Math.floor(Math.random() * stores.length)],
    customerName: customerNames[Math.floor(Math.random() * customerNames.length)],
    value: 300 + Math.random() * 4000,
    paymentMethod: paymentMethods[Math.floor(Math.random() * paymentMethods.length)],
    paymentStatus: statuses[Math.floor(Math.random() * statuses.length)],
    date: new Date(now.getTime() - i * 30 * 60 * 1000), // Orders every 30 minutes
  })).filter((order) => order.date >= startOfToday)
}

const getPaymentStatusBadge = (status: string) => {
  switch (status) {
    case "approved":
      return {
        variant: "default" as const,
        label: "Aprovado",
        className: "bg-success/10 text-success hover:bg-success/20",
      }
    case "pending":
      return {
        variant: "secondary" as const,
        label: "Pendente",
        className: "bg-warning/10 text-warning hover:bg-warning/20",
      }
    case "processing":
      return {
        variant: "secondary" as const,
        label: "Processando",
        className: "bg-blue-500/10 text-blue-500 hover:bg-blue-500/20",
      }
    case "failed":
      return { variant: "destructive" as const, label: "Falhou", className: "" }
    default:
      return { variant: "secondary" as const, label: status, className: "" }
  }
}

const formatDateTime = (date: Date) => {
  return new Intl.DateTimeFormat("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(date)
}

export function SitesList() {
  const [selectedStore, setSelectedStore] = useState<string>("all")
  const [orders, setOrders] = useState(generateOrders())
  const [searchTerm, setSearchTerm] = useState("")

useEffect(() => {
    const interval = setInterval(() => {
      setOrders(generateOrders())
    }, 30000) // 30 seconds

return () => clearInterval(interval)
  }, [])

const uniqueStores = Array.from(new Set(orders.map((order) => order.storeName)))

const filteredOrders = orders.filter((order) => {
    const matchesStore = selectedStore === "all" || order.storeName === selectedStore
    const matchesSearch =
      searchTerm === "" ||
      order.customerName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase())
    return matchesStore && matchesSearch
  })

const handleStoreChange = (value: string) => {
    setSelectedStore(value)
  }

const handleSearchChange = (value: string) => {
    setSearchTerm(value)
  }

return (
    <Card>
      <CardHeader>
        <div className="flex items-start justify-between gap-4">
          <div>
            <CardTitle>Últimas Vendas</CardTitle>
            <CardDescription>Todas as vendas de hoje</CardDescription>
          </div>
          <div className="flex gap-2">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                type="text"
                placeholder="Buscar por cliente ou pedido..."
                value={searchTerm}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="w-[250px] pl-9"
              />
            </div>
            <Select value={selectedStore} onValueChange={handleStoreChange}>
              <SelectTrigger className="w-[200px]">
                <SelectValue placeholder="Filtrar por loja" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as lojas</SelectItem>
                {uniqueStores.map((store) => (
                  <SelectItem key={store} value={store}>
                    {store}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border">
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Número do Pedido</th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Data e Hora</th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Cliente</th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Nome da Loja</th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Valor do Pedido</th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Forma de Pagamento</th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Status de Pagamento</th>
              </tr>
            </thead>
            <tbody>
              {filteredOrders.map((order) => {
                const statusBadge = getPaymentStatusBadge(order.paymentStatus)

return (
                  <tr key={order.orderNumber} className="border-b border-border last:border-0">
                    <td className="py-4">
                      <p className="font-mono text-sm font-medium text-foreground">{order.orderNumber}</p>
                    </td>
                    <td className="py-4">
                      <p className="text-sm text-muted-foreground">{formatDateTime(order.date)}</p>
                    </td>
                    <td className="py-4">
                      <p className="font-medium text-foreground">{order.customerName}</p>
                    </td>
                    <td className="py-4">
                      <p className="font-medium text-foreground">{order.storeName}</p>
                    </td>
                    <td className="py-4">
                      <p className="font-medium text-foreground">
                        R$ {order.value.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                      </p>
                    </td>
                    <td className="py-4">
                      <p className="text-foreground">{order.paymentMethod}</p>
                    </td>
                    <td className="py-4">
                      <Badge variant={statusBadge.variant} className={statusBadge.className}>
                        {statusBadge.label}
                      </Badge>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>

<div className="mt-4 border-t border-border pt-4">
          <p className="text-sm text-muted-foreground">
            Mostrando {filteredOrders.length} {filteredOrders.length === 1 ? "pedido" : "pedidos"} de hoje
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/online-users.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, Calendar, TrendingUp } from "lucide-react"
import { useEffect, useState } from "react"
import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

const generateLast5DaysData = () => [
  { day: "5 dias atrás", users: 1089 + Math.floor(Math.random() * 50) },
  { day: "4 dias atrás", users: 1156 + Math.floor(Math.random() * 50) },
  { day: "3 dias atrás", users: 1203 + Math.floor(Math.random() * 50) },
  { day: "2 dias atrás", users: 1178 + Math.floor(Math.random() * 50) },
  { day: "Ontem", users: 1234 + Math.floor(Math.random() * 50) },
  { day: "Hoje", users: 1247 + Math.floor(Math.random() * 50) },
]

export function OnlineUsers() {
  const [count, setCount] = useState(1247)
  const [chartData, setChartData] = useState(generateLast5DaysData())
  const [userStats, setUserStats] = useState({
    last30Days: 45892,
    last6Months: 287456,
    last12Months: 512340,
  })

useEffect(() => {
    const interval = setInterval(() => {
      setCount((prev) => prev + Math.floor(Math.random() * 10) - 4)
    }, 3000)

return () => clearInterval(interval)
  }, [])

useEffect(() => {
    const interval = setInterval(() => {
      setChartData(generateLast5DaysData())
      setUserStats({
        last30Days: 45892 + Math.floor(Math.random() * 500),
        last6Months: 287456 + Math.floor(Math.random() * 1000),
        last12Months: 512340 + Math.floor(Math.random() * 2000),
      })
    }, 30000)

return () => clearInterval(interval)
  }, [])

const yesterdayUsers = chartData[4].users
  const percentageChange = ((count - yesterdayUsers) / yesterdayUsers) * 100

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Users className="h-5 w-5" />
          Usuários Online
        </CardTitle>
        <CardDescription>Total em todos os sites da plataforma</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-baseline gap-2">
          <div className="text-5xl font-bold text-foreground">{count.toLocaleString("pt-BR")}</div>
          <div className="flex items-center gap-1">
            <div className="h-2 w-2 rounded-full bg-success animate-pulse" />
            <span className="text-sm text-muted-foreground">ao vivo</span>
          </div>
        </div>

<div className="mt-2">
          <span className={`text-sm font-medium ${percentageChange >= 0 ? "text-success" : "text-destructive"}`}>
            {percentageChange >= 0 ? "+" : ""}
            {percentageChange.toFixed(1)}%
          </span>
          <span className="text-sm text-muted-foreground"> vs ontem</span>
        </div>

<div className="mt-6 grid grid-cols-3 gap-3">
          <div className="rounded-lg bg-muted/50 p-3">
            <div className="flex items-center gap-1.5 text-muted-foreground mb-1">
              <Calendar className="h-3.5 w-3.5" />
              <span className="text-xs">Últimos 30 dias</span>
            </div>
            <div className="text-lg font-bold text-foreground">{userStats.last30Days.toLocaleString("pt-BR")}</div>
          </div>
          <div className="rounded-lg bg-muted/50 p-3">
            <div className="flex items-center gap-1.5 text-muted-foreground mb-1">
              <TrendingUp className="h-3.5 w-3.5" />
              <span className="text-xs">Últimos 6 meses</span>
            </div>
            <div className="text-lg font-bold text-foreground">{userStats.last6Months.toLocaleString("pt-BR")}</div>
          </div>
          <div className="rounded-lg bg-muted/50 p-3">
            <div className="flex items-center gap-1.5 text-muted-foreground mb-1">
              <TrendingUp className="h-3.5 w-3.5" />
              <span className="text-xs">Últimos 12 meses</span>
            </div>
            <div className="text-lg font-bold text-foreground">{userStats.last12Months.toLocaleString("pt-BR")}</div>
          </div>
        </div>

<div className="mt-6">
          <h4 className="text-sm font-medium text-foreground mb-3">Últimos 5 dias</h4>
          <ResponsiveContainer width="100%" height={120}>
            <AreaChart data={chartData}>
              <defs>
                <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
                </linearGradient>
              </defs>
              <XAxis
                dataKey="day"
                tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                tickLine={false}
                axisLine={false}
              />
              <YAxis
                tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                tickLine={false}
                axisLine={false}
                width={40}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: "hsl(var(--popover))",
                  border: "1px solid hsl(var(--border))",
                  borderRadius: "6px",
                  fontSize: "12px",
                }}
                labelStyle={{ color: "hsl(var(--foreground))" }}
              />
              <Area
                type="monotone"
                dataKey="users"
                stroke="hsl(var(--primary))"
                strokeWidth={2}
                fill="url(#colorUsers)"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>

<div className="mt-6 space-y-2">
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">Navegando</span>
            <span className="font-medium text-foreground">892</span>
          </div>
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">No carrinho</span>
            <span className="font-medium text-foreground">234</span>
          </div>
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">Finalizando compra</span>
            <span className="font-medium text-foreground">121</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/edit-loja-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft, Save, Plus, Trash2, Loader2, CheckCircle2, LinkIcon } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"

interface ServicoExtra {
  id: string
  nome: string
  valor: number
}

interface LojaData {
  numero: string
  nome: string
  slug: string
  urlSite: string
  cnpj: string
  razaoSocial: string
  inscricaoEstadual: string
  email: string
  telefone: string
  celular: string
  endereco: string
  numeroEndereco: string
  complemento: string
  bairro: string
  cidade: string
  estado: string
  cep: string
  valorPlano: number
  status: "ativo" | "inativo"
  tipoConta: "definitiva" | "teste"
  dataInicio: string
  responsavel: string
  emailResponsavel: string
}

export function EditLojaForm({ lojaId, mode = "edit" }: { lojaId?: string; mode?: "create" | "edit" }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [cnpjDuplicado, setCnpjDuplicado] = useState(false)
  const [lojasDuplicadas, setLojasDuplicadas] = useState<number>(0)
  const [slugsSalvos, setSlugsSalvos] = useState<string[]>([
    "fashionstore",
    "techshop",
    "beautysalon",
    "fooddelivery",
    "petshop",
  ])
  const [mostrarNovoSlug, setMostrarNovoSlug] = useState(false)
  const [novoSlug, setNovoSlug] = useState("")

const lojasExistentes = [
    { numero: "001", cnpj: "12.345.678/0001-90", razaoSocial: "Fashion Store Comércio Ltda" },
    { numero: "002", cnpj: "98.765.432/0001-10", razaoSocial: "Tech Shop Eletrônicos" },
    { numero: "003", cnpj: "11.222.333/0001-44", razaoSocial: "Beauty Salon Produtos" },
  ]

useEffect(() => {
    if (mode === "create") {
      const ultimoNumero = Math.max(...lojasExistentes.map((l) => Number.parseInt(l.numero)), 0)
      const proximoNumero = (ultimoNumero + 1).toString().padStart(3, "0")
      setLoja((prev) => ({ ...prev, numero: proximoNumero }))
    }
  }, [mode])

const [loja, setLoja] = useState<LojaData>(
    mode === "create"
      ? {
          numero: "",
          nome: "",
          slug: "",
          urlSite: "",
          cnpj: "",
          razaoSocial: "",
          inscricaoEstadual: "",
          email: "",
          telefone: "",
          celular: "",
          endereco: "",
          numeroEndereco: "",
          complemento: "",
          bairro: "",
          cidade: "",
          estado: "",
          cep: "",
          valorPlano: 0,
          status: "ativo",
          tipoConta: "teste",
          dataInicio: "",
          responsavel: "",
          emailResponsavel: "",
        }
      : {
          numero: lojaId || "",
          nome: "Loja Fashion Store",
          slug: "fashionstore",
          urlSite: "fashionstore.com.br",
          cnpj: "12.345.678/0001-90",
          razaoSocial: "Fashion Store Comércio Ltda",
          inscricaoEstadual: "123.456.789.012",
          email: "contato@fashionstore.com.br",
          telefone: "(11) 3456-7890",
          celular: "(11) 98765-4321",
          endereco: "Rua das Flores",
          numeroEndereco: "123",
          complemento: "Sala 45",
          bairro: "Centro",
          cidade: "São Paulo",
          estado: "SP",
          cep: "01234-567",
          valorPlano: 299.9,
          status: "ativo",
          tipoConta: "definitiva",
          dataInicio: "2024-01-15",
          responsavel: "João Silva",
          emailResponsavel: "joao.silva@fashionstore.com.br",
        },
  )

const [servicosExtras, setServicosExtras] = useState<ServicoExtra[]>(
    mode === "create"
      ? []
      : [
          { id: "1", nome: "SMS Marketing", valor: 50.0 },
          { id: "2", nome: "Integração WhatsApp", valor: 100.0 },
        ],
  )

const validarCNPJ = (cnpj: string) => {
    if (!cnpj || cnpj.length < 14) {
      setCnpjDuplicado(false)
      return
    }

const cnpjExistentes = lojasExistentes.filter((l) =>
      mode === "edit" ? l.cnpj === cnpj && l.numero !== lojaId : l.cnpj === cnpj,
    )

if (cnpjExistentes.length > 0) {
      setCnpjDuplicado(true)
      const numeroLojas = cnpjExistentes.length + 1
      setLojasDuplicadas(numeroLojas)

const razaoBase = loja.razaoSocial.replace(/ - \d+$/, "")
      setLoja((prev) => ({ ...prev, razaoSocial: `${razaoBase} - ${numeroLojas}` }))
    } else {
      setCnpjDuplicado(false)
      setLojasDuplicadas(0)
    }
  }

const handleChange = (field: keyof LojaData, value: string | number) => {
    setLoja((prev) => ({ ...prev, [field]: value }))

if (field === "cnpj") {
      validarCNPJ(value.toString())
    }
  }

const handleUrlSiteChange = (value: string) => {
    const cleanUrl = value.replace(/^https?:\/\//i, "").replace(/^www\./i, "")
    setLoja((prev) => ({ ...prev, urlSite: cleanUrl }))
  }

const adicionarServico = () => {
    const novoServico: ServicoExtra = {
      id: Date.now().toString(),
      nome: "",
      valor: 0,
    }
    setServicosExtras([...servicosExtras, novoServico])
  }

const removerServico = (id: string) => {
    setServicosExtras(servicosExtras.filter((servico) => servico.id !== id))
  }

const atualizarServico = (id: string, field: keyof ServicoExtra, value: string | number) => {
    setServicosExtras(servicosExtras.map((servico) => (servico.id === id ? { ...servico, [field]: value } : servico)))
  }

const adicionarNovoSlug = () => {
    if (novoSlug.trim() && !slugsSalvos.includes(novoSlug.trim())) {
      setSlugsSalvos([...slugsSalvos, novoSlug.trim()])
      setLoja((prev) => ({ ...prev, slug: novoSlug.trim() }))
      setNovoSlug("")
      setMostrarNovoSlug(false)
    }
  }

const totalExtras = servicosExtras.reduce((sum, servico) => sum + servico.valor, 0)
  const totalMensal = loja.valorPlano + totalExtras

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

await new Promise((resolve) => setTimeout(resolve, 2000))

setLoading(false)
    setSuccess(true)

setTimeout(() => {
      router.push("/lojas")
    }, 1500)
  }

const toggleStatus = () => {
    setLoja((prev) => ({
      ...prev,
      status: prev.status === "ativo" ? "inativo" : "ativo",
    }))
  }

const gerarUrlTemporaria = () => {
    if (loja.slug) {
      const slugLimpo = loja.slug.toLowerCase().replace(/[^a-z0-9]/g, "")
      const urlTemp = `${slugLimpo}.eflorista.app.br`
      setLoja((prev) => ({ ...prev, urlSite: urlTemp }))
    }
  }

return (
    <form onSubmit={handleSubmit}>
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/lojas">
            <Button type="button" variant="outline" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold">{mode === "create" ? "Nova Loja" : "Editar Loja"}</h1>
            {mode === "edit" && <p className="text-muted-foreground">Loja #{loja.numero}</p>}
          </div>
          {mode === "edit" && (
            <Badge variant={loja.status === "ativo" ? "default" : "destructive"}>
              {loja.status === "ativo" ? "Ativo" : "Inativo"}
            </Badge>
          )}
        </div>
        <div className="flex gap-3">
          {mode === "edit" && (
            <Button type="button" variant="outline" onClick={toggleStatus} disabled={loading}>
              {loja.status === "ativo" ? "Desativar Loja" : "Ativar Loja"}
            </Button>
          )}
          <Button type="submit" disabled={loading || success}>
            {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
            {success && <CheckCircle2 className="h-4 w-4 mr-2" />}
            {!loading && !success && <Save className="h-4 w-4 mr-2" />}
            {loading
              ? mode === "create"
                ? "Cadastrando loja..."
                : "Atualizando loja..."
              : success
                ? mode === "create"
                  ? "Loja cadastrada!"
                  : "Atualizações efetuadas!"
                : mode === "create"
                  ? "Cadastrar Loja"
                  : "Salvar Alterações"}
          </Button>
        </div>
      </div>

{success && (
        <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg flex items-center gap-3">
          <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
          <div>
            <p className="font-semibold text-green-900 dark:text-green-100">
              {mode === "create" ? "Loja cadastrada com sucesso!" : "Atualizações efetuadas com sucesso!"}
            </p>
            <p className="text-sm text-green-700 dark:text-green-300">Redirecionando para a lista de lojas...</p>
          </div>
        </div>
      )}

{cnpjDuplicado && (
        <div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg flex items-center gap-3">
          <div className="h-5 w-5 rounded-full bg-yellow-500 flex items-center justify-center text-white text-xs font-bold">
            !
          </div>
          <div>
            <p className="font-semibold text-yellow-900 dark:text-yellow-100">CNPJ já cadastrado</p>
            <p className="text-sm text-yellow-700 dark:text-yellow-300">
              Este CNPJ já existe no sistema. Um sufixo " - {lojasDuplicadas}" foi adicionado à razão social.
            </p>
          </div>
        </div>
      )}

{mode === "create" && (
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Identificação</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <Label htmlFor="numero">Número da Loja *</Label>
              <Input
                id="numero"
                value={loja.numero}
                placeholder="Gerado automaticamente"
                required
                disabled
                className="bg-muted"
              />
              <p className="text-xs text-muted-foreground">Número gerado automaticamente em ordem crescente</p>
            </div>
          </CardContent>
        </Card>
      )}

<div className="grid gap-6">
        {/* Informações Básicas */}
        <Card>
          <CardHeader>
            <CardTitle>Informações Básicas</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="nome">Nome da Loja *</Label>
                <Input
                  id="nome"
                  value={loja.nome}
                  onChange={(e) => handleChange("nome", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="slug">Slug / Nome da Base *</Label>
                {!mostrarNovoSlug ? (
                  <div className="flex gap-2">
                    <Select value={loja.slug} onValueChange={(value) => handleChange("slug", value)} disabled={loading}>
                      <SelectTrigger className="flex-1">
                        <SelectValue placeholder="Selecione um slug" />
                      </SelectTrigger>
                      <SelectContent>
                        {slugsSalvos.map((slug) => (
                          <SelectItem key={slug} value={slug}>
                            {slug}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Button
                      type="button"
                      variant="outline"
                      size="icon"
                      onClick={() => setMostrarNovoSlug(true)}
                      disabled={loading}
                      title="Adicionar novo slug"
                    >
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>
                ) : (
                  <div className="flex gap-2">
                    <Input
                      placeholder="Digite o novo slug"
                      value={novoSlug}
                      onChange={(e) => setNovoSlug(e.target.value)}
                      disabled={loading}
                    />
                    <Button
                      type="button"
                      variant="default"
                      size="icon"
                      onClick={adicionarNovoSlug}
                      disabled={loading || !novoSlug.trim()}
                      title="Salvar novo slug"
                    >
                      <CheckCircle2 className="h-4 w-4" />
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      size="icon"
                      onClick={() => {
                        setMostrarNovoSlug(false)
                        setNovoSlug("")
                      }}
                      disabled={loading}
                      title="Cancelar"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="urlSite">URL do Site</Label>
                <div className="flex gap-2">
                  <Input
                    id="urlSite"
                    type="text"
                    value={loja.urlSite}
                    onChange={(e) => handleUrlSiteChange(e.target.value)}
                    placeholder="exemplo.com.br"
                    disabled={loading}
                    className="flex-1"
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={gerarUrlTemporaria}
                    disabled={loading || !loja.slug}
                    title="Gerar URL temporária"
                  >
                    <LinkIcon className="h-4 w-4 mr-2" />
                    Gerar URL Temporária
                  </Button>
                </div>
                <p className="text-xs text-muted-foreground">Não incluir https:// ou www</p>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="razaoSocial">Razão Social *</Label>
                <Input
                  id="razaoSocial"
                  value={loja.razaoSocial}
                  onChange={(e) => handleChange("razaoSocial", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="cnpj">CNPJ *</Label>
                <Input
                  id="cnpj"
                  value={loja.cnpj}
                  onChange={(e) => handleChange("cnpj", e.target.value)}
                  required
                  disabled={loading}
                  className={cnpjDuplicado ? "border-yellow-500 focus-visible:ring-yellow-500" : ""}
                />
                {cnpjDuplicado && (
                  <p className="text-xs text-yellow-600 dark:text-yellow-400">CNPJ duplicado detectado</p>
                )}
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="inscricaoEstadual">Inscrição Estadual</Label>
                <Input
                  id="inscricaoEstadual"
                  value={loja.inscricaoEstadual}
                  onChange={(e) => handleChange("inscricaoEstadual", e.target.value)}
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="tipoConta">Tipo de Conta *</Label>
                <Select
                  value={loja.tipoConta}
                  onValueChange={(value) => handleChange("tipoConta", value)}
                  disabled={loading}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="definitiva">Definitiva</SelectItem>
                    <SelectItem value="teste">Teste</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Contato */}
        <Card>
          <CardHeader>
            <CardTitle>Contato</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label htmlFor="email">E-mail *</Label>
                <Input
                  id="email"
                  type="email"
                  value={loja.email}
                  onChange={(e) => handleChange("email", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="telefone">Telefone</Label>
                <Input
                  id="telefone"
                  value={loja.telefone}
                  onChange={(e) => handleChange("telefone", e.target.value)}
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="celular">Celular *</Label>
                <Input
                  id="celular"
                  value={loja.celular}
                  onChange={(e) => handleChange("celular", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Endereço */}
        <Card>
          <CardHeader>
            <CardTitle>Endereço</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid grid-cols-3 gap-4">
              <div className="col-span-2 space-y-2">
                <Label htmlFor="endereco">Endereço *</Label>
                <Input
                  id="endereco"
                  value={loja.endereco}
                  onChange={(e) => handleChange("endereco", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="numeroEndereco">Número *</Label>
                <Input
                  id="numeroEndereco"
                  value={loja.numeroEndereco}
                  onChange={(e) => handleChange("numeroEndereco", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label htmlFor="complemento">Complemento</Label>
                <Input
                  id="complemento"
                  value={loja.complemento}
                  onChange={(e) => handleChange("complemento", e.target.value)}
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="bairro">Bairro *</Label>
                <Input
                  id="bairro"
                  value={loja.bairro}
                  onChange={(e) => handleChange("bairro", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="cep">CEP *</Label>
                <Input
                  id="cep"
                  value={loja.cep}
                  onChange={(e) => handleChange("cep", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="cidade">Cidade *</Label>
                <Input
                  id="cidade"
                  value={loja.cidade}
                  onChange={(e) => handleChange("cidade", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="estado">Estado *</Label>
                <Input
                  id="estado"
                  value={loja.estado}
                  onChange={(e) => handleChange("estado", e.target.value)}
                  maxLength={2}
                  required
                  disabled={loading}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Responsável */}
        <Card>
          <CardHeader>
            <CardTitle>Responsável</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="responsavel">Nome do Responsável *</Label>
                <Input
                  id="responsavel"
                  value={loja.responsavel}
                  onChange={(e) => handleChange("responsavel", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="emailResponsavel">E-mail do Responsável *</Label>
                <Input
                  id="emailResponsavel"
                  type="email"
                  value={loja.emailResponsavel}
                  onChange={(e) => handleChange("emailResponsavel", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Plano e Valores */}
        <Card>
          <CardHeader>
            <CardTitle>Plano e Valores</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="dataInicio">Data de Início *</Label>
                <Input
                  id="dataInicio"
                  type="date"
                  value={loja.dataInicio}
                  onChange={(e) => handleChange("dataInicio", e.target.value)}
                  required
                  disabled={loading}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="valorPlano">Valor do Plano *</Label>
                <Input
                  id="valorPlano"
                  type="number"
                  step="0.01"
                  value={loja.valorPlano}
                  onChange={(e) => handleChange("valorPlano", Number.parseFloat(e.target.value))}
                  required
                  disabled={loading}
                />
              </div>
            </div>

<div className="space-y-4 mt-6">
              <div className="flex items-center justify-between">
                <Label className="text-base font-semibold">Serviços Extras</Label>
                <Button type="button" variant="outline" size="sm" onClick={adicionarServico} disabled={loading}>
                  <Plus className="h-4 w-4 mr-2" />
                  Adicionar Serviço Personalizado
                </Button>
              </div>

{/* Serviços Pré-cadastrados */}
              <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
                <Label className="text-sm font-medium text-muted-foreground">Emissão de Nota Fiscal</Label>
                <div className="space-y-2">
                  <label className="flex items-center justify-between p-3 border rounded-lg bg-background cursor-pointer hover:bg-muted/50 transition-colors">
                    <div className="flex items-center gap-3">
                      <input
                        type="checkbox"
                        checked={servicosExtras.some(s => s.nome === "NF-e até 100 notas")}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setServicosExtras([...servicosExtras, { id: "nfe-100", nome: "NF-e até 100 notas", valor: 29.90 }])
                          } else {
                            setServicosExtras(servicosExtras.filter(s => s.nome !== "NF-e até 100 notas"))
                          }
                        }}
                        disabled={loading}
                        className="h-4 w-4 rounded border-gray-300"
                      />
                      <span className="font-medium">Até 100 notas</span>
                    </div>
                    <span className="font-semibold text-green-600">R$ 29,90</span>
                  </label>
                  <label className="flex items-center justify-between p-3 border rounded-lg bg-background cursor-pointer hover:bg-muted/50 transition-colors">
                    <div className="flex items-center gap-3">
                      <input
                        type="checkbox"
                        checked={servicosExtras.some(s => s.nome === "NF-e até 2.000 notas")}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setServicosExtras([...servicosExtras, { id: "nfe-2000", nome: "NF-e até 2.000 notas", valor: 79.90 }])
                          } else {
                            setServicosExtras(servicosExtras.filter(s => s.nome !== "NF-e até 2.000 notas"))
                          }
                        }}
                        disabled={loading}
                        className="h-4 w-4 rounded border-gray-300"
                      />
                      <span className="font-medium">Até 2.000 notas</span>
                    </div>
                    <span className="font-semibold text-green-600">R$ 79,90</span>
                  </label>
                  <label className="flex items-center justify-between p-3 border rounded-lg bg-background cursor-pointer hover:bg-muted/50 transition-colors">
                    <div className="flex items-center gap-3">
                      <input
                        type="checkbox"
                        checked={servicosExtras.some(s => s.nome === "NF-e Ilimitado")}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setServicosExtras([...servicosExtras, { id: "nfe-ilimitado", nome: "NF-e Ilimitado", valor: 149.90 }])
                          } else {
                            setServicosExtras(servicosExtras.filter(s => s.nome !== "NF-e Ilimitado"))
                          }
                        }}
                        disabled={loading}
                        className="h-4 w-4 rounded border-gray-300"
                      />
                      <span className="font-medium">Ilimitado</span>
                    </div>
                    <span className="font-semibold text-green-600">R$ 149,90</span>
                  </label>
                </div>
              </div>

{/* Serviços personalizados */}
              {servicosExtras.filter(s => !s.nome.startsWith("NF-e")).length > 0 && (
                <div className="space-y-3">
                  <Label className="text-sm font-medium text-muted-foreground">Serviços Personalizados</Label>
                  {servicosExtras.filter(s => !s.nome.startsWith("NF-e")).map((servico) => (
                    <div key={servico.id} className="flex items-end gap-3 p-3 border rounded-lg bg-muted/50">
                      <div className="flex-1 space-y-2">
                        <Label htmlFor={`servico-nome-${servico.id}`}>Nome do Serviço</Label>
                        <Input
                          id={`servico-nome-${servico.id}`}
                          placeholder="Ex: SMS Marketing"
                          value={servico.nome}
                          onChange={(e) => atualizarServico(servico.id, "nome", e.target.value)}
                          disabled={loading}
                        />
                      </div>
                      <div className="w-40 space-y-2">
                        <Label htmlFor={`servico-valor-${servico.id}`}>Valor (R$)</Label>
                        <Input
                          id={`servico-valor-${servico.id}`}
                          type="number"
                          step="0.01"
                          placeholder="0,00"
                          value={servico.valor}
                          onChange={(e) =>
                            atualizarServico(servico.id, "valor", Number.parseFloat(e.target.value) || 0)
                          }
                          disabled={loading}
                        />
                      </div>
                      <Button
                        type="button"
                        variant="destructive"
                        size="icon"
                        onClick={() => removerServico(servico.id)}
                        disabled={loading}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </div>

<div className="grid grid-cols-4 gap-4 mt-6 pt-6 border-t">
              <div className="space-y-2">
                <Label className="text-muted-foreground">Valor do Plano</Label>
                <div className="text-2xl font-bold">
                  R$ {loja.valorPlano.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </div>
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">Total Extras</Label>
                <div className="text-2xl font-bold text-blue-600">
                  R$ {totalExtras.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </div>
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">Total Mensal</Label>
                <div className="text-2xl font-bold text-green-600">
                  R$ {totalMensal.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </div>
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">Notas Emitidas no Mês</Label>
                <div className="text-2xl font-bold text-orange-600">
                  {mode === "edit" ? "847" : "0"}
                </div>
                <p className="text-xs text-muted-foreground">de {servicosExtras.some(s => s.nome === "NF-e Ilimitado") ? "Ilimitado" : servicosExtras.some(s => s.nome === "NF-e até 2.000 notas") ? "2.000" : servicosExtras.some(s => s.nome === "NF-e até 100 notas") ? "100" : "0"}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/lojas-content.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Eye, Pencil, Plus, ChevronLeft, ChevronRight, Search, Power, Check, AlertTriangle } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import Link from "next/link"

interface Loja {
  numero: string
  nome: string
  cnpj: string
  razaoSocial: string
  valorPlano: number
  valoresExtras: number
  totalMensal: number
  status: "ativo" | "inativo"
  statusPagamento: "pago" | "pendente" | "atrasado"
  tipoConta: "definitiva" | "teste"
}

// Dados simulados
const generateLojas = (): Loja[] => {
  return [
    {
      numero: "001",
      nome: "Loja Fashion Store",
      cnpj: "12.345.678/0001-90",
      razaoSocial: "Fashion Store Comércio Ltda",
      valorPlano: 299.9,
      valoresExtras: 150.0,
      totalMensal: 449.9,
      status: "ativo",
      statusPagamento: "pago",
      tipoConta: "definitiva",
    },
    {
      numero: "002",
      nome: "Tech Shop Brazil",
      cnpj: "23.456.789/0001-01",
      razaoSocial: "Tech Shop Brazil Eletrônicos SA",
      valorPlano: 499.9,
      valoresExtras: 320.0,
      totalMensal: 819.9,
      status: "ativo",
      statusPagamento: "pago",
      tipoConta: "definitiva",
    },
    {
      numero: "003",
      nome: "Beleza & Estilo",
      cnpj: "34.567.890/0001-12",
      razaoSocial: "Beleza e Estilo Cosméticos Ltda",
      valorPlano: 199.9,
      valoresExtras: 80.0,
      totalMensal: 279.9,
      status: "inativo",
      statusPagamento: "atrasado",
      tipoConta: "teste",
    },
    {
      numero: "004",
      nome: "Pet Shop Online",
      cnpj: "45.678.901/0001-23",
      razaoSocial: "Pet Shop Online Comércio ME",
      valorPlano: 299.9,
      valoresExtras: 200.0,
      totalMensal: 499.9,
      status: "ativo",
      statusPagamento: "pendente",
      tipoConta: "definitiva",
    },
    {
      numero: "005",
      nome: "Casa & Decor",
      cnpj: "56.789.012/0001-34",
      razaoSocial: "Casa e Decoração Ltda",
      valorPlano: 399.9,
      valoresExtras: 180.0,
      totalMensal: 579.9,
      status: "ativo",
      statusPagamento: "pago",
      tipoConta: "teste",
    },
    {
      numero: "006",
      nome: "Sports World",
      cnpj: "67.890.123/0001-45",
      razaoSocial: "Sports World Artigos Esportivos SA",
      valorPlano: 499.9,
      valoresExtras: 250.0,
      totalMensal: 749.9,
      status: "ativo",
      statusPagamento: "pago",
      tipoConta: "definitiva",
    },
    {
      numero: "007",
      nome: "Books & More",
      cnpj: "78.901.234/0001-56",
      razaoSocial: "Books and More Livraria Ltda",
      valorPlano: 199.9,
      valoresExtras: 50.0,
      totalMensal: 249.9,
      status: "inativo",
      statusPagamento: "atrasado",
      tipoConta: "teste",
    },
    {
      numero: "008",
      nome: "Kids Paradise",
      cnpj: "89.012.345/0001-67",
      razaoSocial: "Kids Paradise Brinquedos ME",
      valorPlano: 299.9,
      valoresExtras: 120.0,
      totalMensal: 419.9,
      status: "ativo",
      statusPagamento: "pago",
      tipoConta: "definitiva",
    },
    {
      numero: "009",
      nome: "Gourmet Shop",
      cnpj: "90.123.456/0001-78",
      razaoSocial: "Gourmet Shop Alimentos Especiais Ltda",
      valorPlano: 399.9,
      valoresExtras: 280.0,
      totalMensal: 679.9,
      status: "ativo",
      statusPagamento: "pendente",
      tipoConta: "teste",
    },
    {
      numero: "010",
      nome: "Music Store Pro",
      cnpj: "01.234.567/0001-89",
      razaoSocial: "Music Store Pro Instrumentos SA",
      valorPlano: 499.9,
      valoresExtras: 350.0,
      totalMensal: 849.9,
      status: "ativo",
      statusPagamento: "pago",
      tipoConta: "definitiva",
    },
    {
      numero: "011",
      nome: "Garden Center",
      cnpj: "11.234.567/0001-90",
      razaoSocial: "Garden Center Plantas e Jardins Ltda",
      valorPlano: 299.9,
      valoresExtras: 100.0,
      totalMensal: 399.9,
      status: "ativo",
      statusPagamento: "pago",
      tipoConta: "definitiva",
    },
    {
      numero: "012",
      nome: "Auto Parts Brazil",
      cnpj: "22.345.678/0001-01",
      razaoSocial: "Auto Parts Brazil Peças SA",
      valorPlano: 599.9,
      valoresExtras: 450.0,
      totalMensal: 1049.9,
      status: "ativo",
      statusPagamento: "atrasado",
      tipoConta: "teste",
    },
  ]
}

export function LojasContent() {
  const [lojas, setLojas] = useState<Loja[]>([])
  const [currentPage, setCurrentPage] = useState(1)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedLojas, setSelectedLojas] = useState<string[]>([])
  const [filtroTipoConta, setFiltroTipoConta] = useState<string>("todas")
  const [filtroStatusPgto, setFiltroStatusPgto] = useState<string>("todos")
  const [showConfirmDialog, setShowConfirmDialog] = useState(false)
  const [confirmingPayment, setConfirmingPayment] = useState(false)
  const itemsPerPage = 10

useEffect(() => {
    setLojas(generateLojas())
  }, [])

const filteredLojas = lojas.filter((loja) => {
    const searchLower = searchTerm.toLowerCase()
    const matchesSearch = loja.nome.toLowerCase().includes(searchLower) || loja.cnpj.includes(searchTerm)
    const matchesTipoConta = filtroTipoConta === "todas" || loja.tipoConta === filtroTipoConta
    const matchesStatusPgto = filtroStatusPgto === "todos" || loja.statusPagamento === filtroStatusPgto
    return matchesSearch && matchesTipoConta && matchesStatusPgto
  })

const totalPages = Math.ceil(filteredLojas.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const currentLojas = filteredLojas.slice(startIndex, endIndex)

useEffect(() => {
    setCurrentPage(1)
  }, [searchTerm, filtroTipoConta, filtroStatusPgto])

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(value)
  }

const getPaymentStatusVariant = (status: "pago" | "pendente" | "atrasado") => {
    switch (status) {
      case "pago":
        return { variant: "default" as const, label: "Pago", className: "bg-green-500 hover:bg-green-600" }
      case "pendente":
        return {
          variant: "secondary" as const,
          label: "Pendente",
          className: "bg-yellow-500 hover:bg-yellow-600 text-white",
        }
      case "atrasado":
        return { variant: "destructive" as const, label: "Atrasado", className: "bg-red-500 hover:bg-red-600" }
    }
  }

const getTipoContaVariant = (tipo: "definitiva" | "teste") => {
    switch (tipo) {
      case "definitiva":
        return { label: "Definitiva", className: "bg-blue-500 hover:bg-blue-600" }
      case "teste":
        return { label: "Teste", className: "bg-orange-500 hover:bg-orange-600" }
    }
  }

const toggleLojaSelection = (numero: string) => {
    setSelectedLojas((prev) => (prev.includes(numero) ? prev.filter((n) => n !== numero) : [...prev, numero]))
  }

const toggleAllLojas = () => {
    if (selectedLojas.length === currentLojas.length) {
      setSelectedLojas([])
    } else {
      setSelectedLojas(currentLojas.map((loja) => loja.numero))
    }
  }

const toggleSelectedStatus = () => {
    setLojas((prev) =>
      prev.map((loja) => {
        if (selectedLojas.includes(loja.numero)) {
          return {
            ...loja,
            status: loja.status === "ativo" ? "inativo" : "ativo",
          }
        }
        return loja
      }),
    )
    setSelectedLojas([])
  }

const lojasParaConfirmar = lojas.filter((l) => selectedLojas.includes(l.numero))
  const totalConfirmar = lojasParaConfirmar.reduce((acc, l) => acc + l.totalMensal, 0)

const handleConfirmarPagamento = () => {
    setConfirmingPayment(true)
    setTimeout(() => {
      setLojas((prev) =>
        prev.map((loja) =>
          selectedLojas.includes(loja.numero) ? { ...loja, statusPagamento: "pago" } : loja,
        ),
      )
      setSelectedLojas([])
      setConfirmingPayment(false)
      setShowConfirmDialog(false)
    }, 1500)
  }

const valoresRecebidos = lojas
    .filter((l) => l.status === "ativo" && l.statusPagamento === "pago")
    .reduce((acc, l) => acc + l.totalMensal, 0)

const valoresPendentes = lojas
    .filter((l) => l.statusPagamento === "pendente")
    .reduce((acc, l) => acc + l.totalMensal, 0)

const valoresAReceber = lojas
    .filter((l) => l.statusPagamento === "atrasado")
    .reduce((acc, l) => acc + l.totalMensal, 0)

const mesAtual = new Date().toLocaleString("pt-BR", { month: "long", year: "numeric" })

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="pt-6">
            <div className="flex flex-col gap-1">
              <p className="text-sm font-medium text-muted-foreground">Valores Recebidos no Mes</p>
              <p className="text-xs text-muted-foreground capitalize">{mesAtual}</p>
              <p className="text-3xl font-bold text-green-600 mt-2">{formatCurrency(valoresRecebidos)}</p>
              <p className="text-xs text-muted-foreground mt-1">
                {lojas.filter((l) => l.status === "ativo" && l.statusPagamento === "pago").length} lojas pagas
              </p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex flex-col gap-1">
              <p className="text-sm font-medium text-muted-foreground">Valores Pendentes no Mes</p>
              <p className="text-xs text-muted-foreground capitalize">{mesAtual}</p>
              <p className="text-3xl font-bold text-yellow-600 mt-2">{formatCurrency(valoresPendentes)}</p>
              <p className="text-xs text-muted-foreground mt-1">
                {lojas.filter((l) => l.statusPagamento === "pendente").length} lojas pendentes
              </p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex flex-col gap-1">
              <p className="text-sm font-medium text-muted-foreground">Valores a Receber no Mes</p>
              <p className="text-xs text-muted-foreground capitalize">{mesAtual}</p>
              <p className="text-3xl font-bold text-red-600 mt-2">{formatCurrency(valoresAReceber)}</p>
              <p className="text-xs text-muted-foreground mt-1">
                {lojas.filter((l) => l.statusPagamento === "atrasado").length} lojas atrasadas
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-2xl">Lojas</CardTitle>
            <p className="text-sm text-muted-foreground mt-1">Gerencie todas as lojas que utilizam a plataforma</p>
          </div>
          <div className="flex items-center gap-2">
            {selectedLojas.length > 0 && (
              <>
                <Button
                  variant="outline"
                  onClick={() => setShowConfirmDialog(true)}
                  className="gap-2 bg-green-600 text-white hover:bg-green-700 border-green-600"
                >
                  <Check className="h-4 w-4" />
                  Confirmar Pagamento ({selectedLojas.length})
                </Button>
                <Button variant="outline" onClick={toggleSelectedStatus} className="gap-2 bg-transparent">
                  <Power className="h-4 w-4" />
                  Alterar Status ({selectedLojas.length})
                </Button>
              </>
            )}
            <Link href="/lojas/nova">
              <Button className="gap-2">
                <Plus className="h-4 w-4" />
                Nova Loja
              </Button>
            </Link>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="mb-4 flex gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Pesquisar por nome ou CNPJ..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
          <Select value={filtroStatusPgto} onValueChange={setFiltroStatusPgto}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Status Pgto" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos Pgto</SelectItem>
              <SelectItem value="pago">Pago</SelectItem>
              <SelectItem value="pendente">Pendente</SelectItem>
              <SelectItem value="atrasado">Atrasado</SelectItem>
            </SelectContent>
          </Select>
          <Select value={filtroTipoConta} onValueChange={setFiltroTipoConta}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Tipo de Conta" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todas">Todas as Contas</SelectItem>
              <SelectItem value="definitiva">Definitiva</SelectItem>
              <SelectItem value="teste">Teste</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[50px]">
                  <Checkbox
                    checked={selectedLojas.length === currentLojas.length && currentLojas.length > 0}
                    onCheckedChange={toggleAllLojas}
                  />
                </TableHead>
                <TableHead className="w-[80px]">Número</TableHead>
                <TableHead>Nome</TableHead>
                <TableHead>CNPJ</TableHead>
                <TableHead>Razão Social</TableHead>
                <TableHead className="text-right">Plano</TableHead>
                <TableHead className="text-right">Extras</TableHead>
                <TableHead className="text-right">Total Mensal</TableHead>
                <TableHead className="text-center">Status</TableHead>
                <TableHead className="text-center">Status Pgto</TableHead>
                <TableHead className="text-center">Tipo Conta</TableHead>
                <TableHead className="text-center w-[120px]">Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {currentLojas.map((loja) => {
                const paymentStatus = getPaymentStatusVariant(loja.statusPagamento)
                const tipoContaStyle = getTipoContaVariant(loja.tipoConta)
                return (
                  <TableRow
                    key={loja.numero}
                    className={loja.status === "inativo" ? "bg-red-500/10 hover:bg-red-500/20" : ""}
                  >
                    <TableCell>
                      <Checkbox
                        checked={selectedLojas.includes(loja.numero)}
                        onCheckedChange={() => toggleLojaSelection(loja.numero)}
                      />
                    </TableCell>
                    <TableCell
                      className={`font-medium ${loja.status === "inativo" ? "text-red-600 dark:text-red-400" : ""}`}
                    >
                      {loja.numero}
                    </TableCell>
                    <TableCell
                      className={`font-medium ${loja.status === "inativo" ? "text-red-600 dark:text-red-400" : ""}`}
                    >
                      {loja.nome}
                    </TableCell>
                    <TableCell
                      className={loja.status === "inativo" ? "text-red-600 dark:text-red-400" : "text-muted-foreground"}
                    >
                      {loja.cnpj}
                    </TableCell>
                    <TableCell
                      className={loja.status === "inativo" ? "text-red-600 dark:text-red-400" : "text-muted-foreground"}
                    >
                      {loja.razaoSocial}
                    </TableCell>
                    <TableCell
                      className={`text-right ${loja.status === "inativo" ? "text-red-600 dark:text-red-400" : ""}`}
                    >
                      {formatCurrency(loja.valorPlano)}
                    </TableCell>
                    <TableCell
                      className={`text-right ${loja.status === "inativo" ? "text-red-600 dark:text-red-400" : ""}`}
                    >
                      {formatCurrency(loja.valoresExtras)}
                    </TableCell>
                    <TableCell
                      className={`text-right font-semibold ${loja.status === "inativo" ? "text-red-600 dark:text-red-400" : ""}`}
                    >
                      {formatCurrency(loja.totalMensal)}
                    </TableCell>
                    <TableCell className="text-center">
                      <Badge variant={loja.status === "ativo" ? "default" : "destructive"}>
                        {loja.status === "ativo" ? "Ativo" : "Inativo"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-center">
                      <Badge className={paymentStatus.className}>{paymentStatus.label}</Badge>
                    </TableCell>
                    <TableCell className="text-center">
                      <Badge className={tipoContaStyle.className}>{tipoContaStyle.label}</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center justify-center gap-2">
                        <Button variant="ghost" size="icon" asChild>
                          <Link href={`/lojas/${loja.numero}/visualizar`}>
                            <Eye
                              className={`h-4 w-4 ${loja.status === "inativo" ? "text-red-600 dark:text-red-400" : ""}`}
                            />
                          </Link>
                        </Button>
                        <Button variant="ghost" size="icon" asChild>
                          <Link href={`/lojas/${loja.numero}/editar`}>
                            <Pencil
                              className={`h-4 w-4 ${loja.status === "inativo" ? "text-red-600 dark:text-red-400" : ""}`}
                            />
                          </Link>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </div>

<div className="flex items-center justify-between mt-4">
          <p className="text-sm text-muted-foreground">
            Mostrando {startIndex + 1} a {Math.min(endIndex, filteredLojas.length)} de {filteredLojas.length} lojas
          </p>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
              disabled={currentPage === 1}
            >
              <ChevronLeft className="h-4 w-4" />
              Anterior
            </Button>
            <div className="flex items-center gap-1">
              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                <Button
                  key={page}
                  variant={currentPage === page ? "default" : "outline"}
                  size="sm"
                  onClick={() => setCurrentPage(page)}
                  className="w-9"
                >
                  {page}
                </Button>
              ))}
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
              disabled={currentPage === totalPages}
            >
              Próxima
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>

<Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-yellow-500" />
              Confirmar Pagamento
            </DialogTitle>
            <DialogDescription>
              Tem certeza que deseja confirmar o pagamento das lojas selecionadas?
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3 py-4">
            <div className="rounded-lg border p-4 space-y-2 max-h-48 overflow-y-auto">
              {lojasParaConfirmar.map((loja) => (
                <div key={loja.numero} className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{loja.numero}</span>
                    <span className="text-muted-foreground">-</span>
                    <span>{loja.nome}</span>
                  </div>
                  <span className="font-semibold">{formatCurrency(loja.totalMensal)}</span>
                </div>
              ))}
            </div>
            <div className="flex items-center justify-between pt-2 border-t">
              <span className="font-medium">Total a confirmar:</span>
              <span className="text-lg font-bold text-green-600">{formatCurrency(totalConfirmar)}</span>
            </div>
          </div>
          <DialogFooter className="gap-2">
            <Button
              variant="outline"
              onClick={() => setShowConfirmDialog(false)}
              disabled={confirmingPayment}
              className="bg-transparent"
            >
              Cancelar
            </Button>
            <Button
              onClick={handleConfirmarPagamento}
              disabled={confirmingPayment}
              className="bg-green-600 hover:bg-green-700 text-white"
            >
              {confirmingPayment ? (
                <>
                  <svg className="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24" fill="none">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                  </svg>
                  Confirmando...
                </>
              ) : (
                <>
                  <Check className="h-4 w-4 mr-2" />
                  Confirmar Pagamento
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}</article></body></html>