107:"ExplicitChatIdProvider" 108:I[903690,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$80","$7c","$81","$82","$7e","$83","$84","$85","$86","$87","$88","$7d","$89","$8a"],"$107"] 109:I[838238,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$80","$7c","$81","$82","$7e","$83","$84","$85","$86","$87","$88","$7d","$89","$8a"],"SWRDataProvider"] 10b:[] 10c:[["b_B9M5e16HAN6",null],["b_nsf5144FHHU",null],["b_XrjTsJQuOw0",null]] 10d:[["b_B9M5e16HAN6",{"templateVersionId":null,"templateCanonId":null}],["b_nsf5144FHHU",{"templateVersionId":null,"templateCanonId":null}],["b_XrjTsJQuOw0",{"templateVersionId":null,"templateCanonId":null}]] 10e:[["K71XXuaoYxu","$D2025-04-10T21:44:04.636Z"],["b_vO99EVC8AJk","$D2025-04-13T15:51:36.306Z"],["b_vqZ2aIwg27s","$D2025-04-13T16:02:37.781Z"],["b_euTQLZtEoCY","$D2025-04-13T16:19:32.334Z"],["b_bx04Q1QdqAw","$D2025-04-13T16:22:31.486Z"],["b_V672A9b7Emk","$D2025-04-13T16:24:36.266Z"],["b_oPYG8fjNZow","$D2025-04-13T16:31:43.470Z"],["b_9JW6uIYS5w4","$D2025-04-13T16:37:49.964Z"],["b_S4s6IuGAdom","$D2025-04-13T16:39:29.902Z"],["b_9VlifAkU7DT","$D2025-04-13T16:41:28.840Z"],["b_JhJ1nyIYTig","$D2025-04-13T16:49:18.640Z"],["b_HlzCjV5Fcsv","$D2025-04-13T16:50:10.288Z"],["b_vcJznTYKw4Q","$D2025-04-13T16:54:55.672Z"],["b_B9M5e16HAN6","$D2025-04-13T16:57:33.247Z"],["b_nsf5144FHHU","$D2025-04-13T16:58:28.859Z"],["b_XrjTsJQuOw0","$D2025-04-13T17:02:26.921Z"]] 10f:[["b_B9M5e16HAN6",false],["b_nsf5144FHHU",false],["b_XrjTsJQuOw0",false]] 110:[["b_B9M5e16HAN6","$undefined"],["b_nsf5144FHHU","$undefined"],["b_XrjTsJQuOw0","$undefined"]] 111:[["b_B9M5e16HAN6",null],["b_nsf5144FHHU",null],["b_XrjTsJQuOw0",null]] 112:[["b_B9M5e16HAN6",true],["b_nsf5144FHHU",true],["b_XrjTsJQuOw0",true]] 113:[["b_B9M5e16HAN6",true],["b_nsf5144FHHU",true],["b_XrjTsJQuOw0",true]] 114:[] 115:Tbdb26,[V0_FILE]typescriptreact:file="components/properties-section.tsx" isMerged="true" import { Home, MapPin, Maximize } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" export default function PropertiesSection() { const properties = [ { id: 1, title: "Apartamento Moderno", type: "Apartamento", location: "São Paulo, SP", area: "120m²", price: "R$ 750.000", image: "/placeholder.svg?height=300&width=400", featured: true, }, { id: 2, title: "Casa em Condomínio", type: "Casa", location: "Rio de Janeiro, RJ", area: "220m²", price: "R$ 1.200.000", image: "/placeholder.svg?height=300&width=400", featured: false, }, { id: 3, title: "Sala Comercial", type: "Comercial", location: "Belo Horizonte, MG", area: "85m²", price: "R$ 450.000", image: "/placeholder.svg?height=300&width=400", featured: false, }, ] return (

Propriedades

Gerencie todos os tipos de propriedades em uma única plataforma intuitiva

{properties.map((property) => (

{property.featured && ( Destaque )}

{property.title} {property.location}

{property.type}

{property.area}

{property.price}

))}

) } [V0_FILE]typescriptreact:file="components/owners-section.tsx" isMerged="true" import { Mail, Phone } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function OwnersSection() { const owners = [ { id: 1, name: "Carlos Silva", email: "carlos.silva@email.com", phone: "(11) 98765-4321", properties: 3, image: "/placeholder.svg?height=100&width=100", initials: "CS", }, { id: 2, name: "Ana Oliveira", email: "ana.oliveira@email.com", phone: "(21) 98765-4321", properties: 2, image: "/placeholder.svg?height=100&width=100", initials: "AO", }, { id: 3, name: "Roberto Santos", email: "roberto.santos@email.com", phone: "(31) 98765-4321", properties: 5, image: "/placeholder.svg?height=100&width=100", initials: "RS", }, ] return (

Proprietários

Gerencie informações e comunicação com proprietários de forma eficiente

{owners.map((owner) => ( {owner.initials}

{owner.name} {owner.properties} propriedades

{owner.email}

{owner.phone}

))}

) } [V0_FILE]typescriptreact:file="components/payment-methods-section.tsx" isMerged="true" import { Check, CreditCard, Landmark, Wallet } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" export default function PaymentMethodsSection() { return (

Métodos de Pagamento Flexíveis

Oferecemos opções de pagamento flexíveis para proprietários e inquilinos, com processamento seguro via Apache Finarect e Hyperswitch

Pagamento por Marcos Pagamento Integral

Pagamento por Marcos

Divida os pagamentos em etapas críticas do projeto, vinculando-os à conclusão de entregas específicas.

{item}

Estrutura de Pagamento por Marcos Exemplo para um projeto típico de R$ 20.000

{[ { name: "Marco 1", description: "Visita técnica e dossiê", percentage: "15%", value: "R$ 3.000" }, { name: "Marco 2", description: "Compra de equipamentos", percentage: "35%", value: "R$ 7.000" }, { name: "Marco 3", description: "Início da construção", percentage: "25%", value: "R$ 5.000" }, { name: "Marco 4", description: "Homologação final", percentage: "25%", value: "R$ 5.000" }, ].map((milestone, i) => (

{milestone.name}

{milestone.description}

{milestone.percentage}

{milestone.value}

))}

Total

R$ 20.000

Pagamento Integral

Realize o pagamento completo no início do projeto e aproveite benefícios exclusivos.

{item}

Pagamento Integral Antecipado Exemplo para um projeto típico de R$ 20.000

Valor original

R$ 20.000

Desconto (5%)

- R$ 1.000

Total com desconto

R$ 19.000

Economia de R$ 1.000

Processamento de Pagamentos Seguro

Apache Finarect

Hyperswitch

) } [V0_FILE]typescriptreact:file="components/ai-assistant-section.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { Bot, MessageSquare, Search, Sparkles, User } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" export default function AIAssistantSection() { return (

Assistente IA Integrado

Nosso assistente de IA multimodal ajuda proprietários e inquilinos com informações, recomendações e suporte em tempo real

Análise de Propriedades

Obtenha insights sobre o mercado imobiliário local

Assistente PropConnect

Olá! Como posso ajudar com suas propriedades hoje?

Preciso de informações sobre opções de pagamento para um novo projeto.

Claro! Oferecemos duas opções principais de pagamento:

Pagamento integral com 5% de desconto
Pagamento por marcos dividido em 4 etapas

Gostaria de saber mais detalhes sobre alguma dessas opções?

Potencializado por IA avançada

Nosso assistente utiliza modelos multimodais da OpenAI e embeddings para oferecer uma experiência conversacional natural e inteligente.

{[ { icon: , title: "Suporte conversacional", description: "Responde perguntas e oferece assistência em tempo real", }, { icon: , title: "Análise de mercado", description: "Fornece insights sobre tendências e preços de propriedades", }, { icon: , title: "Recomendações personalizadas", description: "Sugere propriedades e estratégias com base no seu perfil", }, { icon: , title: "Automação inteligente", description: "Automatiza tarefas rotineiras e processos administrativos", }, ].map((feature, i) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/user.tsx" isMerged="true" import { UserIcon } from "lucide-react" export default function User({ className }: { className?: string }) { return } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { indicatorClassName?: string } >(({ className, value, indicatorClassName, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/theme-config.tsx" isMerged="true" // Este arquivo define as configurações de tema personalizadas para a aplicação // Ele será importado em outros componentes para garantir consistência visual export const themeConfig = { colors: { primary: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", }, secondary: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", }, accent: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a", }, neutral: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", }, }, typography: { fontFamily: { sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif', heading: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif', mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', }, fontWeight: { normal: "400", medium: "500", semibold: "600", bold: "700", }, fontSize: { xs: "0.75rem", sm: "0.875rem", base: "1rem", lg: "1.125rem", xl: "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem", "5xl": "3rem", }, lineHeight: { none: "1", tight: "1.25", snug: "1.375", normal: "1.5", relaxed: "1.625", loose: "2", }, }, spacing: { 0: "0px", 0.5: "0.125rem", 1: "0.25rem", 1.5: "0.375rem", 2: "0.5rem", 2.5: "0.625rem", 3: "0.75rem", 3.5: "0.875rem", 4: "1rem", 5: "1.25rem", 6: "1.5rem", 7: "1.75rem", 8: "2rem", 9: "2.25rem", 10: "2.5rem", 12: "3rem", 14: "3.5rem", 16: "4rem", 20: "5rem", 24: "6rem", 28: "7rem", 32: "8rem", 36: "9rem", 40: "10rem", 44: "11rem", 48: "12rem", 52: "13rem", 56: "14rem", 60: "15rem", 64: "16rem", 72: "18rem", 80: "20rem", 96: "24rem", }, borderRadius: { none: "0", sm: "0.125rem", DEFAULT: "0.25rem", md: "0.375rem", lg: "0.5rem", xl: "0.75rem", "2xl": "1rem", "3xl": "1.5rem", full: "9999px", }, shadows: { sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)", DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)", inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)", none: "none", }, transitions: { DEFAULT: "150ms cubic-bezier(0.4, 0, 0.2, 1)", fast: "100ms cubic-bezier(0.4, 0, 0.2, 1)", slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)", }, } // Utilitário para acessar valores do tema export const getThemeValue = (path: string) => { const parts = path.split(".") let result: any = themeConfig for (const part of parts) { if (result && typeof result === "object" && part in result) { result = result[part] } else { return undefined } } return result } [V0_FILE]typescriptreact:file="components/ui/brand-section.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const sectionVariants = cva("py-16 md:py-24 w-full", { variants: { variant: { default: "bg-background", muted: "bg-muted/40", accent: "bg-accent/10", // Variantes personalizadas da marca "brand-primary": "bg-yellow-50 dark:bg-yellow-950/20", "brand-secondary": "bg-green-50 dark:bg-green-950/20", "brand-gradient": "bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/20 dark:to-green-950/20", "brand-gradient-reverse": "bg-gradient-to-br from-green-50 to-yellow-50 dark:from-green-950/20 dark:to-yellow-950/20", }, spacing: { default: "py-16 md:py-24", compact: "py-8 md:py-12", spacious: "py-24 md:py-32", }, container: { true: "", false: "", }, }, compoundVariants: [ { container: true, class: "container", }, ], defaultVariants: { variant: "default", spacing: "default", container: true, }, }) export interface BrandSectionProps extends React.HTMLAttributes, VariantProps { as?: React.ElementType } const BrandSection = React.forwardRef( ({ className, variant, spacing, container, as = "section", ...props }, ref) => { const Component = as as any return ( ) }, ) BrandSection.displayName = "BrandSection" const BrandSectionHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { centered?: boolean } >(({ className, centered = false, ...props }, ref) => (

)) BrandSectionHeader.displayName = "BrandSectionHeader" const BrandSectionTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) BrandSectionTitle.displayName = "BrandSectionTitle" const BrandSectionDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) BrandSectionDescription.displayName = "BrandSectionDescription" export { BrandSection, BrandSectionHeader, BrandSectionTitle, BrandSectionDescription } [V0_FILE]typescriptreact:file="components/ui/feature-card.tsx" isMerged="true" import type * as React from "react" import { cn } from "@/lib/utils" import { BrandCard } from "@/components/ui/brand-card" import { BrandBadge } from "@/components/ui/brand-badge" interface FeatureCardProps extends React.HTMLAttributes { icon: React.ReactNode title: string description: string badge?: string badgeVariant?: string variant?: "default" | "accent" | "outline" hover?: "lift" | "glow" | "border" | "none" } export function FeatureCard({ className, icon, title, description, badge, badgeVariant = "brand-yellow", variant = "default", hover = "lift", ...props }: FeatureCardProps) { const cardVariant = variant === "default" ? "brand" : variant === "accent" ? "brand-accent" : "outline" const hoverEffect = hover === "none" ? "default" : hover return (

{icon}
{badge && {badge}}

{title}

{description}
) } [V0_FILE]typescriptreact:file="components/ui/stat-card.tsx" isMerged="true" import type * as React from "react" import { cn } from "@/lib/utils" import { BrandCard } from "@/components/ui/brand-card" interface StatCardProps extends React.HTMLAttributes { icon?: React.ReactNode title: string value: string description?: string trend?: { value: number label: string } variant?: "default" | "accent" | "outline" } export function StatCard({ className, icon, title, value, description, trend, variant = "default", ...props }: StatCardProps) { const cardVariant = variant === "default" ? "brand" : variant === "accent" ? "brand-accent" : "outline" const isTrendPositive = trend && trend.value > 0 const isTrendNegative = trend && trend.value < 0 return (
{icon && (
{icon}
)}
{title}

{value}
{description &&
{description}
}
{trend && (
{isTrendPositive && ( )} {isTrendNegative && ( )} {trend.value}% {trend.label}
)}
) } [V0_FILE]typescriptreact:file="components/features-updated.tsx" isMerged="true" import { Sun, CreditCard, Wallet, BanknoteIcon, LineChart, Clock } from "lucide-react" import { BrandSection, BrandSectionHeader, BrandSectionTitle, BrandSectionDescription, } from "@/components/ui/brand-section" import { FeatureCard } from "@/components/ui/feature-card" export default function FeaturesUpdated() { const features = [ { icon: , title: "Capitalização de Projetos Solares", description: "Soluções financeiras que viabilizam cada etapa da cadeia de valor dos projetos de energia solar.", badge: "Essencial", }, { icon: , title: "Pagamentos Tradicionais", description: "Opções de capitalização imediata com descontos especiais para maximizar o retorno do investimento.", badge: "ROI Maximizado", }, { icon: , title: "Pagamentos por Marcos", description: "Alinhamento financeiro com cada etapa da cadeia de valor, reduzindo riscos e otimizando o fluxo de caixa.", badge: "Baixo Risco", }, { icon: , title: "Financiamento Alternativo", description: "Soluções inovadoras que permitem capitalização sem investimento inicial significativo.", badge: "Zero Entrada", }, { icon: , title: "Análise de Retorno", description: "Cálculos detalhados de ROI, payback e economia mensal para cada opção de pagamento.", badge: "Transparente", }, { icon: , title: "Cronograma Financeiro", description: "Planejamento detalhado dos desembolsos alinhados com o cronograma de execução do projeto solar.", badge: "Previsibilidade", }, ] return ( Soluções Financeiras para Energia Solar Facilitando a capitalização em cada etapa da cadeia de valor dos projetos solares
{features.map((feature, index) => ( ))}

Cadeia de Valor Financiada

Nossa plataforma oferece soluções de capitalização para cada etapa da cadeia de valor dos projetos solares, desde o planejamento inicial até a homologação final, garantindo o fluxo financeiro adequado para viabilizar projetos de todos os portes.

) } [V0_FILE]typescriptreact:file="components/dashboard-stats.tsx" isMerged="true" import { Sun, TrendingUp, Wallet, Users, CreditCard, Calendar } from "lucide-react" import { StatCard } from "@/components/ui/stat-card" import { BrandSection, BrandSectionHeader, BrandSectionTitle, BrandSectionDescription, } from "@/components/ui/brand-section" import { BrandButton } from "@/components/ui/brand-button" export default function DashboardStats() { return ( Métricas de Desempenho Acompanhe o desempenho dos seus projetos solares e investimentos
} title="Geração Solar" value="864 kWh" description="Média mensal" trend={{ value: 12.5, label: "vs. mês anterior" }} /> } title="Economia Acumulada" value="R$ 15.480" description="Desde a instalação" trend={{ value: 8.3, label: "vs. projeção inicial" }} variant="accent" /> } title="ROI Atual" value="27.4%" description="Retorno sobre investimento" trend={{ value: 3.2, label: "vs. trimestre anterior" }} /> } title="Clientes Ativos" value="2.547" description="Em todo o Brasil" trend={{ value: 15.8, label: "crescimento anual" }} /> } title="Valor Financiado" value="R$ 42.5M" description="Total em projetos ativos" trend={{ value: 22.3, label: "vs. ano anterior" }} variant="accent" /> } title="Tempo Médio de Payback" value="3.7 anos" description="Para projetos residenciais" trend={{ value: -0.3, label: "redução vs. 2023" }} />

Ver Relatório Completo
) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isMerged="true" import { ArrowRight, Sun, Shield, Zap } from "lucide-react" import { BrandSection } from "@/components/ui/brand-section" import { BrandButton } from "@/components/ui/brand-button" import { BrandBadge } from "@/components/ui/brand-badge" export default function CTASection() { return (

Transforme seu investimento solar com pagamentos inteligentes

Descubra como nossa plataforma pode ajudar você a financiar seu projeto solar com as melhores condições do mercado.

}> Economia Garantida }> Pagamento Seguro Suporte Especializado

}> Simular Financiamento Falar com Especialista

Mais de 2.500 proprietários já confiam em nossas soluções financeiras

) } [V0_FILE]typescriptreact:file="app/page-updated.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import HeroSection from "@/components/hero-section" import PropertyListings from "@/components/property-listings" import OwnerProfiles from "@/components/owner-profiles" import PaymentSystem from "@/components/payment-system" import AIAssistant from "@/components/ai-assistant" import FeaturesUpdated from "@/components/features-updated" import DashboardStats from "@/components/dashboard-stats" import CTASection from "@/components/cta-section" import { BrandButton } from "@/components/ui/brand-button" import { Sun } from "lucide-react" export default function HomePageUpdated() { return (

Yello / Cash

Propriedades Proprietários Pagamentos Recursos

Entrar Registrar

Plataforma

Recursos

Preços

Segurança

Suporte

Documentação

Central de Ajuda

Contato

Legal

Termos

Privacidade

Cookies

Empresa

Sobre

Blog

Carreiras

Yello / Cash

© 2025 Yello/Cash. Todos os direitos reservados.

) } [V0_FILE]typescriptreact:file="tailwind.config.js" type="code" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, yellow: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", 950: "#451a03", }, green: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", 950: "#022c22", }, // Primary brand colors from logo "yello-yellow": "#FFCE00", "yello-orange": "#FF6600", "yello-pink": "#FF0066", // Refined secondary palette "yello-sky": "#0EA5E9", // Complementary blue for contrast "yello-green": "#10B981", // Retained for sustainability messaging // Neutral palette "yello-dark": "#111827", "yello-light": "#F9FAFB", // Functional colors "yello-success": "#10B981", "yello-warning": "#F59E0B", "yello-error": "#EF4444", "yello-info": "#3B82F6", }, gradientColorStops: { "yello-gradient-start": "#FFCE00", "yello-gradient-mid": "#FF6600", "yello-gradient-end": "#FF0066", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, "pulse-opacity": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 }, }, "slide-in-right": { "0%": { transform: "translateX(100%)", opacity: 0 }, "100%": { transform: "translateX(0)", opacity: 1 }, }, "slide-in-bottom": { "0%": { transform: "translateY(20px)", opacity: 0 }, "100%": { transform: "translateY(0)", opacity: 1 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "pulse-opacity": "pulse-opacity 2s ease-in-out infinite", "slide-in-right": "slide-in-right 0.3s ease-out", "slide-in-bottom": "slide-in-bottom 0.3s ease-out", }, fontFamily: { sans: ["Montserrat", "Inter", "sans-serif"], display: ["Poppins", "sans-serif"], mono: ["JetBrains Mono", "monospace"], }, fontSize: { // Slightly larger base size for better readability base: "1.0625rem", }, letterSpacing: { brand: "-0.025em", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/plataforma/recursos/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Check } from "lucide-react" export default function RecursosPage() { const recursos = [ { title: "Financiamento Solar Personalizado", description: "Opções de pagamento adaptadas a cada tipo de projeto e perfil de cliente.", icon: "💰", }, { title: "Pagamento por Marcos", description: "Divida os pagamentos em etapas críticas do projeto, vinculando-os à conclusão de entregas específicas.", icon: "📊", }, { title: "Integração com Processadores de Pagamento", description: "Compatibilidade com Apache Finarect e Hyperswitch para processamento seguro.", icon: "🔄", }, { title: "Análise de Viabilidade Solar", description: "Ferramentas para avaliar o potencial solar de qualquer propriedade.", icon: "📈", }, { title: "Assistente IA Integrado", description: "Suporte inteligente para clientes e proprietários com análise multimodal.", icon: "🤖", }, { title: "Gestão de Projetos Solares", description: "Acompanhamento completo desde o planejamento até a homologação.", icon: "📱", }, ] return (

Yello / Cash

Voltar para a página inicial
Recursos da Plataforma

Conheça as ferramentas e funcionalidades que tornam a Yello/Cash a solução ideal para financiamento e gestão de projetos solares.

{recursos.map((recurso, index) => (

{recurso.icon}

{recurso.title}

{recurso.description}

))}

Por que escolher a Yello/Cash?

{[ "Plataforma especializada em financiamento de energia solar", "Opções de pagamento flexíveis adaptadas ao mercado brasileiro", "Integração com os principais processadores de pagamento", "Suporte técnico especializado em todas as regiões do Brasil", "Assistente de IA para análise de viabilidade e suporte", ].map((item, i) => (
{item}
))}

Yello / Cash

© 2025 Yello/Cash. Todos os direitos reservados.

) } [V0_FILE]typescriptreact:file="app/plataforma/precos/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Check, X } from "lucide-react" import { Button } from "@/components/ui/button" export default function PrecosPage() { const planos = [ { nome: "Básico", preco: "R$ 199", periodo: "/mês", descricao: "Ideal para pequenos instaladores solares", recursos: [ { nome: "Até 5 projetos simultâneos", incluido: true }, { nome: "Processamento de pagamentos", incluido: true }, { nome: "Análise básica de viabilidade", incluido: true }, { nome: "Suporte por e-mail", incluido: true }, { nome: "Assistente IA", incluido: false }, { nome: "API de integração", incluido: false }, ], destaque: false, cor: "bg-gray-100 dark:bg-gray-800", }, { nome: "Profissional", preco: "R$ 499", periodo: "/mês", descricao: "Para empresas de médio porte com múltiplos projetos", recursos: [ { nome: "Até 20 projetos simultâneos", incluido: true }, { nome: "Processamento de pagamentos", incluido: true }, { nome: "Análise avançada de viabilidade", incluido: true }, { nome: "Suporte prioritário", incluido: true }, { nome: "Assistente IA", incluido: true }, { nome: "API de integração", incluido: false }, ], destaque: true, cor: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800", }, { nome: "Empresarial", preco: "R$ 999", periodo: "/mês", descricao: "Solução completa para grandes integradores solares", recursos: [ { nome: "Projetos ilimitados", incluido: true }, { nome: "Processamento de pagamentos", incluido: true }, { nome: "Análise avançada de viabilidade", incluido: true }, { nome: "Suporte 24/7 dedicado", incluido: true }, { nome: "Assistente IA Premium", incluido: true }, { nome: "API de integração completa", incluido: true }, ], destaque: false, cor: "bg-green-50 dark:bg-green-900/30", }, ] return (

Yello / Cash

Voltar para a página inicial
Planos e Preços

Escolha o plano ideal para o seu negócio de energia solar. Todos os planos incluem acesso à nossa plataforma de financiamento.

{planos.map((plano, index) => (
{plano.destaque && (
Mais Popular
)}
{plano.nome}

{plano.preco} {plano.periodo}

{plano.descricao}

{plano.recursos.map((recurso, i) => (
{recurso.incluido ? ( ) : ( )} {recurso.nome}
))}

))}

Perguntas Frequentes

{[ { pergunta: "Existe período mínimo de contrato?", resposta: "Não, todos os planos são mensais e você pode cancelar a qualquer momento sem multa.", }, { pergunta: "Posso mudar de plano depois?", resposta: "Sim, você pode fazer upgrade ou downgrade do seu plano a qualquer momento, com ajuste proporcional de valores.", }, { pergunta: "Quais formas de pagamento são aceitas?", resposta: "Aceitamos cartão de crédito, boleto bancário e transferência bancária para pagamento dos planos.", }, { pergunta: "Existe uma versão de teste gratuita?", resposta: "Sim, oferecemos um período de teste de 14 dias para que você possa experimentar todas as funcionalidades da plataforma.", }, ].map((item, i) => (

{item.pergunta}

{item.resposta}

))}

Yello / Cash

© 2025 Yello/Cash. Todos os direitos reservados.

) } [V0_FILE]typescriptreact:file="app/plataforma/seguranca/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Shield, Lock, Server, FileCheck, Eye, AlertTriangle } from "lucide-react" import { Button } from "@/components/ui/button" export default function SegurancaPage() { const medidasSeguranca = [ { titulo: "Criptografia de Dados", descricao: "Todos os dados são criptografados em trânsito e em repouso usando padrões AES-256.", icone: , }, { titulo: "Infraestrutura Segura", descricao: "Servidores em data centers certificados com monitoramento 24/7 e redundância geográfica.", icone: , }, { titulo: "Conformidade Regulatória", descricao: "Conformidade com LGPD, PCI DSS e outras regulamentações relevantes para processamento de pagamentos.", icone: , }, { titulo: "Autenticação Multi-fator", descricao: "Proteção adicional para contas com verificação em dois fatores e controles de acesso baseados em função.", icone: , }, { titulo: "Monitoramento Contínuo", descricao: "Sistemas de detecção de intrusão e monitoramento de segurança em tempo real para identificar ameaças.", icone: , }, { titulo: "Resposta a Incidentes", descricao: "Equipe dedicada e protocolos estabelecidos para resposta rápida a quaisquer incidentes de segurança.", icone: , }, ] return (

Yello / Cash

Voltar para a página inicial
Segurança

A Yello/Cash prioriza a segurança dos seus dados e transações financeiras. Conheça as medidas que implementamos para proteger sua empresa e seus clientes.

{medidasSeguranca.map((medida, index) => (

{medida.icone}

{medida.titulo}

{medida.descricao}

))}

Certificações e Conformidade

{[ { nome: "PCI DSS", descricao: "Padrão de Segurança de Dados da Indústria de Cartões de Pagamento" }, { nome: "ISO 27001", descricao: "Gestão de Segurança da Informação" }, { nome: "LGPD", descricao: "Lei Geral de Proteção de Dados" }, { nome: "SOC 2", descricao: "Controles de Organização de Serviços" }, ].map((cert, i) => (

{cert.nome}

{cert.descricao}

))}

Compromisso com a Segurança

Na Yello/Cash, a segurança não é apenas uma característica, é um princípio fundamental. Nosso compromisso com a proteção dos seus dados e transações financeiras orienta todas as nossas decisões de desenvolvimento e operações.

Realizamos auditorias de segurança regulares, testes de penetração e revisões de código para garantir que nossa plataforma permaneça segura contra ameaças emergentes.

Nossos parceiros de processamento de pagamento, Apache Finarect e Hyperswitch, também aderem aos mais altos padrões de segurança da indústria, garantindo que todas as transações financeiras sejam processadas com segurança.

Yello / Cash

© 2025 Yello/Cash. Todos os direitos reservados.

) } [V0_FILE]typescriptreact:file="app/suporte/documentacao/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Search, FileText, BookOpen, Code, HelpCircle, ExternalLink } from "lucide-react" import { Button } from "@/components/ui/button" export default function DocumentacaoPage() { const categorias = [ { titulo: "Guias de Início Rápido", descricao: "Tutoriais para começar a usar a plataforma Yello/Cash", icone: , links: [ { nome: "Configuração inicial da conta", url: "#" }, { nome: "Cadastro de projetos solares", url: "#" }, { nome: "Configuração de métodos de pagamento", url: "#" }, ], }, { titulo: "Documentação da API", descricao: "Recursos para desenvolvedores integrarem com nossa plataforma", icone: , links: [ { nome: "Autenticação e autorização", url: "#" }, { nome: "Endpoints de pagamento", url: "#" }, { nome: "Webhooks e notificações", url: "#" }, ], }, { titulo: "Manuais do Usuário", descricao: "Documentação detalhada de todas as funcionalidades", icone: , links: [ { nome: "Gestão de projetos solares", url: "#" }, { nome: "Processamento de pagamentos", url: "#" }, { nome: "Relatórios e análises", url: "#" }, ], }, { titulo: "Perguntas Frequentes", descricao: "Respostas para as dúvidas mais comuns", icone: , links: [ { nome: "Dúvidas sobre pagamentos", url: "#" }, { nome: "Questões técnicas", url: "#" }, { nome: "Faturamento e planos", url: "#" }, ], }, ] return ( Yello / Cash Voltar para a página inicial Documentação Recursos e guias para ajudar você a aproveitar ao máximo a plataforma Yello/Cash. {categorias.map((categoria, index) => ( {categoria.icone} {categoria.titulo} {categoria.descricao} {categoria.links.map((link, i) => ( {link.nome} ))} ))} Precisa de mais ajuda? Nossa equipe de suporte está disponível para ajudar com qualquer dúvida que você possa ter. Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/suporte/documentacao/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/suporte/central-ajuda/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Search, MessageSquare, Phone, Mail, Clock, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" export default function CentralAjudaPage() { const topicos = [ { categoria: "Pagamentos", itens: [ "Como configurar pagamentos por marcos", "Opções de financiamento disponíveis", "Processamento de cartões de crédito", "Resolução de problemas com pagamentos", ], }, { categoria: "Projetos Solares", itens: [ "Cadastro de novo projeto solar", "Acompanhamento de instalação", "Análise de viabilidade solar", "Homologação junto à concessionária", ], }, { categoria: "Conta e Faturamento", itens: ["Alteração de plano", "Gerenciamento de usuários", "Faturas e recibos", "Cancelamento de conta"], }, { categoria: "Integrações", itens: [ "Conexão com Apache Finarect", "Integração com Hyperswitch", "API para desenvolvedores", "Webhooks e notificações", ], }, ] return ( Yello / Cash Voltar para a página inicial Central de Ajuda Encontre respostas para suas dúvidas e obtenha suporte para a plataforma Yello/Cash. {topicos.map((topico, index) => ( {topico.categoria} {topico.itens.map((item, i) => ( {item} ))} Ver todos os tópicos de {topico.categoria} ))} Entre em Contato Chat ao Vivo Converse com nossa equipe de suporte em tempo real. Telefone Fale diretamente com um especialista. 0800 123 4567 Seg-Sex, 9h às 18h E-mail Envie sua dúvida e responderemos em breve. Horário de Atendimento Segunda a Sexta, das 9h às 18h (exceto feriados nacionais) Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/suporte/central-ajuda/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/suporte/contato/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Send, MapPin, Phone, Mail, Clock } from "lucide-react" import { Button } from "@/components/ui/button" export default function ContatoPage() { return ( Yello / Cash Voltar para a página inicial Entre em Contato Estamos aqui para ajudar. Entre em contato conosco para tirar dúvidas, solicitar suporte ou conhecer mais sobre nossas soluções. Envie uma Mensagem Nome E-mail Assunto Mensagem Informações de Contato Endereço Av. Paulista, 1000, 10º andar Bela Vista, São Paulo - SP CEP: 01310-100 Telefone +55 (11) 3456-7890 0800 123 4567 (Suporte) E-mail contato@yellocash.com.br suporte@yellocash.com.br Horário de Atendimento Segunda a Sexta: 9h às 18h Sábado: 9h às 13h Domingo e Feriados: Fechado Atendimento Prioritário Clientes com planos Profissional e Empresarial têm acesso a canais de atendimento prioritário. Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/legal/termos/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun } from "lucide-react" import { Button } from "@/components/ui/button" export default function TermosPage() { return ( Yello / Cash Voltar para a página inicial Termos de Serviço Última atualização: 15 de março de 2025 1. Introdução Bem-vindo à Yello/Cash. Estes Termos de Serviço ("Termos") regem seu acesso e uso da plataforma Yello/Cash, incluindo nosso site, serviços, aplicativos e ferramentas (coletivamente, os "Serviços"). Ao acessar ou usar nossos Serviços, você concorda com estes Termos. Se você não concordar com estes Termos, não acesse ou use nossos Serviços. 2. Descrição dos Serviços A Yello/Cash é uma plataforma de financiamento e gestão de projetos solares que oferece soluções de pagamento, análise de viabilidade e ferramentas de gestão para empresas do setor de energia solar. Nossos Serviços incluem, mas não se limitam a: Processamento de pagamentos para projetos solares Ferramentas de análise de viabilidade solar Gestão de projetos solares Integração com processadores de pagamento Assistente de IA para suporte e análise 3. Contas e Registro Para acessar determinados recursos dos Serviços, você precisará criar uma conta. Você é responsável por manter a confidencialidade de suas credenciais de conta e por todas as atividades que ocorrerem em sua conta. Você concorda em fornecer informações precisas, atuais e completas durante o processo de registro e em atualizar essas informações para mantê-las precisas, atuais e completas. 4. Pagamentos e Faturamento Alguns de nossos Serviços são oferecidos mediante pagamento. Ao se inscrever em um plano pago, você concorda em pagar todas as taxas aplicáveis conforme descrito nos Serviços. A menos que especificado de outra forma: 1. As taxas são cotadas em Reais brasileiros (BRL) 2. As taxass podem estar sujeitas a alterações 3. Os pagamentos não são reembolsáveis, exceto conforme exigido por lei ou conforme especificado nestes Termos Reservamo-nos o direito de alterar nossas taxas mediante notificação prévia de 30 dias. 5. Propriedade Intelectual A Yello/Cash e seus licenciadores detêm todos os direitos, títulos e interesses, incluindo todos os direitos de propriedade intelectual relacionados aos Serviços e seu conteúdo. Você não pode copiar, modificar, distribuir, vender ou alugar qualquer parte dos Serviços sem nossa permissão expressa por escrito. 6. Privacidade Nossa Política de Privacidade descreve como coletamos, usamos e compartilhamos suas informações pessoais. Ao usar nossos Serviços, você concorda com nossa coleta, uso e compartilhamento de suas informações conforme descrito na Política de Privacidade. 7. Limitação de Responsabilidade Em nenhuma circunstância a Yello/Cash, seus diretores, funcionários, parceiros ou agentes serão responsáveis por quaisquer danos indiretos, incidentais, especiais, consequenciais ou punitivos, incluindo, sem limitação, perda de lucros, dados, uso, boa vontade ou outras perdas intangíveis, resultantes de seu acesso ou uso ou incapacidade de acessar ou usar os Serviços. 8. Alterações nos Termos Podemos modificar estes Termos a qualquer momento. Se fizermos alterações materiais nestes Termos, forneceremos um aviso através dos Serviços ou por outros meios. Seu uso continuado dos Serviços após tais alterações constitui sua aceitação dos Termos modificados. 9. Lei Aplicável Estes Termos serão regidos e interpretados de acordo com as leis do Brasil, sem considerar suas disposições sobre conflitos de leis. 10. Contato Se você tiver alguma dúvida sobre estes Termos, entre em contato conosco pelo e-mail legal@yellocash.com.br. Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/plataforma/solar-hub/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Zap, Building, Home, Users, ArrowRight, Workflow, Layers, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function SolarHubPage() { return ( Yello / Cash Voltar para a página inicial Novo Exclusivo Yello Solar Hub Plataforma de habilitação e orquestração que simplifica todo o processo de adoção de energia solar para proprietários de imóveis. Transformando a Jornada Solar O Yello Solar Hub é uma plataforma completa que conecta proprietários de imóveis, instaladores solares e instituições financeiras, simplificando cada etapa do processo de adoção de energia solar. {[ "Orquestração completa do projeto solar do início ao fim", "Habilitação de proprietários PF e PJ com soluções personalizadas", "Integração com processadores de pagamento e financiamento", "Análise de viabilidade com IA avançada", "Acompanhamento em tempo real de cada etapa do projeto", ].map((item, i) => ( {item} ))} Yello Solar Hub Ativo Orquestração de Projeto Análise de Viabilidade Concluído Proposta Técnica Concluído Aprovação Financeira Em andamento Instalação Pendente Homologação Pendente Economia Projetada R$ 950/mês ROI Estimado 3.8 anos Assistente IA "Seu projeto está avançando conforme o cronograma. A aprovação financeira deve ser concluída em 2 dias úteis." Soluções para Todos os Perfis O Yello Solar Hub oferece soluções personalizadas para diferentes tipos de proprietários de imóveis. Pessoa Física Proprietários Residenciais Soluções completas para proprietários de casas e apartamentos que desejam reduzir sua conta de energia. Habilitação Simplificada Análise de viabilidade com base na conta de energia atual Simulação de economia mensal e retorno do investimento Verificação automática de crédito para opções de financiamento Orquestração Personalizada Conexão com instaladores certificados na sua região Acompanhamento de cada etapa do projeto via aplicativo Suporte na homologação junto à concessionária de energia Pessoa Jurídica Empresas e Organizações Soluções corporativas para empresas que buscam reduzir custos operacionais e aumentar sustentabilidade. Habilitação Corporativa Análise de demanda energética e perfil de consumo Estudo de viabilidade técnica e financeira detalhado Acesso a linhas de crédito especiais para empresas Orquestração Empresarial Gestão de projetos complexos com múltiplas unidades Dashboard executivo com KPIs de economia e sustentabilidade Suporte especializado para questões regulatórias e fiscais Como Funciona a Orquestração O Yello Solar Hub coordena todo o processo de adoção de energia solar, conectando todas as partes envolvidas. {[ { icon: , title: "Cadastro e Análise", description: "Proprietário se cadastra e fornece informações básicas para análise inicial.", }, { icon: , title: "Viabilidade", description: "IA analisa viabilidade técnica e financeira com base nos dados fornecidos.", }, { icon: , title: "Proposta", description: "Sistema gera proposta personalizada com opções de financiamento.", }, { icon: , title: "Execução", description: "Plataforma coordena instaladores, fornecedores e financiamento.", }, { icon: , title: "Ativação", description: "Suporte na homologação e ativação do sistema solar.", }, ].map((step, index) => ( {step.icon} {step.title} {step.description} ))} Transforme sua experiência solar com o Yello Solar Hub Simplifique todo o processo de adoção de energia solar e maximize seu retorno sobre investimento. Mais de 5.000 projetos orquestrados com sucesso em todo o Brasil Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/plataforma/solar-hub/loading.tsx" isMerged="true" import { Loader2 } from "lucide-react" export default function Loading() { return ( Carregando Yello Solar Hub... ) } [V0_FILE]typescriptreact:file="app/plataforma/solar-hub/ai-integration.tsx" isMerged="true" "use client" import { useState } from "react" import { Bot, Sun, User, ImageIcon, Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" export default function AIIntegration() { const [messages, setMessages] = useState([ { role: "assistant", content: "Olá! Sou o assistente do Yello Solar Hub. Como posso ajudar com seu projeto solar hoje?", }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSend = async () => { if (!input.trim()) return // Add user message const userMessage = { role: "user", content: input } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { // Simulate AI response using AI SDK // In a real implementation, this would use the AI SDK to generate a response setTimeout(() => { const responses = [ "Baseado na análise do seu telhado, estimo um potencial de geração de aproximadamente 450 kWh/mês, o que pode representar uma economia de R$ 350 mensais na sua conta de luz.", "Para um sistema de 4kWp como o que você precisa, temos opções de pagamento flexíveis: à vista com 10% de desconto ou financiamento em até 60x com parcelas a partir de R$ 499/mês.", "O processo de instalação para seu projeto levará aproximadamente 3 dias, e a homologação junto à concessionária costuma levar entre 30 e 45 dias. Nosso sistema vai orquestrar todo esse processo para você.", "Analisando seu consumo energético, recomendo um sistema com 10 painéis de 450W e um inversor de 5kW. O retorno do investimento está estimado em 4.2 anos.", ] const randomResponse = responses[Math.floor(Math.random() * responses.length)] setMessages((prev) => [...prev, { role: "assistant", content: randomResponse }]) setIsLoading(false) }, 1500) } catch (error) { console.error("Error generating response:", error) setMessages((prev) => [ ...prev, { role: "assistant", content: "Desculpe, tive um problema ao processar sua solicitação. Pode tentar novamente?", }, ]) setIsLoading(false) } } return ( Assistente Solar Powered by AI SDK Online {messages.map((message, index) => ( {message.role === "assistant" && ( )} {message.content} {message.role === "user" && ( )} ))} {isLoading && ( )} setInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSend()} /> Powered by @ai-sdk/openai Yello AI ) } [V0_FILE]plaintext:file="public/images/solar-hub-diagram.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-cIfoBPEzoVCfA2H9P1E2ZD1R2gcyK3.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/gauge.tsx" isMerged="true" import { cn } from "@/lib/utils" import type { CSSProperties, SVGProps } from "react" export interface GaugeProps extends Omit, "className"> { value: number size?: number | string gapPercent?: number strokeWidth?: number equal?: boolean showValue?: boolean primary?: "danger" | "warning" | "success" | "info" | string | { [key: number]: string } secondary?: "danger" | "warning" | "success" | "info" | string | { [key: number]: string } transition?: { length?: number step?: number delay?: number } className?: | string | { svgClassName?: string primaryClassName?: string secondaryClassName?: string textClassName?: string } } /** * Renders a circular gauge using SVG. Allows configuration of colors, stroke, and animations. * @param value - Current value of the gauge, expressed as a percentage. * @param size = Width and height of the gauge. Defaults to 100%. * @param gapPercent - Percentage of the total circumference that represents a gap in the gauge. Defaults to 5%. * @param strokeWidth - Stroke width of the gauge. Defaults to 10px. * @param equal - Determines if the gauge should have equal primary and secondary stroke lengths. Defaults to false. * @param showValue - Option to display the numeric value inside the gauge. Defaults to true. * @param primary - Primary color or set of colors for the gauge, with optional threshold values to determine color changes. * @param secondary - Secondary color or set of colors for the gauge, similar to `primary`. * @param transition - Transition settings for the gauge's animation, specifying the length, step, and delay of transitions. * @param className - Class names for different parts of the gauge, including the SVG container and individual elements. * @param props Configuration and properties for the svg. / function Gauge({ value, size = "100%", gapPercent = 5, strokeWidth = 10, equal = false, showValue = true, primary, secondary, transition = { length: 1000, // ms step: 200, // ms delay: 0, // ms }, className, ...props }: GaugeProps) { const strokePercent = value // % const circleSize = 100 // px const radius = circleSize / 2 - strokeWidth / 2 const circumference = 2 Math.PI * radius const percentToDegree = 360 / 100 // deg const percentToPx = circumference / 100 // px const offsetFactor = equal ? 0.5 : 0 const offsetFactorSecondary = 1 - offsetFactor const primaryStrokeDasharray = () => { if (offsetFactor > 0 && strokePercent > 100 - gapPercent * 2 * offsetFactor) { // calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0 const subtract = -strokePercent + 100 return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}` } else { const subtract = gapPercent * 2 * offsetFactor return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}` } } const secondaryStrokeDasharray = () => { if (offsetFactorSecondary < 1 && strokePercent < gapPercent * 2 * offsetFactorSecondary) { // calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1 const subtract = strokePercent return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}` } else { const subtract = gapPercent * 2 * offsetFactorSecondary return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}` } } const primaryTransform = () => { if (offsetFactor > 0 && strokePercent > 100 - gapPercent * 2 * offsetFactor) { // calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0 const add = 0.5 * (-strokePercent + 100) return `rotate(${-90 + add * percentToDegree}deg)` } else { const add = gapPercent * offsetFactor return `rotate(${-90 + add * percentToDegree}deg)` } } const secondaryTransform = () => { if (offsetFactorSecondary < 1 && strokePercent < gapPercent * 2 * offsetFactorSecondary) { // calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1 const subtract = 0.5 * strokePercent return `rotate(${360 - 90 - subtract * percentToDegree}deg) scaleY(-1)` } else { const subtract = gapPercent * offsetFactorSecondary return `rotate(${360 - 90 - subtract * percentToDegree}deg) scaleY(-1)` } } const primaryStroke = () => { if (!primary) { return strokePercent <= 25 ? "#dc2626" // Red : strokePercent <= 50 ? "#f59e0b" // Amber : strokePercent <= 75 ? "#3b82f6" // Blue : "#22c55e" // Green } else if (typeof primary === "string") { return primary === "danger" ? "#dc2626" // Red : primary === "warning" ? "#f59e0b" // Amber : primary === "info" ? "#3b82f6" // Blue : primary === "success" ? "#22c55e" // Green : primary } else if (typeof primary === "object") { const primaryKeys = Object.keys(primary).sort((a, b) => Number(a) - Number(b)) let primaryStroke = "" for (let i = 0; i < primaryKeys.length; i++) { const currentKey = Number(primaryKeys[i]) const nextKey = Number(primaryKeys[i + 1]) if (strokePercent >= currentKey && (strokePercent < nextKey || !nextKey)) { primaryStroke = primary[currentKey] || "" if (["danger", "warning", "success", "info"].includes(primaryStroke)) { primaryStroke = { danger: "#dc2626", warning: "#f59e0b", info: "#3b82f6", success: "#22c55e", }[primaryStroke] || primaryStroke } break } } return primaryStroke } } const secondaryStroke = () => { if (!secondary) { return "#9ca3af" // Default Gray } else if (typeof secondary === "string") { return secondary === "danger" ? "#fecaca" // Light Red : secondary === "warning" ? "#fde68a" // Light Amber : secondary === "info" ? "#bfdbfe" // Light Blue : secondary === "success" ? "#bbf7d0" // Light Green : secondary } else if (typeof secondary === "object") { const stroke_percent_secondary = 100 - strokePercent const secondaryKeys = Object.keys(secondary).sort((a, b) => Number(a) - Number(b)) let secondaryStroke = "" for (let i = 0; i < secondaryKeys.length; i++) { const currentKey = Number(secondaryKeys[i]) const nextKey = Number(secondaryKeys[i + 1]) if (stroke_percent_secondary >= currentKey && (stroke_percent_secondary < nextKey || !nextKey)) { secondaryStroke = secondary[currentKey] || "" if (["danger", "warning", "success", "info"].includes(secondaryStroke)) { secondaryStroke = { danger: "#fecaca", warning: "#fde68a", info: "#bfdbfe", success: "#bbf7d0", }[secondaryStroke] || secondaryStroke } break } } return secondaryStroke } } const primaryOpacity = () => { if ( offsetFactor > 0 && strokePercent < gapPercent * 2 * offsetFactor && strokePercent < gapPercent * 2 * offsetFactorSecondary ) { return 0 } else return 1 } const secondaryOpacity = () => { if ( (offsetFactor === 0 && strokePercent > 100 - gapPercent * 2) || (offsetFactor > 0 && strokePercent > 100 - gapPercent * 2 * offsetFactor && strokePercent > 100 - gapPercent * 2 * offsetFactorSecondary) ) { return 0 } else return 1 } const circleStyles: CSSProperties = { strokeLinecap: "round", strokeLinejoin: "round", strokeDashoffset: 0, strokeWidth: strokeWidth, transition: `all ${transition?.length}ms ease ${transition?.delay}ms`, transformOrigin: "50% 50%", shapeRendering: "geometricPrecision", } return ( ) } export { Gauge } [V0_FILE]typescriptreact:file="components/ui/gauge-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { Gauge } from "@/components/ui/gauge" export function GaugeDemo() { const [value, setValue] = useState(48) // Default value return ( {/* Gauges /} {/ Slider to Control Gauge Value /} setValue(Number(e.target.value))} className="w-64 h-2 mt-10 bg-gray-300 rounded-lg appearance-none cursor-pointer" /> {/ Display Value /} {value}% ) } [V0_FILE]typescriptreact:file="components/payment-system.tsx" isQuickEdit="true" isMerged="true" import { Check, CreditCard, Landmark, Zap, ArrowRight, Globe, BanknoteIcon, Coins, Receipt, CreditCardIcon, Sun, Wrench, Gauge, FileCheck, LightbulbIcon, } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" export default function PaymentSystem() { return ( Capitalização de Projetos Solares Soluções Financeiras para Cada Etapa Métodos de pagamento que viabilizam toda a cadeia de valor dos projetos solares, do planejamento à homologação, com processamento seguro via Apache Finarect e Hyperswitch Tradicionais Por Marcos Alternativos Métodos Tradicionais Opções de pagamento convencionais para capitalização imediata de projetos solares, ideais para clientes com capital disponível que buscam maximizar o retorno sobre investimento. {[ "Transferência bancária com desconto de 5% no valor total", "Cartão de crédito em até 12x para projetos residenciais", "Boleto bancário com compensação em 24h", "Pagamento à vista com prioridade na instalação", ].map((item, i) => ( {item} ))} Aceito internacionalmente com conversão automática de moeda Capitalização Imediata Exemplo para um projeto solar de R$ 40.000 Pagamento à Vista Desconto de 5% = Economia de R$ 2.000 Retorno em 3,8 anos Recomendado Cartão de Crédito 12x de R$ 3.667 (com juros) Retorno em 4,2 anos Boleto Bancário Pagamento à vista com 3% de desconto Retorno em 3,9 anos Economia média mensal R$ 850/mês Pagamento por Marcos Divida os pagamentos em etapas críticas da cadeia de valor do projeto solar, alinhando o fluxo de caixa com as entregas concretas e reduzindo riscos. {[ "Sem taxas de financiamento adicionais", "Visibilidade clara do progresso do projeto", "Pagamento vinculado à conclusão de entregas específicas", "Proteção financeira com pagamentos proporcionais às entregas", ].map((item, i) => ( {item} ))} Certificado ANEEL Padrão Internacional Cadeia de Valor do Projeto Solar Exemplo para um projeto típico de R$ 40.000 {[ { name: "Marco 1: Planejamento", description: "Visita técnica e dossiê solar", percentage: "15%", value: "R$ 6.000", progress: 15, icon: , status: "completed", tip: "Pagamento inicial libera o planejamento detalhado do seu projeto", }, { name: "Marco 2: Aquisição", description: "Compra de equipamentos", percentage: "35%", value: "R$ 14.000", progress: 35, icon: , status: "in-progress", tip: "Garanta os melhores equipamentos com pagamento pontual", }, { name: "Marco 3: Instalação", description: "Montagem e integração do sistema", percentage: "25%", value: "R$ 10.000", progress: 25, icon: , status: "pending", tip: "Agende sua instalação assim que confirmar este pagamento", }, { name: "Marco 4: Homologação", description: "Aprovação pela concessionária", percentage: "25%", value: "R$ 10.000", progress: 25, icon: , status: "pending", tip: "Pagamento final desbloqueia a homologação junto à concessionária", }, ].map((milestone, i) => ( {milestone.status === "completed" ? ( ) : ( milestone.icon )} {milestone.name} {milestone.status === "completed" && ( Concluído 🎉 )} {milestone.status === "in-progress" && ( Em andamento ⏳ )} {milestone.description} {milestone.percentage} {milestone.value} {/ Tip section /} {milestone.status !== "completed" && ( {milestone.tip} )} {/ Payment action button /} {milestone.status === "in-progress" && ( )} {/ Celebration for completed milestone /} {milestone.status === "completed" && i === 0 && ( {[...Array(5)].map((_, index) => ( {["🎉", "✨", "🌟", "💫", "🏆"][index % 5]} ))} )} ))} {/ AHA Moment - Final Celebration /} Ao concluir todos os pagamentos Momento AHA! 🎊 Seu sistema solar estará 100% operacional 🏆 🌞 💰 Economia Imediata Até R$ 950/mês na conta de luz Energia Limpa Valorização do Imóvel Independência Energética Economia média mensal após conclusão R$ 850/mês Métodos Alternativos Soluções inovadoras de capitalização que viabilizam projetos solares sem comprometer o fluxo de caixa, adaptadas às necessidades específicas do mercado brasileiro. {[ "Financiamento com taxas a partir de 0,99% a.m.", "Leasing solar com opção de compra ao final do contrato", "Consórcio solar com parcelas reduzidas e sem juros", "Sistema de assinatura solar com pagamento mensal", ].map((item, i) => ( {item} ))} Economia imediata sem investimento inicial significativo Capitalização Alternativa Exemplo para um projeto solar de R$ 40.000 Financiamento Solar 60x de R$ 950 (0,99% a.m.) Economia mensal: R$ 850 Economia líquida: R$ 100/mês desde o início Popular Consórcio Solar Parcelas a partir de R$ 599/mês sem juros Prazo médio de contemplação: 24 meses Economia após contemplação: R$ 850/mês Econômico Assinatura Solar Mensalidade de R$ 650 por 5 anos Sem investimento inicial Economia imediata: R$ 200/mês Zero Investimento Economia média em 10 anos R$ 102.000 Processamento Financeiro Seguro Apache Finarect Processamento financeiro especializado para projetos de energia renovável, com monitoramento em tempo real de cada etapa da cadeia de valor. Projetos Internacionais Multimoeda Hyperswitch Roteamento inteligente de pagamentos adaptado à cadeia de valor solar, garantindo a capitalização adequada em cada fase do projeto. Integração Bancária Métodos Brasileiros Certificações e Conformidade PCI DSS ISO 27001 LGPD Compliant BACEN Autorizado ANEEL Certificado ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( setTheme("light")} className="flex items-center gap-2"> Claro {theme === "light" && ✓} setTheme("dark")} className="flex items-center gap-2"> Escuro {theme === "dark" && ✓} setTheme("system")} className="flex items-center gap-2"> 💻 Sistema {theme === "system" && ✓} ) } [V0_FILE]typescriptreact:file="components/ui/brand-card.tsx" isQuickEdit="true" isMerged="true" import as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" // Update the cardVariants to incorporate brand styling with blackout dark mode const cardVariants = cva("rounded-lg border bg-card text-card-foreground shadow-sm", { variants: { variant: { default: "", elevated: "shadow-md", outline: "shadow-none", // Brand variants brand: "border-yellow-200/30 dark:border-yellow-800/20 bg-white dark:bg-black", "brand-accent": "border-yellow-300/30 dark:border-yellow-700/20 bg-gradient-to-br from-yellow-50 to-yellow-100/5 dark:from-yellow-950/10 dark:to-yellow-900/10", "brand-secondary": "border-green-200/30 dark:border-green-800/20 bg-green-50/5 dark:bg-green-950/10", "brand-highlight": "border-yellow-300 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/30", "brand-info": "border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-950/30", "brand-warning": "border-orange-300 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/30", "brand-danger": "border-red-300 dark:border-red-600 bg-red-50 dark:bg-red-950/30", }, padding: { default: "p-6", sm: "p-4", lg: "p-8", none: "", }, hover: { default: "", lift: "transition-all duration-300 hover:shadow-md hover:-translate-y-1", glow: "transition-all duration-300 hover:shadow-md dark:hover:shadow-[0_0_15px_rgba(255,206,0,0.3)]", border: "transition-all duration-300 hover:border-yellow-400 dark:hover:border-yellow-500", }, }, defaultVariants: { variant: "default", padding: "default", hover: "default", }, }) export interface BrandCardProps extends React.HTMLAttributes, VariantProps {} const BrandCard = React.forwardRef( ({ className, variant, padding, hover, ...props }, ref) => ( ), ) BrandCard.displayName = "BrandCard" const BrandCardHeader = React.forwardRef>( ({ className, ...props }, ref) => , ) BrandCardHeader.displayName = "BrandCardHeader" const BrandCardTitle = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) BrandCardTitle.displayName = "BrandCardTitle" const BrandCardDescription = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) BrandCardDescription.displayName = "BrandCardDescription" const BrandCardContent = React.forwardRef>( ({ className, ...props }, ref) => , ) BrandCardContent.displayName = "BrandCardContent" const BrandCardFooter = React.forwardRef>( ({ className, ...props }, ref) => , ) BrandCardFooter.displayName = "BrandCardFooter" export { BrandCard, BrandCardHeader, BrandCardFooter, BrandCardTitle, BrandCardDescription, BrandCardContent } [V0_FILE]typescriptreact:file="components/ui/brand-button.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "@radix-ui/react-slot" import { cn } from "@/lib/utils" import { Sparkles, ArrowRight } from "lucide-react" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", // Brand variants brand: "bg-gradient-to-r from-yellow-500 to-yellow-600 text-black hover:opacity-90 font-semibold dark:shadow-[0_0_10px_rgba(255,206,0,0.3)]", "brand-secondary": "bg-green-500 text-white hover:bg-green-600 font-semibold dark:shadow-[0_0_10px_rgba(16,185,129,0.3)]", "brand-outline": "border-2 border-yellow-500 text-yellow-600 dark:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-950/20 font-semibold", "brand-ghost": "text-yellow-600 dark:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-950/20 font-semibold", "brand-blue": "bg-blue-500 text-white hover:bg-blue-600 font-semibold dark:shadow-[0_0_10px_rgba(59,130,246,0.3)]", "brand-danger": "bg-red-500 text-white hover:bg-red-600 font-semibold dark:shadow-[0_0_10px_rgba(239,68,68,0.3)]", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", xl: "h-12 rounded-md px-8 text-base", icon: "h-10 w-10", }, hasIcon: { true: "", false: "", }, isAnimated: { true: "", false: "", }, }, compoundVariants: [ { hasIcon: true, size: "default", class: "gap-2", }, { hasIcon: true, size: "sm", class: "gap-1.5", }, { hasIcon: true, size: "lg", class: "gap-2", }, { hasIcon: true, size: "xl", class: "gap-2.5", }, { isAnimated: true, variant: "brand", class: "relative overflow-hidden transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]", }, { isAnimated: true, variant: "brand-secondary", class: "relative overflow-hidden transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]", }, ], defaultVariants: { variant: "default", size: "default", hasIcon: false, isAnimated: false, }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean rightIcon?: React.ReactNode leftIcon?: React.ReactNode iconSparkle?: boolean } const BrandButton = React.forwardRef( ( { className, variant, size, hasIcon, isAnimated, asChild = false, rightIcon, leftIcon, iconSparkle, children, ...props }, ref, ) => { const Comp = asChild ? Slot : "button" // Determine automatically if has icon const hasIconValue = hasIcon || rightIcon || leftIcon || iconSparkle ? true : false // Add subtle shine animation for brand buttons const [isHovering, setIsHovering] = React.useState(false) return ( setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} {...props} > {/* Add shine effect for brand buttons /} {variant?.includes("brand") && isHovering && ( )} {leftIcon && leftIcon} {iconSparkle && } {children} {rightIcon && rightIcon} {variant === "brand" && !rightIcon && !leftIcon && !iconSparkle && } ) }, ) BrandButton.displayName = "BrandButton" export { BrandButton, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/brand-badge.tsx" isMerged="true" import type as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", // Brand variants "brand-gradient": "bg-gradient-to-r from-yello-yellow via-yello-orange to-yello-pink text-black border-transparent dark:shadow-[0_0_10px_rgba(255,206,0,0.3)]", "brand-yellow": "bg-yello-yellow/20 text-yello-orange hover:bg-yello-yellow/30 border-transparent dark:text-yello-yellow dark:bg-yello-yellow/10", "brand-orange": "bg-yello-orange/20 text-yello-orange hover:bg-yello-orange/30 border-transparent dark:text-yello-orange dark:bg-yello-orange/10", "brand-pink": "bg-yello-pink/20 text-yello-pink hover:bg-yello-pink/30 border-transparent dark:text-yello-pink dark:bg-yello-pink/10", "brand-sky": "bg-yello-sky/20 text-yello-sky hover:bg-yello-sky/30 border-transparent dark:text-yello-sky dark:bg-yello-sky/10", "brand-green": "bg-yello-green/20 text-yello-green hover:bg-yello-green/30 border-transparent dark:text-yello-green dark:bg-yello-green/10", }, size: { default: "text-xs px-2.5 py-0.5", sm: "text-[10px] px-2 py-0.5", lg: "text-sm px-3 py-1", }, withIcon: { true: "pl-2", false: "", }, }, compoundVariants: [ { withIcon: true, size: "default", class: "gap-1", }, { withIcon: true, size: "sm", class: "gap-0.5", }, { withIcon: true, size: "lg", class: "gap-1.5", }, ], defaultVariants: { variant: "default", size: "default", withIcon: false, }, }, ) export interface BrandBadgeProps extends React.HTMLAttributes, VariantProps { icon?: React.ReactNode } function BrandBadge({ className, variant, size, withIcon, icon, children, ...props }: BrandBadgeProps) { // Determina automaticamente se tem ícone const hasIcon = withIcon || icon ? true : false return ( {icon && icon} {children} ) } export { BrandBadge, badgeVariants } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { ThemeToggle } from "@/components/theme-toggle" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Yello Solar - Financiamento Simplificado para Energia Solar", description: "Soluções de pagamento que viabilizam cada etapa da cadeia de valor dos projetos solares", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" import { ArrowRight, Sun, CreditCard, LineChart } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" export default function HeroSection() { return ( {/* Fundo adaptado para o modo escuro /} {/ Elementos decorativos com efeito de brilho no modo escuro /} Capitalização de Projetos Solares {/ Badges com estilo adaptado para o modo escuro /} Autoridade Internacional Adaptação Brasileira {/ Título com efeito de gradiente que se destaca no modo escuro /} Financiamento{" "} simplificado {" "} para energia solar Soluções de pagamento que viabilizam cada etapa da cadeia de valor dos projetos solares, do planejamento à homologação. Pagamentos Tradicionais Pagamentos por Marcos Financiamento Alternativo {[1, 2, 3, 4].map((i) => ( {i} ))} Mais de R$ 250 milhões em projetos solares financiados Financiamento Inteligente Soluções adaptadas a cada fase do projeto solar ROI Acelerado Retorno do investimento em até 4 anos Pagamento por Marcos Alinhado com as entregas do projeto ) } [V0_FILE]typescriptreact:file="components/features.tsx" isQuickEdit="true" isMerged="true" import { Sun, CreditCard, Wallet, BanknoteIcon, LineChart, Clock } from "lucide-react" import { Badge } from "@/components/ui/badge" export default function Features() { const features = [ { icon: , title: "Capitalização de Projetos Solares", description: "Soluções financeiras que viabilizam cada etapa da cadeia de valor dos projetos de energia solar.", badge: "Essencial", emoji: "☀️", memoji: "👨‍💼", }, { icon: , title: "Pagamentos Tradicionais", description: "Opções de capitalização imediata com descontos especiais para maximizar o retorno do investimento.", badge: "ROI Maximizado", emoji: "💳", memoji: "👩‍💻", }, { icon: , title: "Pagamentos por Marcos", description: "Alinhamento financeiro com cada etapa da cadeia de valor, reduzindo riscos e otimizando o fluxo de caixa.", badge: "Baixo Risco", emoji: "🏆", memoji: "🧑‍🔧", }, { icon: , title: "Financiamento Alternativo", description: "Soluções inovadoras que permitem capitalização sem investimento inicial significativo.", badge: "Zero Entrada", emoji: "💰", memoji: "👨‍🚀", }, { icon: , title: "Análise de Retorno", description: "Cálculos detalhados de ROI, payback e economia mensal para cada opção de pagamento.", badge: "Transparente", emoji: "📈", memoji: "🧑‍💻", }, { icon: , title: "Cronograma Financeiro", description: "Planejamento detalhado dos desembolsos alinhados com o cronograma de execução do projeto solar.", badge: "Previsibilidade", emoji: "⏱️", memoji: "👩‍🔬", }, ] return ( Soluções Financeiras para Energia Solar Facilitando a capitalização em cada etapa da cadeia de valor dos projetos solares {features.map((feature, index) => ( {/ Memoji positioned in top-right corner */} {feature.memoji} {feature.icon} {feature.emoji} {feature.badge} {feature.title} {feature.description} {feature.emoji} Saiba mais ))} Cadeia de Valor Financiada Nossa plataforma oferece soluções de capitalização para cada etapa da cadeia de valor dos projetos solares, desde o planejamento inicial até a homologação final, garantindo o fluxo financeiro adequado para viabilizar projetos de todos os portes. ) } [V0_FILE]typescriptreact:file="app/auth/sign-in/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" import { ArrowLeft, Sun, Mail, Lock, Eye, EyeOff } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Separator } from "@/components/ui/separator" export default function SignInPage() { const [showPassword, setShowPassword] = useState(false) return ( / Cash Voltar para a página inicial Entrar na sua conta Acesse sua conta para gerenciar seus projetos solares Ou continue com Email Senha Lembrar de mim Esqueceu a senha? Não tem uma conta?{" "} Registre-se Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" import { ArrowLeft, Sun, Mail, Lock, Eye, EyeOff, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Separator } from "@/components/ui/separator" export default function SignUpPage() { const [showPassword, setShowPassword] = useState(false) return ( / Cash Voltar para a página inicial Criar uma conta Registre-se para começar a gerenciar seus projetos solares Ou continue com Nome Sobrenome Email Senha A senha deve ter pelo menos 8 caracteres Eu concordo com os{" "} Termos de Serviço {" "} e{" "} Política de Privacidade Já tem uma conta?{" "} Faça login Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/auth/forgot-password/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ArrowLeft, Sun, Mail, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function ForgotPasswordPage() { return ( / Cash Voltar para o login Recuperar senha Enviaremos um link para redefinir sua senha Email Lembrou sua senha?{" "} Voltar para o login Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescript:file="lib/services/base-service.ts" isMerged="true" /** * Base Service class that provides common functionality for all services * Implements basic CRUD operations and caching support */ import { cache } from "@/lib/cache/cache-service" import { logger } from "@/lib/utils/logger" export class BaseService { protected entityName: string protected cacheTTL = 3600 // Default cache TTL in seconds (1 hour) constructor(entityName: string, cacheTTL?: number) { this.entityName = entityName if (cacheTTL) this.cacheTTL = cacheTTL } /** * Generate a cache key for an entity */ protected getCacheKey(id?: string | number): string { return id ? `${this.entityName}:${id}` : `${this.entityName}:all` } /** * Invalidate cache for an entity or collection */ protected async invalidateCache(id?: string | number): Promise { const key = this.getCacheKey(id) await cache.del(key) logger.info(`Cache invalidated for ${key}`) } /** * Get data with caching support */ protected async getWithCache(id: string | number, fetchFn: () => Promise): Promise { const cacheKey = this.getCacheKey(id) // Try to get from cache first const cachedData = await cache.get(cacheKey) if (cachedData) { logger.debug(`Cache hit for ${cacheKey}`) return cachedData } // If not in cache, fetch data logger.debug(`Cache miss for ${cacheKey}`) const data = await fetchFn() // Store in cache await cache.set(cacheKey, data, this.cacheTTL) return data } /** * Get collection with caching support */ protected async getAllWithCache(fetchFn: () => Promise): Promise { const cacheKey = this.getCacheKey() // Try to get from cache first const cachedData = await cache.get(cacheKey) if (cachedData) { logger.debug(`Cache hit for ${cacheKey}`) return cachedData } // If not in cache, fetch data logger.debug(`Cache miss for ${cacheKey}`) const data = await fetchFn() // Store in cache await cache.set(cacheKey, data, this.cacheTTL) return data } } [V0_FILE]typescript:file="lib/cache/cache-service.ts" isMerged="true" /** * Enhanced caching service with support for multiple strategies * and configurable expiration times / import { logger } from "@/lib/utils/logger" // Cache item interface interface CacheItem { value: T expiry: number | null // null means no expiration } // Cache strategy interface export interface CacheStrategy { get(key: string): Promise set(key: string, value: T, ttl?: number): Promise del(key: string): Promise flush(): Promise } // Memory cache implementation class MemoryCacheStrategy implements CacheStrategy { private cache: Map> = new Map() async get(key: string): Promise { const item = this.cache.get(key) if (!item) return null // Check if expired if (item.expiry && item.expiry < Date.now()) { this.cache.delete(key) return null } return item.value as T } async set(key: string, value: T, ttl?: number): Promise { const expiry = ttl ? Date.now() + ttl 1000 : null this.cache.set(key, { value, expiry }) } async del(key: string): Promise { this.cache.delete(key) } async flush(): Promise { this.cache.clear() } } // Cache service with strategy pattern class CacheService { private strategy: CacheStrategy constructor(strategy: CacheStrategy) { this.strategy = strategy } async get(key: string): Promise { try { return await this.strategy.get(key) } catch (error) { logger.error(`Cache get error for key ${key}:`, error) return null } } async set(key: string, value: T, ttl?: number): Promise { try { await this.strategy.set(key, value, ttl) } catch (error) { logger.error(`Cache set error for key ${key}:`, error) } } async del(key: string): Promise { try { await this.strategy.del(key) } catch (error) { logger.error(`Cache delete error for key ${key}:`, error) } } async flush(): Promise { try { await this.strategy.flush() } catch (error) { logger.error("Cache flush error:", error) } } // Helper method to set with a specific TTL async setWithTTL(key: string, value: T, ttl: number): Promise { await this.set(key, value, ttl) } } // Export a singleton instance with memory cache strategy by default export const cache = new CacheService(new MemoryCacheStrategy()) [V0_FILE]typescript:file="lib/utils/logger.ts" isMerged="true" /** * Logger utility for consistent logging across the application */ type LogLevel = "debug" | "info" | "warn" | "error" class Logger { private logLevel: LogLevel = "info" constructor(level?: LogLevel) { if (level) this.logLevel = level // Set log level from environment if available if (process.env.LOG_LEVEL) { this.logLevel = process.env.LOG_LEVEL as LogLevel } } private shouldLog(level: LogLevel): boolean { const levels: Record = { debug: 0, info: 1, warn: 2, error: 3, } return levels[level] >= levels[this.logLevel] } debug(message: string, ...args: any[]): void { if (this.shouldLog("debug")) { console.debug(`[DEBUG] ${message}`, ...args) } } info(message: string, ...args: any[]): void { if (this.shouldLog("info")) { console.info(`[INFO] ${message}`, ...args) } } warn(message: string, ...args: any[]): void { if (this.shouldLog("warn")) { console.warn(`[WARN] ${message}`, ...args) } } error(message: string, ...args: any[]): void { if (this.shouldLog("error")) { console.error(`[ERROR] ${message}`, ...args) } } } export const logger = new Logger() [V0_FILE]typescript:file="lib/services/property-service.ts" isMerged="true" /** * Property service for handling property-related business logic */ import { BaseService } from "./base-service" import { logger } from "@/lib/utils/logger" // Property interface export interface Property { id: number title: string type: string location: string area: string price: string image: string featured?: boolean energy?: string paymentOptions?: { type: string name: string description: string processor: string details: string } } // Mock database for demonstration const mockProperties: Property[] = [ { id: 1, title: "Apartamento Moderno", type: "Apartamento", location: "São Paulo, SP", area: "120m²", price: "R$ 750.000", image: "/placeholder.svg?height=300&width=400", featured: true, energy: "Sistema Solar Instalado", paymentOptions: { type: "traditional", name: "Financiamento Tradicional", description: "Linha de crédito com taxa fixa de 9.5% a.a.", processor: "Lago Payments", details: "Aprovação em 48h, entrada de 20%", }, }, { id: 2, title: "Casa em Condomínio", type: "Casa", location: "Rio de Janeiro, RJ", area: "220m²", price: "R$ 1.200.000", image: "/placeholder.svg?height=300&width=400", featured: false, energy: "Preparado para Energia Solar", paymentOptions: { type: "flexible", name: "Pagamento Misto", description: "30% entrada + financiamento + cartão", processor: "Hyperswitch", details: "Parcelamento em até 60x", }, }, { id: 3, title: "Sala Comercial", type: "Comercial", location: "Belo Horizonte, MG", area: "85m²", price: "R$ 450.000", image: "/placeholder.svg?height=300&width=400", featured: false, energy: "Energia Net Zero", paymentOptions: { type: "milestone", name: "Pagamento por Marcos", description: "4 etapas de implementação solar", processor: "Finarect", details: "Pagamentos vinculados a entregas", }, }, ] export class PropertyService extends BaseService { constructor() { // Set entity name and cache TTL (30 minutes) super("property", 1800) } /** * Get all properties with optional filtering */ async getAllProperties(filters?: { featured?: boolean type?: string location?: string }): Promise { return this.getAllWithCache(async () => { let properties = [...mockProperties] // Apply filters if provided if (filters) { if (filters.featured !== undefined) { properties = properties.filter((p) => p.featured === filters.featured) } if (filters.type) { properties = properties.filter((p) => p.type === filters.type) } if (filters.location) { properties = properties.filter((p) => p.location.includes(filters.location)) } } return properties }) } /** * Get a property by ID */ async getPropertyById(id: number): Promise { return this.getWithCache(id, async () => { const property = mockProperties.find((p) => p.id === id) return property || null }) } /** * Create a new property */ async createProperty(propertyData: Omit): Promise { // Generate a new ID (in a real app, this would be handled by the database) const newId = Math.max(...mockProperties.map((p) => p.id)) + 1 const newProperty: Property = { id: newId, ...propertyData, } // In a real app, this would save to a database mockProperties.push(newProperty) // Invalidate the collection cache await this.invalidateCache() logger.info(`Created new property with ID ${newId}`) return newProperty } /** * Update a property */ async updateProperty(id: number, propertyData: Partial): Promise { const index = mockProperties.findIndex((p) => p.id === id) if (index === -1) { return null } // Update the property const updatedProperty = { ...mockProperties[index], ...propertyData, } mockProperties[index] = updatedProperty // Invalidate caches await this.invalidateCache(id) await this.invalidateCache() logger.info(`Updated property with ID ${id}`) return updatedProperty } /** * Delete a property */ async deleteProperty(id: number): Promise { const index = mockProperties.findIndex((p) => p.id === id) if (index === -1) { return false } // Remove the property mockProperties.splice(index, 1) // Invalidate caches await this.invalidateCache(id) await this.invalidateCache() logger.info(`Deleted property with ID ${id}`) return true } /** * Get featured properties */ async getFeaturedProperties(): Promise { return this.getAllWithCache(async () => { return mockProperties.filter((p) => p.featured) }) } } // Export a singleton instance export const propertyService = new PropertyService() [V0_FILE]typescript:file="lib/services/owner-service.ts" isFixed="true" isQuickEdit="true" isMerged="true" /** * Owner service for handling owner-related business logic */ import { BaseService } from "./base-service" import { logger } from "@/lib/utils/logger" import { cache } from "@/lib/utils/cache" // Owner interface export interface Owner { id: number name: string email: string phone: string properties: number image: string initials: string region?: string regionEmoji?: string regionColor?: string regionDescription?: string specialization?: string memoji?: string bio?: string socialLinks?: { linkedin?: string twitter?: string facebook?: string github?: string [key: string]: string | undefined } } // Mock database for demonstration const mockOwners: Owner[] = [ { id: 1, name: "Carlos Silva", email: "carlos.silva@email.com", phone: "(11) 98765-4321", properties: 3, image: "/placeholder.svg?height=100&width=100", initials: "CS", region: "Sudeste", regionEmoji: "🏙️", regionColor: "bg-blue-500", regionDescription: "Grandes metrópoles e indústrias", specialization: "Sistemas Fotovoltaicos Residenciais", memoji: "👨‍💼", bio: "Especialista em energia solar com mais de 10 anos de experiência no Sudeste brasileiro.", }, { id: 2, name: "Ana Oliveira", email: "ana.oliveira@email.com", phone: "(21) 98765-5678", properties: 2, image: "/placeholder.svg?height=100&width=100", initials: "AO", region: "Nordeste", regionEmoji: "🏖️", regionColor: "bg-yellow-500", regionDescription: "Sol abundante e praias paradisíacas", specialization: "Usinas Solares de Grande Porte", memoji: "👩‍💼", bio: "Desenvolvedora de projetos solares para o agronegócio, com foco em sustentabilidade.", }, { id: 3, name: "Roberto Santos", email: "roberto.santos@email.com", phone: "(31) 98765-4321", properties: 5, image: "/placeholder.svg?height=100&width=100", initials: "RS", region: "Sul", regionEmoji: "🍇", regionColor: "bg-purple-500", regionDescription: "Clima temperado e tradições europeias", specialization: "Integração Solar em Edifícios", memoji: "👨‍🔧", bio: "Engenheiro especializado em integração de sistemas solares em edifícios urbanos.", }, ] export class OwnerService extends BaseService { constructor() { // Set entity name and cache TTL (1 hour) super("owner", 3600) } /** * Get all owners with optional filtering */ async getAllOwners(filters?: { region?: string minProperties?: number }): Promise { return this.getAllWithCache(async () => { let owners = [...mockOwners] // Apply filters if provided if (filters) { if (filters.region) { owners = owners.filter((o) => o.region === filters.region) } if (filters.minProperties !== undefined) { owners = owners.filter((o) => o.properties >= filters.minProperties) } } return owners }) } /** * Get an owner by ID */ async getOwnerById(id: number): Promise { return this.getWithCache(id, async () => { const owner = mockOwners.find((o) => o.id === id) return owner || null }) } /** * Create a new owner */ async createOwner(ownerData: Omit): Promise { // Generate a new ID (in a real app, this would be handled by the database) const newId = Math.max(...mockOwners.map((o) => o.id)) + 1 const newOwner: Owner = { id: newId, ...ownerData, } // In a real app, this would save to a database mockOwners.push(newOwner) // Invalidate the collection cache await this.invalidateCache() logger.info(`Created new owner with ID ${newId}`) return newOwner } /** * Update an owner */ async updateOwner(id: number, ownerData: Partial): Promise { const index = mockOwners.findIndex((o) => o.id === id) if (index === -1) { return null } // Update the owner const updatedOwner = { ...mockOwners[index], ...ownerData, } mockOwners[index] = updatedOwner // Invalidate caches await this.invalidateCache(id) await this.invalidateCache() logger.info(`Updated owner with ID ${id}`) return updatedOwner } /** * Delete an owner */ async deleteOwner(id: number): Promise { const index = mockOwners.findIndex((o) => o.id === id) if (index === -1) { return false } // Remove the owner mockOwners.splice(index, 1) // Invalidate caches await this.invalidateCache(id) await this.invalidateCache() logger.info(`Deleted owner with ID ${id}`) return true } /** * Get owners by region */ async getOwnersByRegion(region: string): Promise { return this.getAllWithCache(async () => { return mockOwners.filter((o) => o.region === region) }) } /** * Get all available regions */ async getAllRegions(): Promise { const cacheKey = "owner:regions" // Try to get from cache first const cachedRegions = await cache.get(cacheKey) if (cachedRegions) { return cachedRegions } // If not in cache, compute regions const regions = [...new Set(mockOwners.map((o) => o.region).filter(Boolean))] as string[] // Store in cache await cache.set(cacheKey, regions, this.cacheTTL) return regions } } // Export a singleton instance export const ownerService = new OwnerService() [V0_FILE]typescript:file="lib/utils/auth-utils.ts" isMerged="true" // Mock user database const mockUsers = [ { id: 1, email: "admin@example.com", name: "Admin User", roles: ["admin", "user"], }, { id: 2, email: "user@example.com", name: "Regular User", roles: ["user"], }, ] // Mock API keys const mockApiKeys: Record = { "api-key-1": { userId: 1, scopes: ["read:properties", "write:properties"] }, "api-key-2": { userId: 2, scopes: ["read:properties"] }, } /** * Verify JWT token * In a real app, this would use a JWT library like jsonwebtoken */ export async function verifyJWT(token: string): Promise { // This is a mock implementation // In a real app, you would verify the token signature and expiration if (token === "valid-admin-token") { return mockUsers[0] } else if (token === "valid-user-token") { return mockUsers[1] } else { throw new Error("Invalid token") } } /** * Verify API key */ export async function verifyApiKey(apiKey: string): Promise { const keyInfo = mockApiKeys[apiKey] if (!keyInfo) { throw new Error("Invalid API key") } const user = mockUsers.find((u) => u.id === keyInfo.userId) if (!user) { throw new Error("User not found for API key") } return { ...user, scopes: keyInfo.scopes, } } /** * Generate JWT token * In a real app, this would use a JWT library like jsonwebtoken */ export async function generateJWT(userId: number): Promise { // This is a mock implementation // In a real app, you would sign a JWT with a secret key if (userId === 1) { return "valid-admin-token" } else if (userId === 2) { return "valid-user-token" } else { throw new Error("Invalid user ID") } } [V0_FILE]typescript:file="lib/middleware/rate-limit-middleware.ts" isMerged="true" /** * Rate limiting middleware to protect API endpoints from abuse */ import { type NextRequest, NextResponse } from "next/server" import { logger } from "@/lib/utils/logger" // Simple in-memory store for rate limiting // In a production app, you would use Redis or another distributed store const rateLimitStore: Record = {} interface RateLimitOptions { limit: number windowMs: number keyGenerator?: (req: NextRequest) => string message?: string statusCode?: number } /** * Rate limiting middleware factory / export function createRateLimitMiddleware(options: RateLimitOptions) { const { limit = 100, windowMs = 60 1000, // 1 minute by default keyGenerator = defaultKeyGenerator, message = "Too many requests, please try again later", statusCode = 429, } = options return async function rateLimitMiddleware( req: NextRequest, next: () => Promise, ): Promise { try { const key = keyGenerator(req) // Get current time const now = Date.now() // Initialize or reset if window has passed if (!rateLimitStore[key] || rateLimitStore[key].resetTime <= now) { rateLimitStore[key] = { count: 0, resetTime: now + windowMs, } } // Increment count rateLimitStore[key].count++ // Get remaining requests const remaining = Math.max(0, limit - rateLimitStore[key].count) // Set headers const headers = new Headers() headers.set("X-RateLimit-Limit", limit.toString()) headers.set("X-RateLimit-Remaining", remaining.toString()) headers.set("X-RateLimit-Reset", Math.ceil(rateLimitStore[key].resetTime / 1000).toString()) // Check if limit exceeded if (rateLimitStore[key].count > limit) { logger.warn(`Rate limit exceeded for ${key}`) // Add Retry-After header const retryAfter = Math.ceil((rateLimitStore[key].resetTime - now) / 1000) headers.set("Retry-After", retryAfter.toString()) return NextResponse.json({ error: message }, { status: statusCode, headers }) } // Continue to the next middleware or route handler const response = await next() // Add rate limit headers to the response Object.entries(headers).forEach(([name, value]) => { response.headers.set(name, value) }) return response } catch (error) { logger.error("Rate limit middleware error:", error) return NextResponse.json({ error: "Internal server error during rate limiting" }, { status: 500 }) } } } /** * Default key generator function that uses IP address */ function defaultKeyGenerator(req: NextRequest): string { // Get IP address from request const ip = req.headers.get("x-forwarded-for") || req.headers.get("x-real-ip") || "127.0.0.1" // Get the route path const url = new URL(req.url) const path = url.pathname // Combine IP and path for more granular rate limiting return `${ip}:${path}` } [V0_FILE]typescript:file="lib/validation/validation-utils.ts" isMerged="true" /** * Validation utilities for API input validation */ import { type NextRequest, NextResponse } from "next/server" import { logger } from "@/lib/utils/logger" /** * Validate request body against a schema */ export async function validateBody( req: NextRequest, schema: any, options: { stripUnknown?: boolean } = {}, ): Promise<{ valid: true; data: T } | { valid: false; errors: any }> { try { // Parse request body const body = await req.json() // Validate against schema try { const data = await schema.validate(body, { abortEarly: false, stripUnknown: options.stripUnknown ?? true, }) return { valid: true, data: data as T } } catch (error: any) { logger.debug("Validation error:", error) // Format validation errors const errors = error.inner?.reduce((acc: any, err: any) => { acc[err.path] = err.message return acc }, {}) || { _error: error.message } return { valid: false, errors } } } catch (error) { logger.error("Error parsing request body:", error) return { valid: false, errors: { _error: "Invalid JSON in request body" } } } } /** * Validate query parameters against a schema */ export async function validateQuery( req: NextRequest, schema: any, ): Promise<{ valid: true; data: T } | { valid: false; errors: any }> { try { // Get query parameters const url = new URL(req.url) const query: Record = {} // Convert URLSearchParams to plain object url.searchParams.forEach((value, key) => { query[key] = value }) // Validate against schema try { const data = await schema.validate(query, { abortEarly: false, stripUnknown: true, }) return { valid: true, data: data as T } } catch (error: any) { logger.debug("Query validation error:", error) // Format validation errors const errors = error.inner?.reduce((acc: any, err: any) => { acc[err.path] = err.message return acc }, {}) || { _error: error.message } return { valid: false, errors } } } catch (error) { logger.error("Error validating query parameters:", error) return { valid: false, errors: { _error: "Invalid query parameters" } } } } /** * Middleware to validate request body */ export function createBodyValidationMiddleware(schema: any, options: { stripUnknown?: boolean } = {}) { return async function validationMiddleware( req: NextRequest, next: () => Promise, ): Promise { const validation = await validateBody(req, schema, options) if (!validation.valid) { return NextResponse.json({ error: "Validation error", details: validation.errors }, { status: 400 }) } // Add validated data to request context req.headers.set("x-validated-body", JSON.stringify(validation.data)) // Continue to the next middleware or route handler return next() } } /** * Middleware to validate query parameters */ export function createQueryValidationMiddleware(schema: any) { return async function validationMiddleware( req: NextRequest, next: () => Promise, ): Promise { const validation = await validateQuery(req, schema) if (!validation.valid) { return NextResponse.json({ error: "Validation error", details: validation.errors }, { status: 400 }) } // Add validated data to request context req.headers.set("x-validated-query", JSON.stringify(validation.data)) // Continue to the next middleware or route handler return next() } } [V0_FILE]typescript:file="app/api/properties/route.ts" isMerged="true" /** * API routes for properties / import { type NextRequest, NextResponse } from "next/server" import as yup from "yup" import { propertyService } from "@/lib/services/property-service" import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware" import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware" import { createBodyValidationMiddleware, createQueryValidationMiddleware } from "@/lib/validation/validation-utils" import { logger } from "@/lib/utils/logger" // Schema for property creation/update const propertySchema = yup.object({ title: yup.string().required().min(3).max(100), type: yup.string().required(), location: yup.string().required(), area: yup.string().required(), price: yup.string().required(), image: yup.string().required(), featured: yup.boolean().optional(), energy: yup.string().optional(), paymentOptions: yup .object({ type: yup.string().required(), name: yup.string().required(), description: yup.string().required(), processor: yup.string().required(), details: yup.string().required(), }) .optional(), }) // Schema for query parameters const querySchema = yup.object({ featured: yup .boolean() .transform((value, originalValue) => { if (originalValue === "true") return true if (originalValue === "false") return false return value }) .optional(), type: yup.string().optional(), location: yup.string().optional(), }) // Rate limit middleware - 100 requests per minute const rateLimitMiddleware = createRateLimitMiddleware({ limit: 100, windowMs: 60 * 1000, }) // Authentication middleware - JWT or API key const authMiddleware = createAuthMiddleware({ method: AuthMethod.ANY, }) // Validation middleware const validatePropertyBody = createBodyValidationMiddleware(propertySchema) const validateQueryParams = createQueryValidationMiddleware(querySchema) /** * GET /api/properties * Get all properties with optional filtering */ export async function GET(req: NextRequest) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Validate query parameters return await validateQueryParams(req, async () => { // Get validated query parameters const queryParamsJson = req.headers.get("x-validated-query") const queryParams = queryParamsJson ? JSON.parse(queryParamsJson) : {} // Get properties with filters const properties = await propertyService.getAllProperties(queryParams) return NextResponse.json(properties) }) }) } catch (error) { logger.error("Error in GET /api/properties:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } /** * POST /api/properties * Create a new property */ export async function POST(req: NextRequest) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Apply authentication return await authMiddleware(req, async () => { // Validate request body return await validatePropertyBody(req, async () => { // Get validated body const bodyJson = req.headers.get("x-validated-body") const propertyData = JSON.parse(bodyJson!) // Create property const newProperty = await propertyService.createProperty(propertyData) return NextResponse.json(newProperty, { status: 201 }) }) }) }) } catch (error) { logger.error("Error in POST /api/properties:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/properties/[id]/route.ts" isMerged="true" /** * API routes for a specific property / import { type NextRequest, NextResponse } from "next/server" import as yup from "yup" import { propertyService } from "@/lib/services/property-service" import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware" import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware" import { createBodyValidationMiddleware } from "@/lib/validation/validation-utils" import { logger } from "@/lib/utils/logger" // Schema for property update const propertyUpdateSchema = yup.object({ title: yup.string().min(3).max(100).optional(), type: yup.string().optional(), location: yup.string().optional(), area: yup.string().optional(), price: yup.string().optional(), image: yup.string().optional(), featured: yup.boolean().optional(), energy: yup.string().optional(), paymentOptions: yup .object({ type: yup.string().required(), name: yup.string().required(), description: yup.string().required(), processor: yup.string().required(), details: yup.string().required(), }) .optional(), }) // Rate limit middleware - 100 requests per minute const rateLimitMiddleware = createRateLimitMiddleware({ limit: 100, windowMs: 60 * 1000, }) // Authentication middleware - JWT or API key const authMiddleware = createAuthMiddleware({ method: AuthMethod.ANY, }) // Validation middleware const validatePropertyUpdateBody = createBodyValidationMiddleware(propertyUpdateSchema) /** * GET /api/properties/[id] * Get a property by ID */ export async function GET(req: NextRequest, { params }: { params: { id: string } }) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { const id = Number.parseInt(params.id) if (isNaN(id)) { return NextResponse.json({ error: "Invalid property ID" }, { status: 400 }) } const property = await propertyService.getPropertyById(id) if (!property) { return NextResponse.json({ error: "Property not found" }, { status: 404 }) } return NextResponse.json(property) }) } catch (error) { logger.error(`Error in GET /api/properties/${params.id}:`, error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } /** * PUT /api/properties/[id] * Update a property */ export async function PUT(req: NextRequest, { params }: { params: { id: string } }) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Apply authentication return await authMiddleware(req, async () => { // Validate request body return await validatePropertyUpdateBody(req, async () => { const id = Number.parseInt(params.id) if (isNaN(id)) { return NextResponse.json({ error: "Invalid property ID" }, { status: 400 }) } // Get validated body const bodyJson = req.headers.get("x-validated-body") const propertyData = JSON.parse(bodyJson!) // Update property const updatedProperty = await propertyService.updateProperty(id, propertyData) if (!updatedProperty) { return NextResponse.json({ error: "Property not found" }, { status: 404 }) } return NextResponse.json(updatedProperty) }) }) }) } catch (error) { logger.error(`Error in PUT /api/properties/${params.id}:`, error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } /** * DELETE /api/properties/[id] * Delete a property */ export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Apply authentication return await authMiddleware(req, async () => { const id = Number.parseInt(params.id) if (isNaN(id)) { return NextResponse.json({ error: "Invalid property ID" }, { status: 400 }) } const success = await propertyService.deleteProperty(id) if (!success) { return NextResponse.json({ error: "Property not found" }, { status: 404 }) } return NextResponse.json({ success: true }, { status: 200 }) }) }) } catch (error) { logger.error(`Error in DELETE /api/properties/${params.id}:`, error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/owners/route.ts" isMerged="true" /** * API routes for owners / import { type NextRequest, NextResponse } from "next/server" import as yup from "yup" import { ownerService } from "@/lib/services/owner-service" import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware" import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware" import { createBodyValidationMiddleware, createQueryValidationMiddleware } from "@/lib/validation/validation-utils" import { logger } from "@/lib/utils/logger" // Schema for owner creation/update const ownerSchema = yup.object({ name: yup.string().required().min(3).max(100), email: yup.string().email().required(), phone: yup.string().required(), properties: yup.number().required().min(0), image: yup.string().required(), initials: yup.string().required().max(3), region: yup.string().optional(), regionEmoji: yup.string().optional(), regionColor: yup.string().optional(), regionDescription: yup.string().optional(), specialization: yup.string().optional(), memoji: yup.string().optional(), bio: yup.string().optional(), socialLinks: yup.object().optional(), }) // Schema for query parameters const querySchema = yup.object({ region: yup.string().optional(), minProperties: yup .number() .transform((value, originalValue) => { const num = Number(originalValue) return isNaN(num) ? undefined : num }) .optional(), }) // Rate limit middleware - 100 requests per minute const rateLimitMiddleware = createRateLimitMiddleware({ limit: 100, windowMs: 60 * 1000, }) // Authentication middleware - JWT or API key const authMiddleware = createAuthMiddleware({ method: AuthMethod.ANY, }) // Validation middleware const validateOwnerBody = createBodyValidationMiddleware(ownerSchema) const validateQueryParams = createQueryValidationMiddleware(querySchema) /** * GET /api/owners * Get all owners with optional filtering */ export async function GET(req: NextRequest) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Validate query parameters return await validateQueryParams(req, async () => { // Get validated query parameters const queryParamsJson = req.headers.get("x-validated-query") const queryParams = queryParamsJson ? JSON.parse(queryParamsJson) : {} // Get owners with filters const owners = await ownerService.getAllOwners(queryParams) return NextResponse.json(owners) }) }) } catch (error) { logger.error("Error in GET /api/owners:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } /** * POST /api/owners * Create a new owner */ export async function POST(req: NextRequest) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Apply authentication return await authMiddleware(req, async () => { // Validate request body return await validateOwnerBody(req, async () => { // Get validated body const bodyJson = req.headers.get("x-validated-body") const ownerData = JSON.parse(bodyJson!) // Create owner const newOwner = await ownerService.createOwner(ownerData) return NextResponse.json(newOwner, { status: 201 }) }) }) }) } catch (error) { logger.error("Error in POST /api/owners:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } /** * GET /api/owners/regions * Get all available regions */ export async function GET_regions() { try { const regions = await ownerService.getAllRegions() return NextResponse.json(regions) } catch (error) { logger.error("Error in GET /api/owners/regions:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/owners/[id]/route.ts" isMerged="true" /** * API routes for a specific owner / import { type NextRequest, NextResponse } from "next/server" import as yup from "yup" import { ownerService } from "@/lib/services/owner-service" import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware" import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware" import { createBodyValidationMiddleware } from "@/lib/validation/validation-utils" import { logger } from "@/lib/utils/logger" // Schema for owner update const ownerUpdateSchema = yup.object({ name: yup.string().min(3).max(100).optional(), email: yup.string().email().optional(), phone: yup.string().optional(), properties: yup.number().min(0).optional(), image: yup.string().optional(), initials: yup.string().max(3).optional(), region: yup.string().optional(), regionEmoji: yup.string().optional(), regionColor: yup.string().optional(), regionDescription: yup.string().optional(), specialization: yup.string().optional(), memoji: yup.string().optional(), bio: yup.string().optional(), socialLinks: yup.object().optional(), }) // Rate limit middleware - 100 requests per minute const rateLimitMiddleware = createRateLimitMiddleware({ limit: 100, windowMs: 60 * 1000, }) // Authentication middleware - JWT or API key const authMiddleware = createAuthMiddleware({ method: AuthMethod.ANY, }) // Validation middleware const validateOwnerUpdateBody = createBodyValidationMiddleware(ownerUpdateSchema) /** * GET /api/owners/[id] * Get an owner by ID */ export async function GET(req: NextRequest, { params }: { params: { id: string } }) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { const id = Number.parseInt(params.id) if (isNaN(id)) { return NextResponse.json({ error: "Invalid owner ID" }, { status: 400 }) } const owner = await ownerService.getOwnerById(id) if (!owner) { return NextResponse.json({ error: "Owner not found" }, { status: 404 }) } return NextResponse.json(owner) }) } catch (error) { logger.error(`Error in GET /api/owners/${params.id}:`, error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } /** * PUT /api/owners/[id] * Update an owner */ export async function PUT(req: NextRequest, { params }: { params: { id: string } }) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Apply authentication return await authMiddleware(req, async () => { // Validate request body return await validateOwnerUpdateBody(req, async () => { const id = Number.parseInt(params.id) if (isNaN(id)) { return NextResponse.json({ error: "Invalid owner ID" }, { status: 400 }) } // Get validated body const bodyJson = req.headers.get("x-validated-body") const ownerData = JSON.parse(bodyJson!) // Update owner const updatedOwner = await ownerService.updateOwner(id, ownerData) if (!updatedOwner) { return NextResponse.json({ error: "Owner not found" }, { status: 404 }) } return NextResponse.json(updatedOwner) }) }) }) } catch (error) { logger.error(`Error in PUT /api/owners/${params.id}:`, error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } /** * DELETE /api/owners/[id] * Delete an owner */ export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Apply authentication return await authMiddleware(req, async () => { const id = Number.parseInt(params.id) if (isNaN(id)) { return NextResponse.json({ error: "Invalid owner ID" }, { status: 400 }) } const success = await ownerService.deleteOwner(id) if (!success) { return NextResponse.json({ error: "Owner not found" }, { status: 404 }) } return NextResponse.json({ success: true }, { status: 200 }) }) }) } catch (error) { logger.error(`Error in DELETE /api/owners/${params.id}:`, error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/login/route.ts" isMerged="true" /** * API route for user login / import { type NextRequest, NextResponse } from "next/server" import as yup from "yup" import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware" import { createBodyValidationMiddleware } from "@/lib/validation/validation-utils" import { generateJWT } from "@/lib/utils/auth-utils" import { logger } from "@/lib/utils/logger" // Schema for login request const loginSchema = yup.object({ email: yup.string().email().required(), password: yup.string().required(), }) // Rate limit middleware - 10 requests per minute const rateLimitMiddleware = createRateLimitMiddleware({ limit: 10, windowMs: 60 * 1000, keyGenerator: (req) => { // Use IP address for rate limiting const ip = req.headers.get("x-forwarded-for") || req.headers.get("x-real-ip") || "127.0.0.1" return `login:${ip}` }, }) // Validation middleware const validateLoginBody = createBodyValidationMiddleware(loginSchema) /** * POST /api/auth/login * User login */ export async function POST(req: NextRequest) { try { // Apply rate limiting return await rateLimitMiddleware(req, async () => { // Validate request body return await validateLoginBody(req, async () => { // Get validated body const bodyJson = req.headers.get("x-validated-body") const { email, password } = JSON.parse(bodyJson!) // Mock authentication // In a real app, you would verify credentials against a database if (email === "admin@example.com" && password === "admin") { const token = await generateJWT(1) return NextResponse.json({ token, user: { id: 1, email: "admin@example.com", name: "Admin User", roles: ["admin", "user"], }, }) } else if (email === "user@example.com" && password === "user") { const token = await generateJWT(2) return NextResponse.json({ token, user: { id: 2, email: "user@example.com", name: "Regular User", roles: ["user"], }, }) } else { return NextResponse.json({ error: "Invalid credentials" }, { status: 401 }) } }) }) } catch (error) { logger.error("Error in POST /api/auth/login:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="lib/utils/cache.ts" isQuickEdit="true" isMerged="true" /** * Simple in-memory cache utility */ const cacheStore: { [key: string]: any } = {} /** * Get data from cache */ async function get(key: string): Promise { return cacheStore[key] || null } /** * Set data to cache */ async function set(key: string, value: T, ttl?: number): Promise { cacheStore[key] = value // TODO: Implement TTL-based expiration } /** * Delete data from cache */ async function del(key: string): Promise { delete cacheStore[key] } /** * Clear the entire cache */ async function flush(): Promise { Object.keys(cacheStore).forEach((key) => delete cacheStore[key]) } export const cache = { get, set, del, flush } [V0_FILE]typescript:file="lib/errors/app-error.ts" isMerged="true" /** * Base application error class that extends the native Error * Provides additional context for error handling */ export class AppError extends Error { public readonly statusCode: number public readonly isOperational: boolean public readonly errorCode: string public readonly context?: Record constructor( message: string, statusCode = 500, errorCode = "INTERNAL_ERROR", isOperational = true, context?: Record, ) { super(message) this.statusCode = statusCode this.isOperational = isOperational this.errorCode = errorCode this.context = context // Maintains proper stack trace for where our error was thrown Error.captureStackTrace(this, this.constructor) // Set the prototype explicitly to ensure instanceof works correctly Object.setPrototypeOf(this, AppError.prototype) } } /** * Validation error for handling invalid input data */ export class ValidationError extends AppError { constructor(message = "Validation failed", errors?: Record, errorCode = "VALIDATION_ERROR") { super(message, 400, errorCode, true, { validationErrors: errors }) } } /** * Not found error for handling resources that don't exist */ export class NotFoundError extends AppError { constructor(resource = "Resource", id?: string | number, errorCode = "NOT_FOUND") { const message = id ? `${resource} with ID ${id} not found` : `${resource} not found` super(message, 404, errorCode, true) } } /** * Authentication error for handling unauthorized access */ export class AuthenticationError extends AppError { constructor(message = "Authentication failed", errorCode = "AUTHENTICATION_ERROR") { super(message, 401, errorCode, true) } } /** * Authorization error for handling forbidden access */ export class AuthorizationError extends AppError { constructor(message = "You do not have permission to perform this action", errorCode = "AUTHORIZATION_ERROR") { super(message, 403, errorCode, true) } } /** * Database error for handling database-related issues */ export class DatabaseError extends AppError { constructor(message = "Database operation failed", errorCode = "DATABASE_ERROR", context?: Record) { super(message, 500, errorCode, true, context) } } /** * External service error for handling issues with external APIs */ export class ExternalServiceError extends AppError { constructor( service: string, message = "External service request failed", errorCode = "EXTERNAL_SERVICE_ERROR", context?: Record, ) { super(`${service}: ${message}`, 502, errorCode, true, context) } } /** * Rate limit error for handling too many requests */ export class RateLimitError extends AppError { constructor(message = "Too many requests, please try again later", errorCode = "RATE_LIMIT_ERROR") { super(message, 429, errorCode, true) } } [V0_FILE]typescript:file="lib/middleware/error-handler.ts" isMerged="true" import type { NextRequest, NextResponse } from "next/server" import { AppError } from "@/lib/errors/app-error" import { logger } from "@/lib/logging/logger" import { ApiResponse } from "@/lib/api/response" /** * Global error handler middleware for Next.js API routes */ export async function errorHandler(req: NextRequest, next: () => Promise): Promise { try { // Proceed to the route handler return await next() } catch (error) { // Log the error if (error instanceof AppError) { if (!error.isOperational) { logger.error("Non-operational error occurred:", error) } else { logger.warn(`Application error: ${error.message}`, { statusCode: error.statusCode, errorCode: error.errorCode, context: error.context, }) } // Return a standardized error response return ApiResponse.error(error.message, error.statusCode, error.errorCode, error.context) } // Handle unexpected errors logger.error("Unexpected error:", error) // For security, don't expose error details in production const isProd = process.env.NODE_ENV === "production" const message = isProd ? "An unexpected error occurred" : error instanceof Error ? error.message : String(error) return ApiResponse.error(message, 500, "INTERNAL_SERVER_ERROR") } } /** * Create a middleware composition function */ export function composeMiddleware(...middlewares: any[]) { return async (req: NextRequest, handler: () => Promise) => { // Create a function that executes each middleware in sequence const executeMiddleware = async (index: number): Promise => { if (index === middlewares.length) { return await handler() } const nextMiddleware = async () => executeMiddleware(index + 1) return await middlewares[index](req, nextMiddleware) } return executeMiddleware(0) } } [V0_FILE]typescript:file="lib/api/response.ts" isMerged="true" import { NextResponse } from "next/server" /** * HTTP Status codes */ export enum HttpStatus { OK = 200, CREATED = 201, NO_CONTENT = 204, BAD_REQUEST = 400, UNAUTHORIZED = 401, FORBIDDEN = 403, NOT_FOUND = 404, CONFLICT = 409, UNPROCESSABLE_ENTITY = 422, TOO_MANY_REQUESTS = 429, INTERNAL_SERVER_ERROR = 500, BAD_GATEWAY = 502, SERVICE_UNAVAILABLE = 503, } /** * Standard API response interface */ export interface IApiResponse { success: boolean data?: T error?: { message: string code: string details?: any } meta?: { timestamp: string requestId?: string pagination?: { page: number limit: number total: number totalPages: number } } } /** * API Response utility class for creating standardized responses */ export class ApiResponse { /** * Create a success response */ static success(data: T, statusCode: number = HttpStatus.OK, meta?: Partial): NextResponse { const response: IApiResponse = { success: true, data, meta: { timestamp: new Date().toISOString(), ...meta, }, } return NextResponse.json(response, { status: statusCode }) } /** * Create an error response */ static error( message: string, statusCode: number = HttpStatus.INTERNAL_SERVER_ERROR, errorCode = "INTERNAL_SERVER_ERROR", details?: any, meta?: Partial, ): NextResponse { const response: IApiResponse = { success: false, error: { message, code: errorCode, ...(details && { details }), }, meta: { timestamp: new Date().toISOString(), ...meta, }, } return NextResponse.json(response, { status: statusCode }) } /** * Create a paginated success response */ static paginated( data: T[], page: number, limit: number, total: number, statusCode: number = HttpStatus.OK, additionalMeta?: Partial>, ): NextResponse { const totalPages = Math.ceil(total / limit) const response: IApiResponse = { success: true, data, meta: { timestamp: new Date().toISOString(), pagination: { page, limit, total, totalPages, }, ...additionalMeta, }, } return NextResponse.json(response, { status: statusCode }) } /** * Create a no content response */ static noContent(): NextResponse { return new NextResponse(null, { status: HttpStatus.NO_CONTENT }) } } [V0_FILE]typescript:file="lib/logging/logger.ts" isMerged="true" /** * Enhanced logging system with support for different environments and log levels */ // Log levels in order of severity export enum LogLevel { DEBUG = 0, INFO = 1, WARN = 2, ERROR = 3, FATAL = 4, } // Log entry interface export interface LogEntry { timestamp: string level: string message: string context?: Record requestId?: string userId?: string | number stack?: string } // Logger configuration export interface LoggerConfig { minLevel: LogLevel enableConsole: boolean prettyPrint?: boolean redactKeys?: string[] includeTimestamp?: boolean } /** * Logger class with enhanced features */ export class Logger { private config: LoggerConfig private static instance: Logger private constructor(config: Partial = {}) { // Default configuration this.config = { minLevel: process.env.NODE_ENV === "production" ? LogLevel.INFO : LogLevel.DEBUG, enableConsole: true, prettyPrint: process.env.NODE_ENV !== "production", redactKeys: ["password", "token", "secret", "authorization", "apiKey"], includeTimestamp: true, ...config, } } /** * Get logger instance (singleton) */ public static getInstance(config?: Partial): Logger { if (!Logger.instance) { Logger.instance = new Logger(config) } return Logger.instance } /** * Configure the logger */ public configure(config: Partial): void { this.config = { ...this.config, ...config } } /** * Log a message at the specified level */ private log(level: LogLevel, message: string, context?: Record): void { if (level < this.config.minLevel) return const levelName = LogLevel[level] // Create log entry const entry: LogEntry = { timestamp: new Date().toISOString(), level: levelName, message, ...(context && { context: this.redactSensitiveInfo(context) }), } // Log to console if enabled if (this.config.enableConsole) { this.logToConsole(entry) } // In a real application, you might also log to a file or external service // this.logToFile(entry); // this.logToExternalService(entry); } /** * Redact sensitive information */ private redactSensitiveInfo(obj: Record): Record { const redacted = { ...obj } const redact = (obj: Record, path = ""): void => { for (const [key, value] of Object.entries(obj)) { const currentPath = path ? `${path}.${key}` : key if (this.config.redactKeys?.some((redactKey) => key.toLowerCase().includes(redactKey.toLowerCase()))) { obj[key] = "[REDACTED]" } else if (value && typeof value === "object" && !Array.isArray(value)) { redact(value, currentPath) } } } redact(redacted) return redacted } /** * Log to console with appropriate formatting */ private logToConsole(entry: LogEntry): void { const { level, message, context, timestamp } = entry if (this.config.prettyPrint) { const colors = { DEBUG: "\x1b[34m", // Blue INFO: "\x1b[32m", // Green WARN: "\x1b[33m", // Yellow ERROR: "\x1b[31m", // Red FATAL: "\x1b[35m", // Magenta RESET: "\x1b[0m", // Reset } const color = colors[level as keyof typeof colors] || colors.RESET const timeStr = this.config.includeTimestamp ? `${timestamp} ` : "" console.log(`${timeStr}${color}[${level}]${colors.RESET} ${message}`) if (context) { console.log(context) } if (entry.stack) { console.log(entry.stack) } } else { // JSON format for production/machine parsing console.log(JSON.stringify(entry)) } } // Public logging methods public debug(message: string, context?: Record): void { this.log(LogLevel.DEBUG, message, context) } public info(message: string, context?: Record): void { this.log(LogLevel.INFO, message, context) } public warn(message: string, context?: Record): void { this.log(LogLevel.WARN, message, context) } public error(message: string, error?: Error | unknown, context?: Record): void { const errorContext = { ...context } if (error instanceof Error) { errorContext.stack = error.stack errorContext.name = error.name } this.log(LogLevel.ERROR, message, errorContext) } public fatal(message: string, error?: Error | unknown, context?: Record): void { const errorContext = { ...context } if (error instanceof Error) { errorContext.stack = error.stack errorContext.name = error.name } this.log(LogLevel.FATAL, message, errorContext) } } // Export a singleton instance export const logger = Logger.getInstance() [V0_FILE]typescript:file="lib/repositories/repository.interface.ts" isMerged="true" /** * Generic repository interface for data access */ export interface IRepository { findAll(filter?: Partial): Promise findById(id: ID): Promise create(data: Omit): Promise update(id: ID, data: Partial): Promise delete(id: ID): Promise count(filter?: Partial): Promise } /** * Paginated result interface */ export interface PaginatedResult { items: T[] total: number page: number limit: number totalPages: number } /** * Pagination options interface */ export interface PaginationOptions { page: number limit: number sortBy?: string sortOrder?: "asc" | "desc" } /** * Extended repository interface with pagination */ export interface IPaginatedRepository extends IRepository { findPaginated(options: PaginationOptions, filter?: Partial): Promise> } [V0_FILE]typescript:file="lib/repositories/property.repository.ts" isMerged="true" import type { IPaginatedRepository, PaginatedResult, PaginationOptions } from "./repository.interface" import type { Property } from "@/lib/models/property.model" import { DatabaseError } from "@/lib/errors/app-error" import { logger } from "@/lib/logging/logger" /** * In-memory implementation of the property repository * In a real application, this would connect to a database / export class InMemoryPropertyRepository implements IPaginatedRepository { private properties: Property[] = [] private nextId = 1 constructor(initialData: Omit[] = []) { // Initialize with any provided data initialData.forEach((property) => { this.properties.push({ id: this.nextId++, ...property, }) }) } async findAll(filter?: Partial): Promise { try { if (!filter) { return [...this.properties] } return this.properties.filter((property) => { return Object.entries(filter).every(([key, value]) => { return property[key as keyof Property] === value }) }) } catch (error) { logger.error("Error finding properties", error) throw new DatabaseError("Failed to retrieve properties") } } async findById(id: number): Promise { try { const property = this.properties.find((p) => p.id === id) return property || null } catch (error) { logger.error(`Error finding property with ID ${id}`, error) throw new DatabaseError(`Failed to retrieve property with ID ${id}`) } } async create(data: Omit): Promise { try { const newProperty: Property = { id: this.nextId++, ...data, } this.properties.push(newProperty) return newProperty } catch (error) { logger.error("Error creating property", error) throw new DatabaseError("Failed to create property") } } async update(id: number, data: Partial): Promise { try { const index = this.properties.findIndex((p) => p.id === id) if (index === -1) { return null } const updatedProperty = { ...this.properties[index], ...data, } this.properties[index] = updatedProperty return updatedProperty } catch (error) { logger.error(`Error updating property with ID ${id}`, error) throw new DatabaseError(`Failed to update property with ID ${id}`) } } async delete(id: number): Promise { try { const initialLength = this.properties.length this.properties = this.properties.filter((p) => p.id !== id) return this.properties.length < initialLength } catch (error) { logger.error(`Error deleting property with ID ${id}`, error) throw new DatabaseError(`Failed to delete property with ID ${id}`) } } async count(filter?: Partial): Promise { try { if (!filter) { return this.properties.length } return this.properties.filter((property) => { return Object.entries(filter).every(([key, value]) => { return property[key as keyof Property] === value }) }).length } catch (error) { logger.error("Error counting properties", error) throw new DatabaseError("Failed to count properties") } } async findPaginated(options: PaginationOptions, filter?: Partial): Promise> { try { const { page, limit, sortBy, sortOrder } = options // Apply filters const filteredProperties = await this.findAll(filter) // Apply sorting if (sortBy) { filteredProperties.sort((a, b) => { const aValue = a[sortBy as keyof Property] const bValue = b[sortBy as keyof Property] if (aValue < bValue) return sortOrder === "desc" ? 1 : -1 if (aValue > bValue) return sortOrder === "desc" ? -1 : 1 return 0 }) } // Calculate pagination const total = filteredProperties.length const totalPages = Math.ceil(total / limit) const startIndex = (page - 1) limit const endIndex = startIndex + limit // Get paginated items const items = filteredProperties.slice(startIndex, endIndex) return { items, total, page, limit, totalPages, } } catch (error) { logger.error("Error finding paginated properties", error) throw new DatabaseError("Failed to retrieve paginated properties") } } } [V0_FILE]typescript:file="lib/models/property.model.ts" isMerged="true" /** * Property model definition */ export interface Property { id: number title: string type: string location: string area: string price: string image: string featured?: boolean energy?: string paymentOptions?: { type: string name: string description: string processor: string details: string } createdAt?: Date updatedAt?: Date } /** * Property creation DTO */ export type CreatePropertyDto = Omit /** * Property update DTO */ export type UpdatePropertyDto = Partial> /** * Property filter DTO */ export interface PropertyFilterDto { type?: string location?: string featured?: boolean minPrice?: string maxPrice?: string energyType?: string } [V0_FILE]typescript:file="lib/di/container.ts" isMerged="true" /** * Simple dependency injection container */ export class Container { private static instance: Container private services: Map = new Map() private factories: Map any> = new Map() private constructor() {} /** * Get container instance (singleton) */ public static getInstance(): Container { if (!Container.instance) { Container.instance = new Container() } return Container.instance } /** * Register a service instance */ public register(token: string, instance: T): void { this.services.set(token, instance) } /** * Register a factory function to create a service */ public registerFactory(token: string, factory: () => T): void { this.factories.set(token, factory) } /** * Get a service instance */ public resolve(token: string): T { // Check if service instance exists if (this.services.has(token)) { return this.services.get(token) as T } // Check if factory exists if (this.factories.has(token)) { const factory = this.factories.get(token)! const instance = factory() this.services.set(token, instance) return instance as T } throw new Error(`Service not registered: ${token}`) } /** * Check if a service is registered */ public has(token: string): boolean { return this.services.has(token) || this.factories.has(token) } /** * Remove a service */ public remove(token: string): boolean { const hadService = this.services.delete(token) const hadFactory = this.factories.delete(token) return hadService || hadFactory } /** * Clear all services / public clear(): void { this.services.clear() this.factories.clear() } } // Export a singleton instance export const container = Container.getInstance() [V0_FILE]typescript:file="app/api/v1/properties/route.ts" isMerged="true" import type { NextRequest } from "next/server" import as yup from "yup" import { createPropertyService } from "@/lib/services/property.service" import { ApiResponse, HttpStatus } from "@/lib/api/response" import { errorHandler } from "@/lib/middleware/error-handler" import { ValidationError } from "@/lib/errors/app-error" import type { CreatePropertyDto, PropertyFilterDto } from "@/lib/models/property.model" // Schema for query parameters const querySchema = yup.object({ type: yup.string().optional(), location: yup.string().optional(), featured: yup .boolean() .optional() .transform((value, originalValue) => { if (originalValue === "true") return true if (originalValue === "false") return false return value }), page: yup.number().optional().default(1).min(1), limit: yup.number().optional().default(10).min(1).max(100), sortBy: yup.string().optional(), sortOrder: yup.string().optional().oneOf(["asc", "desc"]), }) // Schema for property creation const createPropertySchema = yup.object({ title: yup.string().required().min(3), type: yup.string().required(), location: yup.string().required(), area: yup.string().required(), price: yup.string().required(), image: yup.string().required(), featured: yup.boolean().optional(), energy: yup.string().optional(), paymentOptions: yup .object({ type: yup.string().required(), name: yup.string().required(), description: yup.string().required(), processor: yup.string().required(), details: yup.string().required(), }) .optional(), }) /** * GET /api/v1/properties * Get all properties with optional filtering and pagination */ export async function GET(req: NextRequest) { return errorHandler(req, async () => { const propertyService = createPropertyService() const url = new URL(req.url) try { // Parse and validate query parameters const queryParams = Object.fromEntries(url.searchParams.entries()) const validatedQuery = await querySchema.validate(queryParams, { abortEarly: false, stripUnknown: true, }) // Extract pagination options const { page, limit, sortBy, sortOrder, ...filterParams } = validatedQuery // Check if pagination is requested if (page !== undefined && limit !== undefined) { const paginatedResult = await propertyService.getPaginatedProperties( { page, limit, sortBy, sortOrder: sortOrder as "asc" | "desc" }, filterParams as PropertyFilterDto, ) return ApiResponse.paginated( paginatedResult.items, paginatedResult.page, paginatedResult.limit, paginatedResult.total, ) } else { // Get all properties with filtering const properties = await propertyService.getAllProperties(filterParams as PropertyFilterDto) return ApiResponse.success(properties) } } catch (error) { if (error instanceof yup.ValidationError) { // Format validation errors const errors = error.inner.reduce( (acc, err) => { acc[err.path!] = err.message return acc }, {} as Record, ) throw new ValidationError("Invalid query parameters", errors) } // Re-throw other errors to be handled by the error middleware throw error } }) } /** * POST /api/v1/properties * Create a new property / export async function POST(req: NextRequest) { return errorHandler(req, async () => { const propertyService = createPropertyService() try { // Parse and validate request body const body = await req.json() const validatedData = await createPropertySchema.validate(body, { abortEarly: false, stripUnknown: true, }) // Create property const newProperty = await propertyService.createProperty(validatedData as CreatePropertyDto) // Return success response return ApiResponse.success(newProperty, HttpStatus.CREATED) } catch (error) { if (error instanceof yup.ValidationError) { // Format validation errors const errors = error.inner.reduce( (acc, err) => { acc[err.path!] = err.message return acc }, {} as Record, ) throw new ValidationError("Invalid property data", errors) } // Re-throw other errors to be handled by the error middleware throw error } }) } [V0_FILE]typescript:file="app/api/v1/properties/[id]/route.ts" isMerged="true" import type { NextRequest } from "next/server" import as yup from "yup" import { createPropertyService } from "@/lib/services/property.service" import { ApiResponse } from "@/lib/api/response" import { errorHandler } from "@/lib/middleware/error-handler" import { ValidationError } from "@/lib/errors/app-error" import type { UpdatePropertyDto } from "@/lib/models/property.model" // Schema for property update const updatePropertySchema = yup.object({ title: yup.string().min(3).optional(), type: yup.string().optional(), location: yup.string().optional(), area: yup.string().optional(), price: yup.string().optional(), image: yup.string().optional(), featured: yup.boolean().optional(), energy: yup.string().optional(), paymentOptions: yup .object({ type: yup.string().required(), name: yup.string().required(), description: yup.string().required(), processor: yup.string().required(), details: yup.string().required(), }) .optional(), }) /** * GET /api/v1/properties/[id] * Get a property by ID */ export async function GET(req: NextRequest, { params }: { params: { id: string } }) { return errorHandler(req, async () => { const propertyService = createPropertyService() const id = Number.parseInt(params.id, 10) if (isNaN(id)) { throw new ValidationError("Invalid property ID", { id: "ID must be a number" }) } const property = await propertyService.getPropertyById(id) return ApiResponse.success(property) }) } /** * PUT /api/v1/properties/[id] * Update a property */ export async function PUT(req: NextRequest, { params }: { params: { id: string } }) { return errorHandler(req, async () => { const propertyService = createPropertyService() const id = Number.parseInt(params.id, 10) if (isNaN(id)) { throw new ValidationError("Invalid property ID", { id: "ID must be a number" }) } try { // Parse and validate request body const body = await req.json() const validatedData = await updatePropertySchema.validate(body, { abortEarly: false, stripUnknown: true, }) // Update property const updatedProperty = await propertyService.updateProperty(id, validatedData as UpdatePropertyDto) // Return success response return ApiResponse.success(updatedProperty) } catch (error) { if (error instanceof yup.ValidationError) { // Format validation errors const errors = error.inner.reduce( (acc, err) => { acc[err.path!] = err.message return acc }, {} as Record, ) throw new ValidationError("Invalid property data", errors) } // Re-throw other errors to be handled by the error middleware throw error } }) } /** * DELETE /api/v1/properties/[id] * Delete a property */ export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) { return errorHandler(req, async () => { const propertyService = createPropertyService() const id = Number.parseInt(params.id, 10) if (isNaN(id)) { throw new ValidationError("Invalid property ID", { id: "ID must be a number" }) } await propertyService.deleteProperty(id) return ApiResponse.noContent() }) } [V0_FILE]typescript:file="lib/app.ts" isMerged="true" import { initializeServices } from "@/lib/di/services" import { logger } from "@/lib/logging/logger" /** * Initialize the application */ export function initializeApp(): void { try { // Configure logger logger.info("Initializing application...") // Initialize services initializeServices() logger.info("Application initialized successfully") } catch (error) { logger.error("Failed to initialize application", error) throw error } } // Initialize the app when this module is imported initializeApp() [V0_FILE]typescript:file="lib/middleware/api-middleware.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { errorHandler } from "./error-handler" import { logger } from "@/lib/logging/logger" /** * Middleware for logging API requests */ export async function requestLoggerMiddleware( req: NextRequest, next: () => Promise, ): Promise { const start = Date.now() const method = req.method const url = new URL(req.url) const path = url.pathname logger.info(`API Request: ${method} ${path}`, { method, path, query: Object.fromEntries(url.searchParams.entries()), }) // Continue to the next middleware or route handler const response = await next() // Log response time const duration = Date.now() - start logger.info(`API Response: ${method} ${path} - ${response.status} (${duration}ms)`) return response } /** * Middleware for adding CORS headers / export async function corsMiddleware(req: NextRequest, next: () => Promise): Promise { // Continue to the next middleware or route handler const response = await next() // Add CORS headers response.headers.set("Access-Control-Allow-Origin", "") response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization") return response } /** * Middleware for handling OPTIONS requests (preflight) */ export async function optionsMiddleware(req: NextRequest, next: () => Promise): Promise { if (req.method === "OPTIONS") { return new NextResponse(null, { status: 204 }) } // Continue to the next middleware or route handler return next() } /** * Compose all API middlewares / export function withApiMiddleware(handler: (req: NextRequest) => Promise) { return async (req: NextRequest) => { // Compose middlewares in order return optionsMiddleware(req, () => corsMiddleware(req, () => requestLoggerMiddleware(req, () => errorHandler(req, () => handler(req)))), ) } } [V0_FILE]typescript:file="app/api/v1/auth/login/route.ts" isMerged="true" import type { NextRequest } from "next/server" import as yup from "yup" import { createAuthService } from "@/lib/services/auth.service" import { ApiResponse } from "@/lib/api/response" import { errorHandler } from "@/lib/middleware/error-handler" import { ValidationError } from "@/lib/errors/app-error" // Schema for login request const loginSchema = yup.object({ email: yup.string().email().required(), password: yup.string().required(), }) /** * POST /api/v1/auth/login * User login / export async function POST(req: NextRequest) { return errorHandler(req, async () => { try { // Parse and validate request body const body = await req.json() const validatedData = await loginSchema.validate(body, { abortEarly: false, stripUnknown: true, }) // Authenticate user const authService = createAuthService() const { user, token } = await authService.authenticate(validatedData.email, validatedData.password) // Return success response with user and token return ApiResponse.success({ user: { id: user.id, email: user.email, name: user.name, roles: user.roles, }, token, }) } catch (error) { if (error instanceof yup.ValidationError) { // Format validation errors const errors = error.inner.reduce( (acc, err) => { acc[err.path!] = err.message return acc }, {} as Record, ) throw new ValidationError("Invalid login data", errors) } // Re-throw other errors to be handled by the error middleware throw error } }) } [V0_FILE]typescriptreact:file="app/financiamento/loading.tsx" isMerged="true" import { Loader2 } from "lucide-react" export default function Loading() { return ( Carregando Simulador Financeiro... ) } [V0_FILE]typescriptreact:file="components/ai-assistant.tsx" isQuickEdit="true" isMerged="true" "use client" import { Bot, MessageSquare, Search, Sparkles, User, HelpCircle, Calculator, BarChart3, Wrench, FileCheck, LineChart, Wallet, } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export default function AIAssistant() { return ( Assistente com IA Nosso assistente multimodal com IA ajuda proprietários com informações, recomendações e suporte em tempo real Análise de Imóveis Obtenha insights sobre o mercado imobiliário local Powered by AI SDK {/ Barra de Navegação da Jornada Solar - NOVO /} Jornada Solar {[ { stage: "Avaliação", icon: , active: true }, { stage: "Dimensionamento", icon: }, { stage: "Setup Pagamento", icon: }, { stage: "Instalação", icon: }, { stage: "Homologação", icon: }, { stage: "Monitoramento", icon: }, ].map((item, i) => ( {item.icon} {item.stage} {item.active && } ))} {/ Ações Rápidas Contextuais - NOVO /} @ai-sdk/ui@1.1.0 Perguntas frequentes sobre solar Calcular potencial solar Comparar opções de financiamento Assistente Solar Yello/Cash Streaming com generateUI() Ativo {/ Sugestões de Tópicos - NOVO /} {[ "Potencial solar da minha região", "Economia mensal estimada", "Pagamento", "Processo de instalação", "Homologação junto à concessionária", ].map((topic, i) => ( {topic} ))} streamText via AI SDK Core Olá! Sou o assistente Yello/Cash alimentado por IA generativa multimodal. Posso analisar seu potencial solar em tempo real, simular financiamentos personalizados e dimensionar projetos fotovoltaicos com precisão. Como posso otimizar sua experiência solar hoje? Modelo: gpt-4o Temperatura: 0.7 Preciso avaliar o potencial solar do telhado da minha casa. Pode me ajudar? Claro! Posso analisar o potencial solar do seu telhado. Você poderia compartilhar uma imagem aérea da sua residência ou o endereço para que eu possa acessar imagens de satélite? Aqui está uma foto do meu telhado e minha localização. Gostaria de saber o potencial solar e as opções de financiamento. São Paulo, SP • 23°33'S 46°38'W Localizado 🔍 Analisando imagem com visão computacional... Processando multi-embeddings para análise de superfície e orientação solar... AHAA! Identifiquei um telhado com orientação norte-sul e área útil aproximada de 48m²! Dimensões detectadas: 8m x 6m 48m² Com base na análise multimodal, posso oferecer as seguintes informações: Potencial Solar Irradiação média: 5.2 kWh/m²/dia Capacidade estimada: 7.2 kWp Geração mensal: 864 kWh Dimensionamento do Sistema Painéis recomendados: 18 x 400W Inversor ideal: 8kW Área ocupada: 36m² (75% do disponível) WOW! 🌟 Com base no seu consumo médio estimado, este sistema poderia cobrir até 95% da sua demanda energética! Isso é incrível! Quanto custaria um sistema assim e quais seriam as opções de financiamento? AHAA! Com base na análise completa, posso apresentar as seguintes opções financeiras: Investimento Estimado: R$ 42.500 Pagamento à vista: R$ 38.250 (10% desc.) Pagamento por marcos: 4x de R$ 10.625 Financiamento: 60x de R$ 990/mês Economia mensal: R$ 950/mês Retorno do investimento: 3.7 anos Investimento Economia Hoje 5 anos 10 anos 15 anos Payback R$ 142.500 em 15 anos Para continuar usando o assistente, por favor complete seu cadastro! {/ Indicador de Progresso - NOVO /} Progresso da sua jornada solar 1/6 etapas Avaliação Dimensionamento Financiamento Instalação Homologação Monitoramento IA Playground Modo: SDK: v1.1.0 Potencializado por IA Avançada Nosso assistente utiliza modelos multimodais da OpenAI e embeddings para oferecer uma experiência conversacional natural e inteligente. {[ { icon: , title: "Suporte Conversacional", description: "Responde perguntas e oferece assistência em tempo real", }, { icon: , title: "Análise de Mercado", description: "Fornece insights sobre tendências e preços de imóveis", }, { icon: , title: "Recomendações Personalizadas", description: "Sugere propriedades e estratégias com base no seu perfil", }, { icon: , title: "Automação Inteligente", description: "Automatiza tarefas rotineiras e processos administrativos", }, ].map((feature, i) => ( {feature.icon} {feature.title} {feature.description} ))} ) } [V0_FILE]typescriptreact:file="app/dashboard/ai-assistant/page.tsx" isMerged="true" "use client" import Link from "next/link" import { Bot, MessageSquare, Search, Sparkles, User, HelpCircle, Calculator, BarChart3, Wrench, FileCheck, LineChart, Wallet, Sun, ArrowLeft, Home, } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export default function AIAssistantPage() { return ( {/ Header /} Yello / Cash Voltar para o Dashboard Assistente com IA Seu assistente multimodal com IA para gerenciar seus projetos solares de forma inteligente Análise de Imóveis Obtenha insights sobre o mercado imobiliário local Powered by AI SDK {/ Barra de Navegação da Jornada Solar /} Jornada Solar {[ { stage: "Avaliação", icon: , active: true }, { stage: "Dimensionamento", icon: }, { stage: "Setup Pagamento", icon: }, { stage: "Instalação", icon: }, { stage: "Homologação", icon: }, { stage: "Monitoramento", icon: }, ].map((item, i) => ( {item.icon} {item.stage} {item.active && } ))} {/ Ações Rápidas Contextuais /} @ai-sdk/ui@1.1.0 Perguntas frequentes sobre solar Calcular potencial solar Comparar opções de financiamento Assistente Solar Yello/Cash Streaming com generateUI() Ativo {/ Sugestões de Tópicos /} {[ "Potencial solar da minha região", "Economia mensal estimada", "Pagamento", "Processo de instalação", "Homologação junto à concessionária", ].map((topic, i) => ( {topic} ))} streamText via AI SDK Core Olá! Sou o assistente Yello/Cash alimentado por IA generativa multimodal. Posso analisar seu potencial solar em tempo real, simular financiamentos personalizados e dimensionar projetos fotovoltaicos com precisão. Como posso otimizar sua experiência solar hoje? Modelo: gpt-4o Temperatura: 0.7 Preciso avaliar o potencial solar do telhado da minha casa. Pode me ajudar? Claro! Posso analisar o potencial solar do seu telhado. Você poderia compartilhar uma imagem aérea da sua residência ou o endereço para que eu possa acessar imagens de satélite? Aqui está uma foto do meu telhado e minha localização. Gostaria de saber o potencial solar e as opções de financiamento. São Paulo, SP • 23°33'S 46°38'W Localizado 🔍 Analisando imagem com visão computacional... Processando multi-embeddings para análise de superfície e orientação solar... AHAA! Identifiquei um telhado com orientação norte-sul e área útil aproximada de 48m²! Dimensões detectadas: 8m x 6m 48m² Com base na análise multimodal, posso oferecer as seguintes informações: Potencial Solar Irradiação média: 5.2 kWh/m²/dia Capacidade estimada: 7.2 kWp Geração mensal: 864 kWh Dimensionamento do Sistema Painéis recomendados: 18 x 400W Inversor ideal: 8kW Área ocupada: 36m² (75% do disponível) WOW! 🌟 Com base no seu consumo médio estimado, este sistema poderia cobrir até 95% da sua demanda energética! Isso é incrível! Quanto custaria um sistema assim e quais seriam as opções de financiamento? AHAA! Com base na análise completa, posso apresentar as seguintes opções financeiras: Investimento Estimado: R$ 42.500 Pagamento à vista: R$ 38.250 (10% desc.) Pagamento por marcos: 4x de R$ 10.625 Financiamento: 60x de R$ 990/mês Economia mensal: R$ 950/mês Retorno do investimento: 3.7 anos Investimento Economia Hoje 5 anos 10 anos 15 anos Payback R$ 142.500 em 15 anos Quer explorar mais detalhes sobre alguma das opções de financiamento? Posso detalhar os termos, processos e próximos passos para qualquer uma delas. {/ Indicador de Progresso /} Progresso da sua jornada solar 1/6 etapas Avaliação Dimensionamento Financiamento Instalação Homologação Monitoramento IA Playground Modo: SDK: v1.1.0 Seu Consultor Pessoal de IA O Assistente Yello/Cash utiliza modelos multimodais avançados e análise de dados em tempo real para oferecer suporte personalizado em todas as etapas do seu projeto solar. {[ { icon: , title: "Conversa Inteligente", description: "Responde perguntas técnicas e oferece assistência personalizada em tempo real.", }, { icon: , title: "Análise de Potencial Solar", description: "Avalia fotos e dados de satélite para determinar o potencial solar do seu imóvel.", }, { icon: , title: "Simulações Financeiras", description: "Calcula retorno de investimento e compara diferentes opções de financiamento.", }, { icon: , title: "Monitoramento de Projetos", description: "Acompanha cada etapa da sua jornada solar, com alertas e recomendações.", }, ].map((feature, i) => ( {feature.icon} {feature.title} {feature.description} ))} Recursos Disponíveis Análise de imagens e documentos Cálculos de dimensionamento solar Simulador financeiro avançado Atendimento 24/7 para clientes premium Próximos Passos Compartilhe Mais Informações Adicione sua fatura de energia ou informações sobre consumo para análises mais precisas. Compare Opções de Financiamento Use o simulador para analisar diferentes cenários financeiros para seu projeto. Agende uma Visita Técnica Após a análise inicial, agende uma visita técnica para validação presencial. Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/dashboard/ai-assistant/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" import type React from "react" import { Sun } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return ( Yello / Cash {children} Yello / Cash © 2025 Yello/Cash. Todos os direitos reservados. ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import Link from "next/link" import { Sun, ChevronRight, User, LineChart, BarChart3, Zap, Bot, FileCheck } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" export default function Dashboard() { return ( Dashboard Solar Bem-vindo à sua central de controle de projetos solares {/ Overview Cards /} Economia Total R$ 12.450 +8.2% do mês anterior Geração Mensal 864 kWh 95% da sua demanda Projetos 3 1 em andamento Retorno do Investimento 3.2 anos 22% concluído {/ Main Content /} {/ Projects /} Projetos Ativos Acompanhe o progresso dos seus projetos solares {[ { name: "Residência Principal", location: "São Paulo, SP", status: "Em Andamento", progress: 75, stage: "Instalação", nextStep: "Homologação concessionária", icon: , }, { name: "Casa de Praia", location: "Ubatuba, SP", status: "Concluído", progress: 100, stage: "Monitoramento", nextStep: "Manutenção preventiva", icon: , }, { name: "Edifício Comercial", location: "Campinas, SP", status: "Planejamento", progress: 25, stage: "Dimensionamento", nextStep: "Aprovação do financiamento", icon: , }, ].map((project, index) => ( {project.icon} {project.name} {project.status} {project.location} Progresso: {project.stage} {project.progress}% Próximo: {project.nextStep} ))} {/ Analytics /} Métricas de Desempenho Gráficos de desempenho serão exibidos aqui {/ Sidebar - Quick Access /} Acesso Rápido {/ Notifications /} Notificações {[ { title: "Visita técnica agendada", description: "Amanhã, 14:00 - Residência Principal", icon: , time: "1 dia", }, { title: "Economia mensal atualizada", description: "Você economizou R$ 950 este mês", icon: , time: "2 dias", }, { title: "Novo relatório disponível", description: "Análise de desempenho trimestral", icon: , time: "1 semana", }, ].map((notification, index) => ( {notification.icon} {notification.title} {notification.description} {notification.time} atrás ))} ) } [V0_FILE]typescriptreact:file="app/api/financial-simulator/route.ts" isMerged="true" import type { NextRequest } from "next/server" import as yup from "yup" import { validateRequest } from "@/lib/api/validation" import { logger } from "@/lib/utils/logger" import { simulateSolarFinancing } from "@/lib/services/financial-simulator.service" import { ApiResponse } from "@/lib/api/response" import { HttpStatus } from "@/lib/api/status-codes" import { errorHandler } from "@/lib/middleware/error-handler" // Schema for financial simulator parameters const simulatorParamsSchema = yup.object({ projectValue: yup.number().required().min(1000).max(1000000), energySavings: yup.number().required().min(50).max(10000), selectedBank: yup.string().optional(), selectedPaymentMethod: yup.string().optional(), includeInstallation: yup.boolean().default(true), includeEquipment: yup.boolean().default(true), includeHomologation: yup.boolean().default(true), includeMonitoring: yup.boolean().default(false), energyPriceIncrease: yup.number().default(8).min(0).max(20), inflationRate: yup.number().default(4.5).min(0).max(20), }) /** * POST /api/financial-simulator * Simulates financial options for solar projects */ export async function POST(req: NextRequest) { return errorHandler(req, async () => { try { // Validate request body const { isValid, data, errors } = await validateRequest(req, simulatorParamsSchema) if (!isValid) { return ApiResponse.error("Validation error", HttpStatus.BAD_REQUEST, "VALIDATION_ERROR", errors) } logger.info("Running financial simulation", { params: data }) // Run financial simulation const results = await simulateSolarFinancing(data) return ApiResponse.success(results) } catch (error) { logger.error("Error in financial simulator", error) return ApiResponse.error( "Failed to run financial simulation", HttpStatus.INTERNAL_SERVER_ERROR, "SIMULATION_ERROR", ) } }) } [V0_FILE]typescript:file="lib/services/bank.service.ts" isMerged="true" import { logger } from "@/lib/utils/logger" /** * Interface for bank information */ export interface Bank { id: string name: string logo: string interestRate: number maxTerm: number minDownPayment: number description?: string specialRequirements?: string[] supportedPaymentMethods?: string[] contactInfo?: { phone?: string email?: string website?: string } } // Mock bank database const banks: Bank[] = [ { id: "banco-solar", name: "Banco Solar", logo: "BS", interestRate: 0.99, maxTerm: 72, minDownPayment: 10, description: "Especializado em financiamento de energia renovável", specialRequirements: ["Comprovação de renda mínima de R$ 3.500", "Score de crédito acima de 700", "Imóvel quitado"], supportedPaymentMethods: ["traditional", "upfront", "milestone"], contactInfo: { phone: "0800 123 4567", email: "contato@bancosolar.com.br", website: "https://www.bancosolar.com.br", }, }, { id: "eco-finance", name: "EcoFinance", logo: "EF", interestRate: 1.15, maxTerm: 60, minDownPayment: 0, description: "Soluções financeiras para projetos sustentáveis", specialRequirements: ["Projeto com certificação de sustentabilidade", "Score de crédito acima de 650"], supportedPaymentMethods: ["traditional", "subscription", "leasing"], contactInfo: { phone: "0800 987 6543", email: "atendimento@ecofinance.com.br", website: "https://www.ecofinance.com.br", }, }, { id: "green-bank", name: "GreenBank", logo: "GB", interestRate: 0.89, maxTerm: 84, minDownPayment: 15, description: "Banco verde com foco em projetos de impacto ambiental positivo", specialRequirements: ["Comprovação de renda mínima de R$ 5.000", "Análise de viabilidade técnica do projeto"], supportedPaymentMethods: ["traditional", "milestone", "leasing"], contactInfo: { phone: "0800 456 7890", email: "contato@greenbank.com.br", website: "https://www.greenbank.com.br", }, }, { id: "sun-credit", name: "SunCredit", logo: "SC", interestRate: 1.05, maxTerm: 96, minDownPayment: 5, description: "Crédito especializado para sistemas fotovoltaicos", specialRequirements: ["Projeto executado por empresa certificada", "Imóvel com bom potencial solar"], supportedPaymentMethods: ["traditional", "milestone", "subscription"], contactInfo: { phone: "0800 345 6789", email: "contato@suncredit.com.br", website: "https://www.suncredit.com.br", }, }, { id: "energia-coop", name: "Energia Coop", logo: "EC", interestRate: 0.79, maxTerm: 48, minDownPayment: 20, description: "Cooperativa de crédito focada em energia renovável", specialRequirements: ["Ser associado da cooperativa", "Projeto residencial ou de pequeno negócio"], supportedPaymentMethods: ["traditional", "milestone"], contactInfo: { phone: "0800 765 4321", email: "contato@energiacoop.com.br", website: "https://www.energiacoop.com.br", }, }, ] /** * Get bank by ID */ export async function getBankById(id: string): Promise { try { const bank = banks.find((b) => b.id === id) return bank || null } catch (error) { logger.error(`Error getting bank with ID ${id}`, error) throw error } } /** * Get all banks or filter by ID */ export async function getBanksList(bankId?: string): Promise { try { if (bankId && bankId !== "all") { const bank = await getBankById(bankId) return bank ? [bank] : [] } return [...banks] } catch (error) { logger.error("Error getting banks list", error) throw error } } /** * Get banks that support a specific payment method */ export async function getBanksByPaymentMethod(paymentMethodId: string): Promise { try { return banks.filter((bank) => bank.supportedPaymentMethods?.includes(paymentMethodId)) } catch (error) { logger.error(`Error getting banks for payment method ${paymentMethodId}`, error) throw error } } /** * Get current interest rates from banks * In a real scenario, this would call bank APIs to get real-time rates */ export async function getCurrentInterestRates(): Promise> { try { // Simulate API call to get current rates // In a real implementation, this would fetch from bank APIs // For now, return the mock rates return banks.reduce( (rates, bank) => { rates[bank.id] = bank.interestRate return rates }, {} as Record, ) } catch (error) { logger.error("Error getting current interest rates", error) throw error } } [V0_FILE]typescript:file="lib/api/validation.ts" isMerged="true" import type { NextRequest } from "next/server" import { logger } from "@/lib/utils/logger" /** * Validate request body against a schema */ export async function validateRequest( req: NextRequest, schema: any, ): Promise<{ isValid: boolean; data?: T; errors?: Record }> { try { // Parse request body const body = await req.json() // Validate against schema try { const data = await schema.validate(body, { abortEarly: false, stripUnknown: true, }) return { isValid: true, data: data as T } } catch (error: any) { logger.debug("Validation error:", error) // Format validation errors const errors = error.inner?.reduce((acc: any, err: any) => { acc[err.path] = err.message return acc }, {}) || { _error: error.message } return { isValid: false, errors } } } catch (error) { logger.error("Error parsing request body:", error) return { isValid: false, errors: { _error: "Invalid JSON in request body" } } } } [V0_FILE]typescript:file="lib/api/status-codes.ts" isMerged="true" /** * HTTP Status codes enum / export enum HttpStatus { OK = 200, CREATED = 201, NO_CONTENT = 204, BAD_REQUEST = 400, UNAUTHORIZED = 401, FORBIDDEN = 403, NOT_FOUND = 404, CONFLICT = 409, UNPROCESSABLE_ENTITY = 422, TOO_MANY_REQUESTS = 429, INTERNAL_SERVER_ERROR = 500, BAD_GATEWAY = 502, SERVICE_UNAVAILABLE = 503, } [V0_FILE]typescriptreact:file="components/financial/ai-recommendation-panel.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 { Sparkles, Bot, ChevronDown, ChevronUp, Check } from "lucide-react" import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format" import { Skeleton } from "@/components/ui/skeleton" interface AIRecommendationPanelProps { simulationResults: any[] projectValue: number energySavings: number onSelectOption: (index: number) => void } export function AIRecommendationPanel({ simulationResults, projectValue, energySavings, onSelectOption, }: AIRecommendationPanelProps) { const [isLoading, setIsLoading] = useState(true) const [recommendations, setRecommendations] = useState([]) const [isExpanded, setIsExpanded] = useState(false) useEffect(() => { if (simulationResults.length === 0) return // Simulate AI processing delay setIsLoading(true) const timer = setTimeout(() => { // In a real application, this would call the AI API with the simulation results // and get personalized recommendations // For now, we'll use a simple algorithm to generate recommendations: // 1. Best ROI option // 2. Fastest payback option // 3. Lowest monthly payment option const bestROI = [...simulationResults].sort((a, b) => b.roi - a.roi)[0] const fastestPayback = [...simulationResults].sort((a, b) => a.paybackMonths - b.paybackMonths)[0] const lowestMonthly = [...simulationResults] .filter((r) => r.monthlyPayment > 0) .sort((a, b) => a.monthlyPayment - b.monthlyPayment)[0] // Find their indices in the original array const bestROIIndex = simulationResults.findIndex((r) => r.id === bestROI.id) const fastestPaybackIndex = simulationResults.findIndex((r) => r.id === fastestPayback.id) const lowestMonthlyIndex = simulationResults.findIndex((r) => r.id === lowestMonthly.id) // Create recommendation objects const recs = [ { title: "Melhor Retorno sobre Investimento", description: "Esta opção maximiza seu ROI no longo prazo", result: bestROI, index: bestROIIndex, highlights: [ `ROI de ${formatPercentage(bestROI.roi)}`, `Economia total de ${formatCurrency(bestROI.energySavings25Years)} em 25 anos`, ], explanation: `Para um investimento de ${formatCurrency(projectValue)}, esta opção oferece o maior retorno financeiro ao longo do tempo. Com uma economia mensal de ${formatCurrency(energySavings)}, seu retorno sobre investimento será maximizado.`, }, { title: "Retorno Mais Rápido", description: "Esta opção permite recuperar seu investimento no menor tempo possível", result: fastestPayback, index: fastestPaybackIndex, highlights: [ `Payback em apenas ${formatMonths(fastestPayback.paybackMonths)}`, `${fastestPayback.discount > 0 ? `Desconto de ${formatCurrency(fastestPayback.discount)}` : `Sem entrada inicial significativa`}`, ], explanation: `Se você deseja recuperar seu investimento o mais rápido possível, esta é a melhor opção. Com um período de payback de apenas ${formatMonths(fastestPayback.paybackMonths)}, você começará a ver retorno financeiro rapidamente.`, }, ] // Add lowest monthly payment if it's different from the other recommendations if (lowestMonthlyIndex !== bestROIIndex && lowestMonthlyIndex !== fastestPaybackIndex) { recs.push({ title: "Menor Pagamento Mensal", description: "Esta opção minimiza seu desembolso mensal", result: lowestMonthly, index: lowestMonthlyIndex, highlights: [ `Apenas ${formatCurrency(lowestMonthly.monthlyPayment)} por mês`, `Prazo estendido de ${lowestMonthly.term} meses`, ], explanation: `Para um fluxo de caixa mais confortável, esta opção oferece o menor pagamento mensal. Isso facilita o encaixe no seu orçamento, embora o período de payback seja um pouco mais longo.`, }) } setRecommendations(recs) setIsLoading(false) }, 2000) return () => clearTimeout(timer) }, [simulationResults, projectValue, energySavings]) if (simulationResults.length === 0) { return null } return ( Recomendações da IA {isLoading ? ( ) : ( {recommendations.slice(0, isExpanded ? recommendations.length : 1).map((rec, index) => ( {rec.title} {rec.description} {rec.highlights.map((highlight, i) => ( {highlight} ))} {rec.explanation} {index < recommendations.length - 1 && !isExpanded && ( )} ))} {recommendations.length > 1 && ( )} Estas recomendações são baseadas nas suas preferências e nos parâmetros fornecidos. Para uma análise mais personalizada, consulte um especialista financeiro. )} ) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { / Modo claro (default) / --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; --card: 0 0% 100%; --card-foreground: 20 14.3% 4.1%; --popover: 0 0% 100%; --popover-foreground: 20 14.3% 4.1%; --primary: 38 92% 50%; / Amarelo da marca / --primary-foreground: 26 83.3% 14.1%; --secondary: 160 84% 39%; / Verde da marca / --secondary-foreground: 24 9.8% 10%; --muted: 60 4.8% 95.9%; --muted-foreground: 25 5.3% 44.7%; --accent: 38 92% 50%; / Amarelo da marca para acentos / --accent-foreground: 24 9.8% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 60 9.1% 97.8%; --border: 20 5.9% 90%; --input: 20 5.9% 90%; --ring: 38 92% 50%; / Amarelo da marca para foco / --radius: 0.5rem; } .dark { / Modo escuro blackout / --background: 0 0% 0%; / Preto puro / --foreground: 0 0% 98%; / Branco quase puro para texto / --card: 0 0% 3%; / Preto levemente mais claro para cards / --card-foreground: 0 0% 98%; --popover: 0 0% 3%; --popover-foreground: 0 0% 98%; --primary: 38 92% 50%; / Mantém a cor primária / --primary-foreground: 0 0% 0%; --secondary: 160 84% 39%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 10%; / Cinza muito escuro / --muted-foreground: 0 0% 70%; / Cinza claro para texto secundário / --accent: 38 92% 50%; / Amarelo da marca para acentos / --accent-foreground: 0 0% 0%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 15%; / Bordas escuras mas visíveis / --input: 0 0% 15%; --ring: 38 92% 50%; } } @layer base { { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } h1, h2, h3, h4, h5, h6 { @apply tracking-tight; } /* Animações personalizadas para componentes da marca / .brand-button-hover { @apply transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]; } .brand-card-hover { @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1; } / Gradientes personalizados / .brand-gradient-primary { @apply bg-gradient-to-r from-yellow-500 via-yellow-400 to-yellow-500; } .brand-gradient-secondary { @apply bg-gradient-to-r from-green-500 via-green-400 to-green-500; } / Gradiente de fundo adaptado para modo escuro / .brand-gradient-background { @apply bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/10 dark:to-green-950/10; } } / Adicionar classes de utilidade para a marca / @layer utilities { .text-brand-gradient { @apply bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-yellow-600; } .bg-brand-gradient { @apply bg-gradient-to-r from-yellow-500 to-yellow-600; } .bg-brand-gradient-alt { @apply bg-gradient-to-r from-green-500 to-green-600; } .border-brand { @apply border-yellow-500; } .shadow-brand { @apply shadow-[0_0_10px_rgba(245,158,11,0.3)]; } } / Add solar-inspired animations / @keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes pulse-solar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } @keyframes float-solar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-shine { animation: shine 2s infinite; } .animate-pulse-solar { animation: pulse-solar 3s infinite; } .animate-float-solar { animation: float-solar 5s ease-in-out infinite; } / Add gradient text utility / .text-gradient-yello { background: linear-gradient(90deg, #ffce00, #ff6600, #ff0066); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } / Efeito de brilho para elementos no modo escuro / .dark .glow-effect { box-shadow: 0 0 15px rgba(255, 206, 0, 0.3), 0 0 30px rgba(255, 102, 0, 0.1); } .dark .glow-text { text-shadow: 0 0 8px rgba(255, 206, 0, 0.5); } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ArrowRight, Sun, Home, Users, CreditCard, Zap, FileText, DollarSign, HelpCircle, Menu, LogIn, UserPlus, } from "lucide-react" import { Button } from "@/components/ui/button" import HeroSection from "@/components/hero-section" import PropertyListings from "@/components/property-listings" import OwnerProfiles from "@/components/owner-profiles" import PaymentSystem from "@/components/payment-system" import AIAssistant from "@/components/ai-assistant" import Features from "@/components/features" import { ThemeToggle } from "@/components/theme-toggle" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" export default function HomePage() { return ( Yello / Cash {/ Desktop Navigation /} {[ { name: "Propriedades", href: "#properties", icon: }, { name: "Proprietários", href: "#owners", icon: }, { name: "Pagamentos", href: "#payment", icon: }, { name: "Recursos", href: "#features", icon: }, { name: "Blog", href: "/blog", icon: }, { name: "Preços", href: "/pricing", icon: }, ].map((item) => ( {item.icon} {item.name} ))} {/ Onboarding Button with Badge for new users /} {/ User Authentication /} {/ Theme Toggle /} {/ Mobile Menu Button /} Yello / Cash Navegue pela plataforma de energia solar {[ { name: "Propriedades", href: "#properties", icon: }, { name: "Proprietários", href: "#owners", icon: }, { name: "Pagamentos", href: "#payment", icon: }, { name: "Recursos", href: "#features", icon: }, { name: "Blog", href: "/blog", icon: }, { name: "Preços", href: "/pricing", icon: }, { name: "Tour Guiado", href: "#tour", icon: , badge: "Novo", }, ].map((item) => ( {item.icon} {item.name} {item.badge && ( {item.badge} )} ))} Start managing your properties today Simplify property management, payments, and owner communication in one platform. Plataforma Recursos Preços Segurança Suporte Documentação Central de Ajuda Contato Legal Termos Privacidade Cookies Empresa Sobre Blog Carreiras Yello / Cash © 2025 Yello/Cash. All rights reserved. ) } [V0_FILE]typescriptreact:file="components/property-listings.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Home, MapPin, Maximize, Sun, ArrowUpRight, Info, CreditCard, Wallet, Layers, Zap, BanknoteIcon, Battery, Car, LineChart, } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" import { Gauge } from "@/components/ui/gauge" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Slider } from "@/components/ui/slider" // Solar Gauge component that uses the Gauge component function SolarGauge({ value, type }: { value: number; type: "economia" | "roi" }) { return ( ) } export default function PropertyListings() { const properties = [ { id: 1, title: "Casa Moderna com Energia Solar", type: "Residencial", location: "São Paulo, SP", area: "205 m²", price: "R$ 1.250.000", energy: "Sistema Solar Instalado", image: "/placeholder.svg?height=300&width=400", featured: true, paymentOptions: { type: "traditional", name: "Financiamento Tradicional", description: "Linha de crédito com taxa fixa de 9.5% a.a.", processor: "Lago Payments", details: "Aprovação em 48h, entrada de 20%", }, }, { id: 2, title: "Edifício Comercial Sustentável", type: "Comercial", location: "Rio de Janeiro, RJ", area: "510 m²", price: "R$ 2.800.000", energy: "Preparado para Energia Solar", image: "/placeholder.svg?height=300&width=400", featured: false, paymentOptions: { type: "flexible", name: "Pagamento Misto", description: "30% entrada + financiamento + cartão", processor: "Hyperswitch", details: "Parcelamento em até 60x", }, }, { id: 3, title: "Vila Ecológica", type: "Residencial", location: "Florianópolis, SC", area: "297 m²", price: "R$ 1.850.000", energy: "Energia Net Zero", image: "/placeholder.svg?height=300&width=400", featured: true, paymentOptions: { type: "milestone", name: "Pagamento por Marcos", description: "4 etapas de implementação solar", processor: "Finarect", details: "Pagamentos vinculados a entregas", }, }, { id: 4, title: "Apartamento Solar Urbano", type: "Residencial", location: "Belo Horizonte, MG", area: "167 m²", price: "R$ 950.000", energy: "Otimizado para Energia Solar", image: "/placeholder.svg?height=300&width=400", featured: false, paymentOptions: { type: "alternative", name: "Leasing Solar", description: "Sem investimento inicial", processor: "Lago Payments", details: "Economia imediata na conta de luz", }, }, ] const [showPaymentModal, setShowPaymentModal] = useState(false) const [projectValue, setProjectValue] = useState(40000) const [installments, setInstallments] = useState(12) const [downPayment, setDownPayment] = useState(0) const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("credit-card") return ( Imóveis em Destaque Descubra propriedades energeticamente eficientes com soluções solares integradas {/ Guia de Métodos de Pagamento - Card Explicativo /} Métodos de Pagamento Habilitadores Soluções financeiras adaptadas para cada perfil de consumo energético {[ { name: "Tradicional", icon: , color: "bg-blue-100 text-blue-700", }, { name: "Flexível", icon: , color: "bg-purple-100 text-purple-700" }, { name: "Por Marcos", icon: , color: "bg-yellow-100 text-yellow-700", }, { name: "Alternativo", icon: , color: "bg-green-100 text-green-700" }, ].map((type, i) => ( {type.icon} {type.name} ))} Valor do projeto solar setProjectValue(Number(e.target.value))} /> R$ {projectValue.toLocaleString("pt-BR")} Pagamento por Marcos Recomendado {[ { name: "Marco 1: Planejamento", value: "R$ 6.000", percent: "15%", status: "Concluído" }, { name: "Marco 2: Aquisição", value: "R$ 14.000", percent: "35%", status: "Em andamento" }, { name: "Marco 3: Instalação", value: "R$ 10.000", percent: "25%", status: "Pendente" }, { name: "Marco 4: Homologação", value: "R$ 10.000", percent: "25%", status: "Pendente" }, ].map((milestone, i) => ( {milestone.name} R$ {Math.round((projectValue milestone.percentage) / 100).toLocaleString("pt-BR")} ({milestone.percent}) ))} Tradicional Pagamento à vista R$ {Math.round(projectValue * 0.9).toLocaleString("pt-BR")} Economia de 10% Alternativo Leasing Solar R$ 650/mês Sem entrada Instituições Financeiras Parceiras {[ { name: "Banco Solar", logo: "BS" }, { name: "EcoFinance", logo: "EF" }, { name: "GreenBank", logo: "GB" }, { name: "SunCredit", logo: "SC" }, { name: "Mais opções", logo: "+" }, ].map((bank, i) => ( {bank.logo} {bank.name} ))} {/* Cross-Selling Card - NEW /} Upselling Solar Amplie seu investimento com complementos inteligentes {[ { name: "Bateria Residencial", description: "Armazene energia para uso noturno", price: "+R$ 15.000", icon: , }, { name: "Carregador Veicular", description: "Carregue seu carro elétrico com energia solar", price: "+R$ 8.500", icon: , }, { name: "Monitoramento Avançado", description: "Acompanhe a geração em tempo real", price: "+R$ 2.200", icon: , }, ].map((item, i) => ( {item.icon} {item.name} {item.description} {item.price} ))} {properties.map((property) => ( {property.featured && ( Destaque )} {property.paymentOptions && ( {property.paymentOptions.name} )} {property.title} {property.location} {property.type} {property.area} {property.energy} {property.price} {property.paymentOptions && ( {property.paymentOptions.name} {property.paymentOptions.processor} {property.paymentOptions.description} {property.paymentOptions.details} )} ))} {/ Multi-Credit Payment Calculator Modal /} Calculadora Multi-Crédito Simule diferentes formas de pagamento para seu projeto solar Valor do Projeto R$ {projectValue.toLocaleString("pt-BR")} setProjectValue(value[0])} className="w-full" /> R$ 10.000 R$ 100.000 Entrada (opcional) setDownPayment(Number(e.target.value))} className="w-full" placeholder="Valor da entrada" /> Cartão PIX Boleto Marcos Cartão de Crédito Número de Parcelas setInstallments(value[0])} className="flex-1" /> {installments}x VISA MC OUTRO Valor financiado: R$ {(projectValue - downPayment).toLocaleString("pt-BR")} Parcelas: {installments}x de R${" "} {Math.round((projectValue - downPayment) / installments).toLocaleString("pt-BR")} Taxa de juros: 1.99% a.m. Total: R${" "} {Math.round((projectValue - downPayment) (1 + 0.0199) ** installments).toLocaleString( "pt-BR", )} {[ { bank: "Banco Solar", rate: "1.99%", logo: "BS" }, { bank: "EcoFinance", rate: "2.15%", logo: "EF" }, { bank: "GreenBank", rate: "1.89%", logo: "GB" }, ].map((bank, i) => ( {bank.logo} {bank.bank} {bank.rate} a.m. ))} Pagamento via PIX QR Code PIX Economize 10% pagando via PIX Pagamento instantâneo Valor original: R$ {projectValue.toLocaleString("pt-BR")} Desconto PIX (10%): - R$ {Math.round(projectValue * 0.1).toLocaleString("pt-BR")} Total a pagar: R$ {Math.round(projectValue * 0.9).toLocaleString("pt-BR")} O pagamento via PIX é processado instantaneamente e o desconto é aplicado na hora! Pagamento via Boleto Número de Parcelas setInstallments(value[0])} className="flex-1" /> {installments}x Boleto Bancário 5% de desconto Valor original: R$ {projectValue.toLocaleString("pt-BR")} Desconto boleto (5%): - R$ {Math.round(projectValue * 0.05).toLocaleString("pt-BR")} Parcelas: {installments}x de R${" "} {Math.round((projectValue * 0.95) / installments).toLocaleString("pt-BR")} Boletos são gerados com vencimento mensal e enviados para seu email. Pagamento por Marcos {[ { name: "Marco 1: Planejamento", percentage: 15, description: "Visita técnica e dossiê solar" }, { name: "Marco 2: Aquisição", percentage: 35, description: "Compra de equipamentos" }, { name: "Marco 3: Instalação", percentage: 25, description: "Montagem e integração do sistema", }, { name: "Marco 4: Homologação", percentage: 25, description: "Aprovação pela concessionária" }, ].map((milestone, i) => ( {i + 1} {milestone.name} {milestone.description} {milestone.percentage}% R$ {Math.round((projectValue * milestone.percentage) / 100).toLocaleString("pt-BR")} ))} Total: R$ {projectValue.toLocaleString("pt-BR")} Pagamentos vinculados à conclusão de cada etapa do projeto, reduzindo riscos. {/* Estilos responsivos adicionais */} ) } [V0_FILE]typescriptreact:file="app/propriedades/[id]/page.tsx" isMerged="true" import { Suspense } from "react" import { notFound } from "next/navigation" import Link from "next/link" import { ArrowLeft, Home, MapPin, Ruler, Zap } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { PropertyGallery } from "@/components/property-gallery" import { PropertyContactForm } from "@/components/property-contact-form" import { PropertyPaymentOptions } from "@/components/property-payment-options" import { PropertyMap } from "@/components/property-map" import { PropertySimilar } from "@/components/property-similar" import { PropertyScheduleTour } from "@/components/property-schedule-tour" async function getProperty(id: string) { try { const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/properties/${id}`, { next: { revalidate: 3600 }, // Revalidate every hour }) if (!res.ok) { if (res.status === 404) return null throw new Error("Failed to fetch property") } const data = await res.json() return data.success ? data.data : null } catch (error) { console.error("Error fetching property:", error) return null } } export default async function PropertyPage({ params }: { params: { id: string } }) { const property = await getProperty(params.id) if (!property) { notFound() } return ( Voltar para listagem {property.title} {property.location} }> Tipo {property.type} Área {property.area} Energia {property.energy || "Convencional"} Detalhes Financiamento Localização Energia Solar Descrição {property.description || `Excelente ${property.type.toLowerCase()} localizado em ${property.location}, com área de ${property.area}. Ideal para quem busca conforto e qualidade de vida. A propriedade conta com excelente localização e infraestrutura completa.`} Características Área de {property.area} {property.type} {property.energy ? "Energia solar" : "Energia convencional"} Localização privilegiada }> }> Potencial de Energia Solar Esta propriedade {property.energy ? "já possui" : "tem excelente potencial para"} instalação de energia solar, proporcionando economia significativa na conta de luz e valorização do imóvel. Economia Estimada R$ 850,00/mês Baseado no consumo médio da região Retorno do Investimento 4.5 anos Considerando financiamento Yello Solar }> {property.price} Valor do imóvel }> }>


    
  )
}
[V0_FILE]typescriptreact:file="components/property-gallery.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight, Expand } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"

interface PropertyGalleryProps {
  images: string[]
}

export function PropertyGallery({ images }: PropertyGalleryProps) {
  const [currentIndex, setCurrentIndex] = useState(0)

  // If no images provided, use a placeholder
  const imageList = images.length > 0 ? images : ["/placeholder.svg?height=600&width=800"]

  const goToPrevious = () => {
    const isFirstImage = currentIndex === 0
    const newIndex = isFirstImage ? imageList.length - 1 : currentIndex - 1
    setCurrentIndex(newIndex)
  }

  const goToNext = () => {
    const isLastImage = currentIndex === imageList.length - 1
    const newIndex = isLastImage ? 0 : currentIndex + 1
    setCurrentIndex(newIndex)
  }

  return (
    
      
        
      

      {imageList.length > 1 && (
        <>
          

          
        
      )}

      
        
          
        
        
          
            
          

          {imageList.length > 1 && (
            
              {imageList.map((_, index) => (
                
          )}
        
      

      {imageList.length > 1 && (
        
          {currentIndex + 1} / {imageList.length}
        
      )}
    
  )
}
[V0_FILE]typescriptreact:file="components/property-contact-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Send } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/hooks/use-toast"

const formSchema = z.object({
  name: z.string().min(2, { message: "Nome deve ter pelo menos 2 caracteres" }),
  email: z.string().email({ message: "Email inválido" }),
  phone: z.string().min(10, { message: "Telefone inválido" }),
  message: z.string().optional(),
})

type FormValues = z.infer

interface PropertyContactFormProps {
  propertyId: string
  propertyTitle: string
}

export function PropertyContactForm({ propertyId, propertyTitle }: PropertyContactFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: "",
      message: `Olá, tenho interesse no imóvel "${propertyTitle}" e gostaria de mais informações.`,
    },
  })

  async function onSubmit(data: FormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Mensagem enviada com sucesso!",
        description: "Um de nossos consultores entrará em contato em breve.",
      })

      form.reset()
    } catch (error) {
      toast({
        title: "Erro ao enviar mensagem",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    
      
         (
            
              Nome
              
                
              
              
            
          )}
        />

         (
            
              Email
              
                
              
              
            
          )}
        />

         (
            
              Telefone
              
                
              
              
            
          )}
        />

         (
            
              Mensagem
              
                              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? (
            <>Enviando...</>
          ) : (
            <>
              <Send className="mr-2 h-4 w-4" />
              Enviar mensagem
            </>
          )}
        </Button>
      </form>
    </Form>
  )
}
[V0_FILE]typescriptreact:file="components/owner-communication-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Send, Phone, Video, Calendar, Mail } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/hooks/use-toast"

const messageFormSchema = z.object({
  subject: z.string().min(2, { message: "Assunto deve ter pelo menos 2 caracteres" }),
  message: z.string().min(10, { message: "Mensagem deve ter pelo menos 10 caracteres" }),
  priority: z.string().optional(),
})

const callFormSchema = z.object({
  date: z.string().min(1, { message: "Data é obrigatória" }),
  time: z.string().min(1, { message: "Horário é obrigatório" }),
  reason: z.string().min(5, { message: "Motivo deve ter pelo menos 5 caracteres" }),
  callType: z.enum(["phone", "video"]),
})

type MessageFormValues = z.infer<typeof messageFormSchema>
type CallFormValues = z.infer<typeof callFormSchema>

interface OwnerCommunicationPanelProps {
  owner: {
    id: string | number
    name: string
    email: string
    phone: string
    image?: string
    initials?: string
  }
}

export function OwnerCommunicationPanel({ owner }: OwnerCommunicationPanelProps) {
  const [activeTab, setActiveTab] = useState("message")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const messageForm = useForm<MessageFormValues>({
    resolver: zodResolver(messageFormSchema),
    defaultValues: {
      subject: "",
      message: "",
      priority: "normal",
    },
  })

  const callForm = useForm<CallFormValues>({
    resolver: zodResolver(callFormSchema),
    defaultValues: {
      date: "",
      time: "",
      reason: "",
      callType: "phone",
    },
  })

  async function onMessageSubmit(data: MessageFormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Mensagem enviada com sucesso!",
        description: `Sua mensagem foi enviada para ${owner.name}.`,
      })

      messageForm.reset()
    } catch (error) {
      toast({
        title: "Erro ao enviar mensagem",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  async function onCallSubmit(data: CallFormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Agendamento realizado!",
        description: `Seu ${data.callType === "phone" ? "telefonema" : "videochamada"} com ${owner.name} foi agendado para ${data.date} às ${data.time}.`,
      })

      callForm.reset()
    } catch (error) {
      toast({
        title: "Erro ao agendar chamada",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-xl">Comunicação com Proprietário</CardTitle>
        <CardDescription>Entre em contato com o proprietário deste imóvel</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center space-x-4 mb-6">
          <Avatar className="h-12 w-12">
            <AvatarImage src={owner.image || "/placeholder.svg"} alt={owner.name} />
            <AvatarFallback>{owner.initials || owner.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div>
            <p className="font-medium">{owner.name}</p>
            <p className="text-sm text-muted-foreground">{owner.email}</p>
          </div>
        </div>

        <Tabs defaultValue="message" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid grid-cols-3 mb-6">
            <TabsTrigger value="message">
              <Mail className="h-4 w-4 mr-2" />
              Mensagem
            </TabsTrigger>
            <TabsTrigger value="call">
              <Phone className="h-4 w-4 mr-2" />
              Chamada
            </TabsTrigger>
            <TabsTrigger value="history">
              <Calendar className="h-4 w-4 mr-2" />
              Histórico
            </TabsTrigger>
          </TabsList>

          <TabsContent value="message">
            <Form {...messageForm}>
              <form onSubmit={messageForm.handleSubmit(onMessageSubmit)} className="space-y-4">
                <FormField
                  control={messageForm.control}
                  name="subject"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Assunto</FormLabel>
                      <FormControl>
                        <Input placeholder="Assunto da mensagem" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={messageForm.control}
                  name="priority"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Prioridade</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Selecione a prioridade" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="low">Baixa</SelectItem>
                          <SelectItem value="normal">Normal</SelectItem>
                          <SelectItem value="high">Alta</SelectItem>
                          <SelectItem value="urgent">Urgente</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={messageForm.control}
                  name="message"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Mensagem</FormLabel>
                      <FormControl>
                        <Textarea placeholder="Digite sua mensagem" {...field} rows={5} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>Enviando...</>
                  ) : (
                    <>
                      <Send className="mr-2 h-4 w-4" />
                      Enviar mensagem
                    </>
                  )}
                </Button>
              </form>
            </Form>
          </TabsContent>

          <TabsContent value="call">
            <Form {...callForm}>
              <form onSubmit={callForm.handleSubmit(onCallSubmit)} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={callForm.control}
                    name="date"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Data</FormLabel>
                        <FormControl>
                          <Input type="date" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={callForm.control}
                    name="time"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Horário</FormLabel>
                        <FormControl>
                          <Input type="time" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <FormField
                  control={callForm.control}
                  name="callType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Tipo de chamada</FormLabel>
                      <div className="flex space-x-4">
                        <Button
                          type="button"
                          variant={field.value === "phone" ? "default" : "outline"}
                          className="flex-1"
                          onClick={() => callForm.setValue("callType", "phone")}
                        >
                          <Phone className="mr-2 h-4 w-4" />
                          Telefone
                        </Button>
                        <Button
                          type="button"
                          variant={field.value === "video" ? "default" : "outline"}
                          className="flex-1"
                          onClick={() => callForm.setValue("callType", "video")}
                        >
                          <Video className="mr-2 h-4 w-4" />
                          Vídeo
                        </Button>
                      </div>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={callForm.control}
                  name="reason"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Motivo da chamada</FormLabel>
                      <FormControl>
                        <Textarea placeholder="Descreva o motivo da chamada" {...field} rows={3} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>Agendando...</>
                  ) : (
                    <>
                      <Calendar className="mr-2 h-4 w-4" />
                      Agendar chamada
                    </>
                  )}
                </Button>
              </form>
            </Form>
          </TabsContent>

          <TabsContent value="history">
            <div className="space-y-4">
              <p className="text-sm text-muted-foreground mb-4">Histórico de comunicações com este proprietário</p>

              {/* Histórico vazio */}
              <div className="text-center py-8">
                <Mail className="h-12 w-12 mx-auto text-muted-foreground opacity-50" />
                <p className="mt-4 text-muted-foreground">Nenhuma comunicação anterior encontrada</p>
                <Button variant="outline" className="mt-4" onClick={() => setActiveTab("message")}>
                  Iniciar comunicação
                </Button>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/proprietarios/comunicacao/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Inbox, Users } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { OwnerCommunicationPanel } from "@/components/owner-communication-panel"
import { OwnerMessageList } from "@/components/owner-message-list"

// Mock data for owners
const owners = [
  {
    id: 1,
    name: "Carlos Oliveira",
    email: "carlos@example.com",
    phone: "(11) 98765-4321",
    image: "/placeholder.svg?height=40&width=40",
    initials: "CO",
    properties: 5,
    region: "São Paulo",
  },
  {
    id: 2,
    name: "Ana Silva",
    email: "ana@example.com",
    phone: "(21) 98765-4321",
    image: "/placeholder.svg?height=40&width=40",
    initials: "AS",
    properties: 3,
    region: "Rio de Janeiro",
  },
  {
    id: 3,
    name: "Roberto Santos",
    email: "roberto@example.com",
    phone: "(31) 98765-4321",
    image: "/placeholder.svg?height=40&width=40",
    initials: "RS",
    properties: 7,
    region: "Minas Gerais",
  },
]

export default function OwnerCommunicationPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Comunicação com Proprietários</h1>
          <p className="text-muted-foreground mt-1">Gerencie suas comunicações com proprietários de imóveis</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-1">
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">Proprietários</CardTitle>
              <CardDescription>Selecione um proprietário para comunicação</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                <div className="space-y-4">
                  {owners.map((owner) => (
                    <div
                      key={owner.id}
                      className="flex items-center p-3 rounded-lg hover:bg-muted cursor-pointer transition-colors"
                    >
                      <div className="flex-shrink-0 mr-3">
                        <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
                          {owner.initials}
                        </div>
                      </div>
                      <div className="flex-grow min-w-0">
                        <p className="font-medium truncate">{owner.name}</p>
                        <p className="text-sm text-muted-foreground truncate">{owner.region}</p>
                      </div>
                      <div className="flex-shrink-0 ml-2">
                        <div className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
                          {owner.properties} imóveis
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </Suspense>
            </CardContent>
          </Card>
        </div>

        <div className="lg:col-span-2">
          <Tabs defaultValue="messages">
            <TabsList className="mb-6">
              <TabsTrigger value="messages">
                <Inbox className="h-4 w-4 mr-2" />
                Mensagens
              </TabsTrigger>
              <TabsTrigger value="owners">
                <Users className="h-4 w-4 mr-2" />
                Proprietários
              </TabsTrigger>
            </TabsList>

            <TabsContent value="messages">
              <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                <OwnerMessageList />
              </Suspense>
            </TabsContent>

            <TabsContent value="owners">
              <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                <OwnerCommunicationPanel owner={owners[0]} />
              </Suspense>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/owner-message-list.tsx" isFixed="true" isMerged="true"
"use client"

import { useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { Archive, ArchiveX, Clock, MoreVertical, Search, Star, Trash2, Inbox } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"

// Mock data for messages
const messages = [
  {
    id: 1,
    from: "Carlos Oliveira",
    subject: "Atualização sobre o imóvel em São Paulo",
    message:
      "Olá, gostaria de informar que o imóvel em São Paulo está disponível para visitas a partir da próxima semana...",
    date: new Date(2023, 5, 15, 14, 30),
    read: true,
    starred: true,
    priority: "normal",
  },
  {
    id: 2,
    from: "Ana Silva",
    subject: "Documentação pendente",
    message: "Prezado, ainda estamos aguardando a documentação necessária para prosseguir com a venda do imóvel...",
    date: new Date(2023, 5, 14, 10, 15),
    read: false,
    starred: false,
    priority: "high",
  },
  {
    id: 3,
    from: "Roberto Santos",
    subject: "Proposta de compra recebida",
    message:
      "Recebemos uma proposta de compra para o imóvel em Belo Horizonte. O valor oferecido foi de R$ 450.000,00...",
    date: new Date(2023, 5, 12, 16, 45),
    read: false,
    starred: true,
    priority: "urgent",
  },
  {
    id: 4,
    from: "Juliana Costa",
    subject: "Agendamento de visita",
    message: "Gostaria de agendar uma visita ao imóvel para o próximo sábado, dia 20/06, às 14h. É possível?",
    date: new Date(2023, 5, 10, 9, 20),
    read: true,
    starred: false,
    priority: "normal",
  },
  {
    id: 5,
    from: "Marcelo Alves",
    subject: "Renovação de contrato",
    message: "O contrato de aluguel do imóvel em Campinas vence no próximo mês. Gostaria de discutir a renovação...",
    date: new Date(2023, 5, 8, 11, 30),
    read: true,
    starred: false,
    priority: "low",
  },
]

export function OwnerMessageList() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedMessage, setSelectedMessage] = useState<number | null>(null)

  // Filter messages based on search query
  const filteredMessages = messages.filter(
    (message) =>
      message.from.toLowerCase().includes(searchQuery.toLowerCase()) ||
      message.subject.toLowerCase().includes(searchQuery.toLowerCase()) ||
      message.message.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  // Get selected message details
  const messageDetails = selectedMessage ? messages.find((message) => message.id === selectedMessage) : null

  // Priority badge color
  const getPriorityBadge = (priority: string) => {
    switch (priority) {
      case "low":
        return <Badge variant="outline">Baixa</Badge>
      case "normal":
        return <Badge variant="secondary">Normal</Badge>
      case "high":
        return <Badge variant="default">Alta</Badge>
      case "urgent":
        return <Badge variant="destructive">Urgente</Badge>
      default:
        return null
    }
  }

  return (
    <div className="border rounded-lg overflow-hidden grid grid-cols-1 md:grid-cols-3 h-[600px]">
      {/* Message list */}
      <div className="md:col-span-1 border-r">
        <div className="p-4 border-b">
          <div className="relative">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Buscar mensagens..."
              className="pl-8"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
        </div>

        <ScrollArea className="h-[calc(600px-65px)]">
          {filteredMessages.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-full p-4">
              <ArchiveX className="h-12 w-12 text-muted-foreground opacity-50" />
              <p className="mt-2 text-center text-muted-foreground">Nenhuma mensagem encontrada</p>
            </div>
          ) : (
            <div>
              {filteredMessages.map((message) => (
                <div
                  key={message.id}
                  className={`p-4 border-b cursor-pointer transition-colors ${
                    selectedMessage === message.id ? "bg-muted" : "hover:bg-muted/50"
                  } ${!message.read ? "bg-primary/5" : ""}`}
                  onClick={() => setSelectedMessage(message.id)}
                >
                  <div className="flex justify-between items-start mb-1">
                    <p className={`font-medium ${!message.read ? "font-semibold" : ""}`}>{message.from}</p>
                    <div className="flex items-center space-x-1 text-muted-foreground">
                      <p className="text-xs">{format(message.date, "dd/MM", { locale: ptBR })}</p>
                      {message.starred && <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />}
                    </div>
                  </div>
                  <p className={`text-sm truncate ${!message.read ? "font-medium" : ""}`}>{message.subject}</p>
                  <p className="text-xs text-muted-foreground truncate mt-1">{message.message}</p>
                </div>
              ))}
            </div>
          )}
        </ScrollArea>
      </div>

      {/* Message details */}
      <div className="md:col-span-2">
        {messageDetails ? (
          <div className="h-full flex flex-col">
            <div className="p-4 border-b flex justify-between items-center">
              <h3 className="text-lg font-semibold">{messageDetails.subject}</h3>
              <div className="flex items-center space-x-2">
                <Button variant="ghost" size="icon">
                  <Archive className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon">
                  <Trash2 className="h-4 w-4" />
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem>Marcar como não lida</DropdownMenuItem>
                    <DropdownMenuItem>
                      {messageDetails.starred ? "Remover estrela" : "Adicionar estrela"}
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>Imprimir</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>

            <div className="p-4 border-b">
              <div className="flex justify-between items-start">
                <div className="flex items-start space-x-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
                    {messageDetails.from.charAt(0)}
                  </div>
                  <div>
                    <p className="font-medium">{messageDetails.from}</p>
                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                      <span>{format(messageDetails.date, "dd 'de' MMMM 'de' yyyy 'às' HH:mm", { locale: ptBR })}</span>
                      {getPriorityBadge(messageDetails.priority)}
                    </div>
                  </div>
                </div>
                <Button variant="ghost" size="sm">
                  <Clock className="h-4 w-4 mr-2" />
                  Histórico
                </Button>
              </div>
            </div>

            <ScrollArea className="flex-grow p-6">
              <div className="max-w-3xl mx-auto">
                <p className="whitespace-pre-line">{messageDetails.message}</p>

                {/* Mensagem completa simulada */}
                <p className="mt-4">Prezado(a),</p>
                <p className="mt-2">
                  Espero que esta mensagem o(a) encontre bem. Gostaria de fornecer algumas atualizações importantes
                  sobre o imóvel.
                </p>
                <p className="mt-2">
                  Conforme discutimos anteriormente, realizamos as melhorias solicitadas e o imóvel está agora em
                  perfeitas condições para comercialização. As fotos atualizadas já foram enviadas para o departamento
                  de marketing e estarão disponíveis no site em breve.
                </p>
                <p className="mt-2">
                  Além disso, recebemos algumas manifestações de interesse de potenciais compradores que gostariam de
                  agendar visitas nas próximas semanas. Seria possível confirmar sua disponibilidade para acompanhar
                  essas visitas ou autorizar nossa equipe a realizá-las?
                </p>
                <p className="mt-2">
                  Por fim, gostaria de sugerir uma reunião para discutirmos a estratégia de precificação, considerando
                  as recentes transações na região e o atual cenário do mercado imobiliário.
                </p>
                <p className="mt-4">Atenciosamente,</p>
                <p className="font-medium">{messageDetails.from}</p>
              </div>
            </ScrollArea>

            <div className="p-4 border-t">
              <Button className="w-full">Responder</Button>
            </div>
          </div>
        ) : (
          <div className="h-full flex flex-col items-center justify-center p-4">
            <Inbox className="h-16 w-16 text-muted-foreground opacity-50" />
            <p className="mt-4 text-lg font-medium">Selecione uma mensagem</p>
            <p className="text-muted-foreground text-center mt-1">
              Escolha uma mensagem da lista para visualizar seu conteúdo
            </p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/financeiro/page.tsx" isMerged="true"
import { Suspense } from "react"
import { ArrowDownIcon, ArrowUpIcon, BarChart3, Calendar, Download, FileText, PieChart, TrendingUp } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { FinancialOverview } from "@/components/financial/financial-overview"
import { TransactionHistory } from "@/components/financial/transaction-history"
import { RevenueChart } from "@/components/financial/revenue-chart"
import { PaymentMethodsChart } from "@/components/financial/payment-methods-chart"
import { FinancialReportGenerator } from "@/components/financial/financial-report-generator"

export default function FinancialReportsPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Relatórios Financeiros</h1>
          <p className="text-muted-foreground mt-1">Análise e relatórios detalhados das transações financeiras</p>
        </div>

        <div className="flex items-center space-x-2 mt-4 md:mt-0">
          <Select defaultValue="month">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Selecione o período" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="week">Última semana</SelectItem>
              <SelectItem value="month">Último mês</SelectItem>
              <SelectItem value="quarter">Último trimestre</SelectItem>
              <SelectItem value="year">Último ano</SelectItem>
              <SelectItem value="custom">Período personalizado</SelectItem>
            </SelectContent>
          </Select>

          <Button variant="outline">
            <Calendar className="h-4 w-4 mr-2" />
            Período
          </Button>

          <Button>
            <Download className="h-4 w-4 mr-2" />
            Exportar
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Receita Total</p>
                <p className="text-2xl font-bold mt-1">R$ 1.245.890,00</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center text-green-600 dark:text-green-400">
                <TrendingUp className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowUpIcon className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500 font-medium">12.5%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Transações</p>
                <p className="text-2xl font-bold mt-1">458</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400">
                <BarChart3 className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowUpIcon className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500 font-medium">8.2%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Ticket Médio</p>
                <p className="text-2xl font-bold mt-1">R$ 2.720,28</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center text-purple-600 dark:text-purple-400">
                <PieChart className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowUpIcon className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500 font-medium">3.7%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Taxa de Conversão</p>
                <p className="text-2xl font-bold mt-1">24.8%</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-amber-100 dark:bg-amber-900/20 flex items-center justify-center text-amber-600 dark:text-amber-400">
                <FileText className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowDownIcon className="h-4 w-4 text-red-500 mr-1" />
              <span className="text-red-500 font-medium">1.3%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="overview" className="mb-8">
        <TabsList className="mb-6">
          <TabsTrigger value="overview">Visão Geral</TabsTrigger>
          <TabsTrigger value="transactions">Transações</TabsTrigger>
          <TabsTrigger value="reports">Relatórios</TabsTrigger>
        </TabsList>

        <TabsContent value="overview">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle>Receita Mensal</CardTitle>
                <CardDescription>Análise da receita nos últimos 12 meses</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[350px] bg-muted animate-pulse rounded-lg"></div>}>
                  <RevenueChart />
                </Suspense>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Métodos de Pagamento</CardTitle>
                <CardDescription>Distribuição por método de pagamento</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <PaymentMethodsChart />
                </Suspense>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Visão Geral Financeira</CardTitle>
                <CardDescription>Resumo das principais métricas financeiras</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <FinancialOverview />
                </Suspense>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="transactions">
          <Card>
            <CardHeader>
              <CardTitle>Histórico de Transações</CardTitle>
              <CardDescription>Registro detalhado de todas as transações</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
                <TransactionHistory />
              </Suspense>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="reports">
          <Card>
            <CardHeader>
              <CardTitle>Gerador de Relatórios</CardTitle>
              <CardDescription>Crie relatórios personalizados para análise financeira</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
                <FinancialReportGenerator />
              </Suspense>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/financial/financial-overview.tsx" isMerged="true"
"use client"
import { Progress } from "@/components/ui/progress"
import { formatCurrency } from "@/lib/utils/number-format"

// Mock data
const financialData = {
  revenue: 1245890,
  expenses: 567340,
  profit: 678550,
  profitMargin: 54.5,
  targets: {
    revenue: {
      current: 1245890,
      target: 1500000,
      percentage: 83,
    },
    transactions: {
      current: 458,
      target: 500,
      percentage: 91.6,
    },
    conversion: {
      current: 24.8,
      target: 30,
      percentage: 82.7,
    },
  },
  categories: [
    { name: "Financiamento Solar", value: 720450, percentage: 57.8 },
    { name: "Venda de Imóveis", value: 325780, percentage: 26.1 },
    { name: "Aluguel", value: 156890, percentage: 12.6 },
    { name: "Outros", value: 42770, percentage: 3.5 },
  ],
}

export function FinancialOverview() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-3 gap-4">
        <div>
          <p className="text-sm font-medium text-muted-foreground">Receita</p>
          <p className="text-xl font-bold mt-1">{formatCurrency(financialData.revenue)}</p>
        </div>
        <div>
          <p className="text-sm font-medium text-muted-foreground">Despesas</p>
          <p className="text-xl font-bold mt-1">{formatCurrency(financialData.expenses)}</p>
        </div>
        <div>
          <p className="text-sm font-medium text-muted-foreground">Lucro</p>
          <p className="text-xl font-bold mt-1">{formatCurrency(financialData.profit)}</p>
        </div>
      </div>

      <div className="space-y-4">
        <p className="text-sm font-medium">Metas de Desempenho</p>

        <div className="space-y-3">
          <div>
            <div className="flex justify-between mb-1">
              <span className="text-sm">Receita</span>
              <span className="text-sm font-medium">{financialData.targets.revenue.percentage}%</span>
            </div>
            <Progress value={financialData.targets.revenue.percentage} className="h-2" />
            <div className="flex justify-between mt-1 text-xs text-muted-foreground">
              <span>{formatCurrency(financialData.targets.revenue.current)}</span>
              <span>{formatCurrency(financialData.targets.revenue.target)}</span>
            </div>
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <span className="text-sm">Transações</span>
              <span className="text-sm font-medium">{financialData.targets.transactions.percentage}%</span>
            </div>
            <Progress value={financialData.targets.transactions.percentage} className="h-2" />
            <div className="flex justify-between mt-1 text-xs text-muted-foreground">
              <span>{financialData.targets.transactions.current}</span>
              <span>{financialData.targets.transactions.target}</span>
            </div>
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <span className="text-sm">Taxa de Conversão</span>
              <span className="text-sm font-medium">{financialData.targets.conversion.percentage}%</span>
            </div>
            <Progress value={financialData.targets.conversion.percentage} className="h-2" />
            <div className="flex justify-between mt-1 text-xs text-muted-foreground">
              <span>{financialData.targets.conversion.current}%</span>
              <span>{financialData.targets.conversion.target}%</span>
            </div>
          </div>
        </div>
      </div>

      <div>
        <p className="text-sm font-medium mb-3">Distribuição por Categoria</p>

        <div className="space-y-2">
          {financialData.categories.map((category, index) => (
            <div key={index}>
              <div className="flex justify-between mb-1">
                <span className="text-sm">{category.name}</span>
                <span className="text-sm font-medium">{formatCurrency(category.value)}</span>
              </div>
              <Progress value={category.percentage} className="h-2" />
              <div className="flex justify-end mt-1 text-xs text-muted-foreground">
                <span>{category.percentage}%</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/financial/revenue-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
import { useTheme } from "next-themes"

// Mock data
const revenueData = [
  { month: "Jan", receita: 78450, despesas: 42300 },
  { month: "Fev", receita: 85200, despesas: 45100 },
  { month: "Mar", receita: 91500, despesas: 48700 },
  { month: "Abr", receita: 102300, despesas: 51200 },
  { month: "Mai", receita: 110450, despesas: 53800 },
  { month: "Jun", receita: 118700, despesas: 56400 },
  { month: "Jul", receita: 125300, despesas: 58900 },
  { month: "Ago", receita: 132100, despesas: 61500 },
  { month: "Set", receita: 138900, despesas: 64200 },
  { month: "Out", receita: 145600, despesas: 66800 },
  { month: "Nov", receita: 152400, despesas: 69500 },
  { month: "Dez", receita: 159800, despesas: 72300 },
]

export function RevenueChart() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  // Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <div className="h-[350px] flex items-center justify-center">Carregando gráfico...</div>
  }

  const isDark = theme === "dark"

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

  return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={revenueData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
        <XAxis
          dataKey="month"
          tick={{ fill: isDark ? "#ccc" : "#333" }}
          axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
        />
        <YAxis
          tickFormatter={formatCurrency}
          tick={{ fill: isDark ? "#ccc" : "#333" }}
          axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
        />
        <Tooltip
          formatter={(value) => formatCurrency(value as number)}
          contentStyle={{
            backgroundColor: isDark ? "#1f2937" : "#fff",
            border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
            color: isDark ? "#f9fafb" : "#111827",
          }}
        />
        <Legend />
        <Bar dataKey="receita" name="Receita" fill="#FFCE00" radius={[4, 4, 0, 0]} />
        <Bar dataKey="despesas" name="Despesas" fill="#FF0066" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/financial/payment-methods-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"
import { useTheme } from "next-themes"

// Mock data
const paymentMethodsData = [
  { name: "Cartão de Crédito", value: 45 },
  { name: "Boleto Bancário", value: 25 },
  { name: "Transferência", value: 20 },
  { name: "Financiamento", value: 10 },
]

const COLORS = ["#FFCE00", "#FF6600", "#FF0066", "#0EA5E9"]

export function PaymentMethodsChart() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  // Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <div className="h-[300px] flex items-center justify-center">Carregando gráfico...</div>
  }

  const isDark = theme === "dark"

  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={paymentMethodsData}
          cx="50%"
          cy="50%"
          labelLine={false}
          outerRadius={100}
          fill="#8884d8"
          dataKey="value"
          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
        >
          {paymentMethodsData.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip
          formatter={(value) => `${value}%`}
          contentStyle={{
            backgroundColor: isDark ? "#1f2937" : "#fff",
            border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
            color: isDark ? "#f9fafb" : "#111827",
          }}
        />
        <Legend />
      </PieChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/financial/transaction-history.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { ArrowDownIcon, ArrowUpIcon, CreditCard, Download, Filter, Search } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { formatCurrency } from "@/lib/utils/number-format"

// Mock data
const transactions = [
  {
    id: "TX123456",
    date: new Date(2023, 5, 15),
    description: "Financiamento Solar - Cliente: João Silva",
    amount: 12500,
    status: "completed",
    paymentMethod: "credit_card",
    type: "income",
  },
  {
    id: "TX123457",
    date: new Date(2023, 5, 14),
    description: "Comissão - Venda de Imóvel",
    amount: 8750,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "income",
  },
  {
    id: "TX123458",
    date: new Date(2023, 5, 14),
    description: "Pagamento de Fornecedor - Painéis Solares",
    amount: 5200,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "expense",
  },
  {
    id: "TX123459",
    date: new Date(2023, 5, 13),
    description: "Aluguel - Cliente: Maria Oliveira",
    amount: 2800,
    status: "completed",
    paymentMethod: "boleto",
    type: "income",
  },
  {
    id: "TX123460",
    date: new Date(2023, 5, 12),
    description: "Financiamento Solar - Cliente: Carlos Santos",
    amount: 15800,
    status: "pending",
    paymentMethod: "financing",
    type: "income",
  },
  {
    id: "TX123461",
    date: new Date(2023, 5, 10),
    description: "Despesas Operacionais",
    amount: 3450,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "expense",
  },
  {
    id: "TX123462",
    date: new Date(2023, 5, 8),
    description: "Venda de Imóvel - Comissão",
    amount: 12300,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "income",
  },
  {
    id: "TX123463",
    date: new Date(2023, 5, 5),
    description: "Pagamento de Marketing",
    amount: 1850,
    status: "completed",
    paymentMethod: "credit_card",
    type: "expense",
  },
  {
    id: "TX123464",
    date: new Date(2023, 5, 3),
    description: "Financiamento Solar - Cliente: Ana Pereira",
    amount: 14200,
    status: "failed",
    paymentMethod: "credit_card",
    type: "income",
  },
  {
    id: "TX123465",
    date: new Date(2023, 5, 1),
    description: "Aluguel - Cliente: Roberto Alves",
    amount: 3200,
    status: "completed",
    paymentMethod: "boleto",
    type: "income",
  },
]

export function TransactionHistory() {
  const [searchQuery, setSearchQuery] = useState("")

  // Filter transactions based on search query
  const filteredTransactions = transactions.filter(
    (transaction) =>
      transaction.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      transaction.id.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  // Status badge
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
            Concluído
          </Badge>
        )
      case "pending":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400">
            Pendente
          </Badge>
        )
      case "failed":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400">
            Falhou
          </Badge>
        )
      default:
        return null
    }
  }

  // Payment method
  const getPaymentMethod = (method: string) => {
    switch (method) {
      case "credit_card":
        return "Cartão de Crédito"
      case "bank_transfer":
        return "Transferência Bancária"
      case "boleto":
        return "Boleto Bancário"
      case "financing":
        return "Financiamento"
      default:
        return method
    }
  }

  return (
    <div>
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
        <div className="relative w-full md:w-auto">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar transações..."
            className="pl-8 w-full md:w-[300px]"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

        <div className="flex items-center gap-2 w-full md:w-auto">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">
                <Filter className="h-4 w-4 mr-2" />
                Filtrar
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-[200px]">
              <DropdownMenuLabel>Filtrar por</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                <DropdownMenuItem>Todos</DropdownMenuItem>
                <DropdownMenuItem>Receitas</DropdownMenuItem>
                <DropdownMenuItem>Despesas</DropdownMenuItem>
              </DropdownMenuGroup>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                <DropdownMenuItem>Concluídos</DropdownMenuItem>
                <DropdownMenuItem>Pendentes</DropdownMenuItem>
                <DropdownMenuItem>Falhas</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>

          <Button>
            <Download className="h-4 w-4 mr-2" />
            Exportar
          </Button>
        </div>
      </div>

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ID</TableHead>
              <TableHead>Data</TableHead>
              <TableHead className="w-[300px]">Descrição</TableHead>
              <TableHead>Método</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Valor</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredTransactions.map((transaction) => (
              <TableRow key={transaction.id}>
                <TableCell className="font-medium">{transaction.id}</TableCell>
                <TableCell>{format(transaction.date, "dd/MM/yyyy", { locale: ptBR })}</TableCell>
                <TableCell>{transaction.description}</TableCell>
                <TableCell>
                  <div className="flex items-center">
                    <CreditCard className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>{getPaymentMethod(transaction.paymentMethod)}</span>
                  </div>
                </TableCell>
                <TableCell>{getStatusBadge(transaction.status)}</TableCell>
                <TableCell className="text-right">
                  <div
                    className={`flex items-center justify-end ${
                      transaction.type === "income"
                        ? "text-green-600 dark:text-green-400"
                        : "text-red-600 dark:text-red-400"
                    }`}
                  >
                    {transaction.type === "income" ? (
                      <ArrowUpIcon className="h-4 w-4 mr-1" />
                    ) : (
                      <ArrowDownIcon className="h-4 w-4 mr-1" />
                    )}
                    {formatCurrency(transaction.amount)}
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/financial/financial-report-generator.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Calendar, Download, FileText, Loader2, PieChart, TableIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"

const formSchema = z.object({
  reportName: z.string().min(2, { message: "Nome do relatório é obrigatório" }),
  reportType: z.string(),
  dateRange: z.object({
    startDate: z.string(),
    endDate: z.string(),
  }),
  format: z.string(),
  sections: z.array(z.string()),
  includeCharts: z.boolean().default(true),
  includeTables: z.boolean().default(true),
})

type FormValues = z.infer<typeof formSchema>

export function FinancialReportGenerator() {
  const [isGenerating, setIsGenerating] = useState(false)
  const [generatedReport, setGeneratedReport] = useState<string | null>(null)
  const { toast } = useToast()

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      reportName: "",
      reportType: "monthly",
      dateRange: {
        startDate: "",
        endDate: "",
      },
      format: "pdf",
      sections: ["revenue", "expenses", "profit"],
      includeCharts: true,
      includeTables: true,
    },
  })

  async function onSubmit(data: FormValues) {
    setIsGenerating(true)
    setGeneratedReport(null)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2500))

      // Simulate generated report
      setGeneratedReport(`${data.reportName.replace(/\s+/g, "_")}_${new Date().getTime()}.${data.format}`)

      toast({
        title: "Relatório gerado com sucesso!",
        description: "Seu relatório está pronto para download.",
      })
    } catch (error) {
      toast({
        title: "Erro ao gerar relatório",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsGenerating(false)
    }
  }

  return (
    <Tabs defaultValue="generator" className="w-full">
      <TabsList className="mb-6">
        <TabsTrigger value="generator">Gerador de Relatórios</TabsTrigger>
        <TabsTrigger value="templates">Modelos Prontos</TabsTrigger>
        <TabsTrigger value="scheduled">Relatórios Agendados</TabsTrigger>
      </TabsList>

      <TabsContent value="generator">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormField
                control={form.control}
                name="reportName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Nome do Relatório</FormLabel>
                    <FormControl>
                      <Input placeholder="Ex: Relatório Financeiro Mensal" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="reportType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Tipo de Relatório</FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione o tipo de relatório" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="daily">Diário</SelectItem>
                        <SelectItem value="weekly">Semanal</SelectItem>
                        <SelectItem value="monthly">Mensal</SelectItem>
                        <SelectItem value="quarterly">Trimestral</SelectItem>
                        <SelectItem value="yearly">Anual</SelectItem>
                        <SelectItem value="custom">Personalizado</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormField
                control={form.control}
                name="dateRange.startDate"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Data Inicial</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Calendar className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="date" className="pl-8" {...field} />
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="dateRange.endDate"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Data Final</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Calendar className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="date" className="pl-8" {...field} />
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <Separator />

            <div>
              <FormLabel className="text-base">Seções do Relatório</FormLabel>
              <FormDescription>Selecione as seções que deseja incluir no relatório</FormDescription>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("revenue")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "revenue"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "revenue"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Receitas</FormLabel>
                        <FormDescription>Análise detalhada de receitas</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("expenses")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "expenses"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "expenses"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Despesas</FormLabel>
                        <FormDescription>Análise detalhada de despesas</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("profit")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "profit"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "profit"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Lucro</FormLabel>
                        <FormDescription>Análise de lucro e margens</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("transactions")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "transactions"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "transactions"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Transações</FormLabel>
                        <FormDescription>Histórico de transações</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("payment_methods")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "payment_methods"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "payment_methods"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Métodos de Pagamento</FormLabel>
                        <FormDescription>Análise por método de pagamento</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("projections")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "projections"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "projections"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Projeções</FormLabel>
                        <FormDescription>Projeções financeiras futuras</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />
              </div>
            </div>

            <Separator />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <FormLabel className="text-base">Elementos Visuais</FormLabel>
                <FormDescription>Selecione os elementos visuais para incluir no relatório</FormDescription>

                <div className="space-y-4 mt-4">
                  <FormField
                    control={form.control}
                    name="includeCharts"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel className="cursor-pointer flex items-center">
                            <PieChart className="h-4 w-4 mr-2" />
                            Incluir Gráficos
                          </FormLabel>
                        </div>
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="includeTables"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel className="cursor-pointer flex items-center">
                            <TableIcon className="h-4 w-4 mr-2" />
                            Incluir Tabelas
                          </FormLabel>
                        </div>
                      </FormItem>
                    )}
                  />
                </div>
              </div>

              <FormField
                control={form.control}
                name="format"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-base">Formato do Relatório</FormLabel>
                    <FormDescription>Selecione o formato de saída do relatório</FormDescription>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger className="mt-4">
                          <SelectValue placeholder="Selecione o formato" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="pdf">PDF</SelectItem>
                        <SelectItem value="excel">Excel</SelectItem>
                        <SelectItem value="csv">CSV</SelectItem>
                        <SelectItem value="html">HTML</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="flex justify-end">
              <Button type="submit" disabled={isGenerating}>
                {isGenerating ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Gerando relatório...
                  </>
                ) : (
                  <>
                    <FileText className="mr-2 h-4 w-4" />
                    Gerar Relatório
                  </>
                )}
              </Button>
            </div>

            {generatedReport && (
              <Card className="mt-6 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-900">
                <CardContent className="p-4 flex items-center justify-between">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 mr-2 text-green-600 dark:text-green-400" />
                    <span className="font-medium text-green-800 dark:text-green-400">{generatedReport}</span>
                  </div>
                  <Button variant="outline" className="bg-white dark:bg-green-900/50">
                    <Download className="h-4 w-4 mr-2" />
                    Download
                  </Button>
                </CardContent>
              </Card>
            )}
          </form>
        </Form>
      </TabsContent>

      <TabsContent value="templates">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card className="cursor-pointer hover:border-primary transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <FileText className="h-5 w-5" />
                </div>
                <Badge variant="outline">PDF</Badge>
              </div>
              <h3 className="font-medium text-lg mb-1">Relatório Mensal Completo</h3>
              <p className="text-sm text-muted-foreground">
                Relatório financeiro completo com todas as métricas e análises
              </p>
              <Button className="w-full mt-4">Gerar Agora</Button>
            </CardContent>
          </Card>

          <Card className="cursor-pointer hover:border-primary transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <PieChart className="h-5 w-5" />
                </div>
                <Badge variant="outline">Excel</Badge>
              </div>
              <h3 className="font-medium text-lg mb-1">Análise de Receitas</h3>
              <p className="text-sm text-muted-foreground">Relatório detalhado focado em receitas e fontes de renda</p>
              <Button className="w-full mt-4">Gerar Agora</Button>
            </CardContent>
          </Card>

          <Card className="cursor-pointer hover:border-primary transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <TableIcon className="h-5 w-5" />
                </div>
                <Badge variant="outline">CSV</Badge>
              </div>
              <h3 className="font-medium text-lg mb-1">Transações Detalhadas</h3>
              <p className="text-sm text-muted-foreground">
                Histórico completo de transações para análise em planilhas
              </p>
              <Button className="w-full mt-4">Gerar Agora</Button>
            </CardContent>
          </Card>
        </div>
      </TabsContent>

      <TabsContent value="scheduled">
        <div className="text-center py-12">
          <Calendar className="h-12 w-12 mx-auto text-muted-foreground opacity-50" />
          <h3 className="mt-4 text-lg font-medium">Nenhum relatório agendado</h3>
          <p className="text-muted-foreground mt-1 mb-4">
            Você ainda não configurou relatórios para geração automática
          </p>
          <Button>Agendar Novo Relatório</Button>
        </div>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="app/perfil/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Bell, CreditCard, Key, Shield, User } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserProfile } from "@/components/user/user-profile"
import { UserSecurity } from "@/components/user/user-security"
import { UserNotifications } from "@/components/user/user-notifications"
import { UserPaymentMethods } from "@/components/user/user-payment-methods"
import { UserApiKeys } from "@/components/user/user-api-keys"

export default function ProfilePage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Perfil do Usuário</h1>
          <p className="text-muted-foreground mt-1">Gerencie suas informações pessoais e preferências</p>
        </div>
      </div>

      <Tabs defaultValue="profile" className="space-y-8">
        <TabsList className="grid grid-cols-2 md:grid-cols-5 gap-2">
          <TabsTrigger value="profile" className="flex items-center">
            <User className="h-4 w-4 mr-2" />
            Perfil
          </TabsTrigger>
          <TabsTrigger value="security" className="flex items-center">
            <Shield className="h-4 w-4 mr-2" />
            Segurança
          </TabsTrigger>
          <TabsTrigger value="notifications" className="flex items-center">
            <Bell className="h-4 w-4 mr-2" />
            Notificações
          </TabsTrigger>
          <TabsTrigger value="payment" className="flex items-center">
            <CreditCard className="h-4 w-4 mr-2" />
            Pagamentos
          </TabsTrigger>
          <TabsTrigger value="api" className="flex items-center">
            <Key className="h-4 w-4 mr-2" />
            API
          </TabsTrigger>
        </TabsList>

        <TabsContent value="profile">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserProfile />
          </Suspense>
        </TabsContent>

        <TabsContent value="security">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserSecurity />
          </Suspense>
        </TabsContent>

        <TabsContent value="notifications">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserNotifications />
          </Suspense>
        </TabsContent>

        <TabsContent value="payment">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserPaymentMethods />
          </Suspense>
        </TabsContent>

        <TabsContent value="api">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserApiKeys />
          </Suspense>
        </TabsContent>
      </Tabs>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-profile.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Camera, Loader2, Save } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"

const profileFormSchema = z.object({
  name: z.string().min(2, { message: "Nome deve ter pelo menos 2 caracteres" }),
  email: z.string().email({ message: "Email inválido" }),
  phone: z.string().min(10, { message: "Telefone inválido" }),
  company: z.string().optional(),
  role: z.string().optional(),
  bio: z.string().max(500, { message: "Bio deve ter no máximo 500 caracteres" }).optional(),
  language: z.string(),
  timezone: z.string(),
})

type ProfileFormValues = z.infer<typeof profileFormSchema>

// Mock user data
const user = {
  id: "user_123",
  name: "João Silva",
  email: "joao.silva@example.com",
  phone: "(11) 98765-4321",
  company: "Yello Solar",
  role: "Gerente de Vendas",
  bio: "Profissional com mais de 10 anos de experiência no mercado imobiliário e energia solar.",
  language: "pt-BR",
  timezone: "America/Sao_Paulo",
  avatar: "/placeholder.svg?height=100&width=100",
}

export function UserProfile() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileFormSchema),
    defaultValues: {
      name: user.name,
      email: user.email,
      phone: user.phone,
      company: user.company,
      role: user.role,
      bio: user.bio,
      language: user.language,
      timezone: user.timezone,
    },
  })

  async function onSubmit(data: ProfileFormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Perfil atualizado com sucesso!",
        description: "Suas informações foram atualizadas.",
      })
    } catch (error) {
      toast({
        title: "Erro ao atualizar perfil",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Informações do Perfil</CardTitle>
          <CardDescription>Atualize suas informações pessoais e preferências</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-8">
            <div className="flex flex-col items-center space-y-4">
              <Avatar className="h-32 w-32">
                <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                <AvatarFallback className="text-2xl">{user.name.charAt(0)}</AvatarFallback>
              </Avatar>

              <Button variant="outline" className="w-full">
                <Camera className="h-4 w-4 mr-2" />
                Alterar Foto
              </Button>

              <div className="text-center mt-4">
                <p className="text-sm text-muted-foreground">
                  Recomendado: JPG, PNG. <br />
                  Tamanho máximo: 2MB
                </p>
              </div>
            </div>

            <div className="flex-1">
              <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <FormField
                      control={form.control}
                      name="name"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Nome Completo</FormLabel>
                          <FormControl>
                            <Input placeholder="Seu nome completo" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="email"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Email</FormLabel>
                          <FormControl>
                            <Input placeholder="seu@email.com" type="email" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="phone"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Telefone</FormLabel>
                          <FormControl>
                            <Input placeholder="(00) 00000-0000" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="company"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Empresa</FormLabel>
                          <FormControl>
                            <Input placeholder="Nome da empresa" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="role"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Cargo</FormLabel>
                          <FormControl>
                            <Input placeholder="Seu cargo" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="language"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Idioma</FormLabel>
                          <Select onValueChange={field.onChange} defaultValue={field.value}>
                            <FormControl>
                              <SelectTrigger>
                                <SelectValue placeholder="Selecione o idioma" />
                              </SelectTrigger>
                            </FormControl>
                            <SelectContent>
                              <SelectItem value="pt-BR">Português (Brasil)</SelectItem>
                              <SelectItem value="en-US">English (US)</SelectItem>
                              <SelectItem value="es">Español</SelectItem>
                            </SelectContent>
                          </Select>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <FormField
                    control={form.control}
                    name="bio"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Bio</FormLabel>
                        <FormControl>
                          <Textarea placeholder="Conte um pouco sobre você" {...field} rows={4} />
                        </FormControl>
                        <FormDescription>{field.value?.length || 0}/500 caracteres</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <div className="flex justify-end">
                    <Button type="submit" disabled={isSubmitting}>
                      {isSubmitting ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Salvando...
                        </>
                      ) : (
                        <>
                          <Save className="mr-2 h-4 w-4" />
                          Salvar Alterações
                        </>
                      )}
                    </Button>
                  </div>
                </form>
              </Form>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Dados da Conta</CardTitle>
          <CardDescription>Informações sobre sua conta e uso da plataforma</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">ID da Conta</h3>
              <p className="font-mono text-sm bg-muted p-2 rounded">{user.id}</p>
            </div>

            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">Membro Desde</h3>
              <p>15 de Março de 2023</p>
            </div>

            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">Plano Atual</h3>
              <p>
                Profissional{" "}
                <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full ml-2">Ativo</span>
              </p>
            </div>

            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">Último Acesso</h3>
              <p>Hoje, 14:32</p>
            </div>
          </div>

          <Separator className="my-6" />

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-4 border rounded-lg">
              <h3 className="font-medium mb-1">Propriedades</h3>
              <p className="text-2xl font-bold">12</p>
              <p className="text-sm text-muted-foreground">Propriedades gerenciadas</p>
            </div>

            <div className="p-4 border rounded-lg">
              <h3 className="font-medium mb-1">Transações</h3>
              <p className="text-2xl font-bold">48</p>
              <p className="text-sm text-muted-foreground">Transações realizadas</p>
            </div>

            <div className="p-4 border rounded-lg">
              <h3 className="font-medium mb-1">Projetos Solares</h3>
              <p className="text-2xl font-bold">5</p>
              <p className="text-sm text-muted-foreground">Projetos ativos</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solar-hub/monitoramento/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Battery, Calendar, Cloud, Download, LineChart, Settings, Sun, Zap } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { EnergyProductionChart } from "@/components/solar/energy-production-chart"
import { EnergyConsumptionChart } from "@/components/solar/energy-consumption-chart"
import { SolarPanelStatus } from "@/components/solar/solar-panel-status"
import { WeatherForecast } from "@/components/solar/weather-forecast"
import { BatteryStatus } from "@/components/solar/battery-status"
import { SavingsCalculator } from "@/components/solar/savings-calculator"

export default function SolarMonitoringPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Monitoramento Solar</h1>
          <p className="text-muted-foreground mt-1">Acompanhe a produção e consumo de energia em tempo real</p>
        </div>

        <div className="flex items-center space-x-2 mt-4 md:mt-0">
          <Select defaultValue="today">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Selecione o período" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">Hoje</SelectItem>
              <SelectItem value="week">Última semana</SelectItem>
              <SelectItem value="month">Último mês</SelectItem>
              <SelectItem value="year">Último ano</SelectItem>
              <SelectItem value="custom">Período personalizado</SelectItem>
            </SelectContent>
          </Select>

          <Button variant="outline">
            <Calendar className="h-4 w-4 mr-2" />
            Período
          </Button>

          <Button>
            <Download className="h-4 w-4 mr-2" />
            Exportar
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Produção Hoje</p>
                <p className="text-2xl font-bold mt-1">24.5 kWh</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-yellow-100 dark:bg-yellow-900/20 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
                <Sun className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-green-500 font-medium">92%</span>
              <span className="text-muted-foreground ml-1">da capacidade máxima</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Consumo Hoje</p>
                <p className="text-2xl font-bold mt-1">18.2 kWh</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400">
                <Zap className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-green-500 font-medium">-12%</span>
              <span className="text-muted-foreground ml-1">vs. média mensal</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Bateria</p>
                <p className="text-2xl font-bold mt-1">85%</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center text-green-600 dark:text-green-400">
                <Battery className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-muted-foreground">Estimativa: 14h restantes</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Economia</p>
                <p className="text-2xl font-bold mt-1">R$ 487,50</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center text-purple-600 dark:text-purple-400">
                <LineChart className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-green-500 font-medium">+8.3%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="overview" className="mb-8">
        <TabsList className="mb-6">
          <TabsTrigger value="overview">Visão Geral</TabsTrigger>
          <TabsTrigger value="production">Produção</TabsTrigger>
          <TabsTrigger value="consumption">Consumo</TabsTrigger>
          <TabsTrigger value="equipment">Equipamentos</TabsTrigger>
        </TabsList>

        <TabsContent value="overview">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle>Produção vs. Consumo</CardTitle>
                <CardDescription>Análise comparativa de produção e consumo de energia</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[350px] bg-muted animate-pulse rounded-lg"></div>}>
                  <EnergyProductionChart />
                </Suspense>
              </CardContent>
            </Card>

            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Status do Sistema</CardTitle>
                  <CardDescription>Estado atual dos equipamentos</CardDescription>
                </CardHeader>
                <CardContent>
                  <Suspense fallback={<div className="h-[200px] bg-muted animate-pulse rounded-lg"></div>}>
                    <SolarPanelStatus />
                  </Suspense>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Previsão do Tempo</CardTitle>
                  <CardDescription>Impacto na produção de energia</CardDescription>
                </CardHeader>
                <CardContent>
                  <Suspense fallback={<div className="h-[200px] bg-muted animate-pulse rounded-lg"></div>}>
                    <WeatherForecast />
                  </Suspense>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="production">
          <div className="grid grid-cols-1 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Produção de Energia</CardTitle>
                <CardDescription>Análise detalhada da produção de energia solar</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                  <EnergyProductionChart detailed />
                </Suspense>
              </CardContent>
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Eficiência dos Painéis</CardTitle>
                  <CardDescription>Desempenho dos painéis solares</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel A (Telhado Sul)</span>
                        <span className="text-sm font-medium">98%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-green-500 rounded-full" style={{ width: "98%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel B (Telhado Leste)</span>
                        <span className="text-sm font-medium">92%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-green-500 rounded-full" style={{ width: "92%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel C (Telhado Oeste)</span>
                        <span className="text-sm font-medium">85%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-yellow-500 rounded-full" style={{ width: "85%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel D (Garagem)</span>
                        <span className="text-sm font-medium">78%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-yellow-500 rounded-full" style={{ width: "78%" }}></div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Fatores de Impacto</CardTitle>
                  <CardDescription>Elementos que afetam a produção</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Sun className="h-5 w-5 mr-3 text-yellow-500" />
                        <span>Incidência Solar</span>
                      </div>
                      <span className="font-medium">Excelente</span>
                    </div>

                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Cloud className="h-5 w-5 mr-3 text-blue-500" />
                        <span>Nebulosidade</span>
                      </div>
                      <span className="font-medium">Baixa (15%)</span>
                    </div>

                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Settings className="h-5 w-5 mr-3 text-gray-500" />
                        <span>Manutenção</span>
                      </div>
                      <span className="font-medium">Em dia</span>
                    </div>

                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Zap className="h-5 w-5 mr-3 text-purple-500" />
                        <span>Eficiência do Inversor</span>
                      </div>
                      <span className="font-medium">97%</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="consumption">
          <div className="grid grid-cols-1 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Consumo de Energia</CardTitle>
                <CardDescription>Análise detalhada do consumo de energia</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                  <EnergyConsumptionChart />
                </Suspense>
              </CardContent>
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Distribuição por Ambiente</CardTitle>
                  <CardDescription>Consumo por área da propriedade</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Sala e Cozinha</span>
                        <span className="text-sm font-medium">42%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "42%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Quartos</span>
                        <span className="text-sm font-medium">28%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "28%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Área Externa</span>
                        <span className="text-sm font-medium">18%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "18%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Banheiros</span>
                        <span className="text-sm font-medium">12%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "12%" }}></div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Economia e Sustentabilidade</CardTitle>
                  <CardDescription>Impacto financeiro e ambiental</CardDescription>
                </CardHeader>
                <CardContent>
                  <Suspense fallback={<div className="h-[200px] bg-muted animate-pulse rounded-lg"></div>}>
                    <SavingsCalculator />
                  </Suspense>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="equipment">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Status dos Painéis Solares</CardTitle>
                <CardDescription>Monitoramento em tempo real</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <SolarPanelStatus detailed />
                </Suspense>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Sistema de Armazenamento</CardTitle>
                <CardDescription>Status das baterias</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <BatteryStatus />
                </Suspense>
              </CardContent>
            </Card>

            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Histórico de Manutenção</CardTitle>
                <CardDescription>Registro de manutenções e alertas</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center p-3 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded-lg">
                    <div className="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">15/05/2023:</span>
                    <span>Manutenção preventiva realizada com sucesso</span>
                  </div>

                  <div className="flex items-center p-3 bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400 rounded-lg">
                    <div className="h-2 w-2 bg-yellow-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">02/04/2023:</span>
                    <span>Alerta: Eficiência do Painel C abaixo do esperado</span>
                  </div>

                  <div className="flex items-center p-3 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded-lg">
                    <div className="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">15/03/2023:</span>
                    <span>Limpeza dos painéis realizada</span>
                  </div>

                  <div className="flex items-center p-3 bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded-lg">
                    <div className="h-2 w-2 bg-red-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">28/02/2023:</span>
                    <span>Falha no inversor detectada e corrigida</span>
                  </div>

                  <div className="flex items-center p-3 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded-lg">
                    <div className="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">15/01/2023:</span>
                    <span>Inspeção trimestral realizada</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/solar/energy-production-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"
import { useTheme } from "next-themes"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Mock data
const hourlyData = [
  { time: "00:00", production: 0, consumption: 1.2 },
  { time: "01:00", production: 0, consumption: 0.9 },
  { time: "02:00", production: 0, consumption: 0.8 },
  { time: "03:00", production: 0, consumption: 0.7 },
  { time: "04:00", production: 0, consumption: 0.7 },
  { time: "05:00", production: 0.2, consumption: 0.8 },
  { time: "06:00", production: 0.8, consumption: 1.1 },
  { time: "07:00", production: 1.5, consumption: 1.5 },
  { time: "08:00", production: 2.3, consumption: 1.8 },
  { time: "09:00", production: 3.1, consumption: 2.0 },
  { time: "10:00", production: 3.8, consumption: 2.1 },
  { time: "11:00", production: 4.2, consumption: 2.3 },
  { time: "12:00", production: 4.5, consumption: 2.5 },
  { time: "13:00", production: 4.3, consumption: 2.2 },
  { time: "14:00", production: 4.0, consumption: 2.0 },
  { time: "15:00", production: 3.5, consumption: 1.9 },
  { time: "16:00", production: 2.8, consumption: 2.1 },
  { time: "17:00", production: 2.0, consumption: 2.4 },
  { time: "18:00", production: 1.2, consumption: 2.8 },
  { time: "19:00", production: 0.5, consumption: 3.0 },
  { time: "20:00", production: 0.1, consumption: 2.5 },
  { time: "21:00", production: 0, consumption: 2.2 },
  { time: "22:00", production: 0, consumption: 1.8 },
  { time: "23:00", production: 0, consumption: 1.4 },
]

const dailyData = [
  { day: "Seg", production: 22.5, consumption: 18.2 },
  { day: "Ter", production: 24.8, consumption: 17.9 },
  { day: "Qua", production: 19.2, consumption: 18.5 },
  { day: "Qui", production: 21.3, consumption: 19.1 },
  { day: "Sex", production: 25.1, consumption: 18.7 },
  { day: "Sáb", production: 23.4, consumption: 16.8 },
  { day: "Dom", production: 24.5, consumption: 15.4 },
]

const monthlyData = [
  { month: "Jan", production: 580, consumption: 520 },
  { month: "Fev", production: 620, consumption: 510 },
  { month: "Mar", production: 710, consumption: 530 },
  { month: "Abr", production: 680, consumption: 540 },
  { month: "Mai", production: 650, consumption: 550 },
  { month: "Jun", production: 590, consumption: 560 },
  { month: "Jul", production: 610, consumption: 570 },
  { month: "Ago", production: 640, consumption: 550 },
  { month: "Set", production: 670, consumption: 540 },
  { month: "Out", production: 700, consumption: 530 },
  { month: "Nov", production: 630, consumption: 520 },
  { month: "Dez", production: 590, consumption: 510 },
]

interface EnergyProductionChartProps {
  detailed?: boolean
}

export function EnergyProductionChart({ detailed = false }: EnergyProductionChartProps) {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const [chartType, setChartType] = useState<"line" | "area" | "bar">("area")
  const [timeRange, setTimeRange] = useState<"hourly" | "daily" | "monthly">("hourly")

  // Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <div className="h-[350px] flex items-center justify-center">Carregando gráfico...</div>
  }

  const isDark = theme === "dark"

  // Select data based on time range
  const data = timeRange === "hourly" ? hourlyData : timeRange === "daily" ? dailyData : monthlyData

  // X-axis data key
  const xAxisKey = timeRange === "hourly" ? "time" : timeRange === "daily" ? "day" : "month"

  return (
    <div>
      {detailed && (
        <div className="flex flex-col sm:flex-row justify-between mb-6 gap-4">
          <div className="flex items-center space-x-4">
            <Select value={timeRange} onValueChange={(value) => setTimeRange(value as any)}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Selecione o período" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="hourly">Por Hora</SelectItem>
                <SelectItem value="daily">Por Dia</SelectItem>
                <SelectItem value="monthly">Por Mês</SelectItem>
              </SelectContent>
            </Select>

            <Select value={chartType} onValueChange={(value) => setChartType(value as any)}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Tipo de gráfico" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="line">Linha</SelectItem>
                <SelectItem value="area">Área</SelectItem>
                <SelectItem value="bar">Barras</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-4">
            <div className="flex items-center">
              <div className="h-3 w-3 rounded-full bg-yellow-400 mr-2"></div>
              <span className="text-sm">Produção</span>
            </div>
            <div className="flex items-center">
              <div className="h-3 w-3 rounded-full bg-blue-400 mr-2"></div>
              <span className="text-sm">Consumo</span>
            </div>
          </div>
        </div>
      )}

      <ResponsiveContainer width="100%" height={detailed ? 400 : 350}>
        {chartType === "line" ? (
          <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
            <XAxis
              dataKey={xAxisKey}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <YAxis
              label={{
                value: "kWh",
                angle: -90,
                position: "insideLeft",
                style: { textAnchor: "middle", fill: isDark ? "#ccc" : "#333" },
              }}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: isDark ? "#1f2937" : "#fff",
                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
                color: isDark ? "#f9fafb" : "#111827",
              }}
            />
            <Legend />
            <Line
              type="monotone"
              dataKey="production"
              name="Produção"
              stroke="#FFCE00"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
            <Line
              type="monotone"
              dataKey="consumption"
              name="Consumo"
              stroke="#0EA5E9"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
          </LineChart>
        ) : chartType === "area" ? (
          <AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
            <XAxis
              dataKey={xAxisKey}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <YAxis
              label={{
                value: "kWh",
                angle: -90,
                position: "insideLeft",
                style: { textAnchor: "middle", fill: isDark ? "#ccc" : "#333" },
              }}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: isDark ? "#1f2937" : "#fff",
                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
                color: isDark ? "#f9fafb" : "#111827",
              }}
            />
            <Legend />
            <Area
              type="monotone"
              dataKey="production"
              name="Produção"
              stroke="#FFCE00"
              fill="#FFCE00"
              fillOpacity={0.3}
            />
            <Area
              type="monotone"
              dataKey="consumption"
              name="Consumo"
              stroke="#0EA5E9"
              fill="#0EA5E9"
              fillOpacity={0.3}
            />
          </AreaChart>
        ) : (
          <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
            <XAxis
              dataKey={xAxisKey}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <YAxis
              label={{
                value: "kWh",
                angle: -90,
                position: "insideLeft",
                style: { textAnchor: "middle", fill: isDark ? "#ccc" : "#333" },
              }}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: isDark ? "#1f2937" : "#fff",
                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
                color: isDark ? "#f9fafb" : "#111827",
              }}
            />
            <Legend />
            <Bar dataKey="production" name="Produção" fill="#FFCE00" radius={[4, 4, 0, 0]} />
            <Bar dataKey="consumption" name="Consumo" fill="#0EA5E9" radius={[4, 4, 0, 0]} />
          </BarChart>
        )}
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/battery-status.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { BatteryCharging, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function BatteryStatus() {
  // Mock battery data
  const batteryData = {
    level: 85,
    charging: true,
    timeRemaining: "14h",
    health: 98,
    cycles: 124,
    temperature: 28,
    voltage: 48.2,
    current: 12.5,
    capacity: {
      total: 15,
      used: 12.75,
    },
    history: [
      { time: "00:00", level: 92 },
      { time: "04:00", level: 90 },
      { time: "08:00", level: 85 },
      { time: "12:00", level: 82 },
      { time: "16:00", level: 78 },
      { time: "20:00", level: 85 },
    ],
  }

  // Battery icon based on level
  const getBatteryIcon = () => {
    if (batteryData.charging) return <BatteryCharging className="h-8 w-8 text-green-500" />
    if (batteryData.level > 90) return <BatteryFull className="h-8 w-8 text-green-500" />
    if (batteryData.level > 50) return <BatteryMedium className="h-8 w-8 text-green-500" />
    if (batteryData.level > 20) return <BatteryLow className="h-8 w-8 text-yellow-500" />
    return <BatteryWarning className="h-8 w-8 text-red-500" />
  }

  return (
    <Tabs defaultValue="status">
      <TabsList className="mb-4">
        <TabsTrigger value="status">Status</TabsTrigger>
        <TabsTrigger value="details">Detalhes</TabsTrigger>
        <TabsTrigger value="history">Histórico</TabsTrigger>
      </TabsList>

      <TabsContent value="status">
        <div className="flex flex-col items-center justify-center p-6">{getBatteryIcon()}</div>
      </TabsContent>

      <TabsContent value="details">
        <div>Detalhes</div>
      </TabsContent>

      <TabsContent value="history">
        <div>Histórico</div>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/ai-recommendation-panel.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 { Sparkles, Bot, ChevronDown, ChevronUp, Check } from "lucide-react"
import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format"
import { Skeleton } from "@/components/ui/skeleton"

interface AIRecommendationPanelProps {
  simulationResults: any[]
  projectValue: number
  energySavings: number
  onSelectOption: (index: number) => void
}

export function AIRecommendationPanel({
  simulationResults,
  projectValue,
  energySavings,
  onSelectOption,
}: AIRecommendationPanelProps) {
  const [isLoading, setIsLoading] = useState(true)
  const [recommendations, setRecommendations] = useState<any[]>([])
  const [isExpanded, setIsExpanded] = useState(false)

  useEffect(() => {
    if (simulationResults.length === 0) return

    // Simulate AI processing delay
    setIsLoading(true)
    const timer = setTimeout(() => {
      // In a real application, this would call the AI API with the simulation results
      // and get personalized recommendations

      // For now, we'll use a simple algorithm to generate recommendations:
      // 1. Best ROI option
      // 2. Fastest payback option
      // 3. Lowest monthly payment option

      const bestROI = [...simulationResults].sort((a, b) => b.roi - a.roi)[0]
      const fastestPayback = [...simulationResults].sort((a, b) => a.paybackMonths - b.paybackMonths)[0]
      const lowestMonthly = [...simulationResults]
        .filter((r) => r.monthlyPayment > 0)
        .sort((a, b) => a.monthlyPayment - b.monthlyPayment)[0]

      // Find their indices in the original array
      const bestROIIndex = simulationResults.findIndex((r) => r.id === bestROI.id)
      const fastestPaybackIndex = simulationResults.findIndex((r) => r.id === fastestPayback.id)
      const lowestMonthlyIndex = simulationResults.findIndex((r) => r.id === lowestMonthly.id)

      // Create recommendation objects
      const recs = [
        {
          title: "Melhor Retorno sobre Investimento",
          description: "Esta opção maximiza seu ROI no longo prazo",
          result: bestROI,
          index: bestROIIndex,
          highlights: [
            `ROI de ${formatPercentage(bestROI.roi)}`,
            `Economia total de ${formatCurrency(bestROI.energySavings25Years)} em 25 anos`,
          ],
          explanation: `Para um investimento de ${formatCurrency(projectValue)}, esta opção oferece o maior retorno financeiro ao longo do tempo. Com uma economia mensal de ${formatCurrency(energySavings)}, seu retorno sobre investimento será maximizado.`,
        },
        {
          title: "Retorno Mais Rápido",
          description: "Esta opção permite recuperar seu investimento no menor tempo possível",
          result: fastestPayback,
          index: fastestPaybackIndex,
          highlights: [
            `Payback em apenas ${formatMonths(fastestPayback.paybackMonths)}`,
            `${fastestPayback.discount > 0 ? `Desconto de ${formatCurrency(fastestPayback.discount)}` : `Sem entrada inicial significativa`}`,
          ],
          explanation: `Se você deseja recuperar seu investimento o mais rápido possível, esta é a melhor opção. Com um período de payback de apenas ${formatMonths(fastestPayback.paybackMonths)}, você começará a ver retorno financeiro rapidamente.`,
        },
      ]

      // Add lowest monthly payment if it's different from the other recommendations
      if (lowestMonthlyIndex !== bestROIIndex && lowestMonthlyIndex !== fastestPaybackIndex) {
        recs.push({
          title: "Menor Pagamento Mensal",
          description: "Esta opção minimiza seu desembolso mensal",
          result: lowestMonthly,
          index: lowestMonthlyIndex,
          highlights: [
            `Apenas ${formatCurrency(lowestMonthly.monthlyPayment)} por mês`,
            `Prazo estendido de ${lowestMonthly.term} meses`,
          ],
          explanation: `Para um fluxo de caixa mais confortável, esta opção oferece o menor pagamento mensal. Isso facilita o encaixe no seu orçamento, embora o período de payback seja um pouco mais longo.`,
        })
      }

      setRecommendations(recs)
      setIsLoading(false)
    }, 2000)

    return () => clearTimeout(timer)
  }, [simulationResults, projectValue, energySavings])

  if (simulationResults.length === 0) {
    return null
  }

  return (
    <Card className="border-yellow-200 dark:border-yellow-800">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-yellow-500" />
          Recomendações da IA
        </CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-4">
            <div className="flex items-start gap-4">
              <Skeleton className="w-10 h-10 rounded-full" />
              <div className="space-y-2 flex-1">
                <Skeleton className="h-5 w-2/3" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
              </div>
            </div>
            <Skeleton className="h-20 w-full" />
          </div>
        ) : (
          <div className="space-y-6">
            {recommendations.slice(0, isExpanded ? recommendations.length : 1).map((rec, index) => (
              <div key={index} className="space-y-3">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
                    <Bot className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-bold">{rec.title}</h3>
                    <p className="text-sm text-muted-foreground">{rec.description}</p>

                    <div className="mt-2 flex flex-wrap gap-2">
                      {rec.highlights.map((highlight, i) => (
                        <div
                          key={i}
                          className="inline-flex items-center gap-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs px-2 py-1 rounded-full"
                        >
                          <Check className="h-3 w-3" />
                          {highlight}
                        </div>
                      ))}
                    </div>

                    <div className="mt-3 bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded-md border border-yellow-200 dark:border-yellow-800 text-sm">
                      <p>{rec.explanation}</p>
                    </div>

                    <div className="mt-3">
                      <Button
                        className="bg-yellow-500 hover:bg-yellow-600 text-black"
                        onClick={() => onSelectOption(rec.index)}
                      >
                        Selecionar esta opção
                      </Button>
                    </div>
                  </div>
                </div>

                {index < recommendations.length - 1 && !isExpanded && (
                  <div className="border-t border-dashed border-gray-200 dark:border-gray-700"></div>
                )}
              </div>
            ))}

            {recommendations.length > 1 && (
              <Button variant="ghost" className="w-full mt-2" onClick={() => setIsExpanded(!isExpanded)}>
                {isExpanded ? (
                  <>
                    <ChevronUp className="h-4 w-4 mr-2" />
                    Ver menos recomendações
                  </>
                ) : (
                  <>
                    <ChevronDown className="h-4 w-4 mr-2" />
                    Ver mais recomendações ({recommendations.length - 1} restantes)
                  </>
                )}
              </Button>
            )}

            <div className="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 text-xs text-muted-foreground">
              <p>
                Estas recomendações são baseadas nas suas preferências e nos parâmetros fornecidos. Para uma análise
                mais personalizada, consulte um especialista financeiro.
              </p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/financial/loan-comparison-chart.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format"
import { Chart, type ChartConfiguration, type ChartData, registerables } from "chart.js"

// Register Chart.js components
Chart.register(...registerables)

interface LoanComparisonChartProps {
  results: any[]
  selectedIndices: number[]
}

export function LoanComparisonChart({ results, selectedIndices }: LoanComparisonChartProps) {
  const chartRef = useRef<HTMLCanvasElement | null>(null)
  const chartInstance = useRef<Chart | null>(null)

  useEffect(() => {
    if (!chartRef.current || selectedIndices.length === 0) return

    // Destroy existing chart
    if (chartInstance.current) {
      chartInstance.current.destroy()
    }

    const selectedResults = selectedIndices.map((index) => results[index])

    // Prepare data for chart
    const data: ChartData = {
      labels: ["Valor do Projeto", "Pagamento Total", "Economia em 25 anos"],
      datasets: selectedResults.map((result, i) => ({
        label: `${result.bank.name} - ${result.paymentMethod.name}`,
        data: [result.projectValue, result.totalPayment, result.energySavings25Years],
        backgroundColor: getBackgroundColor(i),
        borderColor: getBorderColor(i),
        borderWidth: 1,
      })),
    }

    // Chart configuration
    const config: ChartConfiguration = {
      type: "bar",
      data,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            callbacks: {
              label: (context) => {
                const value = context.raw as number
                return `${context.dataset.label}: ${formatCurrency(value)}`
              },
            },
          },
          legend: {
            position: "top",
          },
          title: {
            display: true,
            text: "Comparação Financeira",
          },
        },
        scales: {
          y: {
            ticks: {
              callback: (value) => formatCurrency(value as number),
            },
          },
        },
      },
    }

    // Create new chart
    chartInstance.current = new Chart(chartRef.current, config)

    // Cleanup on unmount
    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy()
      }
    }
  }, [results, selectedIndices])

  // Helper functions for chart colors
  function getBackgroundColor(index: number) {
    const colors = [
      "rgba(54, 162, 235, 0.5)",
      "rgba(255, 206, 86, 0.5)",
      "rgba(75, 192, 192, 0.5)",
      "rgba(153, 102, 255, 0.5)",
      "rgba(255, 159, 64, 0.5)",
    ]
    return colors[index % colors.length]
  }

  function getBorderColor(index: number) {
    const colors = [
      "rgba(54, 162, 235, 1)",
      "rgba(255, 206, 86, 1)",
      "rgba(75, 192, 192, 1)",
      "rgba(153, 102, 255, 1)",
      "rgba(255, 159, 64, 1)",
    ]
    return colors[index % colors.length]
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Comparação de Opções</CardTitle>
      </CardHeader>
      <CardContent>
        {selectedIndices.length > 0 ? (
          <>
            <div className="h-64 w-full">
              <canvas ref={chartRef}></canvas>
            </div>
            <div className="mt-6 overflow-x-auto">
              <table className="w-full border-collapse text-sm">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-2 px-3 font-medium text-muted-foreground">Métrica</th>
                    {selectedIndices.map((index) => (
                      <th key={index} className="text-left py-2 px-3 font-medium">
                        <div className="flex items-center gap-2">
                          <div className={`w-3 h-3 rounded-full ${results[index].paymentMethod.color}`}></div>
                          <span>{results[index].bank.name}</span>
                          <span className="text-xs text-muted-foreground">({results[index].paymentMethod.name})</span>
                        </div>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b">
                    <td className="py-2 px-3">Valor do Projeto</td>
                    {selectedIndices.map((index) => (
                      <td key={`proj-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].projectValue)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">Pagamento Mensal</td>
                    {selectedIndices.map((index) => (
                      <td key={`monthly-${index}`} className="py-2 px-3 font-medium">
                        {results[index].monthlyPayment > 0 ? formatCurrency(results[index].monthlyPayment) : "N/A"}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">Pagamento Total</td>
                    {selectedIndices.map((index) => (
                      <td key={`total-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].totalPayment)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">Período de Payback</td>
                    {selectedIndices.map((index) => (
                      <td key={`payback-${index}`} className="py-2 px-3 font-medium">
                        {formatMonths(results[index].paybackMonths)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">ROI</td>
                    {selectedIndices.map((index) => (
                      <td key={`roi-${index}`} className="py-2 px-3 font-medium">
                        {formatPercentage(results[index].roi)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">TIR</td>
                    {selectedIndices.map((index) => (
                      <td key={`irr-${index}`} className="py-2 px-3 font-medium">
                        {formatPercentage(results[index].irr)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">VPL</td>
                    {selectedIndices.map((index) => (
                      <td key={`npv-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].npv)}
                      </td>
                    ))}
                  </tr>
                  <tr>
                    <td className="py-2 px-3">Economia em 25 anos</td>
                    {selectedIndices.map((index) => (
                      <td key={`savings-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].energySavings25Years)}
                      </td>
                    ))}
                  </tr>
                </tbody>
              </table>
            </div>
          </>
        ) : (
          <div className="text-center py-12 text-muted-foreground">
            Selecione pelo menos uma opção para visualizar a comparação
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/financial/payment-method-card.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Check, ChevronDown, ChevronUp, Info } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format"

interface PaymentMethodCardProps {
  result: any
  index: number
  isSelected: boolean
  isExpanded: boolean
  isBestOption: boolean
  compareMode: boolean
  onSelect: (index: number) => void
  onExpand: (index: number) => void
}

export function PaymentMethodCard({
  result,
  index,
  isSelected,
  isExpanded,
  isBestOption,
  compareMode,
  onSelect,
  onExpand,
}: PaymentMethodCardProps) {
  // Get the correct icon element based on payment method
  const getPaymentIcon = (iconName: string) => {
    // This is a simplified version - in a real app, you'd import all icons
    // and map them properly
    switch (iconName) {
      case "BanknoteIcon":
        return <span className="i-lucide-banknote h-4 w-4" />
      case "FileCheck":
        return <span className="i-lucide-file-check h-4 w-4" />
      case "Building":
        return <span className="i-lucide-building h-4 w-4" />
      case "Wallet":
        return <span className="i-lucide-wallet h-4 w-4" />
      case "Clock":
        return <span className="i-lucide-clock h-4 w-4" />
      default:
        return <Info className="h-4 w-4" />
    }
  }

  return (
    <Card
      className={`overflow-hidden transition-all ${
        isSelected ? "ring-2 ring-yellow-500" : ""
      } ${compareMode && isSelected ? "ring-2 ring-blue-500" : ""}`}
    >
      <div className={`h-1 ${result.paymentMethod.color}`}></div>
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 text-sm">
              {result.bank.logo}
            </div>
            <div>
              <CardTitle className="text-lg">{result.bank.name}</CardTitle>
              <CardDescription className="flex items-center gap-1">
                {getPaymentIcon(result.paymentMethod.icon)}
                <span>{result.paymentMethod.name}</span>
              </CardDescription>
            </div>
          </div>

          {isBestOption && <Badge className="bg-yellow-500 text-black">Melhor Opção</Badge>}

          {compareMode && (
            <Button variant={isSelected ? "default" : "outline"} size="sm" onClick={() => onSelect(index)}>
              {isSelected ? (
                <>
                  <Check className="h-4 w-4 mr-1" />
                  Selecionado
                </>
              ) : (
                "Comparar"
              )}
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="pb-2">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
          <div>
            <p className="text-xs text-muted-foreground">Valor do Projeto</p>
            <p className="font-medium">{formatCurrency(result.projectValue)}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground">Pagamento Mensal</p>
            <p className="font-medium">{result.monthlyPayment > 0 ? formatCurrency(result.monthlyPayment) : "N/A"}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground">Prazo</p>
            <p className="font-medium">{result.term > 1 ? `${result.term} meses` : "À vista"}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground">Pagamento Total</p>
            <p className="font-medium">{formatCurrency(result.totalPayment)}</p>
          </div>
        </div>

        <div className="space-y-3">
          <div>
            <div className="flex justify-between mb-1">
              <p className="text-xs text-muted-foreground">Período de Payback</p>
              <p className="text-xs font-medium">{formatMonths(result.paybackMonths)}</p>
            </div>
            <Progress value={(result.paybackMonths / 120) * 100} className="h-2" />
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <p className="text-xs text-muted-foreground">ROI</p>
              <p className="text-xs font-medium">{formatPercentage(result.roi)}</p>
            </div>
            <Progress value={Math.min(result.roi / 10, 100)} className="h-2" />
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <p className="text-xs text-muted-foreground">TIR</p>
              <p className="text-xs font-medium">{formatPercentage(result.irr)}</p>
            </div>
            <Progress value={Math.min(result.irr / 5, 100)} className="h-2" />
          </div>
        </div>

        {/* Additional Details Toggle */}
        <button
          type="button"
          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mt-4"
          onClick={() => onExpand(index)}
        >
          {isExpanded ? (
            <>
              <ChevronUp className="h-3 w-3" />
              Menos detalhes
            </>
          ) : (
            <>
              <ChevronDown className="h-3 w-3" />
              Mais detalhes
            </>
          )}
        </button>

        {/* Expanded Details */}
        {isExpanded && (
          <div className="mt-4 pt-4 border-t space-y-4">
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div>
                <p className="text-xs text-muted-foreground">VPL</p>
                <p className="font-medium">{formatCurrency(result.npv)}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Economia Mensal</p>
                <p className="font-medium">{formatCurrency(result.monthlySavings)}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Economia em 25 anos</p>
                <p className="font-medium">{formatCurrency(result.energySavings25Years)}</p>
              </div>
              {result.discount > 0 && (
                <div>
                  <p className="text-xs text-muted-foreground">Desconto</p>
                  <p className="font-medium text-green-600">{formatCurrency(result.discount)}</p>
                </div>
              )}
              {result.downPayment > 0 && (
                <div>
                  <p className="text-xs text-muted-foreground">Entrada</p>
                  <p className="font-medium">{formatCurrency(result.downPayment)}</p>
                </div>
              )}
              <div>
                <p className="text-xs text-muted-foreground">LCOE</p>
                <p className="font-medium">R$ {result.lcoe.toFixed(2)}/kWh</p>
              </div>
            </div>

            {/* Bank Details */}
            <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-md">
              <p className="text-xs font-medium mb-2">Detalhes da Instituição</p>
              <div className="grid grid-cols-3 gap-2 text-xs">
                <div>
                  <p className="text-muted-foreground">Taxa de Juros</p>
                  <p className="font-medium">{result.bank.interestRate}% a.m.</p>
                </div>
                <div>
                  <p className="text-muted-foreground">Prazo Máximo</p>
                  <p className="font-medium">{result.bank.maxTerm} meses</p>
                </div>
                <div>
                  <p className="text-muted-foreground">Entrada Mínima</p>
                  <p className="font-medium">{result.bank.minDownPayment}%</p>
                </div>
              </div>

              {/* Special Requirements */}
              {result.bank.specialRequirements && (
                <div className="mt-2">
                  <div className="flex items-center gap-1">
                    <p className="text-xs text-muted-foreground">Requisitos Especiais</p>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3 w-3 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <ul className="text-xs space-y-1 list-disc pl-4">
                            {result.bank.specialRequirements.map((req: string, i: number) => (
                              <li key={i}>{req}</li>
                            ))}
                          </ul>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                </div>
              )}
            </div>

            {/* Milestones */}
            {result.milestones && result.milestones.length > 0 && (
              <div>
                <p className="text-xs font-medium mb-2">Marcos de Pagamento</p>
                <div className="space-y-2">
                  {result.milestones.map((milestone: any, i: number) => (
                    <div
                      key={i}
                      className="flex items-center justify-between text-xs p-2 bg-gray-50 dark:bg-gray-900 rounded-md"
                    >
                      <div className="flex items-center gap-2">
                        <div className="w-5 h-5 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-700 text-xs">
                          {i + 1}
                        </div>
                        <span>{milestone.name}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">{milestone.percentage}%</Badge>
                        <span className="font-medium">{formatCurrency(milestone.value)}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </CardContent>
      <CardFooter>
        <Button className="w-full">Solicitar esta opção</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/utils/number-format.ts" isEdit="true" isMerged="true"
/**
 * Format currency
 */
export function formatCurrency(value: number): string {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(value)
}

/**
 * Format percentage
 */
export function formatPercentage(value: number): string {
  return `${value.toFixed(2)}%`
}

/**
 * Format months as years and months
 */
export function formatMonths(months: number): string {
  const years = Math.floor(months / 12)
  const remainingMonths = months % 12

  if (years === 0) return `${remainingMonths} meses`
  if (remainingMonths === 0) return `${years} anos`
  return `${years} anos e ${remainingMonths} meses`
}
[V0_FILE]typescriptreact:file="app/financiamento/page.tsx" isEdit="true" isMerged="true"
"use client"

import { CardFooter } from "@/components/ui/card"

import { useState, useEffect } from "react"
import Link from "next/link"
import {
  ArrowLeft,
  Sun,
  Calculator,
  ChevronDown,
  ChevronUp,
  Info,
  HelpCircle,
  Download,
  Share2,
  AlertTriangle,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { toast } from "@/components/ui/use-toast"
import { PaymentMethodCard } from "@/components/financial/payment-method-card"
import { LoanComparisonChart } from "@/components/financial/loan-comparison-chart"
import { AIRecommendationPanel } from "@/components/financial/ai-recommendation-panel"
import { formatCurrency } from "@/lib/utils/number-format"

export default function FinanciamentoPage() {
  // State for simulation parameters
  const [projectValue, setProjectValue] = useState(40000)
  const [energySavings, setEnergySavings] = useState(850)
  const [selectedBank, setSelectedBank] = useState("all")
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("all")
  const [includeInstallation, setIncludeInstallation] = useState(true)
  const [includeEquipment, setIncludeEquipment] = useState(true)
  const [includeHomologation, setIncludeHomologation] = useState(true)
  const [includeMonitoring, setIncludeMonitoring] = useState(false)
  const [energyPriceIncrease, setEnergyPriceIncrease] = useState(8)
  const [inflationRate, setInflationRate] = useState(4.5)
  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
  const [simulationResults, setSimulationResults] = useState<any>(null)
  const [isCalculating, setIsCalculating] = useState(false)
  const [selectedResult, setSelectedResult] = useState<number | null>(null)
  const [compareMode, setCompareMode] = useState(false)
  const [comparedResults, setComparedResults] = useState<number[]>([])
  const [activeTab, setActiveTab] = useState("all")

  // API call to get simulation results
  const runSimulation = async () => {
    setIsCalculating(true)

    try {
      const response = await fetch("/api/financial-simulator", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          projectValue,
          energySavings,
          selectedBank,
          selectedPaymentMethod,
          includeInstallation,
          includeEquipment,
          includeHomologation,
          includeMonitoring,
          energyPriceIncrease,
          inflationRate,
        }),
      })

      if (!response.ok) {
        throw new Error("Falha ao executar a simulação")
      }

      const data = await response.json()

      if (data.success) {
        setSimulationResults(data.data)
        // Reset selection states when running a new simulation
        setSelectedResult(null)
        setComparedResults([])
      } else {
        toast({
          title: "Erro na simulação",
          description: data.error?.message || "Ocorreu um erro ao processar sua simulação.",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Erro na simulação:", error)
      toast({
        title: "Erro na simulação",
        description: "Ocorreu um erro ao processar sua simulação. Por favor, tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsCalculating(false)
    }
  }

  // Toggle result selection for comparison
  const toggleResultComparison = (index: number) => {
    if (comparedResults.includes(index)) {
      setComparedResults(comparedResults.filter((i) => i !== index))
    } else {
      if (comparedResults.length < 3) {
        setComparedResults([...comparedResults, index])
      } else {
        toast({
          title: "Limite de comparação",
          description: "Você só pode comparar até 3 opções simultaneamente.",
          variant: "default",
        })
      }
    }
  }

  // Handle expanding/collapsing result details
  const handleExpandResult = (index: number) => {
    setSelectedResult(selectedResult === index ? null : index)
  }

  // Filter results by payment method
  const getFilteredResults = () => {
    if (!simulationResults) return []

    if (activeTab === "all") {
      return simulationResults
    }

    return simulationResults.filter((result: any) => {
      if (activeTab === "traditional") {
        return ["traditional", "upfront"].includes(result.paymentMethod.id)
      } else if (activeTab === "milestone") {
        return result.paymentMethod.id === "milestone"
      } else if (activeTab === "alternative") {
        return ["leasing", "subscription"].includes(result.paymentMethod.id)
      }

      return false
    })
  }

  // Select a recommendation from the AI panel
  const handleSelectRecommendation = (index: number) => {
    setSelectedResult(index)
    // Scroll to the selected option
    setTimeout(() => {
      const element = document.getElementById(`result-${index}`)
      if (element) {
        element.scrollIntoView({ behavior: "smooth", block: "center" })
      }
    }, 100)
  }

  // Export simulation results to CSV
  const exportToCSV = () => {
    if (!simulationResults || simulationResults.length === 0) return

    // Prepare CSV headers
    const headers = [
      "Banco",
      "Método de Pagamento",
      "Valor do Projeto",
      "Pagamento Mensal",
      "Pagamento Total",
      "Prazo (meses)",
      "Período de Payback (meses)",
      "ROI (%)",
      "TIR (%)",
      "VPL",
      "Economia em 25 anos",
    ].join(",")

    // Prepare CSV data
    const csvData = simulationResults.map((result: any) =>
      [
        result.bank.name,
        result.paymentMethod.name,
        result.projectValue,
        result.monthlyPayment,
        result.totalPayment,
        result.term,
        result.paybackMonths,
        result.roi.toFixed(2),
        result.irr.toFixed(2),
        result.npv,
        result.energySavings25Years,
      ].join(","),
    )

    // Combine headers and data
    const csv = [headers, ...csvData].join("
")
\
    // Create a download link
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", `simulacao-financeira-${new Date().toISOString().split("T")[0]}.csv`)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    toast({
      title: "Exportação concluída",
      description: "Os resultados da simulação foram exportados com sucesso.",
    })
  }

  // Share simulation results
  const shareResults = () => {
    // In a real app, this would generate a shareable link with the simulation parameters

    // For now, just copy the current URL to clipboard
    navigator.clipboard.writeText(window.location.href)

    toast({
      title: "Link copiado",
      description: "O link para esta simulação foi copiado para a área de transferência.",
    })
  }

  // Run initial simulation on component mount
  useEffect(() => {
    runSimulation()
  }, [])

  return (
    <div className="flex flex-col min-h-screen">
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-8">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-3xl font-bold tracking-tight">Simulador Financeiro Multi-Banco</h1>
            <p className="mt-2 text-lg text-muted-foreground max-w-3xl">
              Compare diferentes opções de financiamento, calcule ROI e período de payback para seu projeto solar
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Simulation Parameters */}
            <div className="lg:col-span-1 space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Calculator className="h-5 w-5 text-yellow-500" />
                    Parâmetros da Simulação
                  </CardTitle>
                  <CardDescription>Configure os detalhes do seu projeto solar</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* Project Value */}
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <Label>Valor do Projeto</Label>
                      <span className="text-sm font-medium">{formatCurrency(projectValue)}</span>
                    </div>
                    <Slider
                      value={[projectValue]}
                      min={10000}
                      max={200000}
                      step={5000}
                      onValueChange={(value) => setProjectValue(value[0])}
                    />
                    <div className="flex justify-between text-xs text-muted-foreground">
                      <span>R$ 10.000</span>
                      <span>R$ 200.000</span>
                    </div>
                  </div>

                  {/* Monthly Energy Savings */}
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <Label>Economia Mensal de Energia</Label>
                      <span className="text-sm font-medium">{formatCurrency(energySavings)}</span>
                    </div>
                    <Slider
                      value={[energySavings]}
                      min={100}
                      max={3000}
                      step={50}
                      onValueChange={(value) => setEnergySavings(value[0])}
                    />
                    <div className="flex justify-between text-xs text-muted-foreground">
                      <span>R$ 100</span>
                      <span>R$ 3.000</span>
                    </div>
                  </div>

                  {/* Bank Selection */}
                  <div className="space-y-2">
                    <Label>Instituição Financeira</Label>
                    <Select value={selectedBank} onValueChange={setSelectedBank}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione um banco" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos os Bancos</SelectItem>
                        <SelectItem value="banco-solar">Banco Solar</SelectItem>
                        <SelectItem value="eco-finance">EcoFinance</SelectItem>
                        <SelectItem value="green-bank">GreenBank</SelectItem>
                        <SelectItem value="sun-credit">SunCredit</SelectItem>
                        <SelectItem value="energia-coop">Energia Coop</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Payment Method Selection */}
                  <div className="space-y-2">
                    <Label>Método de Pagamento</Label>
                    <Select value={selectedPaymentMethod} onValueChange={setSelectedPaymentMethod}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione um método" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos os Métodos</SelectItem>
                        <SelectItem value="traditional">Pagamento Tradicional</SelectItem>
                        <SelectItem value="milestone">Pagamento por Marcos</SelectItem>
                        <SelectItem value="leasing">Leasing Solar</SelectItem>
                        <SelectItem value="upfront">Pagamento à Vista</SelectItem>
                        <SelectItem value="subscription">Assinatura Solar</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Project Components */}
                  <div className="space-y-3">
                    <Label>Componentes do Projeto</Label>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch
                            id="installation"
                            checked={includeInstallation}
                            onCheckedChange={setIncludeInstallation}
                          />
                          <Label htmlFor="installation" className="cursor-pointer">
                            Instalação
                          </Label>
                        </div>
                        <Badge variant="outline">+15%</Badge>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch id="equipment" checked={includeEquipment} onCheckedChange={setIncludeEquipment} />
                          <Label htmlFor="equipment" className="cursor-pointer">
                            Equipamentos Premium
                          </Label>
                        </div>
                        <Badge variant="outline">+10%</Badge>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch
                            id="homologation"
                            checked={includeHomologation}
                            onCheckedChange={setIncludeHomologation}
                          />
                          <Label htmlFor="homologation" className="cursor-pointer">
                            Homologação
                          </Label>
                        </div>
                        <Badge variant="outline">+5%</Badge>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch id="monitoring" checked={includeMonitoring} onCheckedChange={setIncludeMonitoring} />
                          <Label htmlFor="monitoring" className="cursor-pointer">
                            Monitoramento
                          </Label>
                        </div>
                        <Badge variant="outline">+8%</Badge>
                      </div>
                    </div>
                  </div>

                  {/* Advanced Options Toggle */}
                  <div>
                    <button
                      type="button"
                      className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground"
                      onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
                    >
                      {showAdvancedOptions ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                      Opções Avançadas
                    </button>

                    {showAdvancedOptions && (
                      <div className="mt-4 space-y-4 pt-4 border-t">
                        {/* Energy Price Increase */}
                        <div className="space-y-2">
                          <div className="flex justify-between">
                            <Label>Aumento Anual da Energia</Label>
                            <span className="text-sm font-medium">{energyPriceIncrease}%</span>
                          </div>
                          <Slider
                            value={[energyPriceIncrease]}
                            min={0}
                            max={15}
                            step={0.5}
                            onValueChange={(value) => setEnergyPriceIncrease(value[0])}
                          />
                          <div className="flex justify-between text-xs text-muted-foreground">
                            <span>0%</span>
                            <span>15%</span>
                          </div>
                        </div>

                        {/* Inflation Rate */}
                        <div className="space-y-2">
                          <div className="flex justify-between">
                            <Label>Taxa de Inflação</Label>
                            <span className="text-sm font-medium">{inflationRate}%</span>
                          </div>
                          <Slider
                            value={[inflationRate]}
                            min={2}
                            max={10}
                            step={0.5}
                            onValueChange={(value) => setInflationRate(value[0])}
                          />
                          <div className="flex justify-between text-xs text-muted-foreground">
                            <span>2%</span>
                            <span>10%</span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </CardContent>
                <CardFooter>
                  <Button
                    className="w-full bg-yellow-500 hover:bg-yellow-600 text-black"
                    onClick={runSimulation}
                    disabled={isCalculating}
                  >
                    {isCalculating ? (
                      <>
                        <svg
                          className="animate-spin -ml-1 mr-2 h-4 w-4 text-black"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                          ></path>
                        </svg>
                        Calculando...
                      </>
                    ) : (
                      <>
                        <Calculator className="mr-2 h-4 w-4" />
                        Simular Financiamento
                      </>
                    )}
                  </Button>
                </CardFooter>
              </Card>

              {/* Comparison Mode */}
              {simulationResults && simulationResults.length > 0 && (
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-base">Modo de Comparação</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center justify-between">
                      <Label htmlFor="compare-mode">Comparar opções</Label>
                      <Switch id="compare-mode" checked={compareMode} onCheckedChange={setCompareMode} />
                    </div>

                    {compareMode && (
                      <div className="mt-4">
                        <p className="text-sm text-muted-foreground mb-2">Selecione até 3 opções para comparar</p>
                        <div className="flex flex-wrap gap-2">
                          {comparedResults.map((index) => (
                            <Badge key={index} className="bg-yellow-500 text-black">
                              {simulationResults[index].bank.name} - {simulationResults[index].paymentMethod.name}
                            </Badge>
                          ))}
                          {comparedResults.length === 0 && (
                            <p className="text-xs text-muted-foreground">Nenhuma opção selecionada</p>
                          )}
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              )}

              {/* AI Recommendations Panel */}
              {simulationResults && simulationResults.length > 0 && (
                <AIRecommendationPanel
                  simulationResults={simulationResults}
                  projectValue={projectValue}
                  energySavings={energySavings}
                  onSelectOption={handleSelectRecommendation}
                />
              )}

              {/* Financial Metrics Explanation */}
              <Accordion type="single" collapsible className="bg-white dark:bg-gray-800 rounded-lg border">
                <AccordionItem value="metrics">
                  <AccordionTrigger className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      <Info className="h-4 w-4 text-yellow-500" />
                      <span>Entenda as Métricas Financeiras</span>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="px-4 pb-4 space-y-3">
                    <div>
                      <p className="text-sm font-medium">ROI (Retorno sobre Investimento)</p>
                      <p className="text-xs text-muted-foreground">
                        Percentual que indica quanto você receberá de retorno para cada real investido ao longo da vida
                        útil do sistema.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">Payback</p>
                      <p className="text-xs text-muted-foreground">
                        Tempo necessário para recuperar o investimento inicial através das economias geradas.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">VPL (Valor Presente Líquido)</p>
                      <p className="text-xs text-muted-foreground">
                        Valor atual de todos os fluxos de caixa futuros, descontados pela taxa de inflação.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">TIR (Taxa Interna de Retorno)</p>
                      <p className="text-xs text-muted-foreground">
                        Taxa de desconto que faz com que o VPL seja zero, indicando a rentabilidade do investimento.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">LCOE (Custo Nivelado de Energia)</p>
                      <p className="text-xs text-muted-foreground">
                        Custo por kWh considerando todos os gastos ao longo da vida útil do sistema.
                      </p>
                    </div>
                  </AccordionContent>
                </AccordionItem>
              </Accordion>
            </div>

            {/* Simulation Results */}
            <div className="lg:col-span-2">
              {isCalculating ? (
                <div className="flex flex-col items-center justify-center h-96 bg-white dark:bg-gray-800 rounded-lg border p-8">
                  <div className="w-16 h-16 border-4 border-yellow-500 border-t-transparent rounded-full animate-spin mb-4"></div>
                  <h3 className="text-xl font-bold mb-2">Calculando as melhores opções...</h3>
                  <p className="text-muted-foreground text-center max-w-md">
                    Estamos analisando múltiplas instituições financeiras e métodos de pagamento para encontrar a melhor
                    solução para seu projeto solar.
                  </p>
                </div>
              ) : simulationResults && simulationResults.length > 0 ? (
                <div className="space-y-6">
                  {/* Results Header */}
                  <div className="flex items-center justify-between">
                    <h2 className="text-xl font-bold">{simulationResults.length} Opções de Financiamento</h2>
                    <div className="flex items-center gap-2">
                      <Button variant="outline" size="sm" onClick={exportToCSV}>
                        <Download className="h-4 w-4 mr-2" />
                        Exportar
                      </Button>
                      <Button variant="outline" size="sm" onClick={shareResults}>
                        <Share2 className="h-4 w-4 mr-2" />
                        Compartilhar
                      </Button>
                    </div>
                  </div>

                  {/* Comparison View */}
                  {compareMode && comparedResults.length > 0 && (
                    <LoanComparisonChart results={simulationResults} selectedIndices={comparedResults} />
                  )}

                  {/* Results List */}
                  <div className="space-y-4">
                    <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
                      <TabsList>
                        <TabsTrigger value="all">Todas as Opções</TabsTrigger>
                        <TabsTrigger value="traditional">Tradicionais</TabsTrigger>
                        <TabsTrigger value="milestone">Por Marcos</TabsTrigger>
                        <TabsTrigger value="alternative">Alternativas</TabsTrigger>
                      </TabsList>

                      <TabsContent value={activeTab} className="mt-4 space-y-4">
                        {getFilteredResults().map((result, index) => (
                          <div id={`result-${index}`} key={index}>
                            <PaymentMethodCard
                              result={result}
                              index={index}
                              isSelected={comparedResults.includes(index)}
                              isExpanded={selectedResult === index}
                              isBestOption={index === 0}
                              compareMode={compareMode}
                              onSelect={toggleResultComparison}
                              onExpand={handleExpandResult}
                            />
                          </div>
                        ))}

                        {getFilteredResults().length === 0 && (
                          <div className="flex flex-col items-center justify-center py-12 bg-white dark:bg-gray-800 rounded-lg border">
                            <AlertTriangle className="h-12 w-12 text-yellow-500 mb-4" />
                            <h3 className="text-xl font-bold mb-2">Nenhum resultado encontrado</h3>
                            <p className="text-muted-foreground text-center max-w-md">
                              Não há opções de financiamento disponíveis para os filtros selecionados. Tente selecionar
                              outro método de pagamento ou banco.
                            </p>
                          </div>
                        )}
                      </TabsContent>
                    </Tabs>
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-96 bg-white dark:bg-gray-800 rounded-lg border p-8">
                  <HelpCircle className="h-16 w-16 text-muted-foreground mb-4" />
                  <h3 className="text-xl font-bold mb-2">Nenhum resultado encontrado</h3>
                  <p className="text-muted-foreground text-center max-w-md">
                    Não foi possível encontrar opções de financiamento com os parâmetros selecionados. Tente ajustar os
                    valores ou selecionar diferentes métodos de pagamento.
                  </p>
                  <Button className="mt-6" onClick={runSimulation}>
                    Tentar novamente
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t py-6 mt-12">
        <div className="container flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-2 font-bold">
            <Sun className="h-5 w-5 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </div>
          <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/ai/recommendations/route.ts" isEdit="true" isMerged="true"
import type { NextRequest } from "next/server"
import { errorHandler } from "@/lib/middleware/error-handler"
import { logger } from "@/lib/utils/logger"
import { ApiResponse } from "@/lib/api/response"
import { HttpStatus } from "@/lib/api/status-codes"

/**
 * POST /api/ai/recommendations
 * Generates personalized financial recommendations using AI
 */
export async function POST(req: NextRequest) {
  return errorHandler(req, async () => {
    try {
      // Extract request body
      const body = await req.json()

      const { simulationResults, projectValue, energySavings, userPreferences } = body

      if (!simulationResults || !Array.isArray(simulationResults) || simulationResults.length === 0) {
        return ApiResponse.error("Invalid simulation results", HttpStatus.BAD_REQUEST, "INVALID_RESULTS")
      }

      logger.info("Generating AI recommendations", {
        resultCount: simulationResults.length,
        projectValue,
        energySavings,
      })

      // This would normally call an AI service to generate personalized recommendations
      // For now, we'll use a simple algorithm to generate recommendations

      const recommendations = generateRecommendations(simulationResults, projectValue, energySavings, userPreferences)

      return ApiResponse.success(recommendations)
    } catch (error) {
      logger.error("Error generating AI recommendations", error)
      return ApiResponse.error(
        "Failed to generate recommendations",
        HttpStatus.INTERNAL_SERVER_ERROR,
        "RECOMMENDATION_ERROR",
      )
    }
  })
}

/**
 * Generate financial recommendations based on simulation results
 * In a real implementation, this would use an AI model to generate personalized recommendations
 */
function generateRecommendations(
  simulationResults: any[],
  projectValue: number,
  energySavings: number,
  userPreferences?: {
    riskTolerance?: "low" | "medium" | "high"
    investmentHorizon?: "short" | "medium" | "long"
    cashFlowPriority?: "low" | "medium" | "high"
  },
) {
  const riskTolerance = userPreferences?.riskTolerance || "medium"
  const investmentHorizon = userPreferences?.investmentHorizon || "medium"
  const cashFlowPriority = userPreferences?.cashFlowPriority || "medium"

  // Sort results by different metrics
  const byROI = [...simulationResults].sort((a, b) => b.roi - a.roi)
  const byPayback = [...simulationResults].sort((a, b) => a.paybackMonths - b.paybackMonths)
  const byMonthlyPayment = [...simulationResults]
    .filter((r) => r.monthlyPayment > 0)
    .sort((a, b) => a.monthlyPayment - b.monthlyPayment)
  const byNPV = [...simulationResults].sort((a, b) => b.npv - a.npv)

  const recommendations = []

  // Based on risk tolerance and investment horizon, select appropriate recommendations
  if (riskTolerance === "low") {
    // Low risk tolerance prefers secure investments with predictable returns
    recommendations.push({
      title: "Opção Mais Segura",
      description: "Esta opção oferece o menor risco financeiro",
      result: byPayback[0],
      reason:
        "Para investidores com baixa tolerância ao risco, esta opção oferece o período de payback mais curto, minimizando o tempo de exposição ao risco.",
      highlights: [
        `Payback em apenas ${Math.floor(byPayback[0].paybackMonths / 12)} anos e ${byPayback[0].paybackMonths % 12} meses`,
        `Economia mensal garantida de R$ ${byPayback[0].monthlySavings.toFixed(0)}`,
      ],
    })
  }

  if (investmentHorizon === "long") {
    // Long investment horizon prioritizes total return
    recommendations.push({
      title: "Melhor Retorno a Longo Prazo",
      description: "Maximize seu retorno ao longo de 25 anos",
      result: byROI[0],
      reason:
        "Para um horizonte de investimento longo, esta opção maximiza seu retorno total, mesmo que demore um pouco mais para recuperar o investimento inicial.",
      highlights: [
        `ROI de ${byROI[0].roi.toFixed(2)}%`,
        `Economia total de R$ ${byROI[0].energySavings25Years.toFixed(0)} em 25 anos`,
      ],
    })
  }

  if (cashFlowPriority === "high") {
    // High cash flow priority needs lower monthly payments
    recommendations.push({
      title: "Melhor Fluxo de Caixa",
      description: "Minimize seus pagamentos mensais",
      result: byMonthlyPayment[0],
      reason:
        "Para priorizar seu fluxo de caixa, esta opção oferece o menor pagamento mensal, facilitando o orçamento mesmo que o período total seja mais longo.",
      highlights: [
        `Pagamento mensal de apenas R$ ${byMonthlyPayment[0].monthlyPayment.toFixed(0)}`,
        `${byMonthlyPayment[0].downPayment > 0 ? `Entrada de R$ ${byMonthlyPayment[0].downPayment.toFixed(0)}` : "Sem entrada significativa"}`,
      ],
    })
  }

  // If no specific preferences, provide balanced recommendation
  if (recommendations.length === 0) {
    recommendations.push({
      title: "Recomendação Equilibrada",
      description: "Melhor equilíbrio entre retorno e segurança",
      result: byNPV[0],
      reason:
        "Esta opção oferece o melhor equilíbrio entre retorno financeiro, tempo de payback e fluxo de caixa, maximizando o valor presente líquido do seu investimento.",
      highlights: [
        `VPL de R$ ${byNPV[0].npv.toFixed(0)}`,
        `ROI de ${byNPV[0].roi.toFixed(2)}%`,
        `Payback em ${Math.floor(byNPV[0].paybackMonths / 12)} anos e ${byNPV[0].paybackMonths % 12} meses`,
      ],
    })
  }

  return recommendations
}
[V0_FILE]typescriptreact:file="components/owner-profiles.tsx" isEdit="true" isMerged="true"
"use client"

import { CardFooter } from "@/components/ui/card"

import { useState } from "react"
import {
  Mail,
  Phone,
  Sun,
  Award,
  MapPin,
  ChevronDown,
  ChevronUp,
  Filter,
  Linkedin,
  Twitter,
  Facebook,
  Github,
  Wallet,
  Zap,
  Smartphone,
  Star,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import { Badge } from "@/components/ui/badge"

export default function OwnerProfiles() {
  const [selectedRegion, setSelectedRegion] = useState<string | null>(null)
  const [expandedGuru, setExpandedGuru] = useState<number | null>(null)

  const solarGurus = [
    {
      id: 1,
      name: "Fernanda Araújo",
      region: "Nordeste",
      regionEmoji: "🏖️",
      regionColor: "bg-yellow-500",
      regionDescription: "Sol abundante e praias paradisíacas",
      email: "fernanda.araujo@solaryello.com.br",
      phone: "(81) 98765-4321",
      projects: 47,
      solarProjects: 32,
      specialization: "Especialista em Sucesso do Cliente Residencial e Otimização Energética",
      image: "/placeholder.svg?height=100&width=100",
      initials: "FA",
      memoji: "👩‍🦱",
      bio: "Especialista em energia solar com mais de 10 anos de experiência no Nordeste brasileiro. Pioneira em soluções adaptadas ao clima tropical e alta incidência solar.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 2,
      name: "Erick Moreira",
      region: "Centro-Oeste",
      regionEmoji: "🌾",
      regionColor: "bg-green-500",
      regionDescription: "Cerrado e agronegócio sustentável",
      email: "erick.moreira@solaryello.com.br",
      phone: "(62) 98765-5678",
      projects: 38,
      solarProjects: 25,
      specialization: "Consultor de Sucesso do Cliente e Inovação em Projetos Agro",
      image: "/placeholder.svg?height=100&width=100",
      initials: "EM",
      memoji: "👨‍💼",
      bio: "Desenvolvedor de projetos solares para o agronegócio, com foco em sustentabilidade e eficiência energética. Especialista em usinas solares de grande escala para fazendas.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 3,
      name: "Renato Silva",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Grandes metrópoles e indústrias",
      email: "renato.silva@solaryello.com.br",
      phone: "(11) 98765-9012",
      projects: 56,
      solarProjects: 41,
      specialization: "Arquiteto de Soluções e Experiência do Cliente em Integração Urbana",
      image: "/placeholder.svg?height=100&width=100",
      initials: "RS",
      memoji: "👨‍🔧",
      bio: "Engenheiro especializado em integração de sistemas solares em edifícios urbanos. Desenvolveu soluções inovadoras para prédios históricos e arranha-céus em São Paulo e Rio de Janeiro.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 4,
      name: "Hugo Tabat",
      region: "Sul",
      regionEmoji: "🍇",
      regionColor: "bg-purple-500",
      regionDescription: "Clima temperado e tradições europeias",
      email: "hugo.tabat@solaryello.com.br",
      phone: "(51) 98765-3456",
      projects: 42,
      solarProjects: 30,
      specialization: "Estrategista de Sucesso do Cliente e Otimização de Sistemas Híbridos",
      image: "/placeholder.svg?height=100&width=100",
      initials: "HT",
      memoji: "👨‍🦰",
      bio: "Pioneiro em sistemas híbridos que combinam energia solar e eólica, adaptados ao clima variável da região Sul. Especialista em soluções para áreas rurais e pequenas propriedades.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 5,
      name: "Eliza Natural",
      region: "Norte",
      regionEmoji: "🌴",
      regionColor: "bg-emerald-500",
      regionDescription: "Amazônia e biodiversidade",
      email: "eliza.natural@solaryello.com.br",
      phone: "(92) 98765-7890",
      projects: 35,
      solarProjects: 22,
      specialization: "Gerente de Experiência do Cliente e Impacto Social em Projetos Sustentáveis",
      image: "/placeholder.svg?height=100&width=100",
      initials: "EN",
      memoji: "👩‍🦱",
      bio: "Desenvolvedora de soluções solares para comunidades remotas na Amazônia. Trabalha com tecnologias sustentáveis que respeitam o meio ambiente e as culturas locais.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 6,
      name: "Kris Moreira",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Matriz Rio de Janeiro",
      email: "kris.moreira@solaryello.com.br",
      phone: "(21) 98765-4321",
      projects: 42,
      solarProjects: 28,
      specialization: "Coordenadora de Estratégias de Sucesso do Cliente Baseadas em Dados",
      image: "/placeholder.svg?height=100&width=100",
      initials: "KM",
      memoji: "👩‍💻",
      bio: "Especialista em análise de dados para otimização de projetos solares. Coordena estratégias baseadas em dados para maximizar o desempenho e ROI de instalações fotovoltaicas.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 7,
      name: "Suellen Verônica",
      region: "Nordeste",
      regionEmoji: "🏖️",
      regionColor: "bg-yellow-500",
      regionDescription: "Remoto Jeremoabo-BA",
      email: "suellen.veronica@solaryello.com.br",
      phone: "(75) 98765-4321",
      projects: 38,
      solarProjects: 25,
      specialization: "Especialista em Conformidade Documental e Experiência Legal do Cliente",
      image: "/placeholder.svg?height=100&width=100",
      initials: "SV",
      memoji: "👩‍⚖️",
      bio: "Especialista em documentação legal e contratos para projetos solares. Trabalha remotamente garantindo conformidade regulatória e agilidade nos processos burocráticos.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 8,
      name: "Jhonatha Valeriano",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Matriz Rio de Janeiro",
      email: "jhonatha.valeriano@solaryello.com.br",
      phone: "(21) 98765-8765",
      projects: 45,
      solarProjects: 32,
      specialization: "Analista de Produto e Defensor da Experiência do Usuário",
      image: "/placeholder.svg?height=100&width=100",
      initials: "JV",
      memoji: "👨‍💼",
      bio: "Analista de produto especializado em soluções fotovoltaicas. Responsável por avaliar e implementar novas tecnologias solares, garantindo a melhor experiência para os clientes.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 9,
      name: "Fernando Bold",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Matriz Rio de Janeiro",
      email: "fernando.bold@solaryello.com.br",
      phone: "(21) 99876-5432",
      projects: 120,
      solarProjects: 85,
      specialization: "CEO e Líder Visionário de Sucesso e Satisfação do Cliente",
      image: "/placeholder.svg?height=100&width=100",
      initials: "FB",
      memoji: "👨‍💼",
      bio: "Fundador da Yello Solar com visão pioneira no mercado de energia renovável. Lidera a estratégia de expansão nacional e internacional da empresa, com foco em inovação e sustentabilidade.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
  ]

  const filteredGurus = selectedRegion ? solarGurus.filter((guru) => guru.region === selectedRegion) : solarGurus

  const toggleExpand = (id: number) => {
    if (expandedGuru === id) {
      setExpandedGuru(null)
    } else {
      setExpandedGuru(id)
    }
  }

  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

  const item = {
    hidden: { y: 20, opacity: 0 },
    show: { y: 0, opacity: 1 },
  }

  return (
    <section id="owners" className="py-16 md:py-24">
      <div className="container">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8"
        >
          <div>
            <h2 className="text-3xl font-bold tracking-tight">
              Gurus Solares
              <motion.span
                initial={{ opacity: 0, scale: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.3, type: "spring" }}
                className="inline-block ml-2"
              >
                ☀️
              </motion.span>
            </h2>
            <p className="mt-2 text-lg text-muted-foreground max-w-2xl">
              Conheça nossos consultores especialistas em energia solar por região do Brasil
            </p>
          </div>
          <Button variant="outline" className="group">
            <span>Ver Todos os Especialistas</span>
            <Sun className="ml-2 h-4 w-4 group-hover:rotate-45 transition-transform duration-300" />
          </Button>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mb-6"
        >
          <div className="flex items-center gap-2 mb-4">
            <Filter className="h-4 w-4" />
            <span className="font-medium">Filtrar por região:</span>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button
              variant={selectedRegion === null ? "default" : "outline"}
              size="sm"
              onClick={() => setSelectedRegion(null)}
              className="transition-all duration-300"
            >
              <span className="mr-1">🌎</span> Todas as Regiões
            </Button>
            {Array.from(new Set(solarGurus.map((guru) => guru.region))).map((region) => {
              const regionGuru = solarGurus.find((guru) => guru.region === region)
              const gurusInRegion = solarGurus.filter((guru) => guru.region === region).length
              return (
                <Button
                  key={`filter-${region}`}
                  variant={selectedRegion === region ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedRegion(region as string)}
                  className={`transition-all duration-300 ${selectedRegion === region ? regionGuru?.regionColor : ""}`}
                >
                  <span className="mr-1">{regionGuru?.regionEmoji}</span> {region}
                  <Badge className="ml-1.5 bg-white/20 text-white text-[10px] h-4 w-4 rounded-full p-0 flex items-center justify-center">
                    {gurusInRegion}
                  </Badge>
                </Button>
              )
            })}
          </div>
        </motion.div>

        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
          variants={container}
          initial="hidden"
          animate="show"
        >
          {filteredGurus.map((guru) => (
            <motion.div
              key={guru.id}
              variants={item}
              whileHover={{ y: -5 }}
              transition={{ type: "spring", stiffness: 300 }}
            >
              <Card className="overflow-hidden h-full transition-all duration-300 hover:shadow-lg relative group">
                <div className={`${guru.regionColor} h-3 w-full transition-all duration-300 group-hover:h-5`}></div>
                <div className="relative">
                  <motion.div
                    className="absolute -top-4 right-4 text-4xl cursor-pointer"
                    whileHover={{ scale: 1.2 }}
                    whileTap={{ scale: 0.9 }}
                    role="img"
                    aria-label={`Memoji de ${guru.name}`}
                  >
                    {guru.memoji}
                  </motion.div>
                  <motion.div
                    className="absolute -top-4 left-4 flex items-center gap-1 bg-white dark:bg-gray-800 rounded-full px-3 py-1 shadow-md"
                    whileHover={{ scale: 1.05 }}
                  >
                    <span role="img" aria-label={`Região ${guru.region}`} className="text-lg">
                      {guru.regionEmoji}
                    </span>
                    <span className="font-bold text-sm">{guru.region}</span>
                  </motion.div>
                </div>
                <CardHeader className="flex flex-row items-center gap-4 pt-8">
                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                    <Avatar className="h-14 w-14 border-2 border-white shadow-md cursor-pointer">
                      <AvatarImage src={guru.image || "/placeholder.svg"} alt={guru.name} />
                      <AvatarFallback>{guru.initials}</AvatarFallback>
                    </Avatar>
                  </motion.div>
                  <div>
                    <CardTitle>{guru.name}</CardTitle>
                    <CardDescription className="flex items-center gap-1 mt-1">
                      <MapPin className="h-3.5 w-3.5" />
                      <span>{guru.regionDescription}</span>
                    </CardDescription>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center gap-2">
                      <motion.div
                        whileHover={{ rotate: 15 }}
                        className="bg-yellow-100 dark:bg-yellow-900 p-1.5 rounded-full"
                      >
                        <Award className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
                      </motion.div>
                      <span className="text-sm font-medium">{guru.specialization}</span>
                    </div>

                    <div className="grid grid-cols-2 gap-2 mt-3">
                      <motion.div
                        whileHover={{ scale: 1.05 }}
                        className="bg-gray-100 dark:bg-gray-800 rounded-lg p-2 text-center"
                      >
                        <div className="text-lg font-bold text-yellow-600">{guru.solarProjects}</div>
                        <div className="text-xs text-gray-500">Projetos Solares</div>
                      </motion.div>
                      <motion.div
                        whileHover={{ scale: 1.05 }}
                        className="bg-gray-100 dark:bg-gray-800 rounded-lg p-2 text-center"
                      >
                        <div className="text-lg font-bold text-blue-600">{guru.projects}</div>
                        <div className="text-xs text-gray-500">Clientes Atendidos</div>
                      </motion.div>
                    </div>

                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{
                        height: expandedGuru === guru.id ? "auto" : 0,
                        opacity: expandedGuru === guru.id ? 1 : 0,
                      }}
                      transition={{ duration: 0.3 }}
                      className="overflow-hidden"
                    >
                      <div className="pt-3 pb-1">
                        <p className="text-sm text-muted-foreground">{guru.bio}</p>
                      </div>
                    </motion.div>

                    <div className="flex items-center gap-2 pt-2">
                      <Mail className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm">{guru.email}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Phone className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm">{guru.phone}</span>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex flex-col gap-4 border-t pt-4 mt-2">
                  <div className="flex justify-between items-center w-full">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => toggleExpand(guru.id)}
                      className="flex items-center gap-1"
                    >
                      {expandedGuru === guru.id ? (
                        <>
                          <span>Menos</span>
                          <ChevronUp className="h-4 w-4" />
                        </>
                      ) : (
                        <>
                          <span>Mais</span>
                          <ChevronDown className="h-4 w-4" />
                        </>
                      )}
                    </Button>
                    <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                      <Button
                        size="sm"
                        className={`text-white ${guru.regionColor} hover:opacity-90 transition-all duration-300`}
                      >
                        <span>Consultar</span>
                        <span className="ml-1">{guru.regionEmoji}</span>
                      </Button>
                    </motion.div>
                  </div>

                  <div className="flex justify-center gap-3 w-full">
                    <motion.a
                      href={guru.socialLinks.linkedin}
                      whileHover={{ scale: 1.2 }}
                      className="text-blue-600 hover:text-blue-800"
                    >
                      <Linkedin className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.twitter}
                      whileHover={{ scale: 1.2 }}
                      className="text-sky-500 hover:text-sky-700"
                    >
                      <Twitter className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.facebook}
                      whileHover={{ scale: 1.2 }}
                      className="text-blue-800 hover:text-blue-900"
                    >
                      <Facebook className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.github}
                      whileHover={{ scale: 1.2 }}
                      className="text-gray-800 dark:text-gray-200 hover:text-black dark:hover:text-white"
                    >
                      <Github className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.huggingface}
                      whileHover={{ scale: 1.2 }}
                      className="text-yellow-600 hover:text-yellow-800"
                    >
                      <span className="text-xs font-bold">🤗</span>
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.f6s}
                      whileHover={{ scale: 1.2 }}
                      className="text-purple-600 hover:text-purple-800"
                    >
                      <span className="text-xs font-bold">F6S</span>
                    </motion.a>
                  </div>
                </CardFooter>
              </Card>
            </motion.div>
          ))}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.5 }}
          className="mt-12"
        >
          <div className="mb-6">
            <h3 className="text-xl font-bold text-center">Dashboard Comparativo Regional</h3>
            <p className="text-sm text-muted-foreground text-center mt-1">
              Análise de KPIs solares por região para otimização de investimentos
            </p>
          </div>

          {/* Regional Selection Tabs */}
          <div className="flex overflow-x-auto pb-2 mb-6 gap-2 justify-center">
            {solarGurus.map((guru, index) => (
              <motion.div
                key={`region-tab-${guru.id}`}
                className={`flex-shrink-0 rounded-full px-4 py-2 cursor-pointer flex items-center gap-2 ${
                  selectedRegion === guru.region
                    ? `${guru.regionColor} text-white`
                    : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                }`}
                whileHover={{ y: -2 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setSelectedRegion(guru.region)}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 * index }}
              >
                <motion.div className="text-xl" whileHover={{ rotate: 10 }}>
                  {guru.regionEmoji}
                </motion.div>
                <span className="font-medium text-sm">{guru.region}</span>
              </motion.div>
            ))}
          </div>

          {/* KPI Dashboard */}
          <motion.div
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3, staggerChildren: 0.1 }}
          >
            {/* Potencial Solar vs. Custos de Energia */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-yellow-100 dark:bg-yellow-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Sun className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Potencial Solar vs. Custos</h4>
                </div>
                <Badge className="bg-green-500 text-white cursor-pointer hover:bg-green-600 transition-colors">
                  Excelente
                </Badge>
              </div>

              <div className="space-y-3">
                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Irradiação Solar</span>
                    <motion.span className="font-medium" whileHover={{ color: "#f59e0b" }}>
                      5.8 kWh/m²/dia
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-yellow-500"
                      initial={{ width: 0 }}
                      animate={{ width: "85%" }}
                      transition={{ duration: 1, delay: 0.5 }}
                    />
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Custo Energia Local</span>
                    <motion.span className="font-medium" whileHover={{ color: "#ef4444" }}>
                      R$ 0,89/kWh
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-red-500"
                      initial={{ width: 0 }}
                      animate={{ width: "75%" }}
                      transition={{ duration: 1, delay: 0.6 }}
                    />
                  </div>
                </div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(245, 158, 11, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Índice Custo-Benefício</span>
                    <motion.span className="text-sm font-bold text-green-600" whileHover={{ scale: 1.2 }}>
                      9.2/10
                    </motion.span>
                  </div>
                </motion.div>
              </div>
            </motion.div>

            {/* Custos Concessionária */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-blue-100 dark:bg-blue-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Wallet className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Custos Concessionária</h4>
                </div>
                <Badge className="bg-yellow-500 text-black cursor-pointer hover:bg-yellow-600 transition-colors">
                  Moderado
                </Badge>
              </div>

              <div className="space-y-3">
                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Tarifa Média</span>
                  <span className="text-xs font-medium">R$ 0,89/kWh</span>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Bandeira Frequente</span>
                  <div className="flex items-center gap-1">
                    <motion.div className="w-3 h-3 rounded-full bg-yellow-500" whileHover={{ scale: 1.5 }}></motion.div>
                    <span className="text-xs font-medium">Amarela</span>
                  </div>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Reajuste Anual</span>
                  <motion.span className="text-xs font-medium text-red-500" whileHover={{ scale: 1.2 }}>
                    +8.5%
                  </motion.span>
                </motion.div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Economia Potencial</span>
                    <motion.span className="text-sm font-bold text-green-600" whileHover={{ scale: 1.2 }}>
                      R$ 950/mês
                    </motion.span>
                  </div>
                </motion.div>
              </div>
            </motion.div>

            {/* Níveis de Digitalização */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-purple-100 dark:bg-purple-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Smartphone className="h-5 w-5 text-purple-600 dark:text-purple-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Digitalização Regional</h4>
                </div>
                <Badge className="bg-green-500 text-white cursor-pointer hover:bg-green-600 transition-colors">
                  Alto
                </Badge>
              </div>

              <div className="space-y-3">
                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Medidores Inteligentes</span>
                    <motion.span className="font-medium" whileHover={{ color: "#10b981" }}>
                      78%
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-green-500"
                      initial={{ width: 0 }}
                      animate={{ width: "78%" }}
                      transition={{ duration: 1, delay: 0.7 }}
                    />
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Automação Residencial</span>
                    <motion.span className="font-medium" whileHover={{ color: "#10b981" }}>
                      65%
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-green-500"
                      initial={{ width: 0 }}
                      animate={{ width: "65%" }}
                      transition={{ duration: 1, delay: 0.8 }}
                    />
                  </div>
                </div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(168, 85, 247, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Compatibilidade Solar</span>
                    <div className="flex">
                      {[1, 2, 3, 4, 5].map((star) => (
                        <motion.div key={star} whileHover={{ scale: 1.5 }} whileTap={{ scale: 0.8 }}>
                          <Star className="h-3 w-3 text-yellow-500 fill-yellow-500" />
                        </motion.div>
                      ))}
                    </div>
                  </div>
                </motion.div>
              </div>
            </motion.div>

            {/* Cobertura da Rede Elétrica */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-green-100 dark:bg-green-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Zap className="h-5 w-5 text-green-600 dark:text-green-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Cobertura da Rede</h4>
                </div>
                <Badge className="bg-green-500 text-white cursor-pointer hover:bg-green-600 transition-colors">
                  Excelente
                </Badge>
              </div>

              <div className="space-y-3">
                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Estabilidade</span>
                  <div className="flex items-center gap-1">
                    <motion.div
                      className="w-3 h-3 rounded-full bg-green-500"
                      whileHover={{ scale: 1.5 }}
                      animate={{
                        scale: [1, 1.2, 1],
                        opacity: [1, 0.8, 1],
                      }}
                      transition={{
                        repeat: Number.POSITIVE_INFINITY,
                        duration: 2,
                      }}
                    ></motion.div>
                    <span className="text-xs font-medium">99.2%</span>
                  </div>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Quedas de Energia</span>
                  <span className="text-xs font-medium">2.3/ano</span>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Capacidade de Injeção</span>
                  <div className="flex items-center gap-1">
                    <motion.div className="w-3 h-3 rounded-full bg-green-500" whileHover={{ scale: 1.5 }}></motion.div>
                    <span className="text-xs font-medium">Excelente</span>
                  </div>
                </motion.div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Compatibilidade GD</span>
                    <motion.span
                      className="text-sm font-bold text-green-600"
                      whileHover={{ scale: 1.2 }}
                      whileTap={{ scale: 0.9 }}
                    >
                      100%
                    </motion.span>
                  </div>
                </motion.div>
              </div>
            </motion.div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-security.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { toast } from "@/components/ui/use-toast"
import { Shield, Key, Smartphone, AlertTriangle } from "lucide-react"

export function UserSecurity() {
  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
  const [passwordResetSent, setPasswordResetSent] = useState(false)
  const [loading, setLoading] = useState(false)

  const handlePasswordReset = () => {
    setLoading(true)
    // Simulate API call
    setTimeout(() => {
      setPasswordResetSent(true)
      setLoading(false)
      toast({
        title: "Link de redefinição enviado",
        description: "Verifique seu e-mail para redefinir sua senha.",
      })
    }, 1500)
  }

  const handleTwoFactorToggle = (checked: boolean) => {
    setTwoFactorEnabled(checked)
    toast({
      title: `Autenticação de dois fatores ${checked ? "ativada" : "desativada"}`,
      description: checked
        ? "Sua conta agora está mais segura."
        : "Recomendamos ativar a autenticação de dois fatores para maior segurança.",
    })
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Segurança da Conta</h3>
        <p className="text-sm text-muted-foreground">Gerencie as configurações de segurança da sua conta</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Key className="h-5 w-5 text-yellow-500" />
            Senha e Autenticação
          </CardTitle>
          <CardDescription>Gerencie sua senha e métodos de autenticação</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="current-password">Senha Atual</Label>
            <Input id="current-password" type="password" placeholder="••••••••" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="new-password">Nova Senha</Label>
            <Input id="new-password" type="password" placeholder="••••••••" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="confirm-password">Confirmar Nova Senha</Label>
            <Input id="confirm-password" type="password" placeholder="••••••••" />
          </div>

          <div className="flex items-center justify-between pt-4">
            <div className="flex items-center space-x-2">
              <Switch id="two-factor" checked={twoFactorEnabled} onCheckedChange={handleTwoFactorToggle} />
              <Label htmlFor="two-factor" className="cursor-pointer">
                Autenticação de dois fatores
              </Label>
            </div>
            <Button variant="link" size="sm" onClick={handlePasswordReset} disabled={loading || passwordResetSent}>
              {passwordResetSent ? "Link enviado" : "Esqueci minha senha"}
            </Button>
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full">Atualizar Senha</Button>
        </CardFooter>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Shield className="h-5 w-5 text-green-500" />
            Dispositivos Conectados
          </CardTitle>
          <CardDescription>Gerencie os dispositivos que têm acesso à sua conta</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="rounded-lg border p-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <Smartphone className="h-10 w-10 text-muted-foreground" />
                <div>
                  <p className="font-medium">iPhone 13 Pro</p>
                  <p className="text-xs text-muted-foreground">Rio de Janeiro, Brasil • Último acesso: Hoje, 14:32</p>
                </div>
              </div>
              <Button variant="outline" size="sm">
                Desconectar
              </Button>
            </div>
          </div>

          <div className="rounded-lg border p-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <Smartphone className="h-10 w-10 text-muted-foreground" />
                <div>
                  <p className="font-medium">MacBook Pro</p>
                  <p className="text-xs text-muted-foreground">São Paulo, Brasil • Último acesso: Ontem, 19:45</p>
                </div>
              </div>
              <Button variant="outline" size="sm">
                Desconectar
              </Button>
            </div>
          </div>
        </CardContent>
        <CardFooter>
          <Button variant="outline" className="w-full">
            Desconectar Todos os Dispositivos
          </Button>
        </CardFooter>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-red-500">
            <AlertTriangle className="h-5 w-5 text-red-500" />
            Zona de Perigo
          </CardTitle>
          <CardDescription>Ações irreversíveis para sua conta</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground mb-4">
            A exclusão da sua conta é permanente e removerá todos os seus dados, incluindo propriedades, transações e
            preferências.
          </p>
          <Button variant="destructive">Excluir Minha Conta</Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-notifications.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/use-toast"
import { Bell, Mail, MessageSquare, Phone, Calendar, Home, DollarSign, Sun } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function UserNotifications() {
  const [emailNotifications, setEmailNotifications] = useState({
    properties: true,
    messages: true,
    payments: true,
    marketing: false,
    system: true,
    solar: true,
  })

  const [pushNotifications, setPushNotifications] = useState({
    properties: true,
    messages: true,
    payments: false,
    marketing: false,
    system: false,
    solar: true,
  })

  const [smsNotifications, setSmsNotifications] = useState({
    properties: false,
    messages: false,
    payments: true,
    marketing: false,
    system: true,
    solar: false,
  })

  const handleSaveChanges = () => {
    toast({
      title: "Preferências de notificação atualizadas",
      description: "Suas configurações de notificação foram salvas com sucesso.",
    })
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Preferências de Notificação</h3>
        <p className="text-sm text-muted-foreground">Gerencie como e quando você recebe notificações</p>
      </div>

      <Tabs defaultValue="email">
        <TabsList className="grid grid-cols-3 mb-4">
          <TabsTrigger value="email" className="flex items-center gap-2">
            <Mail className="h-4 w-4" />
            <span>Email</span>
          </TabsTrigger>
          <TabsTrigger value="push" className="flex items-center gap-2">
            <Bell className="h-4 w-4" />
            <span>Push</span>
          </TabsTrigger>
          <TabsTrigger value="sms" className="flex items-center gap-2">
            <Phone className="h-4 w-4" />
            <span>SMS</span>
          </TabsTrigger>
        </TabsList>

        <TabsContent value="email">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Mail className="h-5 w-5 text-blue-500" />
                Notificações por Email
              </CardTitle>
              <CardDescription>Escolha quais emails você deseja receber</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Home className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-properties" className="cursor-pointer">
                    <div>Atualizações de Propriedades</div>
                    <p className="text-xs text-muted-foreground">Novas propriedades, alterações de preço, etc.</p>
                  </Label>
                </div>
                <Switch
                  id="email-properties"
                  checked={emailNotifications.properties}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, properties: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <MessageSquare className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-messages" className="cursor-pointer">
                    <div>Mensagens</div>
                    <p className="text-xs text-muted-foreground">Novas mensagens de proprietários ou inquilinos</p>
                  </Label>
                </div>
                <Switch
                  id="email-messages"
                  checked={emailNotifications.messages}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, messages: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <DollarSign className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-payments" className="cursor-pointer">
                    <div>Pagamentos</div>
                    <p className="text-xs text-muted-foreground">Recibos, faturas e lembretes de pagamento</p>
                  </Label>
                </div>
                <Switch
                  id="email-payments"
                  checked={emailNotifications.payments}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, payments: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Sun className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-solar" className="cursor-pointer">
                    <div>Energia Solar</div>
                    <p className="text-xs text-muted-foreground">
                      Atualizações sobre seu sistema solar, economia e desempenho
                    </p>
                  </Label>
                </div>
                <Switch
                  id="email-solar"
                  checked={emailNotifications.solar}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, solar: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Bell className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-system" className="cursor-pointer">
                    <div>Sistema</div>
                    <p className="text-xs text-muted-foreground">Atualizações de segurança e alterações na conta</p>
                  </Label>
                </div>
                <Switch
                  id="email-system"
                  checked={emailNotifications.system}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, system: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Mail className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-marketing" className="cursor-pointer">
                    <div>Marketing</div>
                    <p className="text-xs text-muted-foreground">Novidades, promoções e dicas imobiliárias</p>
                  </Label>
                </div>
                <Switch
                  id="email-marketing"
                  checked={emailNotifications.marketing}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, marketing: checked })}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="push">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Bell className="h-5 w-5 text-yellow-500" />
                Notificações Push
              </CardTitle>
              <CardDescription>Notificações enviadas para seu dispositivo</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Home className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="push-properties" className="cursor-pointer">
                    <div>Atualizações de Propriedades</div>
                    <p className="text-xs text-muted-foreground">Novas propriedades, alterações de preço, etc.</p>
                  </Label>
                </div>
                <Switch
                  id="push-properties"
                  checked={pushNotifications.properties}
                  onCheckedChange={(checked) => setPushNotifications({ ...pushNotifications, properties: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <MessageSquare className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="push-messages" className="cursor-pointer">
                    <div>Mensagens</div>
                    <p className="text-xs text-muted-foreground">Novas mensagens de proprietários ou inquilinos</p>
                  </Label>
                </div>
                <Switch
                  id="push-messages"
                  checked={pushNotifications.messages}
                  onCheckedChange={(checked) => setPushNotifications({ ...pushNotifications, messages: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Sun className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="push-solar" className="cursor-pointer">
                    <div>Energia Solar</div>
                    <p className="text-xs text-muted-foreground">
                      Atualizações sobre seu sistema solar, economia e desempenho
                    </p>
                  </Label>
                </div>
                <Switch
                  id="push-solar"
                  checked={pushNotifications.solar}
                  onCheckedChange={(checked) => setPushNotifications({ ...pushNotifications, solar: checked })}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="sms">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Phone className="h-5 w-5 text-green-500" />
                Notificações por SMS
              </CardTitle>
              <CardDescription>Mensagens de texto enviadas para seu celular</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <DollarSign className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="sms-payments" className="cursor-pointer">
                    <div>Pagamentos</div>
                    <p className="text-xs text-muted-foreground">Lembretes de pagamento e confirmações</p>
                  </Label>
                </div>
                <Switch
                  id="sms-payments"
                  checked={smsNotifications.payments}
                  onCheckedChange={(checked) => setSmsNotifications({ ...smsNotifications, payments: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Bell className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="sms-system" className="cursor-pointer">
                    <div>Sistema</div>
                    <p className="text-xs text-muted-foreground">Alertas de segurança e códigos de verificação</p>
                  </Label>
                </div>
                <Switch
                  id="sms-system"
                  checked={smsNotifications.system}
                  onCheckedChange={(checked) => setSmsNotifications({ ...smsNotifications, system: checked })}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5 text-purple-500" />
            Frequência de Notificações
          </CardTitle>
          <CardDescription>Defina com que frequência você deseja receber notificações</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="flex items-center space-x-2">
                <input type="radio" id="freq-realtime" name="frequency" className="form-radio" defaultChecked />
                <Label htmlFor="freq-realtime">Tempo real</Label>
              </div>
              <div className="flex items-center space-x-2">
                <input type="radio" id="freq-daily" name="frequency" className="form-radio" />
                <Label htmlFor="freq-daily">Resumo diário</Label>
              </div>
              <div className="flex items-center space-x-2">
                <input type="radio" id="freq-weekly" name="frequency" className="form-radio" />
                <Label htmlFor="freq-weekly">Resumo semanal</Label>
              </div>
            </div>
          </div>
        </CardContent>
        <CardFooter>
          <Button onClick={handleSaveChanges} className="w-full">
            Salvar Alterações
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-payment-methods.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, 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 { toast } from "@/components/ui/use-toast"
import { CreditCard, Plus, Trash2, Check, AlertCircle, CreditCardIcon } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"

export function UserPaymentMethods() {
  const [paymentMethods, setPaymentMethods] = useState([
    {
      id: "1",
      type: "credit",
      name: "Mastercard terminado em 4567",
      cardNumber: "•••• •••• •••• 4567",
      expiryDate: "12/25",
      isDefault: true,
      brand: "mastercard",
    },
    {
      id: "2",
      type: "credit",
      name: "Visa terminado em 8901",
      cardNumber: "•••• •••• •••• 8901",
      expiryDate: "09/24",
      isDefault: false,
      brand: "visa",
    },
  ])

  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newCard, setNewCard] = useState({
    cardNumber: "",
    cardholderName: "",
    expiryDate: "",
    cvv: "",
    isDefault: false,
  })

  const handleAddCard = () => {
    // In a real app, this would validate and process the card with a payment processor
    const newPaymentMethod = {
      id: Math.random().toString(36).substring(7),
      type: "credit",
      name: `Cartão terminado em ${newCard.cardNumber.slice(-4)}`,
      cardNumber: `•••• •••• •••• ${newCard.cardNumber.slice(-4)}`,
      expiryDate: newCard.expiryDate,
      isDefault: newCard.isDefault,
      brand: "visa", // This would be determined by the card number in a real app
    }

    setPaymentMethods([...paymentMethods, newPaymentMethod])

    // Reset form
    setNewCard({
      cardNumber: "",
      cardholderName: "",
      expiryDate: "",
      cvv: "",
      isDefault: false,
    })

    setShowAddDialog(false)

    toast({
      title: "Cartão adicionado",
      description: "Seu novo método de pagamento foi adicionado com sucesso.",
    })
  }

  const handleDeleteCard = (id: string) => {
    setPaymentMethods(paymentMethods.filter((method) => method.id !== id))

    toast({
      title: "Cartão removido",
      description: "O método de pagamento foi removido com sucesso.",
    })
  }

  const handleSetDefault = (id: string) => {
    setPaymentMethods(
      paymentMethods.map((method) => ({
        ...method,
        isDefault: method.id === id,
      })),
    )

    toast({
      title: "Cartão padrão atualizado",
      description: "Seu método de pagamento padrão foi atualizado.",
    })
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Métodos de Pagamento</h3>
        <p className="text-sm text-muted-foreground">Gerencie seus cartões e outras formas de pagamento</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <CreditCard className="h-5 w-5 text-blue-500" />
            Cartões Salvos
          </CardTitle>
          <CardDescription>Cartões de crédito e débito salvos para pagamentos rápidos</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {paymentMethods.length > 0 ? (
            paymentMethods.map((method) => (
              <div key={method.id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-gray-100 rounded-md flex items-center justify-center">
                    {method.brand === "visa" ? (
                      <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M22 10.5V13.5C22 17.09 19.09 20 15.5 20H8.5C4.91 20 2 17.09 2 13.5V10.5C2 6.91 4.91 4 8.5 4H15.5C19.09 4 22 6.91 22 10.5Z"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 9.5L15.5 9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M12 14.5L15.5 14.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 14.5H9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    ) : (
                      <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M22 10.5V13.5C22 17.09 19.09 20 15.5 20H8.5C4.91 20 2 17.09 2 13.5V10.5C2 6.91 4.91 4 8.5 4H15.5C19.09 4 22 6.91 22 10.5Z"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 9.5L15.5 9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M12 14.5L15.5 14.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 14.5H9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    )}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <p className="font-medium">{method.name}</p>
                      {method.isDefault && (
                        <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">
                          Padrão
                        </Badge>
                      )}
                    </div>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <span>{method.cardNumber}</span>
                      <span>•</span>
                      <span>Expira em {method.expiryDate}</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {!method.isDefault && (
                    <Button variant="outline" size="sm" onClick={() => handleSetDefault(method.id)} className="text-xs">
                      <Check className="h-3 w-3 mr-1" />
                      Definir como padrão
                    </Button>
                  )}
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleDeleteCard(method.id)}
                    className="text-red-500 hover:text-red-700 hover:bg-red-50"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <CreditCardIcon className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium">Nenhum cartão adicionado</h3>
              <p className="text-sm text-muted-foreground mt-1 mb-4">
                Você ainda não adicionou nenhum método de pagamento.
              </p>
              <Button onClick={() => setShowAddDialog(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Adicionar Cartão
              </Button>
            </div>
          )}
        </CardContent>
        <CardFooter>
          <Button onClick={() => setShowAddDialog(true)} className="w-full">
            <Plus className="h-4 w-4 mr-2" />
            Adicionar Novo Método de Pagamento
          </Button>
        </CardFooter>
      </Card>

      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Adicionar Cartão</DialogTitle>
            <DialogDescription>Adicione um novo cartão de crédito ou débito para pagamentos.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="cardNumber">Número do Cartão</Label>
              <Input
                id="cardNumber"
                placeholder="1234 5678 9012 3456"
                value={newCard.cardNumber}
                onChange={(e) => setNewCard({ ...newCard, cardNumber: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="cardholderName">Nome no Cartão</Label>
              <Input
                id="cardholderName"
                placeholder="NOME COMO ESTÁ NO CARTÃO"
                value={newCard.cardholderName}
                onChange={(e) => setNewCard({ ...newCard, cardholderName: e.target.value })}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="expiryDate">Data de Expiração</Label>
                <Input
                  id="expiryDate"
                  placeholder="MM/AA"
                  value={newCard.expiryDate}
                  onChange={(e) => setNewCard({ ...newCard, expiryDate: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="cvv">CVV</Label>
                <Input
                  id="cvv"
                  placeholder="123"
                  value={newCard.cvv}
                  onChange={(e) => setNewCard({ ...newCard, cvv: e.target.value })}
                />
              </div>
            </div>
            <div className="flex items-center space-x-2 pt-2">
              <input
                type="checkbox"
                id="isDefault"
                checked={newCard.isDefault}
                onChange={(e) => setNewCard({ ...newCard, isDefault: e.target.checked })}
                className="form-checkbox"
              />
              <Label htmlFor="isDefault">Definir como método de pagamento padrão</Label>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAddDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={handleAddCard}>Adicionar Cartão</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5 text-yellow-500" />
            Informações de Segurança
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            Seus dados de pagamento são criptografados e armazenados com segurança. Nunca compartilhamos suas
            informações financeiras com terceiros sem sua permissão explícita.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-api-keys.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, 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 { toast } from "@/components/ui/use-toast"
import { Key, Plus, Copy, RefreshCw, Trash2, Clock, AlertTriangle, Eye, EyeOff } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"

export function UserApiKeys() {
  const [apiKeys, setApiKeys] = useState([
    {
      id: "1",
      name: "Website Integration",
      key: "yk_live_1a2b3c4d5e6f7g8h9i0j",
      createdAt: "2023-10-15T14:30:00Z",
      lastUsed: "2023-11-01T09:45:00Z",
      permissions: ["read:properties", "read:solar"],
      status: "active",
    },
    {
      id: "2",
      name: "Mobile App",
      key: "yk_live_9i8h7g6f5e4d3c2b1a0",
      createdAt: "2023-09-20T10:15:00Z",
      lastUsed: "2023-11-02T16:20:00Z",
      permissions: ["read:properties", "write:properties", "read:solar", "write:solar"],
      status: "active",
    },
  ])

  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newApiKey, setNewApiKey] = useState({
    name: "",
    permissions: ["read:properties"],
  })

  const [showKeys, setShowKeys] = useState<Record<string, boolean>>({})

  const toggleKeyVisibility = (id: string) => {
    setShowKeys({
      ...showKeys,
      [id]: !showKeys[id],
    })
  }

  const handleCreateApiKey = () => {
    // In a real app, this would call an API to generate a new key
    const newKey = {
      id: Math.random().toString(36).substring(7),
      name: newApiKey.name,
      key: `yk_live_${Math.random().toString(36).substring(2, 15)}`,
      createdAt: new Date().toISOString(),
      lastUsed: null,
      permissions: newApiKey.permissions,
      status: "active",
    }

    setApiKeys([...apiKeys, newKey])

    // Reset form
    setNewApiKey({
      name: "",
      permissions: ["read:properties"],
    })

    setShowAddDialog(false)

    toast({
      title: "API Key criada",
      description: "Sua nova chave de API foi criada com sucesso.",
    })
  }

  const handleDeleteKey = (id: string) => {
    setApiKeys(apiKeys.filter((key) => key.id !== id))

    toast({
      title: "API Key removida",
      description: "A chave de API foi removida com sucesso.",
    })
  }

  const handleCopyKey = (key: string) => {
    navigator.clipboard.writeText(key)

    toast({
      title: "Chave copiada",
      description: "A chave de API foi copiada para a área de transferência.",
    })
  }

  const handleRegenerateKey = (id: string) => {
    // In a real app, this would call an API to regenerate the key
    setApiKeys(
      apiKeys.map((key) => {
        if (key.id === id) {
          return {
            ...key,
            key: `yk_live_${Math.random().toString(36).substring(2, 15)}`,
            createdAt: new Date().toISOString(),
            lastUsed: null,
          }
        }
        return key
      }),
    )

    toast({
      title: "API Key regenerada",
      description: "Sua chave de API foi regenerada com sucesso.",
    })
  }

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

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Chaves de API</h3>
        <p className="text-sm text-muted-foreground">Gerencie suas chaves de API para integração com outros sistemas</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Key className="h-5 w-5 text-purple-500" />
            Suas Chaves de API
          </CardTitle>
          <CardDescription>Chaves para acessar a API da Yello Solar programaticamente</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {apiKeys.length > 0 ? (
            apiKeys.map((apiKey) => (
              <div key={apiKey.id} className="border rounded-lg p-4 space-y-3">
                <div className="flex items-center justify-between">
                  <div>
                    <h4 className="font-medium">{apiKey.name}</h4>
                    <p className="text-xs text-muted-foreground">Criada em {formatDate(apiKey.createdAt)}</p>
                  </div>
                  <Badge
                    variant={apiKey.status === "active" ? "outline" : "secondary"}
                    className={apiKey.status === "active" ? "bg-green-50 text-green-700 border-green-200" : ""}
                  >
                    {apiKey.status === "active" ? "Ativa" : "Inativa"}
                  </Badge>
                </div>

                <div className="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 p-2 rounded">
                  <div className="flex-1 font-mono text-sm truncate">
                    {showKeys[apiKey.id] ? apiKey.key : apiKey.key.replace(/./g, "•")}
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => toggleKeyVisibility(apiKey.id)}
                    className="text-gray-500 hover:text-gray-700"
                  >
                    {showKeys[apiKey.id] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleCopyKey(apiKey.key)}
                    className="text-gray-500 hover:text-gray-700"
                  >
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>

                <div className="flex flex-wrap gap-1">
                  {apiKey.permissions.map((permission, index) => (
                    <Badge key={index} variant="secondary" className="text-xs">
                      {permission}
                    </Badge>
                  ))}
                </div>

                {apiKey.lastUsed && (
                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
                    <Clock className="h-3 w-3" />
                    <span>Último uso: {formatDate(apiKey.lastUsed)}</span>
                  </div>
                )}

                <div className="flex items-center gap-2 pt-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleRegenerateKey(apiKey.id)}
                    className="text-xs"
                  >
                    <RefreshCw className="h-3 w-3 mr-1" />
                    Regenerar
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleDeleteKey(apiKey.id)}
                    className="text-xs text-red-500 hover:text-red-700 hover:bg-red-50"
                  >
                    <Trash2 className="h-3 w-3 mr-1" />
                    Remover
                  </Button>
                </div>
              </div>
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <Key className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium">Nenhuma chave de API</h3>
              <p className="text-sm text-muted-foreground mt-1 mb-4">Você ainda não criou nenhuma chave de API.</p>
              <Button onClick={() => setShowAddDialog(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Criar Chave de API
              </Button>
            </div>
          )}
        </CardContent>
        <CardFooter>
          <Button onClick={() => setShowAddDialog(true)} className="w-full">
            <Plus className="h-4 w-4 mr-2" />
            Criar Nova Chave de API
          </Button>
        </CardFooter>
      </Card>

      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Criar Chave de API</DialogTitle>
            <DialogDescription>Crie uma nova chave de API para integrar com outros sistemas.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="apiKeyName">Nome da Chave</Label>
              <Input
                id="apiKeyName"
                placeholder="Ex: Website Integration"
                value={newApiKey.name}
                onChange={(e) => setNewApiKey({ ...newApiKey, name: e.target.value })}
              />
              <p className="text-xs text-muted-foreground">
                Um nome descritivo para identificar o propósito desta chave.
              </p>
            </div>

            <div className="space-y-2">
              <Label>Permissões</Label>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-read-properties" className="cursor-pointer">
                    read:properties
                  </Label>
                  <Switch
                    id="perm-read-properties"
                    checked={newApiKey.permissions.includes("read:properties")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "read:properties"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "read:properties"),
                        })
                      }
                    }}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-write-properties" className="cursor-pointer">
                    write:properties
                  </Label>
                  <Switch
                    id="perm-write-properties"
                    checked={newApiKey.permissions.includes("write:properties")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "write:properties"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "write:properties"),
                        })
                      }
                    }}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-read-solar" className="cursor-pointer">
                    read:solar
                  </Label>
                  <Switch
                    id="perm-read-solar"
                    checked={newApiKey.permissions.includes("read:solar")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "read:solar"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "read:solar"),
                        })
                      }
                    }}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-write-solar" className="cursor-pointer">
                    write:solar
                  </Label>
                  <Switch
                    id="perm-write-solar"
                    checked={newApiKey.permissions.includes("write:solar")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "write:solar"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "write:solar"),
                        })
                      }
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAddDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={handleCreateApiKey}>Criar Chave</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-yellow-500" />
            Segurança da API
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            Suas chaves de API concedem acesso programático à sua conta. Mantenha-as seguras e nunca compartilhe com
            terceiros não confiáveis. Se uma chave for comprometida, regenere-a imediatamente.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-payment-options.tsx" isMerged="true"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface PropertyPaymentOptionsProps {
  property: {
    paymentOptions?: {
      type: string
      name: string
      description: string
      processor: string
      details: string
    }
  }
}

export function PropertyPaymentOptions({ property }: PropertyPaymentOptionsProps) {
  return (
    <div>
      {property.paymentOptions ? (
        <>
          <CardHeader>
            <CardTitle>Opções de Pagamento</CardTitle>
            <CardDescription>Detalhes sobre as opções de pagamento disponíveis</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <p>Tipo: {property.paymentOptions.type}</p>
            <p>Nome: {property.paymentOptions.name}</p>
            <p>Descrição: {property.paymentOptions.description}</p>
            <p>Processador: {property.paymentOptions.processor}</p>
            <p>Detalhes: {property.paymentOptions.details}</p>
          </CardContent>
        </>
      ) : (
        <p>Nenhuma opção de pagamento disponível.</p>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-map.tsx" isMerged="true"
interface PropertyMapProps {
  location: string
}

export function PropertyMap({ location }: PropertyMapProps) {
  return (
    <div>
      <p>Map for {location}</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-similar.tsx" isMerged="true"
interface PropertySimilarProps {
  propertyType: string
  currentId: string
}

export function PropertySimilar({ propertyType, currentId }: PropertySimilarProps) {
  return (
    <div>
      <p>
        Similar properties of type {propertyType} excluding id {currentId}
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-schedule-tour.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

interface PropertyScheduleTourProps {
  propertyId: string
}

export function PropertyScheduleTour({ propertyId }: PropertyScheduleTourProps) {
  return (
    <div>
      <Button>Schedule a tour for property {propertyId}</Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/energy-consumption-chart.tsx" isMerged="true"
export function EnergyConsumptionChart() {
  return (
    <div>
      <p>Energy Consumption Chart</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/solar-panel-status.tsx" isMerged="true"
export function SolarPanelStatus() {
  return (
    <div>
      <p>Solar Panel Status</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/weather-forecast.tsx" isMerged="true"
export function WeatherForecast() {
  return (
    <div>
      <p>Weather Forecast</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/savings-calculator.tsx" isMerged="true"
export function SavingsCalculator() {
  return (
    <div>
      <p>Savings Calculator</p>
    </div>
  )
}
[V0_FILE]typescript:file="lib/middleware/auth-middleware.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"

export enum AuthMethod {
  JWT = "jwt",
  API_KEY = "apiKey",
  ANY = "any",
}

export interface AuthMiddlewareOptions {
  method: AuthMethod
  requiredRoles?: string[]
  requiredPermissions?: string[]
  publicPaths?: string[]
  redirectUrl?: string
}

export function createAuthMiddleware(options: { method: AuthMethod }) {
  return async function authMiddleware() {
    return NextResponse.next()
  }
}
[V0_FILE]typescript:file="lib/services/financial-simulator.service.ts" isEdit="true"
import { logger } from "@/lib/utils/logger"

export interface FinancialSimulationParams {
  projectValue: number
  energySavings: number
  selectedBank?: string
  selectedPaymentMethod?: string
  includeInstallation: boolean
  includeEquipment: boolean
  includeHomologation: boolean
  includeMonitoring: boolean
  energyPriceIncrease: number
  inflationRate: number
}

export interface SimulationResult {
  id: string
  bank: {
    id: string
    name: string
    logo: string
    interestRate: number
    maxTerm: number
    minDownPayment: number
    specialRequirements?: string[]
  }
  paymentMethod: {
    id: string
    name: string
    icon: string
    color: string
  }
  projectValue: number
  monthlyPayment: number
  totalPayment: number
  term: number
  downPayment: number
  discount: number
  paybackMonths: number
  roi: number
  irr: number
  npv: number
  monthlySavings: number
  energySavings25Years: number
  lcoe: number
  milestones?: {
    name: string
    percentage: number
    value: number
  }[]
}

// Mock data for banks
const banks = [
  {
    id: "banco-solar",
    name: "Banco Solar",
    logo: "BS",
    interestRate: 0.99,
    maxTerm: 72,
    minDownPayment: 10,
    specialRequirements: ["Comprovação de renda mínima de R$ 3.000", "Score de crédito acima de 700"],
  },
  {
    id: "eco-finance",
    name: "EcoFinance",
    logo: "EF",
    interestRate: 1.15,
    maxTerm: 60,
    minDownPayment: 15,
    specialRequirements: ["Propriedade quitada", "Histórico de crédito limpo"],
  },
  {
    id: "green-bank",
    name: "GreenBank",
    logo: "GB",
    interestRate: 0.89,
    maxTerm: 84,
    minDownPayment: 5,
    specialRequirements: ["Cliente do banco há pelo menos 6 meses"],
  },
  {
    id: "sun-credit",
    name: "SunCredit",
    logo: "SC",
    interestRate: 1.05,
    maxTerm: 48,
    minDownPayment: 20,
    specialRequirements: ["Apenas para pessoas jurídicas"],
  },
  {
    id: "energia-coop",
    name: "Energia Coop",
    logo: "EC",
    interestRate: 0.79,
    maxTerm: 60,
    minDownPayment: 25,
    specialRequirements: ["Associado da cooperativa"],
  },
]

// Mock data for payment methods
const paymentMethods = [
  {
    id: "traditional",
    name: "Financiamento Tradicional",
    icon: "BanknoteIcon",
    color: "bg-blue-500",
  },
  {
    id: "milestone",
    name: "Pagamento por Marcos",
    icon: "FileCheck",
    color: "bg-green-500",
  },
  {
    id: "leasing",
    name: "Leasing Solar",
    icon: "Building",
    color: "bg-purple-500",
  },
  {
    id: "upfront",
    name: "Pagamento à Vista",
    icon: "Wallet",
    color: "bg-yellow-500",
  },
  {
    id: "subscription",
    name: "Assinatura Solar",
    icon: "Clock",
    color: "bg-red-500",
  },
]

/**
 * Simulates solar financing options based on provided parameters
 */
export default async function simulateSolarFinancing(params: FinancialSimulationParams): Promise<SimulationResult[]> {
  try {
    logger.info("Simulating solar financing", params)

    // Calculate adjusted project value based on selected components
    let adjustedProjectValue = params.projectValue

    if (params.includeInstallation) {
      adjustedProjectValue *= 1.15 // +15% for installation
    }

    if (params.includeEquipment) {
      adjustedProjectValue *= 1.1 // +10% for premium equipment
    }

    if (params.includeHomologation) {
      adjustedProjectValue *= 1.05 // +5% for homologation
    }

    if (params.includeMonitoring) {
      adjustedProjectValue *= 1.08 // +8% for monitoring
    }

    // Filter banks if a specific one is selected
    const filteredBanks =
      params.selectedBank && params.selectedBank !== "all"
        ? banks.filter((bank) => bank.id === params.selectedBank)
        : banks

    // Filter payment methods if a specific one is selected
    const filteredPaymentMethods =
      params.selectedPaymentMethod && params.selectedPaymentMethod !== "all"
        ? paymentMethods.filter((method) => method.id === params.selectedPaymentMethod)
        : paymentMethods

    // Generate simulation results
    const results: SimulationResult[] = []

    // For each bank and payment method combination, calculate financing options
    for (const bank of filteredBanks) {
      for (const paymentMethod of filteredPaymentMethods) {
        // Skip incompatible combinations
        if (bank.id === "sun-credit" && paymentMethod.id === "subscription") continue
        if (bank.id === "energia-coop" && paymentMethod.id === "leasing") continue

        // Calculate financing details based on payment method
        let monthlyPayment = 0
        let totalPayment = 0
        let term = 0
        let downPayment = 0
        const discount = 0
        let milestones = undefined

        switch (paymentMethod.id) {
          case "traditional":
            term = bank.maxTerm
            downPayment = adjustedProjectValue * (bank.minDownPayment / 100)

            // Calculate monthly payment using compound interest formula
            const principal = adjustedProjectValue - downPayment
            const monthlyRate = bank.interestRate / 100
            monthlyPayment =
              (principal * (monthlyRate * Math.pow(1 + monthlyRate, term))) / (Math.pow(1 + monthlyRate, term) - 1)
            totalPayment = monthlyPayment * term + downPayment
            break

          case "milestone":
            term = Math.floor(bank.maxTerm * 0.8) // Typically shorter term
            totalPayment = adjustedProjectValue * 1.05 // 5% premium for milestone-based

            // Create milestone schedule
            milestones = [
              { name: "Assinatura do Contrato", percentage: 20, value: totalPayment * 0.2 },
              { name: "Entrega dos Equipamentos", percentage: 30, value: totalPayment * 0.3 },
              { name: "Instalação Concluída", percentage: 30, value: totalPayment * 0.3 },
              { name: "Homologação Concessionária", percentage: 20, value: totalPayment * 0.2 },
            ]
            break

          case "leasing":
            term = bank.maxTerm
            monthlyPayment = (adjustedProjectValue / term) * (1 + (bank.interestRate / 100) * 0.8)
            totalPayment = monthlyPayment * term
            break

          case "subscription":
            term = 120 // 10 years typical for subscription
            monthlyPayment = (adjustedProjectValue / 120) * 0.9 // Lower monthly but longer term
            totalPayment = monthlyPayment * term
            break
        }

        // Calculate financial metrics
        const monthlySavings = params.energySavings
        const annualSavings = monthlySavings * 12

        // Calculate payback period in months
        let paybackMonths = 0
        if (paymentMethod.id === "upfront") {
          paybackMonths = totalPayment / monthlySavings
        } else {
          // For financed options, payback is when cumulative savings exceed total payments
          let cumulativeSavings = 0
          let month = 0

          while (cumulativeSavings < totalPayment && month < 300) {
            // Cap at 25 years
            cumulativeSavings += monthlySavings * Math.pow(1 + params.energyPriceIncrease / 100 / 12, month)
            month++
          }

          paybackMonths = month
        }

        // Calculate ROI (Return on Investment) over 25 years
        const years = 25
        let totalSavings = 0

        for (let year = 0; year < years; year++) {
          const yearlyInflationFactor = Math.pow(1 + params.energyPriceIncrease / 100, year)
          totalSavings += annualSavings * yearlyInflationFactor
        }

        const roi = ((totalSavings - totalPayment) / totalPayment) * 100

        // Calculate IRR (Internal Rate of Return)
        // Simplified calculation - in a real app this would use a proper IRR algorithm
        const irr = (annualSavings / totalPayment) * 100

        // Calculate NPV (Net Present Value)
        let npv = -totalPayment
        for (let year = 0; year < years; year++) {
          const yearlyInflationFactor = Math.pow(1 + params.energyPriceIncrease / 100, year)
          const discountFactor = Math.pow(1 + params.inflationRate / 100, year)
          npv += (annualSavings * yearlyInflationFactor) / discountFactor
        }

        // Calculate LCOE (Levelized Cost of Energy)
        // Simplified - assumes 1000 kWh/kWp per year and 5 kWp system
        const annualProduction = 5000 // kWh
        const lcoe = totalPayment / (annualProduction * 25)

        // Create result object
        results.push({
          id: `${bank.id}-${paymentMethod.id}`,
          bank,
          paymentMethod,
          projectValue: adjustedProjectValue,
          monthlyPayment,
          totalPayment,
          term,
          downPayment,
          discount,
          paybackMonths,
          roi,
          irr,
          npv,
          monthlySavings,
          energySavings25Years: totalSavings,
          lcoe,
          milestones,
        })
      }
    }

    // Sort results by ROI (best options first)
    return results.sort((a, b) => b.roi - a.roi)
  } catch (error) {
    logger.error("Error simulating solar financing", error)
    throw new Error("Failed to simulate solar financing options")
  }
}

export { simulateSolarFinancing }
[V0_FILE]typescript:file="lib/services/property.service.ts" isEdit="true"
/**
 * Property service for handling property-related business logic
 */
import { BaseService } from "./base-service"
import { logger } from "@/lib/utils/logger"

// Property interface
export interface Property {
  id: number
  title: string
  type: string
  location: string
  area: string
  price: string
  image: string
  featured?: boolean
  energy?: string
  paymentOptions?: {
    type: string
    name: string
    description: string
    processor: string
    details: string
  }
}

// Mock database for demonstration
const mockProperties: Property[] = [
  {
    id: 1,
    title: "Apartamento Moderno",
    type: "Apartamento",
    location: "São Paulo, SP",
    area: "120m²",
    price: "R$ 750.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: true,
    energy: "Sistema Solar Instalado",
    paymentOptions: {
      type: "traditional",
      name: "Financiamento Tradicional",
      description: "Linha de crédito com taxa fixa de 9.5% a.a.",
      processor: "Lago Payments",
      details: "Aprovação em 48h, entrada de 20%",
    },
  },
  {
    id: 2,
    title: "Casa em Condomínio",
    type: "Casa",
    location: "Rio de Janeiro, RJ",
    area: "220m²",
    price: "R$ 1.200.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: false,
    energy: "Preparado para Energia Solar",
    paymentOptions: {
      type: "flexible",
      name: "Pagamento Misto",
      description: "30% entrada + financiamento + cartão",
      processor: "Hyperswitch",
      details: "Parcelamento em até 60x",
    },
  },
  {
    id: 3,
    title: "Sala Comercial",
    type: "Comercial",
    location: "Belo Horizonte, MG",
    area: "85m²",
    price: "R$ 450.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: false,
    energy: "Energia Net Zero",
    paymentOptions: {
      type: "milestone",
      name: "Pagamento por Marcos",
      description: "4 etapas de implementação solar",
      processor: "Finarect",
      details: "Pagamentos vinculados a entregas",
    },
  },
]

export class PropertyService extends BaseService<Property> {
  constructor() {
    // Set entity name and cache TTL (30 minutes)
    super("property", 1800)
  }

  /**
   * Get all properties with optional filtering
   */
  async getAllProperties(filters?: {
    featured?: boolean
    type?: string
    location?: string
  }): Promise<Property[]> {
    return this.getAllWithCache(async () => {
      let properties = [...mockProperties]

      // Apply filters if provided
      if (filters) {
        if (filters.featured !== undefined) {
          properties = properties.filter((p) => p.featured === filters.featured)
        }

        if (filters.type) {
          properties = properties.filter((p) => p.type === filters.type)
        }

        if (filters.location) {
          properties = properties.filter((p) => p.location.includes(filters.location))
        }
      }

      return properties
    })
  }

  /**
   * Get a property by ID
   */
  async getPropertyById(id: number): Promise<Property | null> {
    return this.getWithCache(id, async () => {
      const property = mockProperties.find((p) => p.id === id)
      return property || null
    })
  }

  /**
   * Create a new property
   */
  async createProperty(propertyData: Omit<Property, "id">): Promise<Property> {
    // Generate a new ID (in a real app, this would be handled by the database)
    const newId = Math.max(...mockProperties.map((p) => p.id)) + 1

    const newProperty: Property = {
      id: newId,
      ...propertyData,
    }

    // In a real app, this would save to a database
    mockProperties.push(newProperty)

    // Invalidate the collection cache
    await this.invalidateCache()

    logger.info(`Created new property with ID ${newId}`)
    return newProperty
  }

  /**
   * Update a property
   */
  async updateProperty(id: number, propertyData: Partial<Property>): Promise<Property | null> {
    const index = mockProperties.findIndex((p) => p.id === id)

    if (index === -1) {
      return null
    }

    // Update the property
    const updatedProperty = {
      ...mockProperties[index],
      ...propertyData,
    }

    mockProperties[index] = updatedProperty

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Updated property with ID ${id}`)
    return updatedProperty
  }

  /**
   * Delete a property
   */
  async deleteProperty(id: number): Promise<boolean> {
    const index = mockProperties.findIndex((p) => p.id === id)

    if (index === -1) {
      return false
    }

    // Remove the property
    mockProperties.splice(index, 1)

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Deleted property with ID ${id}`)
    return true
  }

  /**
   * Get featured properties
   */
  async getFeaturedProperties(): Promise<Property[]> {
    return this.getAllWithCache(async () => {
      return mockProperties.filter((p) => p.featured)
    })
  }
}

// Export a singleton instance
export const propertyService = new PropertyService()

export function createPropertyService() {
  return propertyService
}
[V0_FILE]typescript:file="lib/services/auth.service.ts" isEdit="true"
import { logger } from "@/lib/utils/logger"
import { AuthenticationError } from "@/lib/errors/app-error"

// User interface
export interface User {
  id: number
  email: string
  name: string
  roles: string[]
}

// Token payload interface
export interface TokenPayload {
  sub: number
  email: string
  roles: string[]
  exp: number
}

/**
 * Authentication service
 */
export class AuthService {
  // Mock user database
  private users: User[] = [
    {
      id: 1,
      email: "admin@example.com",
      name: "Admin User",
      roles: ["admin", "user"],
    },
    {
      id: 2,
      email: "user@example.com",
      name: "Regular User",
      roles: ["user"],
    },
  ]

  /**
   * Authenticate a user with email and password
   */
  async authenticate(email: string, password: string): Promise<{ user: User; token: string }> {
    logger.debug("Authenticating user", { email })

    // In a real app, you would hash and compare passwords
    const user = this.users.find((u) => u.email === email)

    if (!user) {
      throw new AuthenticationError("Invalid email or password")
    }

    // Mock password check (in a real app, you would use bcrypt or similar)
    const isValidPassword =
      (email === "admin@example.com" && password === "admin") || (email === "user@example.com" && password === "user")

    if (!isValidPassword) {
      throw new AuthenticationError("Invalid email or password")
    }

    // Generate JWT token (mock implementation)
    const token = this.generateToken(user)

    return { user, token }
  }

  /**
   * Verify a JWT token
   */
  async verifyToken(token: string): Promise<User> {
    logger.debug("Verifying token")

    try {
      // In a real app, you would verify the JWT signature and expiration
      if (token === "valid-admin-token") {
        return this.users[0]
      } else if (token === "valid-user-token") {
        return this.users[1]
      }

      throw new AuthenticationError("Invalid token")
    } catch (error) {
      throw new AuthenticationError("Invalid or expired token")
    }
  }

  /**
   * Generate a JWT token
   */
  private generateToken(user: User): string {
    // In a real app, you would sign a JWT with a secret key
    return user.id === 1 ? "valid-admin-token" : "valid-user-token"
  }
}

export function createAuthService(): AuthService {
  return new AuthService()
}116:Tbdb26,[V0_FILE]typescriptreact:file="components/properties-section.tsx" isMerged="true"
import { Home, MapPin, Maximize } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export default function PropertiesSection() {
  const properties = [
    {
      id: 1,
      title: "Apartamento Moderno",
      type: "Apartamento",
      location: "São Paulo, SP",
      area: "120m²",
      price: "R$ 750.000",
      image: "/placeholder.svg?height=300&width=400",
      featured: true,
    },
    {
      id: 2,
      title: "Casa em Condomínio",
      type: "Casa",
      location: "Rio de Janeiro, RJ",
      area: "220m²",
      price: "R$ 1.200.000",
      image: "/placeholder.svg?height=300&width=400",
      featured: false,
    },
    {
      id: 3,
      title: "Sala Comercial",
      type: "Comercial",
      location: "Belo Horizonte, MG",
      area: "85m²",
      price: "R$ 450.000",
      image: "/placeholder.svg?height=300&width=400",
      featured: false,
    },
  ]

  return (
    <section id="properties" className="py-16 md:py-24 bg-gray-50 dark:bg-gray-900">
      <div className="container">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-12">
          <div>
            <h2 className="text-3xl font-bold tracking-tight">Propriedades</h2>
            <p className="mt-2 text-lg text-muted-foreground max-w-2xl">
              Gerencie todos os tipos de propriedades em uma única plataforma intuitiva
            </p>
          </div>
          <Button variant="outline">Ver todas as propriedades</Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {properties.map((property) => (
            <Card key={property.id} className="overflow-hidden">
              <div className="relative">
                <img
                  src={property.image || "/placeholder.svg"}
                  alt={property.title}
                  className="w-full h-48 object-cover"
                />
                {property.featured && (
                  <Badge className="absolute top-3 right-3 bg-teal-500 hover:bg-teal-600">Destaque</Badge>
                )}
              </div>
              <CardHeader>
                <CardTitle>{property.title}</CardTitle>
                <CardDescription className="flex items-center gap-1">
                  <MapPin className="h-3.5 w-3.5" />
                  {property.location}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div className="flex items-center gap-2">
                    <Home className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">{property.type}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Maximize className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">{property.area}</span>
                  </div>
                </div>
                <div className="mt-4">
                  <p className="font-medium text-lg">{property.price}</p>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" size="sm">
                  Detalhes
                </Button>
                <Button size="sm">Gerenciar</Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/owners-section.tsx" isMerged="true"
import { Mail, Phone } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"

export default function OwnersSection() {
  const owners = [
    {
      id: 1,
      name: "Carlos Silva",
      email: "carlos.silva@email.com",
      phone: "(11) 98765-4321",
      properties: 3,
      image: "/placeholder.svg?height=100&width=100",
      initials: "CS",
    },
    {
      id: 2,
      name: "Ana Oliveira",
      email: "ana.oliveira@email.com",
      phone: "(21) 98765-4321",
      properties: 2,
      image: "/placeholder.svg?height=100&width=100",
      initials: "AO",
    },
    {
      id: 3,
      name: "Roberto Santos",
      email: "roberto.santos@email.com",
      phone: "(31) 98765-4321",
      properties: 5,
      image: "/placeholder.svg?height=100&width=100",
      initials: "RS",
    },
  ]

  return (
    <section id="owners" className="py-16 md:py-24">
      <div className="container">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-12">
          <div>
            <h2 className="text-3xl font-bold tracking-tight">Proprietários</h2>
            <p className="mt-2 text-lg text-muted-foreground max-w-2xl">
              Gerencie informações e comunicação com proprietários de forma eficiente
            </p>
          </div>
          <Button variant="outline">Ver todos os proprietários</Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {owners.map((owner) => (
            <Card key={owner.id}>
              <CardHeader className="flex flex-row items-center gap-4">
                <Avatar className="h-12 w-12">
                  <AvatarImage src={owner.image} alt={owner.name} />
                  <AvatarFallback>{owner.initials}</AvatarFallback>
                </Avatar>
                <div>
                  <CardTitle>{owner.name}</CardTitle>
                  <CardDescription>{owner.properties} propriedades</CardDescription>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <Mail className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">{owner.email}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Phone className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">{owner.phone}</span>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" size="sm">
                  Perfil
                </Button>
                <Button size="sm">Contatar</Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/payment-methods-section.tsx" isMerged="true"
import { Check, CreditCard, Landmark, Wallet } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

export default function PaymentMethodsSection() {
  return (
    <section
      id="payments"
      className="py-16 md:py-24 bg-gradient-to-br from-teal-50 to-emerald-50 dark:from-teal-950/20 dark:to-emerald-950/20"
    >
      <div className="container">
        <div className="text-center max-w-3xl mx-auto mb-12">
          <h2 className="text-3xl font-bold tracking-tight">Métodos de Pagamento Flexíveis</h2>
          <p className="mt-4 text-lg text-muted-foreground">
            Oferecemos opções de pagamento flexíveis para proprietários e inquilinos, com processamento seguro via
            Apache Finarect e Hyperswitch
          </p>
        </div>

        <Tabs defaultValue="milestone" className="max-w-4xl mx-auto">
          <TabsList className="grid w-full grid-cols-2 mb-8">
            <TabsTrigger value="milestone">Pagamento por Marcos</TabsTrigger>
            <TabsTrigger value="upfront">Pagamento Integral</TabsTrigger>
          </TabsList>

          <TabsContent value="milestone">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
              <div>
                <h3 className="text-2xl font-bold mb-4">Pagamento por Marcos</h3>
                <p className="text-muted-foreground mb-6">
                  Divida os pagamentos em etapas críticas do projeto, vinculando-os à conclusão de entregas específicas.
                </p>

                <ul className="space-y-3">
                  {[
                    "Sem taxas de financiamento adicionais",
                    "Visibilidade clara do progresso do projeto",
                    "Pagamento vinculado à conclusão de entregas específicas",
                    "Flexibilidade financeira para proprietários",
                  ].map((item, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-teal-500 mt-0.5" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>

                <Button className="mt-6">Saiba mais</Button>
              </div>

              <Card>
                <CardHeader>
                  <CardTitle>Estrutura de Pagamento por Marcos</CardTitle>
                  <CardDescription>Exemplo para um projeto típico de R$ 20.000</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {[
                      { name: "Marco 1", description: "Visita técnica e dossiê", percentage: "15%", value: "R$ 3.000" },
                      { name: "Marco 2", description: "Compra de equipamentos", percentage: "35%", value: "R$ 7.000" },
                      { name: "Marco 3", description: "Início da construção", percentage: "25%", value: "R$ 5.000" },
                      { name: "Marco 4", description: "Homologação final", percentage: "25%", value: "R$ 5.000" },
                    ].map((milestone, i) => (
                      <div key={i} className="flex items-center justify-between pb-4 border-b">
                        <div>
                          <p className="font-medium">{milestone.name}</p>
                          <p className="text-sm text-muted-foreground">{milestone.description}</p>
                        </div>
                        <div className="text-right">
                          <Badge variant="outline">{milestone.percentage}</Badge>
                          <p className="mt-1 font-medium">{milestone.value}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">Total</p>
                    <p className="font-bold">R$ 20.000</p>
                  </div>
                  <Button>Selecionar plano</Button>
                </CardFooter>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="upfront">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
              <div>
                <h3 className="text-2xl font-bold mb-4">Pagamento Integral</h3>
                <p className="text-muted-foreground mb-6">
                  Realize o pagamento completo no início do projeto e aproveite benefícios exclusivos.
                </p>

                <ul className="space-y-3">
                  {[
                    "Desconto de 5% no custo total do projeto",
                    "Cronograma de projeto acelerado",
                    "Agendamento prioritário para instalação",
                    "Processo simplificado sem múltiplas faturas",
                  ].map((item, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <Check className="h-5 w-5 text-teal-500 mt-0.5" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>

                <Button className="mt-6">Saiba mais</Button>
              </div>

              <Card>
                <CardHeader>
                  <CardTitle>Pagamento Integral Antecipado</CardTitle>
                  <CardDescription>Exemplo para um projeto típico de R$ 20.000</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between pb-4 border-b">
                      <div>
                        <p className="font-medium">Valor original</p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium">R$ 20.000</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between pb-4 border-b">
                      <div>
                        <p className="font-medium">Desconto (5%)</p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium text-teal-600 dark:text-teal-400">- R$ 1.000</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between pb-4 border-b">
                      <div>
                        <p className="font-medium">Total com desconto</p>
                      </div>
                      <div className="text-right">
                        <p className="font-bold">R$ 19.000</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between items-center">
                  <div className="flex items-center gap-2">
                    <div className="bg-teal-100 dark:bg-teal-900 p-1.5 rounded-full">
                      <Wallet className="h-4 w-4 text-teal-600 dark:text-teal-400" />
                    </div>
                    <p className="text-sm font-medium">Economia de R$ 1.000</p>
                  </div>
                  <Button>Selecionar plano</Button>
                </CardFooter>
              </Card>
            </div>
          </TabsContent>
        </Tabs>

        <div className="mt-16 max-w-3xl mx-auto text-center">
          <h3 className="text-xl font-medium mb-4">Processamento de Pagamentos Seguro</h3>
          <div className="flex flex-wrap justify-center gap-8 items-center">
            <div className="flex flex-col items-center">
              <div className="h-12 w-12 rounded-full bg-white shadow-md flex items-center justify-center mb-2">
                <Landmark className="h-6 w-6 text-teal-600" />
              </div>
              <p className="font-medium">Apache Finarect</p>
            </div>
            <div className="flex flex-col items-center">
              <div className="h-12 w-12 rounded-full bg-white shadow-md flex items-center justify-center mb-2">
                <CreditCard className="h-6 w-6 text-teal-600" />
              </div>
              <p className="font-medium">Hyperswitch</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ai-assistant-section.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import { Bot, MessageSquare, Search, Sparkles, User } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export default function AIAssistantSection() {
  return (
    <section id="ai-assistant" className="py-16 md:py-24">
      <div className="container">
        <div className="text-center max-w-3xl mx-auto mb-12">
          <div className="inline-flex items-center justify-center p-2 bg-teal-100 dark:bg-teal-900 rounded-full mb-4">
            <Sparkles className="h-5 w-5 text-teal-600 dark:text-teal-400" />
          </div>
          <h2 className="text-3xl font-bold tracking-tight">Assistente IA Integrado</h2>
          <p className="mt-4 text-lg text-muted-foreground">
            Nosso assistente de IA multimodal ajuda proprietários e inquilinos com informações, recomendações e suporte
            em tempo real
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="relative">
            <div className="absolute -top-6 -left-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-xs z-10">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-full bg-teal-100 dark:bg-teal-900 flex items-center justify-center text-teal-600 dark:text-teal-300">
                  <Search className="h-5 w-5" />
                </div>
                <div>
                  <p className="text-sm font-medium">Análise de Propriedades</p>
                  <p className="text-xs text-muted-foreground">Obtenha insights sobre o mercado imobiliário local</p>
                </div>
              </div>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border">
              <div className="p-4 border-b flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Bot className="h-5 w-5 text-teal-600" />
                  <span className="font-medium">Assistente PropConnect</span>
                </div>
                <Button variant="ghost" size="sm">
                  <Sparkles className="h-4 w-4 mr-2" />
                  Novo chat
                </Button>
              </div>
              <div className="h-80 overflow-y-auto p-4 space-y-4">
                <div className="flex gap-3">
                  <div className="w-8 h-8 rounded-full bg-teal-100 flex items-center justify-center text-teal-600 flex-shrink-0">
                    <Bot className="h-4 w-4" />
                  </div>
                  <div className="bg-muted p-3 rounded-lg max-w-[80%]">
                    <p className="text-sm">Olá! Como posso ajudar com suas propriedades hoje?</p>
                  </div>
                </div>

                <div className="flex gap-3 justify-end">
                  <div className="bg-teal-100 dark:bg-teal-900 p-3 rounded-lg max-w-[80%]">
                    <p className="text-sm">Preciso de informações sobre opções de pagamento para um novo projeto.</p>
                  </div>
                  <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
                    <User className="h-4 w-4" />
                  </div>
                </div>

                <div className="flex gap-3">
                  <div className="w-8 h-8 rounded-full bg-teal-100 flex items-center justify-center text-teal-600 flex-shrink-0">
                    <Bot className="h-4 w-4" />
                  </div>
                  <div className="bg-muted p-3 rounded-lg max-w-[80%]">
                    <p className="text-sm">Claro! Oferecemos duas opções principais de pagamento:</p>
                    <ol className="list-decimal list-inside mt-2 space-y-1 text-sm">
                      <li>Pagamento integral com 5% de desconto</li>
                      <li>Pagamento por marcos dividido em 4 etapas</li>
                    </ol>
                    <p className="text-sm mt-2">Gostaria de saber mais detalhes sobre alguma dessas opções?</p>
                  </div>
                </div>
              </div>
              <div className="p-4 border-t">
                <div className="flex items-center gap-2">
                  <div className="relative flex-1">
                    <input
                      type="text"
                      placeholder="Digite sua mensagem..."
                      className="w-full rounded-full border border-input bg-background px-4 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 pr-10"
                    />
                    <Button size="icon" variant="ghost" className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7">
                      <MessageSquare className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            <h3 className="text-2xl font-bold">Potencializado por IA avançada</h3>
            <p className="text-muted-foreground">
              Nosso assistente utiliza modelos multimodais da OpenAI e embeddings para oferecer uma experiência
              conversacional natural e inteligente.
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
              {[
                {
                  icon: <MessageSquare className="h-5 w-5" />,
                  title: "Suporte conversacional",
                  description: "Responde perguntas e oferece assistência em tempo real",
                },
                {
                  icon: <Search className="h-5 w-5" />,
                  title: "Análise de mercado",
                  description: "Fornece insights sobre tendências e preços de propriedades",
                },
                {
                  icon: <Sparkles className="h-5 w-5" />,
                  title: "Recomendações personalizadas",
                  description: "Sugere propriedades e estratégias com base no seu perfil",
                },
                {
                  icon: <Bot className="h-5 w-5" />,
                  title: "Automação inteligente",
                  description: "Automatiza tarefas rotineiras e processos administrativos",
                },
              ].map((feature, i) => (
                <Card key={i}>
                  <CardHeader className="pb-2">
                    <div className="w-10 h-10 rounded-full bg-teal-100 dark:bg-teal-900 flex items-center justify-center text-teal-600 dark:text-teal-400 mb-2">
                      {feature.icon}
                    </div>
                    <CardTitle className="text-base">{feature.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground">{feature.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>

            <Button className="mt-4">Experimentar o assistente</Button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/user.tsx" isMerged="true"
import { UserIcon } from "lucide-react"

export default function User({ className }: { className?: string }) {
  return <UserIcon className={className} />
}
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
"use client"

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

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

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

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/theme-config.tsx" isMerged="true"
// Este arquivo define as configurações de tema personalizadas para a aplicação
// Ele será importado em outros componentes para garantir consistência visual

export const themeConfig = {
  colors: {
    primary: {
      50: "#fffbeb",
      100: "#fef3c7",
      200: "#fde68a",
      300: "#fcd34d",
      400: "#fbbf24",
      500: "#f59e0b",
      600: "#d97706",
      700: "#b45309",
      800: "#92400e",
      900: "#78350f",
    },
    secondary: {
      50: "#ecfdf5",
      100: "#d1fae5",
      200: "#a7f3d0",
      300: "#6ee7b7",
      400: "#34d399",
      500: "#10b981",
      600: "#059669",
      700: "#047857",
      800: "#065f46",
      900: "#064e3b",
    },
    accent: {
      50: "#f0fdfa",
      100: "#ccfbf1",
      200: "#99f6e4",
      300: "#5eead4",
      400: "#2dd4bf",
      500: "#14b8a6",
      600: "#0d9488",
      700: "#0f766e",
      800: "#115e59",
      900: "#134e4a",
    },
    neutral: {
      50: "#f8fafc",
      100: "#f1f5f9",
      200: "#e2e8f0",
      300: "#cbd5e1",
      400: "#94a3b8",
      500: "#64748b",
      600: "#475569",
      700: "#334155",
      800: "#1e293b",
      900: "#0f172a",
    },
  },
  typography: {
    fontFamily: {
      sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
      heading:
        'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
      mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
    },
    fontWeight: {
      normal: "400",
      medium: "500",
      semibold: "600",
      bold: "700",
    },
    fontSize: {
      xs: "0.75rem",
      sm: "0.875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
    },
    lineHeight: {
      none: "1",
      tight: "1.25",
      snug: "1.375",
      normal: "1.5",
      relaxed: "1.625",
      loose: "2",
    },
  },
  spacing: {
    0: "0px",
    0.5: "0.125rem",
    1: "0.25rem",
    1.5: "0.375rem",
    2: "0.5rem",
    2.5: "0.625rem",
    3: "0.75rem",
    3.5: "0.875rem",
    4: "1rem",
    5: "1.25rem",
    6: "1.5rem",
    7: "1.75rem",
    8: "2rem",
    9: "2.25rem",
    10: "2.5rem",
    12: "3rem",
    14: "3.5rem",
    16: "4rem",
    20: "5rem",
    24: "6rem",
    28: "7rem",
    32: "8rem",
    36: "9rem",
    40: "10rem",
    44: "11rem",
    48: "12rem",
    52: "13rem",
    56: "14rem",
    60: "15rem",
    64: "16rem",
    72: "18rem",
    80: "20rem",
    96: "24rem",
  },
  borderRadius: {
    none: "0",
    sm: "0.125rem",
    DEFAULT: "0.25rem",
    md: "0.375rem",
    lg: "0.5rem",
    xl: "0.75rem",
    "2xl": "1rem",
    "3xl": "1.5rem",
    full: "9999px",
  },
  shadows: {
    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
    DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
    "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
    inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
    none: "none",
  },
  transitions: {
    DEFAULT: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
    fast: "100ms cubic-bezier(0.4, 0, 0.2, 1)",
    slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
  },
}

// Utilitário para acessar valores do tema
export const getThemeValue = (path: string) => {
  const parts = path.split(".")
  let result: any = themeConfig

  for (const part of parts) {
    if (result && typeof result === "object" && part in result) {
      result = result[part]
    } else {
      return undefined
    }
  }

  return result
}
[V0_FILE]typescriptreact:file="components/ui/brand-section.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const sectionVariants = cva("py-16 md:py-24 w-full", {
  variants: {
    variant: {
      default: "bg-background",
      muted: "bg-muted/40",
      accent: "bg-accent/10",
      // Variantes personalizadas da marca
      "brand-primary": "bg-yellow-50 dark:bg-yellow-950/20",
      "brand-secondary": "bg-green-50 dark:bg-green-950/20",
      "brand-gradient": "bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/20 dark:to-green-950/20",
      "brand-gradient-reverse":
        "bg-gradient-to-br from-green-50 to-yellow-50 dark:from-green-950/20 dark:to-yellow-950/20",
    },
    spacing: {
      default: "py-16 md:py-24",
      compact: "py-8 md:py-12",
      spacious: "py-24 md:py-32",
    },
    container: {
      true: "",
      false: "",
    },
  },
  compoundVariants: [
    {
      container: true,
      class: "container",
    },
  ],
  defaultVariants: {
    variant: "default",
    spacing: "default",
    container: true,
  },
})

export interface BrandSectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
  as?: React.ElementType
}

const BrandSection = React.forwardRef<HTMLElement, BrandSectionProps>(
  ({ className, variant, spacing, container, as = "section", ...props }, ref) => {
    const Component = as as any

    return (
      <Component ref={ref} className={cn(sectionVariants({ variant, spacing, container, className }))} {...props} />
    )
  },
)
BrandSection.displayName = "BrandSection"

const BrandSectionHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & { centered?: boolean }
>(({ className, centered = false, ...props }, ref) => (
  <div ref={ref} className={cn("mb-12", centered && "text-center max-w-3xl mx-auto", className)} {...props} />
))
BrandSectionHeader.displayName = "BrandSectionHeader"

const BrandSectionTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h2 ref={ref} className={cn("text-3xl font-bold tracking-tight", className)} {...props} />
  ),
)
BrandSectionTitle.displayName = "BrandSectionTitle"

const BrandSectionDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("mt-4 text-lg text-muted-foreground", className)} {...props} />
  ),
)
BrandSectionDescription.displayName = "BrandSectionDescription"

export { BrandSection, BrandSectionHeader, BrandSectionTitle, BrandSectionDescription }
[V0_FILE]typescriptreact:file="components/ui/feature-card.tsx" isMerged="true"
import type * as React from "react"
import { cn } from "@/lib/utils"
import { BrandCard } from "@/components/ui/brand-card"
import { BrandBadge } from "@/components/ui/brand-badge"

interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
  icon: React.ReactNode
  title: string
  description: string
  badge?: string
  badgeVariant?: string
  variant?: "default" | "accent" | "outline"
  hover?: "lift" | "glow" | "border" | "none"
}

export function FeatureCard({
  className,
  icon,
  title,
  description,
  badge,
  badgeVariant = "brand-yellow",
  variant = "default",
  hover = "lift",
  ...props
}: FeatureCardProps) {
  const cardVariant = variant === "default" ? "brand" : variant === "accent" ? "brand-accent" : "outline"

  const hoverEffect = hover === "none" ? "default" : hover

  return (
    <BrandCard className={cn("h-full", className)} variant={cardVariant} hover={hoverEffect} {...props}>
      <div className="flex justify-between items-start mb-4">
        <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
          {icon}
        </div>
        {badge && <BrandBadge variant={badgeVariant as any}>{badge}</BrandBadge>}
      </div>
      <h3 className="text-xl font-bold mb-2">{title}</h3>
      <p className="text-muted-foreground">{description}</p>
    </BrandCard>
  )
}
[V0_FILE]typescriptreact:file="components/ui/stat-card.tsx" isMerged="true"
import type * as React from "react"
import { cn } from "@/lib/utils"
import { BrandCard } from "@/components/ui/brand-card"

interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
  icon?: React.ReactNode
  title: string
  value: string
  description?: string
  trend?: {
    value: number
    label: string
  }
  variant?: "default" | "accent" | "outline"
}

export function StatCard({
  className,
  icon,
  title,
  value,
  description,
  trend,
  variant = "default",
  ...props
}: StatCardProps) {
  const cardVariant = variant === "default" ? "brand" : variant === "accent" ? "brand-accent" : "outline"

  const isTrendPositive = trend && trend.value > 0
  const isTrendNegative = trend && trend.value < 0

  return (
    <BrandCard className={cn("", className)} variant={cardVariant} {...props}>
      <div className="flex items-center gap-3 mb-3">
        {icon && (
          <div className="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
            {icon}
          </div>
        )}
        <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
      </div>

      <div className="flex items-end justify-between">
        <div>
          <p className="text-2xl font-bold">{value}</p>
          {description && <p className="text-xs text-muted-foreground mt-1">{description}</p>}
        </div>

        {trend && (
          <div
            className={cn(
              "flex items-center px-2 py-1 rounded-md text-xs font-medium",
              isTrendPositive && "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
              isTrendNegative && "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
              !isTrendPositive && !isTrendNegative && "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400",
            )}
          >
            {isTrendPositive && (
              <svg className="w-3 h-3 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M18 15l-6-6-6 6" />
              </svg>
            )}
            {isTrendNegative && (
              <svg className="w-3 h-3 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M6 9l6 6 6-6" />
              </svg>
            )}
            {trend.value}% {trend.label}
          </div>
        )}
      </div>
    </BrandCard>
  )
}
[V0_FILE]typescriptreact:file="components/features-updated.tsx" isMerged="true"
import { Sun, CreditCard, Wallet, BanknoteIcon, LineChart, Clock } from "lucide-react"
import {
  BrandSection,
  BrandSectionHeader,
  BrandSectionTitle,
  BrandSectionDescription,
} from "@/components/ui/brand-section"
import { FeatureCard } from "@/components/ui/feature-card"

export default function FeaturesUpdated() {
  const features = [
    {
      icon: <Sun className="h-6 w-6" />,
      title: "Capitalização de Projetos Solares",
      description: "Soluções financeiras que viabilizam cada etapa da cadeia de valor dos projetos de energia solar.",
      badge: "Essencial",
    },
    {
      icon: <CreditCard className="h-6 w-6" />,
      title: "Pagamentos Tradicionais",
      description: "Opções de capitalização imediata com descontos especiais para maximizar o retorno do investimento.",
      badge: "ROI Maximizado",
    },
    {
      icon: <Wallet className="h-6 w-6" />,
      title: "Pagamentos por Marcos",
      description:
        "Alinhamento financeiro com cada etapa da cadeia de valor, reduzindo riscos e otimizando o fluxo de caixa.",
      badge: "Baixo Risco",
    },
    {
      icon: <BanknoteIcon className="h-6 w-6" />,
      title: "Financiamento Alternativo",
      description: "Soluções inovadoras que permitem capitalização sem investimento inicial significativo.",
      badge: "Zero Entrada",
    },
    {
      icon: <LineChart className="h-6 w-6" />,
      title: "Análise de Retorno",
      description: "Cálculos detalhados de ROI, payback e economia mensal para cada opção de pagamento.",
      badge: "Transparente",
    },
    {
      icon: <Clock className="h-6 w-6" />,
      title: "Cronograma Financeiro",
      description: "Planejamento detalhado dos desembolsos alinhados com o cronograma de execução do projeto solar.",
      badge: "Previsibilidade",
    },
  ]

  return (
    <BrandSection variant="brand-gradient" id="features">
      <BrandSectionHeader centered>
        <BrandSectionTitle>Soluções Financeiras para Energia Solar</BrandSectionTitle>
        <BrandSectionDescription>
          Facilitando a capitalização em cada etapa da cadeia de valor dos projetos solares
        </BrandSectionDescription>
      </BrandSectionHeader>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {features.map((feature, index) => (
          <FeatureCard
            key={index}
            icon={feature.icon}
            title={feature.title}
            description={feature.description}
            badge={feature.badge}
            variant={index % 3 === 0 ? "accent" : "default"}
          />
        ))}
      </div>

      <div className="mt-16 max-w-3xl mx-auto text-center">
        <div className="p-6 bg-gradient-to-r from-yellow-50 to-green-50 dark:from-yellow-950/20 dark:to-green-950/20 rounded-lg border border-yellow-200 dark:border-yellow-900">
          <h3 className="text-xl font-bold mb-3">Cadeia de Valor Financiada</h3>
          <p className="text-muted-foreground">
            Nossa plataforma oferece soluções de capitalização para cada etapa da cadeia de valor dos projetos solares,
            desde o planejamento inicial até a homologação final, garantindo o fluxo financeiro adequado para viabilizar
            projetos de todos os portes.
          </p>
        </div>
      </div>
    </BrandSection>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-stats.tsx" isMerged="true"
import { Sun, TrendingUp, Wallet, Users, CreditCard, Calendar } from "lucide-react"
import { StatCard } from "@/components/ui/stat-card"
import {
  BrandSection,
  BrandSectionHeader,
  BrandSectionTitle,
  BrandSectionDescription,
} from "@/components/ui/brand-section"
import { BrandButton } from "@/components/ui/brand-button"

export default function DashboardStats() {
  return (
    <BrandSection variant="default" spacing="compact">
      <BrandSectionHeader>
        <BrandSectionTitle>Métricas de Desempenho</BrandSectionTitle>
        <BrandSectionDescription>
          Acompanhe o desempenho dos seus projetos solares e investimentos
        </BrandSectionDescription>
      </BrandSectionHeader>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <StatCard
          icon={<Sun className="h-4 w-4" />}
          title="Geração Solar"
          value="864 kWh"
          description="Média mensal"
          trend={{ value: 12.5, label: "vs. mês anterior" }}
        />

        <StatCard
          icon={<TrendingUp className="h-4 w-4" />}
          title="Economia Acumulada"
          value="R$ 15.480"
          description="Desde a instalação"
          trend={{ value: 8.3, label: "vs. projeção inicial" }}
          variant="accent"
        />

        <StatCard
          icon={<Wallet className="h-4 w-4" />}
          title="ROI Atual"
          value="27.4%"
          description="Retorno sobre investimento"
          trend={{ value: 3.2, label: "vs. trimestre anterior" }}
        />

        <StatCard
          icon={<Users className="h-4 w-4" />}
          title="Clientes Ativos"
          value="2.547"
          description="Em todo o Brasil"
          trend={{ value: 15.8, label: "crescimento anual" }}
        />

        <StatCard
          icon={<CreditCard className="h-4 w-4" />}
          title="Valor Financiado"
          value="R$ 42.5M"
          description="Total em projetos ativos"
          trend={{ value: 22.3, label: "vs. ano anterior" }}
          variant="accent"
        />

        <StatCard
          icon={<Calendar className="h-4 w-4" />}
          title="Tempo Médio de Payback"
          value="3.7 anos"
          description="Para projetos residenciais"
          trend={{ value: -0.3, label: "redução vs. 2023" }}
        />
      </div>

      <div className="mt-8 text-center">
        <BrandButton variant="brand" size="lg" isAnimated>
          Ver Relatório Completo
        </BrandButton>
      </div>
    </BrandSection>
  )
}
[V0_FILE]typescriptreact:file="components/cta-section.tsx" isMerged="true"
import { ArrowRight, Sun, Shield, Zap } from "lucide-react"
import { BrandSection } from "@/components/ui/brand-section"
import { BrandButton } from "@/components/ui/brand-button"
import { BrandBadge } from "@/components/ui/brand-badge"

export default function CTASection() {
  return (
    <BrandSection variant="brand-gradient" spacing="spacious">
      <div className="max-w-4xl mx-auto text-center">
        <div className="inline-flex items-center justify-center p-2 bg-yellow-100 dark:bg-yellow-900 rounded-full mb-6">
          <Sun className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
        </div>

        <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
          Transforme seu investimento solar com pagamentos <span className="text-yellow-500">inteligentes</span>
        </h2>

        <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
          Descubra como nossa plataforma pode ajudar você a financiar seu projeto solar com as melhores condições do
          mercado.
        </p>

        <div className="flex flex-wrap justify-center gap-3 mb-10">
          <BrandBadge variant="brand-primary" size="lg" icon={<Zap className="h-3.5 w-3.5" />}>
            Economia Garantida
          </BrandBadge>
          <BrandBadge variant="brand-secondary" size="lg" icon={<Shield className="h-3.5 w-3.5" />}>
            Pagamento Seguro
          </BrandBadge>
          <BrandBadge variant="brand-outline-yellow" size="lg">
            Suporte Especializado
          </BrandBadge>
        </div>

        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <BrandButton variant="brand" size="xl" isAnimated rightIcon={<ArrowRight className="h-5 w-5" />}>
            Simular Financiamento
          </BrandButton>
          <BrandButton variant="brand-outline" size="xl">
            Falar com Especialista
          </BrandButton>
        </div>

        <div className="mt-10 text-sm text-muted-foreground">
          Mais de 2.500 proprietários já confiam em nossas soluções financeiras
        </div>
      </div>
    </BrandSection>
  )
}
[V0_FILE]typescriptreact:file="app/page-updated.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import HeroSection from "@/components/hero-section"
import PropertyListings from "@/components/property-listings"
import OwnerProfiles from "@/components/owner-profiles"
import PaymentSystem from "@/components/payment-system"
import AIAssistant from "@/components/ai-assistant"
import FeaturesUpdated from "@/components/features-updated"
import DashboardStats from "@/components/dashboard-stats"
import CTASection from "@/components/cta-section"
import { BrandButton } from "@/components/ui/brand-button"
import { Sun } from "lucide-react"

export default function HomePageUpdated() {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </div>
          <nav className="hidden md:flex items-center gap-6">
            <a href="#properties" className="text-sm font-medium transition-colors hover:text-primary">
              Propriedades
            </a>
            <a href="#owners" className="text-sm font-medium transition-colors hover:text-primary">
              Proprietários
            </a>
            <a href="#payment" className="text-sm font-medium transition-colors hover:text-primary">
              Pagamentos
            </a>
            <a href="#features" className="text-sm font-medium transition-colors hover:text-primary">
              Recursos
            </a>
          </nav>
          <div className="flex items-center gap-4">
            <BrandButton variant="brand-outline" size="sm">
              Entrar
            </BrandButton>
            <BrandButton variant="brand" size="sm">
              Registrar
            </BrandButton>
          </div>
        </div>
      </header>

      <main className="flex-1">
        <HeroSection />
        <DashboardStats />
        <PropertyListings />
        <OwnerProfiles />
        <PaymentSystem />
        <FeaturesUpdated />
        <AIAssistant />
        <CTASection />
      </main>

      <footer className="border-t bg-muted/40">
        <div className="container py-8 md:py-12">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-base font-medium">Plataforma</h3>
              <ul className="mt-3 space-y-2">
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Recursos
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Preços
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Segurança
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-base font-medium">Suporte</h3>
              <ul className="mt-3 space-y-2">
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Documentação
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Central de Ajuda
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Contato
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-base font-medium">Legal</h3>
              <ul className="mt-3 space-y-2">
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Termos
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Privacidade
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Cookies
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-base font-medium">Empresa</h3>
              <ul className="mt-3 space-y-2">
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Sobre
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Blog
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-muted-foreground hover:text-foreground">
                    Carreiras
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div className="mt-8 border-t pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2 font-bold">
              <Sun className="h-5 w-5 text-yellow-500" />
              <span className="text-yellow-500">Yello</span>
              <span className="text-gray-300">/</span>
              <span className="text-green-500">Cash</span>
            </div>
            <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.js" type="code" isFixed="true" isQuickEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        yellow: {
          50: "#fffbeb",
          100: "#fef3c7",
          200: "#fde68a",
          300: "#fcd34d",
          400: "#fbbf24",
          500: "#f59e0b",
          600: "#d97706",
          700: "#b45309",
          800: "#92400e",
          900: "#78350f",
          950: "#451a03",
        },
        green: {
          50: "#ecfdf5",
          100: "#d1fae5",
          200: "#a7f3d0",
          300: "#6ee7b7",
          400: "#34d399",
          500: "#10b981",
          600: "#059669",
          700: "#047857",
          800: "#065f46",
          900: "#064e3b",
          950: "#022c22",
        },
        // Primary brand colors from logo
        "yello-yellow": "#FFCE00",
        "yello-orange": "#FF6600",
        "yello-pink": "#FF0066",

        // Refined secondary palette
        "yello-sky": "#0EA5E9", // Complementary blue for contrast
        "yello-green": "#10B981", // Retained for sustainability messaging

        // Neutral palette
        "yello-dark": "#111827",
        "yello-light": "#F9FAFB",

        // Functional colors
        "yello-success": "#10B981",
        "yello-warning": "#F59E0B",
        "yello-error": "#EF4444",
        "yello-info": "#3B82F6",
      },
      gradientColorStops: {
        "yello-gradient-start": "#FFCE00",
        "yello-gradient-mid": "#FF6600",
        "yello-gradient-end": "#FF0066",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "pulse-opacity": {
          "0%, 100%": { opacity: 1 },
          "50%": { opacity: 0.5 },
        },
        "slide-in-right": {
          "0%": { transform: "translateX(100%)", opacity: 0 },
          "100%": { transform: "translateX(0)", opacity: 1 },
        },
        "slide-in-bottom": {
          "0%": { transform: "translateY(20px)", opacity: 0 },
          "100%": { transform: "translateY(0)", opacity: 1 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "pulse-opacity": "pulse-opacity 2s ease-in-out infinite",
        "slide-in-right": "slide-in-right 0.3s ease-out",
        "slide-in-bottom": "slide-in-bottom 0.3s ease-out",
      },
      fontFamily: {
        sans: ["Montserrat", "Inter", "sans-serif"],
        display: ["Poppins", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      fontSize: {
        // Slightly larger base size for better readability
        base: "1.0625rem",
      },
      letterSpacing: {
        brand: "-0.025em",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]typescriptreact:file="app/plataforma/recursos/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Check } from "lucide-react"

export default function RecursosPage() {
  const recursos = [
    {
      title: "Financiamento Solar Personalizado",
      description: "Opções de pagamento adaptadas a cada tipo de projeto e perfil de cliente.",
      icon: "💰",
    },
    {
      title: "Pagamento por Marcos",
      description:
        "Divida os pagamentos em etapas críticas do projeto, vinculando-os à conclusão de entregas específicas.",
      icon: "📊",
    },
    {
      title: "Integração com Processadores de Pagamento",
      description: "Compatibilidade com Apache Finarect e Hyperswitch para processamento seguro.",
      icon: "🔄",
    },
    {
      title: "Análise de Viabilidade Solar",
      description: "Ferramentas para avaliar o potencial solar de qualquer propriedade.",
      icon: "📈",
    },
    {
      title: "Assistente IA Integrado",
      description: "Suporte inteligente para clientes e proprietários com análise multimodal.",
      icon: "🤖",
    },
    {
      title: "Gestão de Projetos Solares",
      description: "Acompanhamento completo desde o planejamento até a homologação.",
      icon: "📱",
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-12">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-4xl font-bold tracking-tight">Recursos da Plataforma</h1>
            <p className="mt-4 text-xl text-muted-foreground max-w-3xl">
              Conheça as ferramentas e funcionalidades que tornam a Yello/Cash a solução ideal para financiamento e
              gestão de projetos solares.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
            {recursos.map((recurso, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700"
              >
                <div className="text-3xl mb-4">{recurso.icon}</div>
                <h3 className="text-xl font-bold mb-2">{recurso.title}</h3>
                <p className="text-muted-foreground">{recurso.description}</p>
              </div>
            ))}
          </div>

          <div className="mt-16 bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/20 dark:to-green-950/20 rounded-lg p-8">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-2xl font-bold mb-6">Por que escolher a Yello/Cash?</h2>
              <ul className="space-y-4">
                {[
                  "Plataforma especializada em financiamento de energia solar",
                  "Opções de pagamento flexíveis adaptadas ao mercado brasileiro",
                  "Integração com os principais processadores de pagamento",
                  "Suporte técnico especializado em todas as regiões do Brasil",
                  "Assistente de IA para análise de viabilidade e suporte",
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <Check className="h-5 w-5 text-yellow-500 mt-0.5 flex-shrink-0" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t bg-muted/40">
        <div className="container py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2 font-bold">
              <Sun className="h-5 w-5 text-yellow-500" />
              <span className="text-yellow-500">Yello</span>
              <span className="text-gray-300">/</span>
              <span className="text-green-500">Cash</span>
            </div>
            <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/plataforma/precos/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Check, X } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function PrecosPage() {
  const planos = [
    {
      nome: "Básico",
      preco: "R$ 199",
      periodo: "/mês",
      descricao: "Ideal para pequenos instaladores solares",
      recursos: [
        { nome: "Até 5 projetos simultâneos", incluido: true },
        { nome: "Processamento de pagamentos", incluido: true },
        { nome: "Análise básica de viabilidade", incluido: true },
        { nome: "Suporte por e-mail", incluido: true },
        { nome: "Assistente IA", incluido: false },
        { nome: "API de integração", incluido: false },
      ],
      destaque: false,
      cor: "bg-gray-100 dark:bg-gray-800",
    },
    {
      nome: "Profissional",
      preco: "R$ 499",
      periodo: "/mês",
      descricao: "Para empresas de médio porte com múltiplos projetos",
      recursos: [
        { nome: "Até 20 projetos simultâneos", incluido: true },
        { nome: "Processamento de pagamentos", incluido: true },
        { nome: "Análise avançada de viabilidade", incluido: true },
        { nome: "Suporte prioritário", incluido: true },
        { nome: "Assistente IA", incluido: true },
        { nome: "API de integração", incluido: false },
      ],
      destaque: true,
      cor: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800",
    },
    {
      nome: "Empresarial",
      preco: "R$ 999",
      periodo: "/mês",
      descricao: "Solução completa para grandes integradores solares",
      recursos: [
        { nome: "Projetos ilimitados", incluido: true },
        { nome: "Processamento de pagamentos", incluido: true },
        { nome: "Análise avançada de viabilidade", incluido: true },
        { nome: "Suporte 24/7 dedicado", incluido: true },
        { nome: "Assistente IA Premium", incluido: true },
        { nome: "API de integração completa", incluido: true },
      ],
      destaque: false,
      cor: "bg-green-50 dark:bg-green-900/30",
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-12">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-4xl font-bold tracking-tight">Planos e Preços</h1>
            <p className="mt-4 text-xl text-muted-foreground max-w-3xl">
              Escolha o plano ideal para o seu negócio de energia solar. Todos os planos incluem acesso à nossa
              plataforma de financiamento.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
            {planos.map((plano, index) => (
              <div
                key={index}
                className={`rounded-lg p-6 shadow-sm border ${plano.destaque ? "border-yellow-300 dark:border-yellow-700 ring-2 ring-yellow-500/20" : "border-gray-200 dark:border-gray-700"} ${plano.cor} relative`}
              >
                {plano.destaque && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-yellow-500 text-black text-xs font-bold py-1 px-3 rounded-full">
                    Mais Popular
                  </div>
                )}
                <h3 className="text-2xl font-bold">{plano.nome}</h3>
                <div className="mt-4 flex items-baseline">
                  <span className="text-3xl font-bold">{plano.preco}</span>
                  <span className="ml-1 text-muted-foreground">{plano.periodo}</span>
                </div>
                <p className="mt-2 text-muted-foreground">{plano.descricao}</p>

                <ul className="mt-6 space-y-4">
                  {plano.recursos.map((recurso, i) => (
                    <li key={i} className="flex items-start gap-2">
                      {recurso.incluido ? (
                        <Check className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      ) : (
                        <X className="h-5 w-5 text-gray-300 dark:text-gray-600 mt-0.5 flex-shrink-0" />
                      )}
                      <span className={recurso.incluido ? "" : "text-muted-foreground"}>{recurso.nome}</span>
                    </li>
                  ))}
                </ul>

                <Button
                  className={`w-full mt-8 ${plano.destaque ? "bg-yellow-500 hover:bg-yellow-600 text-black" : ""}`}
                  variant={plano.destaque ? "default" : "outline"}
                >
                  Escolher Plano
                </Button>
              </div>
            ))}
          </div>

          <div className="mt-16 bg-white dark:bg-gray-800 rounded-lg p-8 border border-gray-200 dark:border-gray-700">
            <h2 className="text-2xl font-bold mb-6 text-center">Perguntas Frequentes</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {[
                {
                  pergunta: "Existe período mínimo de contrato?",
                  resposta: "Não, todos os planos são mensais e você pode cancelar a qualquer momento sem multa.",
                },
                {
                  pergunta: "Posso mudar de plano depois?",
                  resposta:
                    "Sim, você pode fazer upgrade ou downgrade do seu plano a qualquer momento, com ajuste proporcional de valores.",
                },
                {
                  pergunta: "Quais formas de pagamento são aceitas?",
                  resposta:
                    "Aceitamos cartão de crédito, boleto bancário e transferência bancária para pagamento dos planos.",
                },
                {
                  pergunta: "Existe uma versão de teste gratuita?",
                  resposta:
                    "Sim, oferecemos um período de teste de 14 dias para que você possa experimentar todas as funcionalidades da plataforma.",
                },
              ].map((item, i) => (
                <div key={i}>
                  <h3 className="text-lg font-bold mb-2">{item.pergunta}</h3>
                  <p className="text-muted-foreground">{item.resposta}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t bg-muted/40">
        <div className="container py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2 font-bold">
              <Sun className="h-5 w-5 text-yellow-500" />
              <span className="text-yellow-500">Yello</span>
              <span className="text-gray-300">/</span>
              <span className="text-green-500">Cash</span>
            </div>
            <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/plataforma/seguranca/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Shield, Lock, Server, FileCheck, Eye, AlertTriangle } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function SegurancaPage() {
  const medidasSeguranca = [
    {
      titulo: "Criptografia de Dados",
      descricao: "Todos os dados são criptografados em trânsito e em repouso usando padrões AES-256.",
      icone: <Lock className="h-8 w-8 text-yellow-500" />,
    },
    {
      titulo: "Infraestrutura Segura",
      descricao: "Servidores em data centers certificados com monitoramento 24/7 e redundância geográfica.",
      icone: <Server className="h-8 w-8 text-yellow-500" />,
    },
    {
      titulo: "Conformidade Regulatória",
      descricao: "Conformidade com LGPD, PCI DSS e outras regulamentações relevantes para processamento de pagamentos.",
      icone: <FileCheck className="h-8 w-8 text-yellow-500" />,
    },
    {
      titulo: "Autenticação Multi-fator",
      descricao:
        "Proteção adicional para contas com verificação em dois fatores e controles de acesso baseados em função.",
      icone: <Shield className="h-8 w-8 text-yellow-500" />,
    },
    {
      titulo: "Monitoramento Contínuo",
      descricao:
        "Sistemas de detecção de intrusão e monitoramento de segurança em tempo real para identificar ameaças.",
      icone: <Eye className="h-8 w-8 text-yellow-500" />,
    },
    {
      titulo: "Resposta a Incidentes",
      descricao: "Equipe dedicada e protocolos estabelecidos para resposta rápida a quaisquer incidentes de segurança.",
      icone: <AlertTriangle className="h-8 w-8 text-yellow-500" />,
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-12">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-4xl font-bold tracking-tight">Segurança</h1>
            <p className="mt-4 text-xl text-muted-foreground max-w-3xl">
              A Yello/Cash prioriza a segurança dos seus dados e transações financeiras. Conheça as medidas que
              implementamos para proteger sua empresa e seus clientes.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
            {medidasSeguranca.map((medida, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700"
              >
                <div className="mb-4">{medida.icone}</div>
                <h3 className="text-xl font-bold mb-2">{medida.titulo}</h3>
                <p className="text-muted-foreground">{medida.descricao}</p>
              </div>
            ))}
          </div>

          <div className="mt-16 bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/20 dark:to-green-950/20 rounded-lg p-8">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-2xl font-bold mb-6">Certificações e Conformidade</h2>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {[
                  { nome: "PCI DSS", descricao: "Padrão de Segurança de Dados da Indústria de Cartões de Pagamento" },
                  { nome: "ISO 27001", descricao: "Gestão de Segurança da Informação" },
                  { nome: "LGPD", descricao: "Lei Geral de Proteção de Dados" },
                  { nome: "SOC 2", descricao: "Controles de Organização de Serviços" },
                ].map((cert, i) => (
                  <div
                    key={i}
                    className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700"
                  >
                    <div className="font-bold mb-2">{cert.nome}</div>
                    <div className="text-xs text-muted-foreground">{cert.descricao}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="mt-16 bg-white dark:bg-gray-800 rounded-lg p-8 border border-gray-200 dark:border-gray-700">
            <h2 className="text-2xl font-bold mb-6">Compromisso com a Segurança</h2>
            <p className="text-lg mb-4">
              Na Yello/Cash, a segurança não é apenas uma característica, é um princípio fundamental. Nosso compromisso
              com a proteção dos seus dados e transações financeiras orienta todas as nossas decisões de desenvolvimento
              e operações.
            </p>
            <p className="text-lg mb-4">
              Realizamos auditorias de segurança regulares, testes de penetração e revisões de código para garantir que
              nossa plataforma permaneça segura contra ameaças emergentes.
            </p>
            <p className="text-lg">
              Nossos parceiros de processamento de pagamento, Apache Finarect e Hyperswitch, também aderem aos mais
              altos padrões de segurança da indústria, garantindo que todas as transações financeiras sejam processadas
              com segurança.
            </p>

            <div className="mt-8 flex justify-center">
              <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">
                Saiba mais sobre nossa política de segurança
              </Button>
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t bg-muted/40">
        <div className="container py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2 font-bold">
              <Sun className="h-5 w-5 text-yellow-500" />
              <span className="text-yellow-500">Yello</span>
              <span className="text-gray-300">/</span>
              <span className="text-green-500">Cash</span>
            </div>
            <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/suporte/documentacao/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Search, FileText, BookOpen, Code, HelpCircle, ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function DocumentacaoPage() {
  const categorias = [
    {
      titulo: "Guias de Início Rápido",
      descricao: "Tutoriais para começar a usar a plataforma Yello/Cash",
      icone: <BookOpen className="h-8 w-8 text-yellow-500" />,
      links: [
        { nome: "Configuração inicial da conta", url: "#" },
        { nome: "Cadastro de projetos solares", url: "#" },
        { nome: "Configuração de métodos de pagamento", url: "#" },
      ],
    },
    {
      titulo: "Documentação da API",
      descricao: "Recursos para desenvolvedores integrarem com nossa plataforma",
      icone: <Code className="h-8 w-8 text-yellow-500" />,
      links: [
        { nome: "Autenticação e autorização", url: "#" },
        { nome: "Endpoints de pagamento", url: "#" },
        { nome: "Webhooks e notificações", url: "#" },
      ],
    },
    {
      titulo: "Manuais do Usuário",
      descricao: "Documentação detalhada de todas as funcionalidades",
      icone: <FileText className="h-8 w-8 text-yellow-500" />,
      links: [
        { nome: "Gestão de projetos solares", url: "#" },
        { nome: "Processamento de pagamentos", url: "#" },
        { nome: "Relatórios e análises", url: "#" },
      ],
    },
    {
      titulo: "Perguntas Frequentes",
      descricao: "Respostas para as dúvidas mais comuns",
      icone: <HelpCircle className="h-8 w-8 text-yellow-500" />,
      links: [
        { nome: "Dúvidas sobre pagamentos", url: "#" },
        { nome: "Questões técnicas", url: "#" },
        { nome: "Faturamento e planos", url: "#" },
      ],
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-12">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-4xl font-bold tracking-tight">Documentação</h1>
            <p className="mt-4 text-xl text-muted-foreground max-w-3xl">
              Recursos e guias para ajudar você a aproveitar ao máximo a plataforma Yello/Cash.
            </p>
          </div>

          <div className="relative mt-8 mb-12">
            <div className="flex items-center border rounded-lg overflow-hidden bg-white dark:bg-gray-800">
              <Search className="h-5 w-5 text-muted-foreground ml-3" />
              <input
                type="text"
                placeholder="Buscar na documentação..."
                className="flex-1 py-3 px-4 bg-transparent border-0 focus:outline-none focus:ring-0"
              />
              <Button className="rounded-none h-full bg-yellow-500 hover:bg-yellow-600 text-black">Buscar</Button>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
            {categorias.map((categoria, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700"
              >
                <div className="mb-4">{categoria.icone}</div>
                <h3 className="text-xl font-bold mb-2">{categoria.titulo}</h3>
                <p className="text-muted-foreground mb-4">{categoria.descricao}</p>
                <ul className="space-y-2">
                  {categoria.links.map((link, i) => (
                    <li key={i}>
                      <Link
                        href={link.url}
                        className="text-yellow-600 dark:text-yellow-400 hover:underline flex items-center"
                      >
                        <span>{link.nome}</span>
                        <ExternalLink className="h-3 w-3 ml-1" />
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="mt-16 bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/20 dark:to-green-950/20 rounded-lg p-8">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl font-bold mb-4">Precisa de mais ajuda?</h2>
              <p className="text-lg mb-6">
                Nossa equipe de suporte está disponível para ajudar com qualquer dúvida que você possa ter.
              </p>
              <div className="flex flex-col sm:flex-row justify-center gap-4">
                <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">Contatar Suporte</Button>
                <Button variant="outline">Agendar Demonstração</Button>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t bg-muted/40">
        <div className="container py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2 font-bold">
              <Sun className="h-5 w-5 text-yellow-500" />
              <span className="text-yellow-500">Yello</span>
              <span className="text-gray-300">/</span>
              <span className="text-green-500">Cash</span>
            </div>
            <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/suporte/documentacao/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/suporte/central-ajuda/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Search, MessageSquare, Phone, Mail, Clock, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function CentralAjudaPage() {
  const topicos = [
    {
      categoria: "Pagamentos",
      itens: [
        "Como configurar pagamentos por marcos",
        "Opções de financiamento disponíveis",
        "Processamento de cartões de crédito",
        "Resolução de problemas com pagamentos",
      ],
    },
    {
      categoria: "Projetos Solares",
      itens: [
        "Cadastro de novo projeto solar",
        "Acompanhamento de instalação",
        "Análise de viabilidade solar",
        "Homologação junto à concessionária",
      ],
    },
    {
      categoria: "Conta e Faturamento",
      itens: ["Alteração de plano", "Gerenciamento de usuários", "Faturas e recibos", "Cancelamento de conta"],
    },
    {
      categoria: "Integrações",
      itens: [
        "Conexão com Apache Finarect",
        "Integração com Hyperswitch",
        "API para desenvolvedores",
        "Webhooks e notificações",
      ],
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-12">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-4xl font-bold tracking-tight">Central de Ajuda</h1>
            <p className="mt-4 text-xl text-muted-foreground max-w-3xl">
              Encontre respostas para suas dúvidas e obtenha suporte para a plataforma Yello/Cash.
            </p>
          </div>

          <div className="relative mt-8 mb-12">
            <div className="flex items-center border rounded-lg overflow-hidden bg-white dark:bg-gray-800">
              <Search className="h-5 w-5 text-muted-foreground ml-3" />
              <input
                type="text"
                placeholder="Como posso ajudar?"
                className="flex-1 py-3 px-4 bg-transparent border-0 focus:outline-none focus:ring-0"
              />
              <Button className="rounded-none h-full bg-yellow-500 hover:bg-yellow-600 text-black">Buscar</Button>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
            {topicos.map((topico, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700"
              >
                <h3 className="text-xl font-bold mb-4">{topico.categoria}</h3>
                <ul className="space-y-3">
                  {topico.itens.map((item, i) => (
                    <li key={i}>
                      <Link href="#" className="flex items-center justify-between group">
                        <span className="text-muted-foreground group-hover:text-foreground transition-colors">
                          {item}
                        </span>
                        <ChevronRight className="h-4 w-4 text-muted-foreground group-hover:text-yellow-500 transition-colors" />
                      </Link>
                    </li>
                  ))}
                </ul>
                <div className="mt-4 pt-4 border-t">
                  <Link href="#" className="text-yellow-600 dark:text-yellow-400 hover:underline text-sm">
                    Ver todos os tópicos de {topico.categoria}
                  </Link>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-16 bg-white dark:bg-gray-800 rounded-lg p-8 border border-gray-200 dark:border-gray-700">
            <h2 className="text-2xl font-bold mb-6 text-center">Entre em Contato</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="flex flex-col items-center text-center">
                <div className="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-4">
                  <MessageSquare className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
                </div>
                <h3 className="text-lg font-bold mb-2">Chat ao Vivo</h3>
                <p className="text-muted-foreground mb-4">Converse com nossa equipe de suporte em tempo real.</p>
                <Button className="bg-yellow-500 hover:bg-yellow-600 text-black">Iniciar Chat</Button>
              </div>

              <div className="flex flex-col items-center text-center">
                <div className="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-4">
                  <Phone className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
                </div>
                <h3 className="text-lg font-bold mb-2">Telefone</h3>
                <p className="text-muted-foreground mb-4">Fale diretamente com um especialista.</p>
                <p className="font-medium">0800 123 4567</p>
                <p className="text-sm text-muted-foreground mt-1">Seg-Sex, 9h às 18h</p>
              </div>

              <div className="flex flex-col items-center text-center">
                <div className="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-4">
                  <Mail className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
                </div>
                <h3 className="text-lg font-bold mb-2">E-mail</h3>
                <p className="text-muted-foreground mb-4">Envie sua dúvida e responderemos em breve.</p>
                <Button variant="outline">suporte@yellocash.com.br</Button>
              </div>
            </div>
          </div>

          <div className="mt-12 bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/20 dark:to-green-950/20 rounded-lg p-6">
            <div className="flex items-center gap-4">
              <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center flex-shrink-0">
                <Clock className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
              </div>
              <div>
                <h3 className="font-bold">Horário de Atendimento</h3>
                <p className="text-muted-foreground">Segunda a Sexta, das 9h às 18h (exceto feriados nacionais)</p>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t bg-muted/40">
        <div className="container py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2 font-bold">
              <Sun className="h-5 w-5 text-yellow-500" />
              <span className="text-yellow-500">Yello</span>
              <span className="text-gray-300">/</span>
              <span className="text-green-500">Cash</span>
            </div>
            <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/suporte/central-ajuda/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/suporte/contato/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Send, MapPin, Phone, Mail, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function ContatoPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-12">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-4xl font-bold tracking-tight">Entre em Contato</h1>
            <p className="mt-4 text-xl text-muted-foreground max-w-3xl">
              Estamos aqui para ajudar. Entre em contato conosco para tirar dúvidas, solicitar suporte ou conhecer mais
              sobre nossas soluções.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-12">
            <div>
              <div className="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm border border-gray-200 dark:border-gray-700">
                <h2 className="text-2xl font-bold mb-6">Envie uma Mensagem</h2>
                <form className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label htmlFor="nome" className="block text-sm font-medium mb-1">
                        Nome
                      </label>
                      <input
                        type="text"
                        id="nome"
                        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                        placeholder="Seu nome"
                      />
                    </div>
                    <div>
                      <label htmlFor="email" className="block text-sm font-medium mb-1">
                        E-mail
                      </label>
                      <input
                        type="email"
                        id="email"
                        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                        placeholder="seu@email.com"
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="assunto" className="block text-sm font-medium mb-1">
                      Assunto
                    </label>
                    <input
                      type="text"
                      id="assunto"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                      placeholder="Assunto da mensagem"
                    />
                  </div>

                  <div>
                    <label htmlFor="mensagem" className="block text-sm font-medium mb-1">
                      Mensagem
                    </label>
                    <textarea
                      id="mensagem"
                      rows={5}
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                      placeholder="Digite sua mensagem aqui..."
                    >
                  

                  
                
              
            

            
              
                Informações de Contato

                
                  
                    
                      
                    
                    
                      Endereço
                      
                        Av. Paulista, 1000, 10º andar
                        

                        Bela Vista, São Paulo - SP
                        

                        CEP: 01310-100
                      
                    
                  

                  
                    
                      
                    
                    
                      Telefone
                      
                        +55 (11) 3456-7890
                        

                        0800 123 4567 (Suporte)
                      
                    
                  

                  
                    
                      
                    
                    
                      E-mail
                      
                        contato@yellocash.com.br
                        

                        suporte@yellocash.com.br
                      
                    
                  

                  
                    
                      
                    
                    
                      Horário de Atendimento
                      
                        Segunda a Sexta: 9h às 18h
                        

                        Sábado: 9h às 13h
                        

                        Domingo e Feriados: Fechado
                      
                    
                  
                
              

              
                Atendimento Prioritário
                
                  Clientes com planos Profissional e Empresarial têm acesso a canais de atendimento prioritário.
                
                
              
            
          
        
      

      
        
          
            
              
              Yello
              /
              Cash
            
            © 2025 Yello/Cash. Todos os direitos reservados.
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/legal/termos/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function TermosPage() {
  return (
    
      
        
          
            
            Yello
            /
            Cash
          
        
      

      
        
          
            
              
              Voltar para a página inicial
            
            Termos de Serviço
            
              Última atualização: 15 de março de 2025
            
          

          
            
              1. Introdução
              
                Bem-vindo à Yello/Cash. Estes Termos de Serviço ("Termos") regem seu acesso e uso da plataforma Yello/Cash, incluindo nosso site, serviços, aplicativos e ferramentas (coletivamente, os "Serviços").
              
              
                Ao acessar ou usar nossos Serviços, você concorda com estes Termos. Se você não concordar com estes Termos, não acesse ou use nossos Serviços.
              

              2. Descrição dos Serviços
              
                A Yello/Cash é uma plataforma de financiamento e gestão de projetos solares que oferece soluções de pagamento, análise de viabilidade e ferramentas de gestão para empresas do setor de energia solar.
              
              
                Nossos Serviços incluem, mas não se limitam a:
              
              
                Processamento de pagamentos para projetos solares
                Ferramentas de análise de viabilidade solar
                Gestão de projetos solares
                Integração com processadores de pagamento
                Assistente de IA para suporte e análise
              

              3. Contas e Registro
              
                Para acessar determinados recursos dos Serviços, você precisará criar uma conta. Você é responsável por manter a confidencialidade de suas credenciais de conta e por todas as atividades que ocorrerem em sua conta.
              
              
                Você concorda em fornecer informações precisas, atuais e completas durante o processo de registro e em atualizar essas informações para mantê-las precisas, atuais e completas.
              

              4. Pagamentos e Faturamento
              
                Alguns de nossos Serviços são oferecidos mediante pagamento. Ao se inscrever em um plano pago, você concorda em pagar todas as taxas aplicáveis conforme descrito nos Serviços. A menos que especificado de outra forma:

1. As taxas são cotadas em Reais brasileiros (BRL)
2. As taxass podem estar sujeitas a alterações
3. Os pagamentos não são reembolsáveis, exceto conforme exigido por lei ou conforme especificado nestes Termos

Reservamo-nos o direito de alterar nossas taxas mediante notificação prévia de 30 dias.

5. Propriedade Intelectual

  A Yello/Cash e seus licenciadores detêm todos os direitos, títulos e interesses, incluindo todos os direitos de propriedade intelectual relacionados aos Serviços e seu conteúdo.


  Você não pode copiar, modificar, distribuir, vender ou alugar qualquer parte dos Serviços sem nossa permissão expressa por escrito.


6. Privacidade

  Nossa Política de Privacidade descreve como coletamos, usamos e compartilhamos suas informações pessoais. Ao usar nossos Serviços, você concorda com nossa coleta, uso e compartilhamento de suas informações conforme descrito na Política de Privacidade.


7. Limitação de Responsabilidade

  Em nenhuma circunstância a Yello/Cash, seus diretores, funcionários, parceiros ou agentes serão responsáveis por quaisquer danos indiretos, incidentais, especiais, consequenciais ou punitivos, incluindo, sem limitação, perda de lucros, dados, uso, boa vontade ou outras perdas intangíveis, resultantes de seu acesso ou uso ou incapacidade de acessar ou usar os Serviços.


8. Alterações nos Termos

  Podemos modificar estes Termos a qualquer momento. Se fizermos alterações materiais nestes Termos, forneceremos um aviso através dos Serviços ou por outros meios. Seu uso continuado dos Serviços após tais alterações constitui sua aceitação dos Termos modificados.


9. Lei Aplicável

  Estes Termos serão regidos e interpretados de acordo com as leis do Brasil, sem considerar suas disposições sobre conflitos de leis.


10. Contato

  Se você tiver alguma dúvida sobre estes Termos, entre em contato conosco pelo e-mail legal@yellocash.com.br.

            
          

          
            
          
        
      

      
        
          
            
              
              Yello
              /
              Cash
            
            © 2025 Yello/Cash. Todos os direitos reservados.
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/plataforma/solar-hub/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Zap, Building, Home, Users, ArrowRight, Workflow, Layers, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function SolarHubPage() {
  return (
    
      
        
          
            
            Yello
            /
            Cash
          
        
      

      
        
          
            
              
                
                Voltar para a página inicial
              
              
                Novo
                Exclusivo
              
              Yello Solar Hub
              
                Plataforma de habilitação e orquestração que simplifica todo o processo de adoção de energia solar para
                proprietários de imóveis.
              
            

            
              
                Transformando a Jornada Solar
                
                  O Yello Solar Hub é uma plataforma completa que conecta proprietários de imóveis, instaladores solares
                  e instituições financeiras, simplificando cada etapa do processo de adoção de energia solar.
                
                
                  {[
                    "Orquestração completa do projeto solar do início ao fim",
                    "Habilitação de proprietários PF e PJ com soluções personalizadas",
                    "Integração com processadores de pagamento e financiamento",
                    "Análise de viabilidade com IA avançada",
                    "Acompanhamento em tempo real de cada etapa do projeto",
                  ].map((item, i) => (
                    
                      
                        
                      
                      {item}
                    
                  ))}
                
                
                  
                
              
              
                
                  
                    
                      
                        
                      
                      Yello Solar Hub
                    
                    Ativo
                  
                  
                    
                      
                        
                        Orquestração de Projeto
                      
                      
                        
                          Análise de Viabilidade
                          Concluído
                        
                        
                          Proposta Técnica
                          Concluído
                        
                        
                          Aprovação Financeira
                          Em andamento
                        
                        
                          Instalação
                          Pendente
                        
                        
                          Homologação
                          Pendente
                        
                      
                    
                    
                      
                        Economia Projetada
                        R$ 950/mês
                      
                      
                        ROI Estimado
                        3.8 anos
                      
                    
                  
                
                
                  
                    
                    Assistente IA
                  
                  
                    "Seu projeto está avançando conforme o cronograma. A aprovação financeira deve ser concluída em 2
                    dias úteis."
                  
                
              
            
          
        

        
          
            
              Soluções para Todos os Perfis
              
                O Yello Solar Hub oferece soluções personalizadas para diferentes tipos de proprietários de imóveis.
              
            

            
              
                
                  
                    
                      
                    
                    Pessoa Física
                  
                  Proprietários Residenciais
                  
                    Soluções completas para proprietários de casas e apartamentos que desejam reduzir sua conta de
                    energia.
                  
                
                
                  
                    
                      Habilitação Simplificada
                      
                        
                          
                          Análise de viabilidade com base na conta de energia atual
                        
                        
                          
                          Simulação de economia mensal e retorno do investimento
                        
                        
                          
                          Verificação automática de crédito para opções de financiamento
                        
                      
                    
                    
                      Orquestração Personalizada
                      
                        
                          
                          Conexão com instaladores certificados na sua região
                        
                        
                          
                          Acompanhamento de cada etapa do projeto via aplicativo
                        
                        
                          
                          Suporte na homologação junto à concessionária de energia
                        
                      
                    
                  
                
                
                  
                
              

              
                
                  
                    
                      
                    
                    Pessoa Jurídica
                  
                  Empresas e Organizações
                  
                    Soluções corporativas para empresas que buscam reduzir custos operacionais e aumentar
                    sustentabilidade.
                  
                
                
                  
                    
                      Habilitação Corporativa
                      
                        
                          
                          Análise de demanda energética e perfil de consumo
                        
                        
                          
                          Estudo de viabilidade técnica e financeira detalhado
                        
                        
                          
                          Acesso a linhas de crédito especiais para empresas
                        
                      
                    
                    
                      Orquestração Empresarial
                      
                        
                          
                          Gestão de projetos complexos com múltiplas unidades
                        
                        
                          
                          Dashboard executivo com KPIs de economia e sustentabilidade
                        
                        
                          
                          Suporte especializado para questões regulatórias e fiscais
                        
                      
                    
                  
                
                
                  
                
              
            
          
        

        
          
            
              Como Funciona a Orquestração
              
                O Yello Solar Hub coordena todo o processo de adoção de energia solar, conectando todas as partes
                envolvidas.
              
            

            
              
              
                {[
                  {
                    icon: ,
                    title: "Cadastro e Análise",
                    description: "Proprietário se cadastra e fornece informações básicas para análise inicial.",
                  },
                  {
                    icon: ,
                    title: "Viabilidade",
                    description: "IA analisa viabilidade técnica e financeira com base nos dados fornecidos.",
                  },
                  {
                    icon: ,
                    title: "Proposta",
                    description: "Sistema gera proposta personalizada com opções de financiamento.",
                  },
                  {
                    icon: ,
                    title: "Execução",
                    description: "Plataforma coordena instaladores, fornecedores e financiamento.",
                  },
                  {
                    icon: ,
                    title: "Ativação",
                    description: "Suporte na homologação e ativação do sistema solar.",
                  },
                ].map((step, index) => (
                  
                    
                      {step.icon}
                    
                    {step.title}
                    {step.description}
                  
                ))}
              
            
          
        

        
          
            
              Transforme sua experiência solar com o Yello Solar Hub
              
                Simplifique todo o processo de adoção de energia solar e maximize seu retorno sobre investimento.
              
              
                
                
              
              
                
                Mais de 5.000 projetos orquestrados com sucesso em todo o Brasil
              
            
          
        
      

      
        
          
            
              
              Yello
              /
              Cash
            
            © 2025 Yello/Cash. Todos os direitos reservados.
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/plataforma/solar-hub/loading.tsx" isMerged="true"
import { Loader2 } from "lucide-react"

export default function Loading() {
  return (
    
      
        
        Carregando Yello Solar Hub...
      
    
  )
}
[V0_FILE]typescriptreact:file="app/plataforma/solar-hub/ai-integration.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Bot, Sun, User, ImageIcon, Send } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function AIIntegration() {
  const [messages, setMessages] = useState([
    {
      role: "assistant",
      content: "Olá! Sou o assistente do Yello Solar Hub. Como posso ajudar com seu projeto solar hoje?",
    },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const handleSend = async () => {
    if (!input.trim()) return

    // Add user message
    const userMessage = { role: "user", content: input }
    setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

    try {
      // Simulate AI response using AI SDK
      // In a real implementation, this would use the AI SDK to generate a response
      setTimeout(() => {
        const responses = [
          "Baseado na análise do seu telhado, estimo um potencial de geração de aproximadamente 450 kWh/mês, o que pode representar uma economia de R$ 350 mensais na sua conta de luz.",
          "Para um sistema de 4kWp como o que você precisa, temos opções de pagamento flexíveis: à vista com 10% de desconto ou financiamento em até 60x com parcelas a partir de R$ 499/mês.",
          "O processo de instalação para seu projeto levará aproximadamente 3 dias, e a homologação junto à concessionária costuma levar entre 30 e 45 dias. Nosso sistema vai orquestrar todo esse processo para você.",
          "Analisando seu consumo energético, recomendo um sistema com 10 painéis de 450W e um inversor de 5kW. O retorno do investimento está estimado em 4.2 anos.",
        ]

        const randomResponse = responses[Math.floor(Math.random() * responses.length)]
        setMessages((prev) => [...prev, { role: "assistant", content: randomResponse }])
        setIsLoading(false)
      }, 1500)
    } catch (error) {
      console.error("Error generating response:", error)
      setMessages((prev) => [
        ...prev,
        {
          role: "assistant",
          content: "Desculpe, tive um problema ao processar sua solicitação. Pode tentar novamente?",
        },
      ])
      setIsLoading(false)
    }
  }

  return (
    
      
        
          
            
          
          
            Assistente Solar
            Powered by AI SDK
          
        
        Online
      

      
        {messages.map((message, index) => (
          
            {message.role === "assistant" && (
              
                
              
            )}

            
              {message.content}
            

            {message.role === "user" && (
              
                
              
            )}
          
        ))}

        {isLoading && (
          
            
              
            
            
              
                
                
                
              
            
          
        )}
      

      
        
          
             setInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSend()}
            />
            
          
          
        
        
          
            Powered by @ai-sdk/openai
          
          
            
            Yello AI
          
        
      
    
  )
}
[V0_FILE]plaintext:file="public/images/solar-hub-diagram.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-cIfoBPEzoVCfA2H9P1E2ZD1R2gcyK3.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/gauge.tsx" isMerged="true"
import { cn } from "@/lib/utils"
import type { CSSProperties, SVGProps } from "react"

export interface GaugeProps extends Omit, "className"> {
  value: number
  size?: number | string
  gapPercent?: number
  strokeWidth?: number
  equal?: boolean
  showValue?: boolean

  primary?: "danger" | "warning" | "success" | "info" | string | { [key: number]: string }
  secondary?: "danger" | "warning" | "success" | "info" | string | { [key: number]: string }

  transition?: {
    length?: number
    step?: number
    delay?: number
  }

  className?:
    | string
    | {
        svgClassName?: string
        primaryClassName?: string
        secondaryClassName?: string
        textClassName?: string
      }
}

/**
 * Renders a circular gauge using SVG. Allows configuration of colors, stroke, and animations.
 * @param value - Current value of the gauge, expressed as a percentage.
 * @param size = Width and height of the gauge. Defaults to 100%.
 * @param gapPercent -  Percentage of the total circumference that represents a gap in the gauge. Defaults to 5%.
 * @param strokeWidth - Stroke width of the gauge. Defaults to 10px.
 * @param equal - Determines if the gauge should have equal primary and secondary stroke lengths. Defaults to false.
 * @param showValue - Option to display the numeric value inside the gauge. Defaults to true.
 * @param primary - Primary color or set of colors for the gauge, with optional threshold values to determine color changes.
 * @param secondary - Secondary color or set of colors for the gauge, similar to `primary`.
 * @param transition - Transition settings for the gauge's animation, specifying the length, step, and delay of transitions.
 * @param className - Class names for different parts of the gauge, including the SVG container and individual elements.
 * @param props Configuration and properties for the svg.
 */
function Gauge({
  value,
  size = "100%",
  gapPercent = 5,
  strokeWidth = 10,
  equal = false,
  showValue = true,

  primary,
  secondary,

  transition = {
    length: 1000, // ms
    step: 200, // ms
    delay: 0, // ms
  },

  className,

  ...props
}: GaugeProps) {
  const strokePercent = value // %

  const circleSize = 100 // px
  const radius = circleSize / 2 - strokeWidth / 2
  const circumference = 2 * Math.PI * radius

  const percentToDegree = 360 / 100 // deg
  const percentToPx = circumference / 100 // px

  const offsetFactor = equal ? 0.5 : 0
  const offsetFactorSecondary = 1 - offsetFactor

  const primaryStrokeDasharray = () => {
    if (offsetFactor > 0 && strokePercent > 100 - gapPercent * 2 * offsetFactor) {
      // calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0
      const subtract = -strokePercent + 100

      return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}`
    } else {
      const subtract = gapPercent * 2 * offsetFactor

      return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}`
    }
  }

  const secondaryStrokeDasharray = () => {
    if (offsetFactorSecondary < 1 && strokePercent < gapPercent * 2 * offsetFactorSecondary) {
      // calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1
      const subtract = strokePercent

      return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}`
    } else {
      const subtract = gapPercent * 2 * offsetFactorSecondary

      return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}`
    }
  }

  const primaryTransform = () => {
    if (offsetFactor > 0 && strokePercent > 100 - gapPercent * 2 * offsetFactor) {
      // calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0
      const add = 0.5 * (-strokePercent + 100)

      return `rotate(${-90 + add * percentToDegree}deg)`
    } else {
      const add = gapPercent * offsetFactor

      return `rotate(${-90 + add * percentToDegree}deg)`
    }
  }

  const secondaryTransform = () => {
    if (offsetFactorSecondary < 1 && strokePercent < gapPercent * 2 * offsetFactorSecondary) {
      // calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1
      const subtract = 0.5 * strokePercent

      return `rotate(${360 - 90 - subtract * percentToDegree}deg) scaleY(-1)`
    } else {
      const subtract = gapPercent * offsetFactorSecondary

      return `rotate(${360 - 90 - subtract * percentToDegree}deg) scaleY(-1)`
    }
  }

  const primaryStroke = () => {
    if (!primary) {
      return strokePercent <= 25
        ? "#dc2626" // Red
        : strokePercent <= 50
          ? "#f59e0b" // Amber
          : strokePercent <= 75
            ? "#3b82f6" // Blue
            : "#22c55e" // Green
    } else if (typeof primary === "string") {
      return primary === "danger"
        ? "#dc2626" // Red
        : primary === "warning"
          ? "#f59e0b" // Amber
          : primary === "info"
            ? "#3b82f6" // Blue
            : primary === "success"
              ? "#22c55e" // Green
              : primary
    } else if (typeof primary === "object") {
      const primaryKeys = Object.keys(primary).sort((a, b) => Number(a) - Number(b))
      let primaryStroke = ""
      for (let i = 0; i < primaryKeys.length; i++) {
        const currentKey = Number(primaryKeys[i])
        const nextKey = Number(primaryKeys[i + 1])

        if (strokePercent >= currentKey && (strokePercent < nextKey || !nextKey)) {
          primaryStroke = primary[currentKey] || ""

          if (["danger", "warning", "success", "info"].includes(primaryStroke)) {
            primaryStroke =
              {
                danger: "#dc2626",
                warning: "#f59e0b",
                info: "#3b82f6",
                success: "#22c55e",
              }[primaryStroke] || primaryStroke
          }

          break
        }
      }
      return primaryStroke
    }
  }

  const secondaryStroke = () => {
    if (!secondary) {
      return "#9ca3af" // Default Gray
    } else if (typeof secondary === "string") {
      return secondary === "danger"
        ? "#fecaca" // Light Red
        : secondary === "warning"
          ? "#fde68a" // Light Amber
          : secondary === "info"
            ? "#bfdbfe" // Light Blue
            : secondary === "success"
              ? "#bbf7d0" // Light Green
              : secondary
    } else if (typeof secondary === "object") {
      const stroke_percent_secondary = 100 - strokePercent
      const secondaryKeys = Object.keys(secondary).sort((a, b) => Number(a) - Number(b))
      let secondaryStroke = ""

      for (let i = 0; i < secondaryKeys.length; i++) {
        const currentKey = Number(secondaryKeys[i])
        const nextKey = Number(secondaryKeys[i + 1])

        if (stroke_percent_secondary >= currentKey && (stroke_percent_secondary < nextKey || !nextKey)) {
          secondaryStroke = secondary[currentKey] || ""

          if (["danger", "warning", "success", "info"].includes(secondaryStroke)) {
            secondaryStroke =
              {
                danger: "#fecaca",
                warning: "#fde68a",
                info: "#bfdbfe",
                success: "#bbf7d0",
              }[secondaryStroke] || secondaryStroke
          }

          break
        }
      }
      return secondaryStroke
    }
  }

  const primaryOpacity = () => {
    if (
      offsetFactor > 0 &&
      strokePercent < gapPercent * 2 * offsetFactor &&
      strokePercent < gapPercent * 2 * offsetFactorSecondary
    ) {
      return 0
    } else return 1
  }

  const secondaryOpacity = () => {
    if (
      (offsetFactor === 0 && strokePercent > 100 - gapPercent * 2) ||
      (offsetFactor > 0 &&
        strokePercent > 100 - gapPercent * 2 * offsetFactor &&
        strokePercent > 100 - gapPercent * 2 * offsetFactorSecondary)
    ) {
      return 0
    } else return 1
  }

  const circleStyles: CSSProperties = {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeDashoffset: 0,
    strokeWidth: strokeWidth,
    transition: `all ${transition?.length}ms ease ${transition?.delay}ms`,
    transformOrigin: "50% 50%",
    shapeRendering: "geometricPrecision",
  }

  return (
    
  )
}

export { Gauge }
[V0_FILE]typescriptreact:file="components/ui/gauge-demo.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Gauge } from "@/components/ui/gauge"

export function GaugeDemo() {
  const [value, setValue] = useState(48) // Default value

  return (
    
      {/* Gauges */}
      
        
        
        
        
      

      {/* Slider to Control Gauge Value */}
       setValue(Number(e.target.value))}
        className="w-64 h-2 mt-10 bg-gray-300 rounded-lg appearance-none cursor-pointer"
      />

      {/* Display Value */}
      {value}%
    
  )
}
[V0_FILE]typescriptreact:file="components/payment-system.tsx" isQuickEdit="true" isMerged="true"
import {
  Check,
  CreditCard,
  Landmark,
  Zap,
  ArrowRight,
  Globe,
  BanknoteIcon,
  Coins,
  Receipt,
  CreditCardIcon,
  Sun,
  Wrench,
  Gauge,
  FileCheck,
  LightbulbIcon,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"

export default function PaymentSystem() {
  return (
    
      
        
          
            Capitalização de Projetos Solares
          
          Soluções Financeiras para Cada Etapa
          
            Métodos de pagamento que viabilizam toda a cadeia de valor dos projetos solares, do planejamento à
            homologação, com processamento seguro via Apache Finarect e Hyperswitch
          
        

        
          
            Tradicionais
            Por Marcos
            Alternativos
          

          
            
              
                Métodos Tradicionais
                
                  Opções de pagamento convencionais para capitalização imediata de projetos solares, ideais para
                  clientes com capital disponível que buscam maximizar o retorno sobre investimento.
                

                
                  {[
                    "Transferência bancária com desconto de 5% no valor total",
                    "Cartão de crédito em até 12x para projetos residenciais",
                    "Boleto bancário com compensação em 24h",
                    "Pagamento à vista com prioridade na instalação",
                  ].map((item, i) => (
                    
                      
                      {item}
                    
                  ))}
                

                
                  
                  
                    Aceito internacionalmente com conversão automática de moeda
                  
                

                
              

              
                
                  Capitalização Imediata
                  Exemplo para um projeto solar de R$ 40.000
                
                
                  
                    
                      
                        
                      
                      
                        Pagamento à Vista
                        Desconto de 5% = Economia de R$ 2.000
                        
                          Retorno em 3,8 anos
                        
                      
                      Recomendado
                    

                    
                      
                        
                      
                      
                        Cartão de Crédito
                        12x de R$ 3.667 (com juros)
                        
                          Retorno em 4,2 anos
                        
                      
                    

                    
                      
                        
                      
                      
                        Boleto Bancário
                        Pagamento à vista com 3% de desconto
                        
                          Retorno em 3,9 anos
                        
                      
                    
                  
                
                
                  
                    Economia média mensal
                    R$ 850/mês
                  
                  
                
              
            
          

          
            
              
                Pagamento por Marcos
                
                  Divida os pagamentos em etapas críticas da cadeia de valor do projeto solar, alinhando o fluxo de
                  caixa com as entregas concretas e reduzindo riscos.
                

                
                  {[
                    "Sem taxas de financiamento adicionais",
                    "Visibilidade clara do progresso do projeto",
                    "Pagamento vinculado à conclusão de entregas específicas",
                    "Proteção financeira com pagamentos proporcionais às entregas",
                  ].map((item, i) => (
                    
                      
                      {item}
                    
                  ))}
                

                
                  Certificado ANEEL
                  Padrão Internacional
                

                
              

              
                
                  Cadeia de Valor do Projeto Solar
                  Exemplo para um projeto típico de R$ 40.000
                

                
                  
                    {[
                      {
                        name: "Marco 1: Planejamento",
                        description: "Visita técnica e dossiê solar",
                        percentage: "15%",
                        value: "R$ 6.000",
                        progress: 15,
                        icon: ,
                        status: "completed",
                        tip: "Pagamento inicial libera o planejamento detalhado do seu projeto",
                      },
                      {
                        name: "Marco 2: Aquisição",
                        description: "Compra de equipamentos",
                        percentage: "35%",
                        value: "R$ 14.000",
                        progress: 35,
                        icon: ,
                        status: "in-progress",
                        tip: "Garanta os melhores equipamentos com pagamento pontual",
                      },
                      {
                        name: "Marco 3: Instalação",
                        description: "Montagem e integração do sistema",
                        percentage: "25%",
                        value: "R$ 10.000",
                        progress: 25,
                        icon: ,
                        status: "pending",
                        tip: "Agende sua instalação assim que confirmar este pagamento",
                      },
                      {
                        name: "Marco 4: Homologação",
                        description: "Aprovação pela concessionária",
                        percentage: "25%",
                        value: "R$ 10.000",
                        progress: 25,
                        icon: ,
                        status: "pending",
                        tip: "Pagamento final desbloqueia a homologação junto à concessionária",
                      },
                    ].map((milestone, i) => (
                      
                        
                          
                            
                              {milestone.status === "completed" ? (
                                
                              ) : (
                                milestone.icon
                              )}
                            
                            
                              
                                {milestone.name}
                                {milestone.status === "completed" && (
                                  
                                    Concluído 🎉
                                  
                                )}
                                {milestone.status === "in-progress" && (
                                  
                                    Em andamento ⏳
                                  
                                )}
                              
                              {milestone.description}
                            
                          
                          
                            {milestone.percentage}
                            {milestone.value}
                          
                        

                        {/* Tip section */}
                        {milestone.status !== "completed" && (
                          
                            
                              
                              {milestone.tip}
                            
                          
                        )}

                        {/* Payment action button */}
                        {milestone.status === "in-progress" && (
                          
                            
                          
                        )}

                        

                        {/* Celebration for completed milestone */}
                        {milestone.status === "completed" && i === 0 && (
                          
                            
                              
                                {[...Array(5)].map((_, index) => (
                                  
                                    {["🎉", "✨", "🌟", "💫", "🏆"][index % 5]}
                                  
                                ))}
                              
                            
                          
                        )}
                      
                    ))}

                    {/* AHA Moment - Final Celebration */}
                    
                      
                        Ao concluir todos os pagamentos
                      

                      
                        
                          
                            
                          
                          
                            Momento AHA! 🎊
                            Seu sistema solar estará 100% operacional
                          
                        
                        
                          
                            🏆
                          
                          
                            🌞
                          
                          
                            💰
                          
                        
                      

                      
                        
                          Economia Imediata
                          Até R$ 950/mês na conta de luz
                        
                        
                          Energia Limpa
                          Valorização do Imóvel
                          Independência Energética
                        
                      
                    
                  
                

                
                  
                    Economia média mensal após conclusão
                    R$ 850/mês
                  
                  
                
              
            
          

          
            
              
                Métodos Alternativos
                
                  Soluções inovadoras de capitalização que viabilizam projetos solares sem comprometer o fluxo de caixa,
                  adaptadas às necessidades específicas do mercado brasileiro.
                

                
                  {[
                    "Financiamento com taxas a partir de 0,99% a.m.",
                    "Leasing solar com opção de compra ao final do contrato",
                    "Consórcio solar com parcelas reduzidas e sem juros",
                    "Sistema de assinatura solar com pagamento mensal",
                  ].map((item, i) => (
                    
                      
                      {item}
                    
                  ))}
                

                
                  
                  Economia imediata sem investimento inicial significativo
                

                
              

              
                
                  Capitalização Alternativa
                  Exemplo para um projeto solar de R$ 40.000
                
                
                  
                    
                      
                        
                      
                      
                        Financiamento Solar
                        60x de R$ 950 (0,99% a.m.)
                        
                          Economia mensal: R$ 850
                          
                            Economia líquida: R$ 100/mês desde o início
                          
                        
                      
                      Popular
                    

                    
                      
                        
                      
                      
                        Consórcio Solar
                        Parcelas a partir de R$ 599/mês sem juros
                        
                          Prazo médio de contemplação: 24 meses
                          Economia após contemplação: R$ 850/mês
                        
                      
                      Econômico
                    

                    
                      
                        
                      
                      
                        Assinatura Solar
                        Mensalidade de R$ 650 por 5 anos
                        
                          Sem investimento inicial
                          Economia imediata: R$ 200/mês
                        
                      
                      Zero Investimento
                    
                  
                
                
                  
                    Economia média em 10 anos
                    R$ 102.000
                  
                  
                
              
            
          
        

        
          
            Processamento Financeiro Seguro
            
              
                
                  
                
                Apache Finarect
                
                  Processamento financeiro especializado para projetos de energia renovável, com monitoramento em tempo
                  real de cada etapa da cadeia de valor.
                
                
                  Projetos Internacionais
                  Multimoeda
                
                
              

              
                
                  
                
                Hyperswitch
                
                  Roteamento inteligente de pagamentos adaptado à cadeia de valor solar, garantindo a capitalização
                  adequada em cada fase do projeto.
                
                
                  Integração Bancária
                  Métodos Brasileiros
                
                
              
            

            
              Certificações e Conformidade
              
                
                  PCI DSS
                
                
                  ISO 27001
                
                
                  LGPD Compliant
                
                
                  BACEN Autorizado
                
                
                  ANEEL Certificado
                
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()

  return (
    
      
        
      
      
         setTheme("light")} className="flex items-center gap-2">
          
          Claro
          {theme === "light" && ✓}
        
         setTheme("dark")} className="flex items-center gap-2">
          
          Escuro
          {theme === "dark" && ✓}
        
         setTheme("system")} className="flex items-center gap-2">
          💻
          Sistema
          {theme === "system" && ✓}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/ui/brand-card.tsx" isQuickEdit="true" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

// Update the cardVariants to incorporate brand styling with blackout dark mode
const cardVariants = cva("rounded-lg border bg-card text-card-foreground shadow-sm", {
  variants: {
    variant: {
      default: "",
      elevated: "shadow-md",
      outline: "shadow-none",
      // Brand variants
      brand: "border-yellow-200/30 dark:border-yellow-800/20 bg-white dark:bg-black",
      "brand-accent":
        "border-yellow-300/30 dark:border-yellow-700/20 bg-gradient-to-br from-yellow-50 to-yellow-100/5 dark:from-yellow-950/10 dark:to-yellow-900/10",
      "brand-secondary": "border-green-200/30 dark:border-green-800/20 bg-green-50/5 dark:bg-green-950/10",
      "brand-highlight": "border-yellow-300 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/30",
      "brand-info": "border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-950/30",
      "brand-warning": "border-orange-300 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/30",
      "brand-danger": "border-red-300 dark:border-red-600 bg-red-50 dark:bg-red-950/30",
    },
    padding: {
      default: "p-6",
      sm: "p-4",
      lg: "p-8",
      none: "",
    },
    hover: {
      default: "",
      lift: "transition-all duration-300 hover:shadow-md hover:-translate-y-1",
      glow: "transition-all duration-300 hover:shadow-md dark:hover:shadow-[0_0_15px_rgba(255,206,0,0.3)]",
      border: "transition-all duration-300 hover:border-yellow-400 dark:hover:border-yellow-500",
    },
  },
  defaultVariants: {
    variant: "default",
    padding: "default",
    hover: "default",
  },
})

export interface BrandCardProps extends React.HTMLAttributes, VariantProps {}

const BrandCard = React.forwardRef(
  ({ className, variant, padding, hover, ...props }, ref) => (
    
  ),
)
BrandCard.displayName = "BrandCard"

const BrandCardHeader = React.forwardRef>(
  ({ className, ...props }, ref) => ,
)
BrandCardHeader.displayName = "BrandCardHeader"

const BrandCardTitle = React.forwardRef>(
  ({ className, ...props }, ref) => (
    
  ),
)
BrandCardTitle.displayName = "BrandCardTitle"

const BrandCardDescription = React.forwardRef>(
  ({ className, ...props }, ref) => (
    
  ),
)
BrandCardDescription.displayName = "BrandCardDescription"

const BrandCardContent = React.forwardRef>(
  ({ className, ...props }, ref) => 
,
)
BrandCardContent.displayName = "BrandCardContent"

const BrandCardFooter = React.forwardRef>(
  ({ className, ...props }, ref) => ,
)
BrandCardFooter.displayName = "BrandCardFooter"

export { BrandCard, BrandCardHeader, BrandCardFooter, BrandCardTitle, BrandCardDescription, BrandCardContent }
[V0_FILE]typescriptreact:file="components/ui/brand-button.tsx" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "@radix-ui/react-slot"
import { cn } from "@/lib/utils"
import { Sparkles, ArrowRight } from "lucide-react"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        // Brand variants
        brand:
          "bg-gradient-to-r from-yellow-500 to-yellow-600 text-black hover:opacity-90 font-semibold dark:shadow-[0_0_10px_rgba(255,206,0,0.3)]",
        "brand-secondary":
          "bg-green-500 text-white hover:bg-green-600 font-semibold dark:shadow-[0_0_10px_rgba(16,185,129,0.3)]",
        "brand-outline":
          "border-2 border-yellow-500 text-yellow-600 dark:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-950/20 font-semibold",
        "brand-ghost":
          "text-yellow-600 dark:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-950/20 font-semibold",
        "brand-blue":
          "bg-blue-500 text-white hover:bg-blue-600 font-semibold dark:shadow-[0_0_10px_rgba(59,130,246,0.3)]",
        "brand-danger":
          "bg-red-500 text-white hover:bg-red-600 font-semibold dark:shadow-[0_0_10px_rgba(239,68,68,0.3)]",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        xl: "h-12 rounded-md px-8 text-base",
        icon: "h-10 w-10",
      },
      hasIcon: {
        true: "",
        false: "",
      },
      isAnimated: {
        true: "",
        false: "",
      },
    },
    compoundVariants: [
      {
        hasIcon: true,
        size: "default",
        class: "gap-2",
      },
      {
        hasIcon: true,
        size: "sm",
        class: "gap-1.5",
      },
      {
        hasIcon: true,
        size: "lg",
        class: "gap-2",
      },
      {
        hasIcon: true,
        size: "xl",
        class: "gap-2.5",
      },
      {
        isAnimated: true,
        variant: "brand",
        class: "relative overflow-hidden transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]",
      },
      {
        isAnimated: true,
        variant: "brand-secondary",
        class: "relative overflow-hidden transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]",
      },
    ],
    defaultVariants: {
      variant: "default",
      size: "default",
      hasIcon: false,
      isAnimated: false,
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes,
    VariantProps {
  asChild?: boolean
  rightIcon?: React.ReactNode
  leftIcon?: React.ReactNode
  iconSparkle?: boolean
}

const BrandButton = React.forwardRef(
  (
    {
      className,
      variant,
      size,
      hasIcon,
      isAnimated,
      asChild = false,
      rightIcon,
      leftIcon,
      iconSparkle,
      children,
      ...props
    },
    ref,
  ) => {
    const Comp = asChild ? Slot : "button"

    // Determine automatically if has icon
    const hasIconValue = hasIcon || rightIcon || leftIcon || iconSparkle ? true : false

    // Add subtle shine animation for brand buttons
    const [isHovering, setIsHovering] = React.useState(false)

    return (
       setIsHovering(true)}
        onMouseLeave={() => setIsHovering(false)}
        {...props}
      >
        {/* Add shine effect for brand buttons */}
        {variant?.includes("brand") && isHovering && (
          
        )}

        {leftIcon && leftIcon}
        {iconSparkle && }
        {children}
        {rightIcon && rightIcon}
        {variant === "brand" && !rightIcon && !leftIcon && !iconSparkle && }
      
    )
  },
)
BrandButton.displayName = "BrandButton"

export { BrandButton, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/brand-badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
        // Brand variants
        "brand-gradient":
          "bg-gradient-to-r from-yello-yellow via-yello-orange to-yello-pink text-black border-transparent dark:shadow-[0_0_10px_rgba(255,206,0,0.3)]",
        "brand-yellow":
          "bg-yello-yellow/20 text-yello-orange hover:bg-yello-yellow/30 border-transparent dark:text-yello-yellow dark:bg-yello-yellow/10",
        "brand-orange":
          "bg-yello-orange/20 text-yello-orange hover:bg-yello-orange/30 border-transparent dark:text-yello-orange dark:bg-yello-orange/10",
        "brand-pink":
          "bg-yello-pink/20 text-yello-pink hover:bg-yello-pink/30 border-transparent dark:text-yello-pink dark:bg-yello-pink/10",
        "brand-sky":
          "bg-yello-sky/20 text-yello-sky hover:bg-yello-sky/30 border-transparent dark:text-yello-sky dark:bg-yello-sky/10",
        "brand-green":
          "bg-yello-green/20 text-yello-green hover:bg-yello-green/30 border-transparent dark:text-yello-green dark:bg-yello-green/10",
      },
      size: {
        default: "text-xs px-2.5 py-0.5",
        sm: "text-[10px] px-2 py-0.5",
        lg: "text-sm px-3 py-1",
      },
      withIcon: {
        true: "pl-2",
        false: "",
      },
    },
    compoundVariants: [
      {
        withIcon: true,
        size: "default",
        class: "gap-1",
      },
      {
        withIcon: true,
        size: "sm",
        class: "gap-0.5",
      },
      {
        withIcon: true,
        size: "lg",
        class: "gap-1.5",
      },
    ],
    defaultVariants: {
      variant: "default",
      size: "default",
      withIcon: false,
    },
  },
)

export interface BrandBadgeProps extends React.HTMLAttributes, VariantProps {
  icon?: React.ReactNode
}

function BrandBadge({ className, variant, size, withIcon, icon, children, ...props }: BrandBadgeProps) {
  // Determina automaticamente se tem ícone
  const hasIcon = withIcon || icon ? true : false

  return (
    
      {icon && icon}
      {children}
    
  )
}

export { BrandBadge, badgeVariants }
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { ThemeToggle } from "@/components/theme-toggle"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Yello Solar - Financiamento Simplificado para Energia Solar",
  description: "Soluções de pagamento que viabilizam cada etapa da cadeia de valor dos projetos solares",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    
      
        
          
            
          
          {children}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return {children}
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true"
import { ArrowRight, Sun, CreditCard, LineChart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

export default function HeroSection() {
  return (
    
      {/* Fundo adaptado para o modo escuro */}
      

      {/* Elementos decorativos com efeito de brilho no modo escuro */}
      
      

      
        
          
            
              
                
              
              Capitalização de Projetos Solares
            

            {/* Badges com estilo adaptado para o modo escuro */}
            
              
                Autoridade Internacional
              
              
                Adaptação Brasileira
              
            

            {/* Título com efeito de gradiente que se destaca no modo escuro */}
            
              Financiamento{" "}
              
                simplificado
              {" "}
              para energia solar
            
            
              Soluções de pagamento que viabilizam cada etapa da cadeia de valor dos projetos solares, do planejamento à
              homologação.
            

            
              
                Pagamentos Tradicionais
              
              
                Pagamentos por Marcos
              
              
                Financiamento Alternativo
              
            

            
              
              
            

            
              
                {[1, 2, 3, 4].map((i) => (
                  
                    {i}
                  
                ))}
              
              
                Mais de R$ 250 milhões em projetos solares
                financiados
              
            
          
          
            
              
              
                
                  Financiamento Inteligente
                  Soluções adaptadas a cada fase do projeto solar
                
              
            

            
              
                
                  
                
                
                  ROI Acelerado
                  Retorno do investimento em até 4 anos
                
              
            

            
              
                
                  
                
                
                  Pagamento por Marcos
                  Alinhado com as entregas do projeto
                
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/features.tsx" isQuickEdit="true" isMerged="true"
import { Sun, CreditCard, Wallet, BanknoteIcon, LineChart, Clock } from "lucide-react"
import { Badge } from "@/components/ui/badge"

export default function Features() {
  const features = [
    {
      icon: ,
      title: "Capitalização de Projetos Solares",
      description: "Soluções financeiras que viabilizam cada etapa da cadeia de valor dos projetos de energia solar.",
      badge: "Essencial",
      emoji: "☀️",
      memoji: "👨‍💼",
    },
    {
      icon: ,
      title: "Pagamentos Tradicionais",
      description: "Opções de capitalização imediata com descontos especiais para maximizar o retorno do investimento.",
      badge: "ROI Maximizado",
      emoji: "💳",
      memoji: "👩‍💻",
    },
    {
      icon: ,
      title: "Pagamentos por Marcos",
      description:
        "Alinhamento financeiro com cada etapa da cadeia de valor, reduzindo riscos e otimizando o fluxo de caixa.",
      badge: "Baixo Risco",
      emoji: "🏆",
      memoji: "🧑‍🔧",
    },
    {
      icon: ,
      title: "Financiamento Alternativo",
      description: "Soluções inovadoras que permitem capitalização sem investimento inicial significativo.",
      badge: "Zero Entrada",
      emoji: "💰",
      memoji: "👨‍🚀",
    },
    {
      icon: ,
      title: "Análise de Retorno",
      description: "Cálculos detalhados de ROI, payback e economia mensal para cada opção de pagamento.",
      badge: "Transparente",
      emoji: "📈",
      memoji: "🧑‍💻",
    },
    {
      icon: ,
      title: "Cronograma Financeiro",
      description: "Planejamento detalhado dos desembolsos alinhados com o cronograma de execução do projeto solar.",
      badge: "Previsibilidade",
      emoji: "⏱️",
      memoji: "👩‍🔬",
    },
  ]

  return (
    
      
        
          Soluções Financeiras para Energia Solar
          
            Facilitando a capitalização em cada etapa da cadeia de valor dos projetos solares
          
        

        
          {features.map((feature, index) => (
            
              {/* Memoji positioned in top-right corner */}
              
                {feature.memoji}
              

              
                
                  {feature.icon}
                
                
                  {feature.emoji} {feature.badge}
                
              
              
                {feature.title}
              
              {feature.description}

              
                
                  {feature.emoji} Saiba mais
                
                
                  
                
              
            
          ))}
        

        
          
            Cadeia de Valor Financiada
            
              Nossa plataforma oferece soluções de capitalização para cada etapa da cadeia de valor dos projetos
              solares, desde o planejamento inicial até a homologação final, garantindo o fluxo financeiro adequado para
              viabilizar projetos de todos os portes.
            

            
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/auth/sign-in/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { useState } from "react"
import { ArrowLeft, Sun, Mail, Lock, Eye, EyeOff } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Separator } from "@/components/ui/separator"

export default function SignInPage() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    
      
        
          
          /
          Cash
        
      

      
        
          
            
              
              Voltar para a página inicial
            
            Entrar na sua conta
            Acesse sua conta para gerenciar seus projetos solares
          

          
            
              
              
            

            
              
              
            

            
              
                
              
              
                Ou continue com
              
            

            
              
                
                  Email
                
                
                  
                  
                
              

              
                
                  Senha
                
                
                  
                  
                  
                
              

              
                
                  
                  
                    Lembrar de mim
                  
                
                
                  Esqueceu a senha?
                
              

              
            

            
              Não tem uma conta?{" "}
              
                Registre-se
              
            
          
        
      

      
        
          
            
            Yello
            /
            Cash
          
          © 2025 Yello/Cash. Todos os direitos reservados.
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { useState } from "react"
import { ArrowLeft, Sun, Mail, Lock, Eye, EyeOff, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Separator } from "@/components/ui/separator"

export default function SignUpPage() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    
      
        
          
          /
          Cash
        
      

      
        
          
            
              
              Voltar para a página inicial
            
            Criar uma conta
            Registre-se para começar a gerenciar seus projetos solares
          

          
            
              
              
            

            
              
              
            

            
              
                
              
              
                Ou continue com
              
            

            
              
                
                  
                    Nome
                  
                  
                    
                    
                  
                

                
                  
                    Sobrenome
                  
                  
                    
                    
                  
                
              

              
                
                  Email
                
                
                  
                  
                
              

              
                
                  Senha
                
                
                  
                  
                  
                
                A senha deve ter pelo menos 8 caracteres
              

              
                
                
                  Eu concordo com os{" "}
                  
                    Termos de Serviço
                  {" "}
                  e{" "}
                  
                    Política de Privacidade
                  
                
              

              
            

            
              Já tem uma conta?{" "}
              
                Faça login
              
            
          
        
      

      
        
          
            
            Yello
            /
            Cash
          
          © 2025 Yello/Cash. Todos os direitos reservados.
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/auth/forgot-password/page.tsx" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { ArrowLeft, Sun, Mail, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function ForgotPasswordPage() {
  return (
    
      
        
          
          /
          Cash
        
      

      
        
          
            
              
              Voltar para o login
            
            Recuperar senha
            Enviaremos um link para redefinir sua senha
          

          
            
              
                Email
              
              
                
                
              
            

            
          

          
            Lembrou sua senha?{" "}
            
              Voltar para o login
            
          
        
      

      
        
          
            
            Yello
            /
            Cash
          
          © 2025 Yello/Cash. Todos os direitos reservados.
        
      
    
  )
}
[V0_FILE]typescript:file="lib/services/base-service.ts" isMerged="true"
/**
 * Base Service class that provides common functionality for all services
 * Implements basic CRUD operations and caching support
 */
import { cache } from "@/lib/cache/cache-service"
import { logger } from "@/lib/utils/logger"

export class BaseService {
  protected entityName: string
  protected cacheTTL = 3600 // Default cache TTL in seconds (1 hour)

  constructor(entityName: string, cacheTTL?: number) {
    this.entityName = entityName
    if (cacheTTL) this.cacheTTL = cacheTTL
  }

  /**
   * Generate a cache key for an entity
   */
  protected getCacheKey(id?: string | number): string {
    return id ? `${this.entityName}:${id}` : `${this.entityName}:all`
  }

  /**
   * Invalidate cache for an entity or collection
   */
  protected async invalidateCache(id?: string | number): Promise {
    const key = this.getCacheKey(id)
    await cache.del(key)
    logger.info(`Cache invalidated for ${key}`)
  }

  /**
   * Get data with caching support
   */
  protected async getWithCache(id: string | number, fetchFn: () => Promise): Promise {
    const cacheKey = this.getCacheKey(id)

    // Try to get from cache first
    const cachedData = await cache.get(cacheKey)
    if (cachedData) {
      logger.debug(`Cache hit for ${cacheKey}`)
      return cachedData
    }

    // If not in cache, fetch data
    logger.debug(`Cache miss for ${cacheKey}`)
    const data = await fetchFn()

    // Store in cache
    await cache.set(cacheKey, data, this.cacheTTL)

    return data
  }

  /**
   * Get collection with caching support
   */
  protected async getAllWithCache(fetchFn: () => Promise): Promise {
    const cacheKey = this.getCacheKey()

    // Try to get from cache first
    const cachedData = await cache.get(cacheKey)
    if (cachedData) {
      logger.debug(`Cache hit for ${cacheKey}`)
      return cachedData
    }

    // If not in cache, fetch data
    logger.debug(`Cache miss for ${cacheKey}`)
    const data = await fetchFn()

    // Store in cache
    await cache.set(cacheKey, data, this.cacheTTL)

    return data
  }
}
[V0_FILE]typescript:file="lib/cache/cache-service.ts" isMerged="true"
/**
 * Enhanced caching service with support for multiple strategies
 * and configurable expiration times
 */
import { logger } from "@/lib/utils/logger"

// Cache item interface
interface CacheItem {
  value: T
  expiry: number | null // null means no expiration
}

// Cache strategy interface
export interface CacheStrategy {
  get(key: string): Promise
  set(key: string, value: T, ttl?: number): Promise
  del(key: string): Promise
  flush(): Promise
}

// Memory cache implementation
class MemoryCacheStrategy implements CacheStrategy {
  private cache: Map> = new Map()

  async get(key: string): Promise {
    const item = this.cache.get(key)

    if (!item) return null

    // Check if expired
    if (item.expiry && item.expiry < Date.now()) {
      this.cache.delete(key)
      return null
    }

    return item.value as T
  }

  async set(key: string, value: T, ttl?: number): Promise {
    const expiry = ttl ? Date.now() + ttl * 1000 : null
    this.cache.set(key, { value, expiry })
  }

  async del(key: string): Promise {
    this.cache.delete(key)
  }

  async flush(): Promise {
    this.cache.clear()
  }
}

// Cache service with strategy pattern
class CacheService {
  private strategy: CacheStrategy

  constructor(strategy: CacheStrategy) {
    this.strategy = strategy
  }

  async get(key: string): Promise {
    try {
      return await this.strategy.get(key)
    } catch (error) {
      logger.error(`Cache get error for key ${key}:`, error)
      return null
    }
  }

  async set(key: string, value: T, ttl?: number): Promise {
    try {
      await this.strategy.set(key, value, ttl)
    } catch (error) {
      logger.error(`Cache set error for key ${key}:`, error)
    }
  }

  async del(key: string): Promise {
    try {
      await this.strategy.del(key)
    } catch (error) {
      logger.error(`Cache delete error for key ${key}:`, error)
    }
  }

  async flush(): Promise {
    try {
      await this.strategy.flush()
    } catch (error) {
      logger.error("Cache flush error:", error)
    }
  }

  // Helper method to set with a specific TTL
  async setWithTTL(key: string, value: T, ttl: number): Promise {
    await this.set(key, value, ttl)
  }
}

// Export a singleton instance with memory cache strategy by default
export const cache = new CacheService(new MemoryCacheStrategy())
[V0_FILE]typescript:file="lib/utils/logger.ts" isMerged="true"
/**
 * Logger utility for consistent logging across the application
 */
type LogLevel = "debug" | "info" | "warn" | "error"

class Logger {
  private logLevel: LogLevel = "info"

  constructor(level?: LogLevel) {
    if (level) this.logLevel = level

    // Set log level from environment if available
    if (process.env.LOG_LEVEL) {
      this.logLevel = process.env.LOG_LEVEL as LogLevel
    }
  }

  private shouldLog(level: LogLevel): boolean {
    const levels: Record = {
      debug: 0,
      info: 1,
      warn: 2,
      error: 3,
    }

    return levels[level] >= levels[this.logLevel]
  }

  debug(message: string, ...args: any[]): void {
    if (this.shouldLog("debug")) {
      console.debug(`[DEBUG] ${message}`, ...args)
    }
  }

  info(message: string, ...args: any[]): void {
    if (this.shouldLog("info")) {
      console.info(`[INFO] ${message}`, ...args)
    }
  }

  warn(message: string, ...args: any[]): void {
    if (this.shouldLog("warn")) {
      console.warn(`[WARN] ${message}`, ...args)
    }
  }

  error(message: string, ...args: any[]): void {
    if (this.shouldLog("error")) {
      console.error(`[ERROR] ${message}`, ...args)
    }
  }
}

export const logger = new Logger()
[V0_FILE]typescript:file="lib/services/property-service.ts" isMerged="true"
/**
 * Property service for handling property-related business logic
 */
import { BaseService } from "./base-service"
import { logger } from "@/lib/utils/logger"

// Property interface
export interface Property {
  id: number
  title: string
  type: string
  location: string
  area: string
  price: string
  image: string
  featured?: boolean
  energy?: string
  paymentOptions?: {
    type: string
    name: string
    description: string
    processor: string
    details: string
  }
}

// Mock database for demonstration
const mockProperties: Property[] = [
  {
    id: 1,
    title: "Apartamento Moderno",
    type: "Apartamento",
    location: "São Paulo, SP",
    area: "120m²",
    price: "R$ 750.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: true,
    energy: "Sistema Solar Instalado",
    paymentOptions: {
      type: "traditional",
      name: "Financiamento Tradicional",
      description: "Linha de crédito com taxa fixa de 9.5% a.a.",
      processor: "Lago Payments",
      details: "Aprovação em 48h, entrada de 20%",
    },
  },
  {
    id: 2,
    title: "Casa em Condomínio",
    type: "Casa",
    location: "Rio de Janeiro, RJ",
    area: "220m²",
    price: "R$ 1.200.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: false,
    energy: "Preparado para Energia Solar",
    paymentOptions: {
      type: "flexible",
      name: "Pagamento Misto",
      description: "30% entrada + financiamento + cartão",
      processor: "Hyperswitch",
      details: "Parcelamento em até 60x",
    },
  },
  {
    id: 3,
    title: "Sala Comercial",
    type: "Comercial",
    location: "Belo Horizonte, MG",
    area: "85m²",
    price: "R$ 450.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: false,
    energy: "Energia Net Zero",
    paymentOptions: {
      type: "milestone",
      name: "Pagamento por Marcos",
      description: "4 etapas de implementação solar",
      processor: "Finarect",
      details: "Pagamentos vinculados a entregas",
    },
  },
]

export class PropertyService extends BaseService {
  constructor() {
    // Set entity name and cache TTL (30 minutes)
    super("property", 1800)
  }

  /**
   * Get all properties with optional filtering
   */
  async getAllProperties(filters?: {
    featured?: boolean
    type?: string
    location?: string
  }): Promise {
    return this.getAllWithCache(async () => {
      let properties = [...mockProperties]

      // Apply filters if provided
      if (filters) {
        if (filters.featured !== undefined) {
          properties = properties.filter((p) => p.featured === filters.featured)
        }

        if (filters.type) {
          properties = properties.filter((p) => p.type === filters.type)
        }

        if (filters.location) {
          properties = properties.filter((p) => p.location.includes(filters.location))
        }
      }

      return properties
    })
  }

  /**
   * Get a property by ID
   */
  async getPropertyById(id: number): Promise {
    return this.getWithCache(id, async () => {
      const property = mockProperties.find((p) => p.id === id)
      return property || null
    })
  }

  /**
   * Create a new property
   */
  async createProperty(propertyData: Omit): Promise {
    // Generate a new ID (in a real app, this would be handled by the database)
    const newId = Math.max(...mockProperties.map((p) => p.id)) + 1

    const newProperty: Property = {
      id: newId,
      ...propertyData,
    }

    // In a real app, this would save to a database
    mockProperties.push(newProperty)

    // Invalidate the collection cache
    await this.invalidateCache()

    logger.info(`Created new property with ID ${newId}`)
    return newProperty
  }

  /**
   * Update a property
   */
  async updateProperty(id: number, propertyData: Partial): Promise {
    const index = mockProperties.findIndex((p) => p.id === id)

    if (index === -1) {
      return null
    }

    // Update the property
    const updatedProperty = {
      ...mockProperties[index],
      ...propertyData,
    }

    mockProperties[index] = updatedProperty

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Updated property with ID ${id}`)
    return updatedProperty
  }

  /**
   * Delete a property
   */
  async deleteProperty(id: number): Promise {
    const index = mockProperties.findIndex((p) => p.id === id)

    if (index === -1) {
      return false
    }

    // Remove the property
    mockProperties.splice(index, 1)

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Deleted property with ID ${id}`)
    return true
  }

  /**
   * Get featured properties
   */
  async getFeaturedProperties(): Promise {
    return this.getAllWithCache(async () => {
      return mockProperties.filter((p) => p.featured)
    })
  }
}

// Export a singleton instance
export const propertyService = new PropertyService()
[V0_FILE]typescript:file="lib/services/owner-service.ts" isFixed="true" isQuickEdit="true" isMerged="true"
/**
 * Owner service for handling owner-related business logic
 */
import { BaseService } from "./base-service"
import { logger } from "@/lib/utils/logger"
import { cache } from "@/lib/utils/cache"

// Owner interface
export interface Owner {
  id: number
  name: string
  email: string
  phone: string
  properties: number
  image: string
  initials: string
  region?: string
  regionEmoji?: string
  regionColor?: string
  regionDescription?: string
  specialization?: string
  memoji?: string
  bio?: string
  socialLinks?: {
    linkedin?: string
    twitter?: string
    facebook?: string
    github?: string
    [key: string]: string | undefined
  }
}

// Mock database for demonstration
const mockOwners: Owner[] = [
  {
    id: 1,
    name: "Carlos Silva",
    email: "carlos.silva@email.com",
    phone: "(11) 98765-4321",
    properties: 3,
    image: "/placeholder.svg?height=100&width=100",
    initials: "CS",
    region: "Sudeste",
    regionEmoji: "🏙️",
    regionColor: "bg-blue-500",
    regionDescription: "Grandes metrópoles e indústrias",
    specialization: "Sistemas Fotovoltaicos Residenciais",
    memoji: "👨‍💼",
    bio: "Especialista em energia solar com mais de 10 anos de experiência no Sudeste brasileiro.",
  },
  {
    id: 2,
    name: "Ana Oliveira",
    email: "ana.oliveira@email.com",
    phone: "(21) 98765-5678",
    properties: 2,
    image: "/placeholder.svg?height=100&width=100",
    initials: "AO",
    region: "Nordeste",
    regionEmoji: "🏖️",
    regionColor: "bg-yellow-500",
    regionDescription: "Sol abundante e praias paradisíacas",
    specialization: "Usinas Solares de Grande Porte",
    memoji: "👩‍💼",
    bio: "Desenvolvedora de projetos solares para o agronegócio, com foco em sustentabilidade.",
  },
  {
    id: 3,
    name: "Roberto Santos",
    email: "roberto.santos@email.com",
    phone: "(31) 98765-4321",
    properties: 5,
    image: "/placeholder.svg?height=100&width=100",
    initials: "RS",
    region: "Sul",
    regionEmoji: "🍇",
    regionColor: "bg-purple-500",
    regionDescription: "Clima temperado e tradições europeias",
    specialization: "Integração Solar em Edifícios",
    memoji: "👨‍🔧",
    bio: "Engenheiro especializado em integração de sistemas solares em edifícios urbanos.",
  },
]

export class OwnerService extends BaseService {
  constructor() {
    // Set entity name and cache TTL (1 hour)
    super("owner", 3600)
  }

  /**
   * Get all owners with optional filtering
   */
  async getAllOwners(filters?: {
    region?: string
    minProperties?: number
  }): Promise {
    return this.getAllWithCache(async () => {
      let owners = [...mockOwners]

      // Apply filters if provided
      if (filters) {
        if (filters.region) {
          owners = owners.filter((o) => o.region === filters.region)
        }

        if (filters.minProperties !== undefined) {
          owners = owners.filter((o) => o.properties >= filters.minProperties)
        }
      }

      return owners
    })
  }

  /**
   * Get an owner by ID
   */
  async getOwnerById(id: number): Promise {
    return this.getWithCache(id, async () => {
      const owner = mockOwners.find((o) => o.id === id)
      return owner || null
    })
  }

  /**
   * Create a new owner
   */
  async createOwner(ownerData: Omit): Promise {
    // Generate a new ID (in a real app, this would be handled by the database)
    const newId = Math.max(...mockOwners.map((o) => o.id)) + 1

    const newOwner: Owner = {
      id: newId,
      ...ownerData,
    }

    // In a real app, this would save to a database
    mockOwners.push(newOwner)

    // Invalidate the collection cache
    await this.invalidateCache()

    logger.info(`Created new owner with ID ${newId}`)
    return newOwner
  }

  /**
   * Update an owner
   */
  async updateOwner(id: number, ownerData: Partial): Promise {
    const index = mockOwners.findIndex((o) => o.id === id)

    if (index === -1) {
      return null
    }

    // Update the owner
    const updatedOwner = {
      ...mockOwners[index],
      ...ownerData,
    }

    mockOwners[index] = updatedOwner

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Updated owner with ID ${id}`)
    return updatedOwner
  }

  /**
   * Delete an owner
   */
  async deleteOwner(id: number): Promise {
    const index = mockOwners.findIndex((o) => o.id === id)

    if (index === -1) {
      return false
    }

    // Remove the owner
    mockOwners.splice(index, 1)

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Deleted owner with ID ${id}`)
    return true
  }

  /**
   * Get owners by region
   */
  async getOwnersByRegion(region: string): Promise {
    return this.getAllWithCache(async () => {
      return mockOwners.filter((o) => o.region === region)
    })
  }

  /**
   * Get all available regions
   */
  async getAllRegions(): Promise {
    const cacheKey = "owner:regions"

    // Try to get from cache first
    const cachedRegions = await cache.get(cacheKey)
    if (cachedRegions) {
      return cachedRegions
    }

    // If not in cache, compute regions
    const regions = [...new Set(mockOwners.map((o) => o.region).filter(Boolean))] as string[]

    // Store in cache
    await cache.set(cacheKey, regions, this.cacheTTL)

    return regions
  }
}

// Export a singleton instance
export const ownerService = new OwnerService()
[V0_FILE]typescript:file="lib/utils/auth-utils.ts" isMerged="true"
// Mock user database
const mockUsers = [
  {
    id: 1,
    email: "admin@example.com",
    name: "Admin User",
    roles: ["admin", "user"],
  },
  {
    id: 2,
    email: "user@example.com",
    name: "Regular User",
    roles: ["user"],
  },
]

// Mock API keys
const mockApiKeys: Record = {
  "api-key-1": { userId: 1, scopes: ["read:properties", "write:properties"] },
  "api-key-2": { userId: 2, scopes: ["read:properties"] },
}

/**
 * Verify JWT token
 * In a real app, this would use a JWT library like jsonwebtoken
 */
export async function verifyJWT(token: string): Promise {
  // This is a mock implementation
  // In a real app, you would verify the token signature and expiration

  if (token === "valid-admin-token") {
    return mockUsers[0]
  } else if (token === "valid-user-token") {
    return mockUsers[1]
  } else {
    throw new Error("Invalid token")
  }
}

/**
 * Verify API key
 */
export async function verifyApiKey(apiKey: string): Promise {
  const keyInfo = mockApiKeys[apiKey]

  if (!keyInfo) {
    throw new Error("Invalid API key")
  }

  const user = mockUsers.find((u) => u.id === keyInfo.userId)

  if (!user) {
    throw new Error("User not found for API key")
  }

  return {
    ...user,
    scopes: keyInfo.scopes,
  }
}

/**
 * Generate JWT token
 * In a real app, this would use a JWT library like jsonwebtoken
 */
export async function generateJWT(userId: number): Promise {
  // This is a mock implementation
  // In a real app, you would sign a JWT with a secret key

  if (userId === 1) {
    return "valid-admin-token"
  } else if (userId === 2) {
    return "valid-user-token"
  } else {
    throw new Error("Invalid user ID")
  }
}
[V0_FILE]typescript:file="lib/middleware/rate-limit-middleware.ts" isMerged="true"
/**
 * Rate limiting middleware to protect API endpoints from abuse
 */
import { type NextRequest, NextResponse } from "next/server"
import { logger } from "@/lib/utils/logger"

// Simple in-memory store for rate limiting
// In a production app, you would use Redis or another distributed store
const rateLimitStore: Record = {}

interface RateLimitOptions {
  limit: number
  windowMs: number
  keyGenerator?: (req: NextRequest) => string
  message?: string
  statusCode?: number
}

/**
 * Rate limiting middleware factory
 */
export function createRateLimitMiddleware(options: RateLimitOptions) {
  const {
    limit = 100,
    windowMs = 60 * 1000, // 1 minute by default
    keyGenerator = defaultKeyGenerator,
    message = "Too many requests, please try again later",
    statusCode = 429,
  } = options

  return async function rateLimitMiddleware(
    req: NextRequest,
    next: () => Promise,
  ): Promise {
    try {
      const key = keyGenerator(req)

      // Get current time
      const now = Date.now()

      // Initialize or reset if window has passed
      if (!rateLimitStore[key] || rateLimitStore[key].resetTime <= now) {
        rateLimitStore[key] = {
          count: 0,
          resetTime: now + windowMs,
        }
      }

      // Increment count
      rateLimitStore[key].count++

      // Get remaining requests
      const remaining = Math.max(0, limit - rateLimitStore[key].count)

      // Set headers
      const headers = new Headers()
      headers.set("X-RateLimit-Limit", limit.toString())
      headers.set("X-RateLimit-Remaining", remaining.toString())
      headers.set("X-RateLimit-Reset", Math.ceil(rateLimitStore[key].resetTime / 1000).toString())

      // Check if limit exceeded
      if (rateLimitStore[key].count > limit) {
        logger.warn(`Rate limit exceeded for ${key}`)

        // Add Retry-After header
        const retryAfter = Math.ceil((rateLimitStore[key].resetTime - now) / 1000)
        headers.set("Retry-After", retryAfter.toString())

        return NextResponse.json({ error: message }, { status: statusCode, headers })
      }

      // Continue to the next middleware or route handler
      const response = await next()

      // Add rate limit headers to the response
      Object.entries(headers).forEach(([name, value]) => {
        response.headers.set(name, value)
      })

      return response
    } catch (error) {
      logger.error("Rate limit middleware error:", error)
      return NextResponse.json({ error: "Internal server error during rate limiting" }, { status: 500 })
    }
  }
}

/**
 * Default key generator function that uses IP address
 */
function defaultKeyGenerator(req: NextRequest): string {
  // Get IP address from request
  const ip = req.headers.get("x-forwarded-for") || req.headers.get("x-real-ip") || "127.0.0.1"

  // Get the route path
  const url = new URL(req.url)
  const path = url.pathname

  // Combine IP and path for more granular rate limiting
  return `${ip}:${path}`
}
[V0_FILE]typescript:file="lib/validation/validation-utils.ts" isMerged="true"
/**
 * Validation utilities for API input validation
 */
import { type NextRequest, NextResponse } from "next/server"
import { logger } from "@/lib/utils/logger"

/**
 * Validate request body against a schema
 */
export async function validateBody(
  req: NextRequest,
  schema: any,
  options: { stripUnknown?: boolean } = {},
): Promise<{ valid: true; data: T } | { valid: false; errors: any }> {
  try {
    // Parse request body
    const body = await req.json()

    // Validate against schema
    try {
      const data = await schema.validate(body, {
        abortEarly: false,
        stripUnknown: options.stripUnknown ?? true,
      })

      return { valid: true, data: data as T }
    } catch (error: any) {
      logger.debug("Validation error:", error)

      // Format validation errors
      const errors = error.inner?.reduce((acc: any, err: any) => {
        acc[err.path] = err.message
        return acc
      }, {}) || { _error: error.message }

      return { valid: false, errors }
    }
  } catch (error) {
    logger.error("Error parsing request body:", error)
    return { valid: false, errors: { _error: "Invalid JSON in request body" } }
  }
}

/**
 * Validate query parameters against a schema
 */
export async function validateQuery(
  req: NextRequest,
  schema: any,
): Promise<{ valid: true; data: T } | { valid: false; errors: any }> {
  try {
    // Get query parameters
    const url = new URL(req.url)
    const query: Record = {}

    // Convert URLSearchParams to plain object
    url.searchParams.forEach((value, key) => {
      query[key] = value
    })

    // Validate against schema
    try {
      const data = await schema.validate(query, {
        abortEarly: false,
        stripUnknown: true,
      })

      return { valid: true, data: data as T }
    } catch (error: any) {
      logger.debug("Query validation error:", error)

      // Format validation errors
      const errors = error.inner?.reduce((acc: any, err: any) => {
        acc[err.path] = err.message
        return acc
      }, {}) || { _error: error.message }

      return { valid: false, errors }
    }
  } catch (error) {
    logger.error("Error validating query parameters:", error)
    return { valid: false, errors: { _error: "Invalid query parameters" } }
  }
}

/**
 * Middleware to validate request body
 */
export function createBodyValidationMiddleware(schema: any, options: { stripUnknown?: boolean } = {}) {
  return async function validationMiddleware(
    req: NextRequest,
    next: () => Promise,
  ): Promise {
    const validation = await validateBody(req, schema, options)

    if (!validation.valid) {
      return NextResponse.json({ error: "Validation error", details: validation.errors }, { status: 400 })
    }

    // Add validated data to request context
    req.headers.set("x-validated-body", JSON.stringify(validation.data))

    // Continue to the next middleware or route handler
    return next()
  }
}

/**
 * Middleware to validate query parameters
 */
export function createQueryValidationMiddleware(schema: any) {
  return async function validationMiddleware(
    req: NextRequest,
    next: () => Promise,
  ): Promise {
    const validation = await validateQuery(req, schema)

    if (!validation.valid) {
      return NextResponse.json({ error: "Validation error", details: validation.errors }, { status: 400 })
    }

    // Add validated data to request context
    req.headers.set("x-validated-query", JSON.stringify(validation.data))

    // Continue to the next middleware or route handler
    return next()
  }
}
[V0_FILE]typescript:file="app/api/properties/route.ts" isMerged="true"
/**
 * API routes for properties
 */
import { type NextRequest, NextResponse } from "next/server"
import * as yup from "yup"
import { propertyService } from "@/lib/services/property-service"
import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware"
import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware"
import { createBodyValidationMiddleware, createQueryValidationMiddleware } from "@/lib/validation/validation-utils"
import { logger } from "@/lib/utils/logger"

// Schema for property creation/update
const propertySchema = yup.object({
  title: yup.string().required().min(3).max(100),
  type: yup.string().required(),
  location: yup.string().required(),
  area: yup.string().required(),
  price: yup.string().required(),
  image: yup.string().required(),
  featured: yup.boolean().optional(),
  energy: yup.string().optional(),
  paymentOptions: yup
    .object({
      type: yup.string().required(),
      name: yup.string().required(),
      description: yup.string().required(),
      processor: yup.string().required(),
      details: yup.string().required(),
    })
    .optional(),
})

// Schema for query parameters
const querySchema = yup.object({
  featured: yup
    .boolean()
    .transform((value, originalValue) => {
      if (originalValue === "true") return true
      if (originalValue === "false") return false
      return value
    })
    .optional(),
  type: yup.string().optional(),
  location: yup.string().optional(),
})

// Rate limit middleware - 100 requests per minute
const rateLimitMiddleware = createRateLimitMiddleware({
  limit: 100,
  windowMs: 60 * 1000,
})

// Authentication middleware - JWT or API key
const authMiddleware = createAuthMiddleware({
  method: AuthMethod.ANY,
})

// Validation middleware
const validatePropertyBody = createBodyValidationMiddleware(propertySchema)
const validateQueryParams = createQueryValidationMiddleware(querySchema)

/**
 * GET /api/properties
 * Get all properties with optional filtering
 */
export async function GET(req: NextRequest) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Validate query parameters
      return await validateQueryParams(req, async () => {
        // Get validated query parameters
        const queryParamsJson = req.headers.get("x-validated-query")
        const queryParams = queryParamsJson ? JSON.parse(queryParamsJson) : {}

        // Get properties with filters
        const properties = await propertyService.getAllProperties(queryParams)

        return NextResponse.json(properties)
      })
    })
  } catch (error) {
    logger.error("Error in GET /api/properties:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

/**
 * POST /api/properties
 * Create a new property
 */
export async function POST(req: NextRequest) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Apply authentication
      return await authMiddleware(req, async () => {
        // Validate request body
        return await validatePropertyBody(req, async () => {
          // Get validated body
          const bodyJson = req.headers.get("x-validated-body")
          const propertyData = JSON.parse(bodyJson!)

          // Create property
          const newProperty = await propertyService.createProperty(propertyData)

          return NextResponse.json(newProperty, { status: 201 })
        })
      })
    })
  } catch (error) {
    logger.error("Error in POST /api/properties:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/properties/[id]/route.ts" isMerged="true"
/**
 * API routes for a specific property
 */
import { type NextRequest, NextResponse } from "next/server"
import * as yup from "yup"
import { propertyService } from "@/lib/services/property-service"
import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware"
import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware"
import { createBodyValidationMiddleware } from "@/lib/validation/validation-utils"
import { logger } from "@/lib/utils/logger"

// Schema for property update
const propertyUpdateSchema = yup.object({
  title: yup.string().min(3).max(100).optional(),
  type: yup.string().optional(),
  location: yup.string().optional(),
  area: yup.string().optional(),
  price: yup.string().optional(),
  image: yup.string().optional(),
  featured: yup.boolean().optional(),
  energy: yup.string().optional(),
  paymentOptions: yup
    .object({
      type: yup.string().required(),
      name: yup.string().required(),
      description: yup.string().required(),
      processor: yup.string().required(),
      details: yup.string().required(),
    })
    .optional(),
})

// Rate limit middleware - 100 requests per minute
const rateLimitMiddleware = createRateLimitMiddleware({
  limit: 100,
  windowMs: 60 * 1000,
})

// Authentication middleware - JWT or API key
const authMiddleware = createAuthMiddleware({
  method: AuthMethod.ANY,
})

// Validation middleware
const validatePropertyUpdateBody = createBodyValidationMiddleware(propertyUpdateSchema)

/**
 * GET /api/properties/[id]
 * Get a property by ID
 */
export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      const id = Number.parseInt(params.id)

      if (isNaN(id)) {
        return NextResponse.json({ error: "Invalid property ID" }, { status: 400 })
      }

      const property = await propertyService.getPropertyById(id)

      if (!property) {
        return NextResponse.json({ error: "Property not found" }, { status: 404 })
      }

      return NextResponse.json(property)
    })
  } catch (error) {
    logger.error(`Error in GET /api/properties/${params.id}:`, error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

/**
 * PUT /api/properties/[id]
 * Update a property
 */
export async function PUT(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Apply authentication
      return await authMiddleware(req, async () => {
        // Validate request body
        return await validatePropertyUpdateBody(req, async () => {
          const id = Number.parseInt(params.id)

          if (isNaN(id)) {
            return NextResponse.json({ error: "Invalid property ID" }, { status: 400 })
          }

          // Get validated body
          const bodyJson = req.headers.get("x-validated-body")
          const propertyData = JSON.parse(bodyJson!)

          // Update property
          const updatedProperty = await propertyService.updateProperty(id, propertyData)

          if (!updatedProperty) {
            return NextResponse.json({ error: "Property not found" }, { status: 404 })
          }

          return NextResponse.json(updatedProperty)
        })
      })
    })
  } catch (error) {
    logger.error(`Error in PUT /api/properties/${params.id}:`, error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

/**
 * DELETE /api/properties/[id]
 * Delete a property
 */
export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Apply authentication
      return await authMiddleware(req, async () => {
        const id = Number.parseInt(params.id)

        if (isNaN(id)) {
          return NextResponse.json({ error: "Invalid property ID" }, { status: 400 })
        }

        const success = await propertyService.deleteProperty(id)

        if (!success) {
          return NextResponse.json({ error: "Property not found" }, { status: 404 })
        }

        return NextResponse.json({ success: true }, { status: 200 })
      })
    })
  } catch (error) {
    logger.error(`Error in DELETE /api/properties/${params.id}:`, error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/owners/route.ts" isMerged="true"
/**
 * API routes for owners
 */
import { type NextRequest, NextResponse } from "next/server"
import * as yup from "yup"
import { ownerService } from "@/lib/services/owner-service"
import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware"
import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware"
import { createBodyValidationMiddleware, createQueryValidationMiddleware } from "@/lib/validation/validation-utils"
import { logger } from "@/lib/utils/logger"

// Schema for owner creation/update
const ownerSchema = yup.object({
  name: yup.string().required().min(3).max(100),
  email: yup.string().email().required(),
  phone: yup.string().required(),
  properties: yup.number().required().min(0),
  image: yup.string().required(),
  initials: yup.string().required().max(3),
  region: yup.string().optional(),
  regionEmoji: yup.string().optional(),
  regionColor: yup.string().optional(),
  regionDescription: yup.string().optional(),
  specialization: yup.string().optional(),
  memoji: yup.string().optional(),
  bio: yup.string().optional(),
  socialLinks: yup.object().optional(),
})

// Schema for query parameters
const querySchema = yup.object({
  region: yup.string().optional(),
  minProperties: yup
    .number()
    .transform((value, originalValue) => {
      const num = Number(originalValue)
      return isNaN(num) ? undefined : num
    })
    .optional(),
})

// Rate limit middleware - 100 requests per minute
const rateLimitMiddleware = createRateLimitMiddleware({
  limit: 100,
  windowMs: 60 * 1000,
})

// Authentication middleware - JWT or API key
const authMiddleware = createAuthMiddleware({
  method: AuthMethod.ANY,
})

// Validation middleware
const validateOwnerBody = createBodyValidationMiddleware(ownerSchema)
const validateQueryParams = createQueryValidationMiddleware(querySchema)

/**
 * GET /api/owners
 * Get all owners with optional filtering
 */
export async function GET(req: NextRequest) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Validate query parameters
      return await validateQueryParams(req, async () => {
        // Get validated query parameters
        const queryParamsJson = req.headers.get("x-validated-query")
        const queryParams = queryParamsJson ? JSON.parse(queryParamsJson) : {}

        // Get owners with filters
        const owners = await ownerService.getAllOwners(queryParams)

        return NextResponse.json(owners)
      })
    })
  } catch (error) {
    logger.error("Error in GET /api/owners:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

/**
 * POST /api/owners
 * Create a new owner
 */
export async function POST(req: NextRequest) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Apply authentication
      return await authMiddleware(req, async () => {
        // Validate request body
        return await validateOwnerBody(req, async () => {
          // Get validated body
          const bodyJson = req.headers.get("x-validated-body")
          const ownerData = JSON.parse(bodyJson!)

          // Create owner
          const newOwner = await ownerService.createOwner(ownerData)

          return NextResponse.json(newOwner, { status: 201 })
        })
      })
    })
  } catch (error) {
    logger.error("Error in POST /api/owners:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

/**
 * GET /api/owners/regions
 * Get all available regions
 */
export async function GET_regions() {
  try {
    const regions = await ownerService.getAllRegions()
    return NextResponse.json(regions)
  } catch (error) {
    logger.error("Error in GET /api/owners/regions:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/owners/[id]/route.ts" isMerged="true"
/**
 * API routes for a specific owner
 */
import { type NextRequest, NextResponse } from "next/server"
import * as yup from "yup"
import { ownerService } from "@/lib/services/owner-service"
import { createAuthMiddleware, AuthMethod } from "@/lib/middleware/auth-middleware"
import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware"
import { createBodyValidationMiddleware } from "@/lib/validation/validation-utils"
import { logger } from "@/lib/utils/logger"

// Schema for owner update
const ownerUpdateSchema = yup.object({
  name: yup.string().min(3).max(100).optional(),
  email: yup.string().email().optional(),
  phone: yup.string().optional(),
  properties: yup.number().min(0).optional(),
  image: yup.string().optional(),
  initials: yup.string().max(3).optional(),
  region: yup.string().optional(),
  regionEmoji: yup.string().optional(),
  regionColor: yup.string().optional(),
  regionDescription: yup.string().optional(),
  specialization: yup.string().optional(),
  memoji: yup.string().optional(),
  bio: yup.string().optional(),
  socialLinks: yup.object().optional(),
})

// Rate limit middleware - 100 requests per minute
const rateLimitMiddleware = createRateLimitMiddleware({
  limit: 100,
  windowMs: 60 * 1000,
})

// Authentication middleware - JWT or API key
const authMiddleware = createAuthMiddleware({
  method: AuthMethod.ANY,
})

// Validation middleware
const validateOwnerUpdateBody = createBodyValidationMiddleware(ownerUpdateSchema)

/**
 * GET /api/owners/[id]
 * Get an owner by ID
 */
export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      const id = Number.parseInt(params.id)

      if (isNaN(id)) {
        return NextResponse.json({ error: "Invalid owner ID" }, { status: 400 })
      }

      const owner = await ownerService.getOwnerById(id)

      if (!owner) {
        return NextResponse.json({ error: "Owner not found" }, { status: 404 })
      }

      return NextResponse.json(owner)
    })
  } catch (error) {
    logger.error(`Error in GET /api/owners/${params.id}:`, error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

/**
 * PUT /api/owners/[id]
 * Update an owner
 */
export async function PUT(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Apply authentication
      return await authMiddleware(req, async () => {
        // Validate request body
        return await validateOwnerUpdateBody(req, async () => {
          const id = Number.parseInt(params.id)

          if (isNaN(id)) {
            return NextResponse.json({ error: "Invalid owner ID" }, { status: 400 })
          }

          // Get validated body
          const bodyJson = req.headers.get("x-validated-body")
          const ownerData = JSON.parse(bodyJson!)

          // Update owner
          const updatedOwner = await ownerService.updateOwner(id, ownerData)

          if (!updatedOwner) {
            return NextResponse.json({ error: "Owner not found" }, { status: 404 })
          }

          return NextResponse.json(updatedOwner)
        })
      })
    })
  } catch (error) {
    logger.error(`Error in PUT /api/owners/${params.id}:`, error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

/**
 * DELETE /api/owners/[id]
 * Delete an owner
 */
export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Apply authentication
      return await authMiddleware(req, async () => {
        const id = Number.parseInt(params.id)

        if (isNaN(id)) {
          return NextResponse.json({ error: "Invalid owner ID" }, { status: 400 })
        }

        const success = await ownerService.deleteOwner(id)

        if (!success) {
          return NextResponse.json({ error: "Owner not found" }, { status: 404 })
        }

        return NextResponse.json({ success: true }, { status: 200 })
      })
    })
  } catch (error) {
    logger.error(`Error in DELETE /api/owners/${params.id}:`, error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/auth/login/route.ts" isMerged="true"
/**
 * API route for user login
 */
import { type NextRequest, NextResponse } from "next/server"
import * as yup from "yup"
import { createRateLimitMiddleware } from "@/lib/middleware/rate-limit-middleware"
import { createBodyValidationMiddleware } from "@/lib/validation/validation-utils"
import { generateJWT } from "@/lib/utils/auth-utils"
import { logger } from "@/lib/utils/logger"

// Schema for login request
const loginSchema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().required(),
})

// Rate limit middleware - 10 requests per minute
const rateLimitMiddleware = createRateLimitMiddleware({
  limit: 10,
  windowMs: 60 * 1000,
  keyGenerator: (req) => {
    // Use IP address for rate limiting
    const ip = req.headers.get("x-forwarded-for") || req.headers.get("x-real-ip") || "127.0.0.1"
    return `login:${ip}`
  },
})

// Validation middleware
const validateLoginBody = createBodyValidationMiddleware(loginSchema)

/**
 * POST /api/auth/login
 * User login
 */
export async function POST(req: NextRequest) {
  try {
    // Apply rate limiting
    return await rateLimitMiddleware(req, async () => {
      // Validate request body
      return await validateLoginBody(req, async () => {
        // Get validated body
        const bodyJson = req.headers.get("x-validated-body")
        const { email, password } = JSON.parse(bodyJson!)

        // Mock authentication
        // In a real app, you would verify credentials against a database
        if (email === "admin@example.com" && password === "admin") {
          const token = await generateJWT(1)

          return NextResponse.json({
            token,
            user: {
              id: 1,
              email: "admin@example.com",
              name: "Admin User",
              roles: ["admin", "user"],
            },
          })
        } else if (email === "user@example.com" && password === "user") {
          const token = await generateJWT(2)

          return NextResponse.json({
            token,
            user: {
              id: 2,
              email: "user@example.com",
              name: "Regular User",
              roles: ["user"],
            },
          })
        } else {
          return NextResponse.json({ error: "Invalid credentials" }, { status: 401 })
        }
      })
    })
  } catch (error) {
    logger.error("Error in POST /api/auth/login:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/utils/cache.ts" isQuickEdit="true" isMerged="true"
/**
 * Simple in-memory cache utility
 */
const cacheStore: { [key: string]: any } = {}

/**
 * Get data from cache
 */
async function get(key: string): Promise {
  return cacheStore[key] || null
}

/**
 * Set data to cache
 */
async function set(key: string, value: T, ttl?: number): Promise {
  cacheStore[key] = value
  // TODO: Implement TTL-based expiration
}

/**
 * Delete data from cache
 */
async function del(key: string): Promise {
  delete cacheStore[key]
}

/**
 * Clear the entire cache
 */
async function flush(): Promise {
  Object.keys(cacheStore).forEach((key) => delete cacheStore[key])
}

export const cache = { get, set, del, flush }
[V0_FILE]typescript:file="lib/errors/app-error.ts" isMerged="true"
/**
 * Base application error class that extends the native Error
 * Provides additional context for error handling
 */
export class AppError extends Error {
  public readonly statusCode: number
  public readonly isOperational: boolean
  public readonly errorCode: string
  public readonly context?: Record

  constructor(
    message: string,
    statusCode = 500,
    errorCode = "INTERNAL_ERROR",
    isOperational = true,
    context?: Record,
  ) {
    super(message)
    this.statusCode = statusCode
    this.isOperational = isOperational
    this.errorCode = errorCode
    this.context = context

    // Maintains proper stack trace for where our error was thrown
    Error.captureStackTrace(this, this.constructor)

    // Set the prototype explicitly to ensure instanceof works correctly
    Object.setPrototypeOf(this, AppError.prototype)
  }
}

/**
 * Validation error for handling invalid input data
 */
export class ValidationError extends AppError {
  constructor(message = "Validation failed", errors?: Record, errorCode = "VALIDATION_ERROR") {
    super(message, 400, errorCode, true, { validationErrors: errors })
  }
}

/**
 * Not found error for handling resources that don't exist
 */
export class NotFoundError extends AppError {
  constructor(resource = "Resource", id?: string | number, errorCode = "NOT_FOUND") {
    const message = id ? `${resource} with ID ${id} not found` : `${resource} not found`
    super(message, 404, errorCode, true)
  }
}

/**
 * Authentication error for handling unauthorized access
 */
export class AuthenticationError extends AppError {
  constructor(message = "Authentication failed", errorCode = "AUTHENTICATION_ERROR") {
    super(message, 401, errorCode, true)
  }
}

/**
 * Authorization error for handling forbidden access
 */
export class AuthorizationError extends AppError {
  constructor(message = "You do not have permission to perform this action", errorCode = "AUTHORIZATION_ERROR") {
    super(message, 403, errorCode, true)
  }
}

/**
 * Database error for handling database-related issues
 */
export class DatabaseError extends AppError {
  constructor(message = "Database operation failed", errorCode = "DATABASE_ERROR", context?: Record) {
    super(message, 500, errorCode, true, context)
  }
}

/**
 * External service error for handling issues with external APIs
 */
export class ExternalServiceError extends AppError {
  constructor(
    service: string,
    message = "External service request failed",
    errorCode = "EXTERNAL_SERVICE_ERROR",
    context?: Record,
  ) {
    super(`${service}: ${message}`, 502, errorCode, true, context)
  }
}

/**
 * Rate limit error for handling too many requests
 */
export class RateLimitError extends AppError {
  constructor(message = "Too many requests, please try again later", errorCode = "RATE_LIMIT_ERROR") {
    super(message, 429, errorCode, true)
  }
}
[V0_FILE]typescript:file="lib/middleware/error-handler.ts" isMerged="true"
import type { NextRequest, NextResponse } from "next/server"
import { AppError } from "@/lib/errors/app-error"
import { logger } from "@/lib/logging/logger"
import { ApiResponse } from "@/lib/api/response"

/**
 * Global error handler middleware for Next.js API routes
 */
export async function errorHandler(req: NextRequest, next: () => Promise): Promise {
  try {
    // Proceed to the route handler
    return await next()
  } catch (error) {
    // Log the error
    if (error instanceof AppError) {
      if (!error.isOperational) {
        logger.error("Non-operational error occurred:", error)
      } else {
        logger.warn(`Application error: ${error.message}`, {
          statusCode: error.statusCode,
          errorCode: error.errorCode,
          context: error.context,
        })
      }

      // Return a standardized error response
      return ApiResponse.error(error.message, error.statusCode, error.errorCode, error.context)
    }

    // Handle unexpected errors
    logger.error("Unexpected error:", error)

    // For security, don't expose error details in production
    const isProd = process.env.NODE_ENV === "production"
    const message = isProd ? "An unexpected error occurred" : error instanceof Error ? error.message : String(error)

    return ApiResponse.error(message, 500, "INTERNAL_SERVER_ERROR")
  }
}

/**
 * Create a middleware composition function
 */
export function composeMiddleware(...middlewares: any[]) {
  return async (req: NextRequest, handler: () => Promise) => {
    // Create a function that executes each middleware in sequence
    const executeMiddleware = async (index: number): Promise => {
      if (index === middlewares.length) {
        return await handler()
      }

      const nextMiddleware = async () => executeMiddleware(index + 1)
      return await middlewares[index](req, nextMiddleware)
    }

    return executeMiddleware(0)
  }
}
[V0_FILE]typescript:file="lib/api/response.ts" isMerged="true"
import { NextResponse } from "next/server"

/**
 * HTTP Status codes
 */
export enum HttpStatus {
  OK = 200,
  CREATED = 201,
  NO_CONTENT = 204,
  BAD_REQUEST = 400,
  UNAUTHORIZED = 401,
  FORBIDDEN = 403,
  NOT_FOUND = 404,
  CONFLICT = 409,
  UNPROCESSABLE_ENTITY = 422,
  TOO_MANY_REQUESTS = 429,
  INTERNAL_SERVER_ERROR = 500,
  BAD_GATEWAY = 502,
  SERVICE_UNAVAILABLE = 503,
}

/**
 * Standard API response interface
 */
export interface IApiResponse {
  success: boolean
  data?: T
  error?: {
    message: string
    code: string
    details?: any
  }
  meta?: {
    timestamp: string
    requestId?: string
    pagination?: {
      page: number
      limit: number
      total: number
      totalPages: number
    }
  }
}

/**
 * API Response utility class for creating standardized responses
 */
export class ApiResponse {
  /**
   * Create a success response
   */
  static success(data: T, statusCode: number = HttpStatus.OK, meta?: Partial): NextResponse {
    const response: IApiResponse = {
      success: true,
      data,
      meta: {
        timestamp: new Date().toISOString(),
        ...meta,
      },
    }

    return NextResponse.json(response, { status: statusCode })
  }

  /**
   * Create an error response
   */
  static error(
    message: string,
    statusCode: number = HttpStatus.INTERNAL_SERVER_ERROR,
    errorCode = "INTERNAL_SERVER_ERROR",
    details?: any,
    meta?: Partial,
  ): NextResponse {
    const response: IApiResponse = {
      success: false,
      error: {
        message,
        code: errorCode,
        ...(details && { details }),
      },
      meta: {
        timestamp: new Date().toISOString(),
        ...meta,
      },
    }

    return NextResponse.json(response, { status: statusCode })
  }

  /**
   * Create a paginated success response
   */
  static paginated(
    data: T[],
    page: number,
    limit: number,
    total: number,
    statusCode: number = HttpStatus.OK,
    additionalMeta?: Partial>,
  ): NextResponse {
    const totalPages = Math.ceil(total / limit)

    const response: IApiResponse = {
      success: true,
      data,
      meta: {
        timestamp: new Date().toISOString(),
        pagination: {
          page,
          limit,
          total,
          totalPages,
        },
        ...additionalMeta,
      },
    }

    return NextResponse.json(response, { status: statusCode })
  }

  /**
   * Create a no content response
   */
  static noContent(): NextResponse {
    return new NextResponse(null, { status: HttpStatus.NO_CONTENT })
  }
}
[V0_FILE]typescript:file="lib/logging/logger.ts" isMerged="true"
/**
 * Enhanced logging system with support for different environments and log levels
 */

// Log levels in order of severity
export enum LogLevel {
  DEBUG = 0,
  INFO = 1,
  WARN = 2,
  ERROR = 3,
  FATAL = 4,
}

// Log entry interface
export interface LogEntry {
  timestamp: string
  level: string
  message: string
  context?: Record
  requestId?: string
  userId?: string | number
  stack?: string
}

// Logger configuration
export interface LoggerConfig {
  minLevel: LogLevel
  enableConsole: boolean
  prettyPrint?: boolean
  redactKeys?: string[]
  includeTimestamp?: boolean
}

/**
 * Logger class with enhanced features
 */
export class Logger {
  private config: LoggerConfig
  private static instance: Logger

  private constructor(config: Partial = {}) {
    // Default configuration
    this.config = {
      minLevel: process.env.NODE_ENV === "production" ? LogLevel.INFO : LogLevel.DEBUG,
      enableConsole: true,
      prettyPrint: process.env.NODE_ENV !== "production",
      redactKeys: ["password", "token", "secret", "authorization", "apiKey"],
      includeTimestamp: true,
      ...config,
    }
  }

  /**
   * Get logger instance (singleton)
   */
  public static getInstance(config?: Partial): Logger {
    if (!Logger.instance) {
      Logger.instance = new Logger(config)
    }
    return Logger.instance
  }

  /**
   * Configure the logger
   */
  public configure(config: Partial): void {
    this.config = { ...this.config, ...config }
  }

  /**
   * Log a message at the specified level
   */
  private log(level: LogLevel, message: string, context?: Record): void {
    if (level < this.config.minLevel) return

    const levelName = LogLevel[level]

    // Create log entry
    const entry: LogEntry = {
      timestamp: new Date().toISOString(),
      level: levelName,
      message,
      ...(context && { context: this.redactSensitiveInfo(context) }),
    }

    // Log to console if enabled
    if (this.config.enableConsole) {
      this.logToConsole(entry)
    }

    // In a real application, you might also log to a file or external service
    // this.logToFile(entry);
    // this.logToExternalService(entry);
  }

  /**
   * Redact sensitive information
   */
  private redactSensitiveInfo(obj: Record): Record {
    const redacted = { ...obj }

    const redact = (obj: Record, path = ""): void => {
      for (const [key, value] of Object.entries(obj)) {
        const currentPath = path ? `${path}.${key}` : key

        if (this.config.redactKeys?.some((redactKey) => key.toLowerCase().includes(redactKey.toLowerCase()))) {
          obj[key] = "[REDACTED]"
        } else if (value && typeof value === "object" && !Array.isArray(value)) {
          redact(value, currentPath)
        }
      }
    }

    redact(redacted)
    return redacted
  }

  /**
   * Log to console with appropriate formatting
   */
  private logToConsole(entry: LogEntry): void {
    const { level, message, context, timestamp } = entry

    if (this.config.prettyPrint) {
      const colors = {
        DEBUG: "\x1b[34m", // Blue
        INFO: "\x1b[32m", // Green
        WARN: "\x1b[33m", // Yellow
        ERROR: "\x1b[31m", // Red
        FATAL: "\x1b[35m", // Magenta
        RESET: "\x1b[0m", // Reset
      }

      const color = colors[level as keyof typeof colors] || colors.RESET
      const timeStr = this.config.includeTimestamp ? `${timestamp} ` : ""

      console.log(`${timeStr}${color}[${level}]${colors.RESET} ${message}`)

      if (context) {
        console.log(context)
      }

      if (entry.stack) {
        console.log(entry.stack)
      }
    } else {
      // JSON format for production/machine parsing
      console.log(JSON.stringify(entry))
    }
  }

  // Public logging methods
  public debug(message: string, context?: Record): void {
    this.log(LogLevel.DEBUG, message, context)
  }

  public info(message: string, context?: Record): void {
    this.log(LogLevel.INFO, message, context)
  }

  public warn(message: string, context?: Record): void {
    this.log(LogLevel.WARN, message, context)
  }

  public error(message: string, error?: Error | unknown, context?: Record): void {
    const errorContext = { ...context }

    if (error instanceof Error) {
      errorContext.stack = error.stack
      errorContext.name = error.name
    }

    this.log(LogLevel.ERROR, message, errorContext)
  }

  public fatal(message: string, error?: Error | unknown, context?: Record): void {
    const errorContext = { ...context }

    if (error instanceof Error) {
      errorContext.stack = error.stack
      errorContext.name = error.name
    }

    this.log(LogLevel.FATAL, message, errorContext)
  }
}

// Export a singleton instance
export const logger = Logger.getInstance()
[V0_FILE]typescript:file="lib/repositories/repository.interface.ts" isMerged="true"
/**
 * Generic repository interface for data access
 */
export interface IRepository {
  findAll(filter?: Partial): Promise
  findById(id: ID): Promise
  create(data: Omit): Promise
  update(id: ID, data: Partial): Promise
  delete(id: ID): Promise
  count(filter?: Partial): Promise
}

/**
 * Paginated result interface
 */
export interface PaginatedResult {
  items: T[]
  total: number
  page: number
  limit: number
  totalPages: number
}

/**
 * Pagination options interface
 */
export interface PaginationOptions {
  page: number
  limit: number
  sortBy?: string
  sortOrder?: "asc" | "desc"
}

/**
 * Extended repository interface with pagination
 */
export interface IPaginatedRepository extends IRepository {
  findPaginated(options: PaginationOptions, filter?: Partial): Promise>
}
[V0_FILE]typescript:file="lib/repositories/property.repository.ts" isMerged="true"
import type { IPaginatedRepository, PaginatedResult, PaginationOptions } from "./repository.interface"
import type { Property } from "@/lib/models/property.model"
import { DatabaseError } from "@/lib/errors/app-error"
import { logger } from "@/lib/logging/logger"

/**
 * In-memory implementation of the property repository
 * In a real application, this would connect to a database
 */
export class InMemoryPropertyRepository implements IPaginatedRepository {
  private properties: Property[] = []
  private nextId = 1

  constructor(initialData: Omit[] = []) {
    // Initialize with any provided data
    initialData.forEach((property) => {
      this.properties.push({
        id: this.nextId++,
        ...property,
      })
    })
  }

  async findAll(filter?: Partial): Promise {
    try {
      if (!filter) {
        return [...this.properties]
      }

      return this.properties.filter((property) => {
        return Object.entries(filter).every(([key, value]) => {
          return property[key as keyof Property] === value
        })
      })
    } catch (error) {
      logger.error("Error finding properties", error)
      throw new DatabaseError("Failed to retrieve properties")
    }
  }

  async findById(id: number): Promise {
    try {
      const property = this.properties.find((p) => p.id === id)
      return property || null
    } catch (error) {
      logger.error(`Error finding property with ID ${id}`, error)
      throw new DatabaseError(`Failed to retrieve property with ID ${id}`)
    }
  }

  async create(data: Omit): Promise {
    try {
      const newProperty: Property = {
        id: this.nextId++,
        ...data,
      }

      this.properties.push(newProperty)
      return newProperty
    } catch (error) {
      logger.error("Error creating property", error)
      throw new DatabaseError("Failed to create property")
    }
  }

  async update(id: number, data: Partial): Promise {
    try {
      const index = this.properties.findIndex((p) => p.id === id)

      if (index === -1) {
        return null
      }

      const updatedProperty = {
        ...this.properties[index],
        ...data,
      }

      this.properties[index] = updatedProperty
      return updatedProperty
    } catch (error) {
      logger.error(`Error updating property with ID ${id}`, error)
      throw new DatabaseError(`Failed to update property with ID ${id}`)
    }
  }

  async delete(id: number): Promise {
    try {
      const initialLength = this.properties.length
      this.properties = this.properties.filter((p) => p.id !== id)

      return this.properties.length < initialLength
    } catch (error) {
      logger.error(`Error deleting property with ID ${id}`, error)
      throw new DatabaseError(`Failed to delete property with ID ${id}`)
    }
  }

  async count(filter?: Partial): Promise {
    try {
      if (!filter) {
        return this.properties.length
      }

      return this.properties.filter((property) => {
        return Object.entries(filter).every(([key, value]) => {
          return property[key as keyof Property] === value
        })
      }).length
    } catch (error) {
      logger.error("Error counting properties", error)
      throw new DatabaseError("Failed to count properties")
    }
  }

  async findPaginated(options: PaginationOptions, filter?: Partial): Promise> {
    try {
      const { page, limit, sortBy, sortOrder } = options

      // Apply filters
      const filteredProperties = await this.findAll(filter)

      // Apply sorting
      if (sortBy) {
        filteredProperties.sort((a, b) => {
          const aValue = a[sortBy as keyof Property]
          const bValue = b[sortBy as keyof Property]

          if (aValue < bValue) return sortOrder === "desc" ? 1 : -1
          if (aValue > bValue) return sortOrder === "desc" ? -1 : 1
          return 0
        })
      }

      // Calculate pagination
      const total = filteredProperties.length
      const totalPages = Math.ceil(total / limit)
      const startIndex = (page - 1) * limit
      const endIndex = startIndex + limit

      // Get paginated items
      const items = filteredProperties.slice(startIndex, endIndex)

      return {
        items,
        total,
        page,
        limit,
        totalPages,
      }
    } catch (error) {
      logger.error("Error finding paginated properties", error)
      throw new DatabaseError("Failed to retrieve paginated properties")
    }
  }
}
[V0_FILE]typescript:file="lib/models/property.model.ts" isMerged="true"
/**
 * Property model definition
 */
export interface Property {
  id: number
  title: string
  type: string
  location: string
  area: string
  price: string
  image: string
  featured?: boolean
  energy?: string
  paymentOptions?: {
    type: string
    name: string
    description: string
    processor: string
    details: string
  }
  createdAt?: Date
  updatedAt?: Date
}

/**
 * Property creation DTO
 */
export type CreatePropertyDto = Omit

/**
 * Property update DTO
 */
export type UpdatePropertyDto = Partial>

/**
 * Property filter DTO
 */
export interface PropertyFilterDto {
  type?: string
  location?: string
  featured?: boolean
  minPrice?: string
  maxPrice?: string
  energyType?: string
}
[V0_FILE]typescript:file="lib/di/container.ts" isMerged="true"
/**
 * Simple dependency injection container
 */
export class Container {
  private static instance: Container
  private services: Map = new Map()
  private factories: Map any> = new Map()

  private constructor() {}

  /**
   * Get container instance (singleton)
   */
  public static getInstance(): Container {
    if (!Container.instance) {
      Container.instance = new Container()
    }
    return Container.instance
  }

  /**
   * Register a service instance
   */
  public register(token: string, instance: T): void {
    this.services.set(token, instance)
  }

  /**
   * Register a factory function to create a service
   */
  public registerFactory(token: string, factory: () => T): void {
    this.factories.set(token, factory)
  }

  /**
   * Get a service instance
   */
  public resolve(token: string): T {
    // Check if service instance exists
    if (this.services.has(token)) {
      return this.services.get(token) as T
    }

    // Check if factory exists
    if (this.factories.has(token)) {
      const factory = this.factories.get(token)!
      const instance = factory()
      this.services.set(token, instance)
      return instance as T
    }

    throw new Error(`Service not registered: ${token}`)
  }

  /**
   * Check if a service is registered
   */
  public has(token: string): boolean {
    return this.services.has(token) || this.factories.has(token)
  }

  /**
   * Remove a service
   */
  public remove(token: string): boolean {
    const hadService = this.services.delete(token)
    const hadFactory = this.factories.delete(token)
    return hadService || hadFactory
  }

  /**
   * Clear all services
   */
  public clear(): void {
    this.services.clear()
    this.factories.clear()
  }
}

// Export a singleton instance
export const container = Container.getInstance()
[V0_FILE]typescript:file="app/api/v1/properties/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import * as yup from "yup"
import { createPropertyService } from "@/lib/services/property.service"
import { ApiResponse, HttpStatus } from "@/lib/api/response"
import { errorHandler } from "@/lib/middleware/error-handler"
import { ValidationError } from "@/lib/errors/app-error"
import type { CreatePropertyDto, PropertyFilterDto } from "@/lib/models/property.model"

// Schema for query parameters
const querySchema = yup.object({
  type: yup.string().optional(),
  location: yup.string().optional(),
  featured: yup
    .boolean()
    .optional()
    .transform((value, originalValue) => {
      if (originalValue === "true") return true
      if (originalValue === "false") return false
      return value
    }),
  page: yup.number().optional().default(1).min(1),
  limit: yup.number().optional().default(10).min(1).max(100),
  sortBy: yup.string().optional(),
  sortOrder: yup.string().optional().oneOf(["asc", "desc"]),
})

// Schema for property creation
const createPropertySchema = yup.object({
  title: yup.string().required().min(3),
  type: yup.string().required(),
  location: yup.string().required(),
  area: yup.string().required(),
  price: yup.string().required(),
  image: yup.string().required(),
  featured: yup.boolean().optional(),
  energy: yup.string().optional(),
  paymentOptions: yup
    .object({
      type: yup.string().required(),
      name: yup.string().required(),
      description: yup.string().required(),
      processor: yup.string().required(),
      details: yup.string().required(),
    })
    .optional(),
})

/**
 * GET /api/v1/properties
 * Get all properties with optional filtering and pagination
 */
export async function GET(req: NextRequest) {
  return errorHandler(req, async () => {
    const propertyService = createPropertyService()
    const url = new URL(req.url)

    try {
      // Parse and validate query parameters
      const queryParams = Object.fromEntries(url.searchParams.entries())
      const validatedQuery = await querySchema.validate(queryParams, {
        abortEarly: false,
        stripUnknown: true,
      })

      // Extract pagination options
      const { page, limit, sortBy, sortOrder, ...filterParams } = validatedQuery

      // Check if pagination is requested
      if (page !== undefined && limit !== undefined) {
        const paginatedResult = await propertyService.getPaginatedProperties(
          { page, limit, sortBy, sortOrder: sortOrder as "asc" | "desc" },
          filterParams as PropertyFilterDto,
        )

        return ApiResponse.paginated(
          paginatedResult.items,
          paginatedResult.page,
          paginatedResult.limit,
          paginatedResult.total,
        )
      } else {
        // Get all properties with filtering
        const properties = await propertyService.getAllProperties(filterParams as PropertyFilterDto)
        return ApiResponse.success(properties)
      }
    } catch (error) {
      if (error instanceof yup.ValidationError) {
        // Format validation errors
        const errors = error.inner.reduce(
          (acc, err) => {
            acc[err.path!] = err.message
            return acc
          },
          {} as Record,
        )

        throw new ValidationError("Invalid query parameters", errors)
      }

      // Re-throw other errors to be handled by the error middleware
      throw error
    }
  })
}

/**
 * POST /api/v1/properties
 * Create a new property
 */
export async function POST(req: NextRequest) {
  return errorHandler(req, async () => {
    const propertyService = createPropertyService()

    try {
      // Parse and validate request body
      const body = await req.json()
      const validatedData = await createPropertySchema.validate(body, {
        abortEarly: false,
        stripUnknown: true,
      })

      // Create property
      const newProperty = await propertyService.createProperty(validatedData as CreatePropertyDto)

      // Return success response
      return ApiResponse.success(newProperty, HttpStatus.CREATED)
    } catch (error) {
      if (error instanceof yup.ValidationError) {
        // Format validation errors
        const errors = error.inner.reduce(
          (acc, err) => {
            acc[err.path!] = err.message
            return acc
          },
          {} as Record,
        )

        throw new ValidationError("Invalid property data", errors)
      }

      // Re-throw other errors to be handled by the error middleware
      throw error
    }
  })
}
[V0_FILE]typescript:file="app/api/v1/properties/[id]/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import * as yup from "yup"
import { createPropertyService } from "@/lib/services/property.service"
import { ApiResponse } from "@/lib/api/response"
import { errorHandler } from "@/lib/middleware/error-handler"
import { ValidationError } from "@/lib/errors/app-error"
import type { UpdatePropertyDto } from "@/lib/models/property.model"

// Schema for property update
const updatePropertySchema = yup.object({
  title: yup.string().min(3).optional(),
  type: yup.string().optional(),
  location: yup.string().optional(),
  area: yup.string().optional(),
  price: yup.string().optional(),
  image: yup.string().optional(),
  featured: yup.boolean().optional(),
  energy: yup.string().optional(),
  paymentOptions: yup
    .object({
      type: yup.string().required(),
      name: yup.string().required(),
      description: yup.string().required(),
      processor: yup.string().required(),
      details: yup.string().required(),
    })
    .optional(),
})

/**
 * GET /api/v1/properties/[id]
 * Get a property by ID
 */
export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
  return errorHandler(req, async () => {
    const propertyService = createPropertyService()
    const id = Number.parseInt(params.id, 10)

    if (isNaN(id)) {
      throw new ValidationError("Invalid property ID", { id: "ID must be a number" })
    }

    const property = await propertyService.getPropertyById(id)
    return ApiResponse.success(property)
  })
}

/**
 * PUT /api/v1/properties/[id]
 * Update a property
 */
export async function PUT(req: NextRequest, { params }: { params: { id: string } }) {
  return errorHandler(req, async () => {
    const propertyService = createPropertyService()
    const id = Number.parseInt(params.id, 10)

    if (isNaN(id)) {
      throw new ValidationError("Invalid property ID", { id: "ID must be a number" })
    }

    try {
      // Parse and validate request body
      const body = await req.json()
      const validatedData = await updatePropertySchema.validate(body, {
        abortEarly: false,
        stripUnknown: true,
      })

      // Update property
      const updatedProperty = await propertyService.updateProperty(id, validatedData as UpdatePropertyDto)

      // Return success response
      return ApiResponse.success(updatedProperty)
    } catch (error) {
      if (error instanceof yup.ValidationError) {
        // Format validation errors
        const errors = error.inner.reduce(
          (acc, err) => {
            acc[err.path!] = err.message
            return acc
          },
          {} as Record,
        )

        throw new ValidationError("Invalid property data", errors)
      }

      // Re-throw other errors to be handled by the error middleware
      throw error
    }
  })
}

/**
 * DELETE /api/v1/properties/[id]
 * Delete a property
 */
export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
  return errorHandler(req, async () => {
    const propertyService = createPropertyService()
    const id = Number.parseInt(params.id, 10)

    if (isNaN(id)) {
      throw new ValidationError("Invalid property ID", { id: "ID must be a number" })
    }

    await propertyService.deleteProperty(id)
    return ApiResponse.noContent()
  })
}
[V0_FILE]typescript:file="lib/app.ts" isMerged="true"
import { initializeServices } from "@/lib/di/services"
import { logger } from "@/lib/logging/logger"

/**
 * Initialize the application
 */
export function initializeApp(): void {
  try {
    // Configure logger
    logger.info("Initializing application...")

    // Initialize services
    initializeServices()

    logger.info("Application initialized successfully")
  } catch (error) {
    logger.error("Failed to initialize application", error)
    throw error
  }
}

// Initialize the app when this module is imported
initializeApp()
[V0_FILE]typescript:file="lib/middleware/api-middleware.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { errorHandler } from "./error-handler"
import { logger } from "@/lib/logging/logger"

/**
 * Middleware for logging API requests
 */
export async function requestLoggerMiddleware(
  req: NextRequest,
  next: () => Promise,
): Promise {
  const start = Date.now()
  const method = req.method
  const url = new URL(req.url)
  const path = url.pathname

  logger.info(`API Request: ${method} ${path}`, {
    method,
    path,
    query: Object.fromEntries(url.searchParams.entries()),
  })

  // Continue to the next middleware or route handler
  const response = await next()

  // Log response time
  const duration = Date.now() - start
  logger.info(`API Response: ${method} ${path} - ${response.status} (${duration}ms)`)

  return response
}

/**
 * Middleware for adding CORS headers
 */
export async function corsMiddleware(req: NextRequest, next: () => Promise): Promise {
  // Continue to the next middleware or route handler
  const response = await next()

  // Add CORS headers
  response.headers.set("Access-Control-Allow-Origin", "*")
  response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
  response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization")

  return response
}

/**
 * Middleware for handling OPTIONS requests (preflight)
 */
export async function optionsMiddleware(req: NextRequest, next: () => Promise): Promise {
  if (req.method === "OPTIONS") {
    return new NextResponse(null, { status: 204 })
  }

  // Continue to the next middleware or route handler
  return next()
}

/**
 * Compose all API middlewares
 */
export function withApiMiddleware(handler: (req: NextRequest) => Promise) {
  return async (req: NextRequest) => {
    // Compose middlewares in order
    return optionsMiddleware(req, () =>
      corsMiddleware(req, () => requestLoggerMiddleware(req, () => errorHandler(req, () => handler(req)))),
    )
  }
}
[V0_FILE]typescript:file="app/api/v1/auth/login/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import * as yup from "yup"
import { createAuthService } from "@/lib/services/auth.service"
import { ApiResponse } from "@/lib/api/response"
import { errorHandler } from "@/lib/middleware/error-handler"
import { ValidationError } from "@/lib/errors/app-error"

// Schema for login request
const loginSchema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().required(),
})

/**
 * POST /api/v1/auth/login
 * User login
 */
export async function POST(req: NextRequest) {
  return errorHandler(req, async () => {
    try {
      // Parse and validate request body
      const body = await req.json()
      const validatedData = await loginSchema.validate(body, {
        abortEarly: false,
        stripUnknown: true,
      })

      // Authenticate user
      const authService = createAuthService()
      const { user, token } = await authService.authenticate(validatedData.email, validatedData.password)

      // Return success response with user and token
      return ApiResponse.success({
        user: {
          id: user.id,
          email: user.email,
          name: user.name,
          roles: user.roles,
        },
        token,
      })
    } catch (error) {
      if (error instanceof yup.ValidationError) {
        // Format validation errors
        const errors = error.inner.reduce(
          (acc, err) => {
            acc[err.path!] = err.message
            return acc
          },
          {} as Record,
        )

        throw new ValidationError("Invalid login data", errors)
      }

      // Re-throw other errors to be handled by the error middleware
      throw error
    }
  })
}
[V0_FILE]typescriptreact:file="app/financiamento/loading.tsx" isMerged="true"
import { Loader2 } from "lucide-react"

export default function Loading() {
  return (
    
      
        
        Carregando Simulador Financeiro...
      
    
  )
}
[V0_FILE]typescriptreact:file="components/ai-assistant.tsx" isQuickEdit="true" isMerged="true"
"use client"

import {
  Bot,
  MessageSquare,
  Search,
  Sparkles,
  User,
  HelpCircle,
  Calculator,
  BarChart3,
  Wrench,
  FileCheck,
  LineChart,
  Wallet,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

export default function AIAssistant() {
  return (
    
      
        
          
            
          
          Assistente com IA
          
            Nosso assistente multimodal com IA ajuda proprietários com informações, recomendações e suporte em tempo
            real
          
        

        
          
            
              
                
                  
                
                
                  Análise de Imóveis
                  Obtenha insights sobre o mercado imobiliário local
                
              
            

            
              
                
                Powered by AI SDK
              

              {/* Barra de Navegação da Jornada Solar - NOVO */}
              
              
                Jornada Solar
                
                  {[
                    { stage: "Avaliação", icon: , active: true },
                    { stage: "Dimensionamento", icon:  },
                    { stage: "Setup Pagamento", icon:  },
                    { stage: "Instalação", icon:  },
                    { stage: "Homologação", icon:  },
                    { stage: "Monitoramento", icon:  },
                  ].map((item, i) => (
                    
                      {item.icon}
                      {item.stage}
                      {item.active && }
                    
                  ))}
                
              

              {/* Ações Rápidas Contextuais - NOVO */}
              
                
                  @ai-sdk/ui@1.1.0
                
              
              
                
                  
                    
                      
                        
                      
                      
                        Perguntas frequentes sobre solar
                      
                    

                    
                      
                        
                      
                      
                        Calcular potencial solar
                      
                    

                    
                      
                        
                      
                      
                        Comparar opções de financiamento
                      
                    
                  
                
              

              
                
                  
                  
                    Assistente Solar Yello/Cash
                    
                      Streaming com
                      
                        generateUI()
                      
                    
                  
                
                
                  
                    
                    Ativo
                  
                  
                
              

              {/* Sugestões de Tópicos - NOVO */}
              
                
                  {[
                    "Potencial solar da minha região",
                    "Economia mensal estimada",
                    "Pagamento",
                    "Processo de instalação",
                    "Homologação junto à concessionária",
                  ].map((topic, i) => (
                    
                      {topic}
                    
                  ))}
                
              

              
                
                  
                    
                  
                  
                    
                      
                        streamText
                      
                      via AI SDK Core
                    
                    
                      Olá! Sou o assistente Yello/Cash alimentado por IA generativa multimodal. Posso analisar seu
                      potencial solar em tempo real, simular financiamentos personalizados e dimensionar projetos
                      fotovoltaicos com precisão. Como posso otimizar sua experiência solar hoje?
                    
                    
                      Modelo:
                      
                        gpt-4o
                      
                      Temperatura:
                      
                        0.7
                      
                    
                  
                

                
                  
                    
                      Preciso avaliar o potencial solar do telhado da minha casa. Pode me ajudar?
                    
                  
                  
                    
                  
                

                
                  
                    
                  
                  
                    
                      Claro! Posso analisar o potencial solar do seu telhado. Você poderia compartilhar uma imagem aérea
                      da sua residência ou o endereço para que eu possa acessar imagens de satélite?
                    
                  
                

                
                  
                    
                      Aqui está uma foto do meu telhado e minha localização. Gostaria de saber o potencial solar e as
                      opções de financiamento.
                    
                    
                      
                      
                        São Paulo, SP • 23°33'S 46°38'W
                      
                      
                        
                        Localizado
                      
                    
                  
                  
                    
                  
                

                
                  
                    
                  
                  
                    🔍 Analisando imagem com visão computacional...
                    
                      
                        Processando multi-embeddings para análise de superfície e orientação solar...
                      
                      
                        
                      
                    
                    
                      AHAA! Identifiquei um telhado com orientação norte-sul e área
                      útil aproximada de 48m²!
                    
                    
                      
                        Dimensões detectadas:
                        8m x 6m
                      
                      
                        
                        
                          
                            
                              48m²
                            
                          
                        
                      
                    
                  
                

                
                  
                    
                  
                  
                    Com base na análise multimodal, posso oferecer as seguintes informações:
                    
                      
                        Potencial Solar
                        
                          Irradiação média:
                          5.2 kWh/m²/dia
                        
                        
                          Capacidade estimada:
                          7.2 kWp
                        
                        
                          Geração mensal:
                          864 kWh
                        
                      

                      
                        
                          Dimensionamento do Sistema
                        
                        
                          Painéis recomendados:
                          18 x 400W
                        
                        
                          Inversor ideal:
                          8kW
                        
                        
                          Área ocupada:
                          36m² (75% do disponível)
                        
                      
                    
                    
                      WOW! 🌟 Com base no seu consumo médio estimado, este sistema poderia cobrir até 95% da sua demanda
                      energética!
                    
                  
                

                
                  
                    
                      Isso é incrível! Quanto custaria um sistema assim e quais seriam as opções de financiamento?
                    
                  
                  
                    
                  
                

                
                  
                    
                  
                  
                    
                      AHAA! Com base na análise completa, posso apresentar as
                      seguintes opções financeiras:
                    
                    
                      
                        Investimento Estimado: R$ 42.500
                      
                      
                        
                          Pagamento à vista:
                          R$ 38.250 (10% desc.)
                        
                        
                          Pagamento por marcos:
                          4x de R$ 10.625
                        
                        
                          Financiamento:
                          60x de R$ 990/mês
                        
                        
                          Economia mensal:
                          R$ 950/mês
                        
                        
                          Retorno do investimento:
                          3.7 anos
                        
                      
                    
                    
                      
                        
                          
                          
                          
                        
                        
                          Investimento
                          Economia
                        
                        
                          
                          
                            Hoje
                            5 anos
                            10 anos
                            15 anos
                          
                        
                        
                          Payback
                        
                        
                          
                            R$ 142.500 em 15 anos
                          
                        
                      
                    
                  
                

                
                  
                    
                  
                  
                    
                      Para continuar usando o assistente, por favor complete seu cadastro!
                    
                    
                      
                      
                    
                  
                
              

              {/* Indicador de Progresso - NOVO */}
              
                
                  Progresso da sua jornada solar
                  1/6 etapas
                
                
                  
                
                
                  Avaliação
                  Dimensionamento
                  Financiamento
                  Instalação
                  Homologação
                  Monitoramento
                
              

              
                
                  
                    
                      
                      IA Playground
                    
                    
                      
                        Modo:
                        
                      
                      
                        SDK:
                        
                          v1.1.0
                        
                      
                    
                  
                  
                    
                    
                      
                      
                      
                    
                  
                
              
            
          

          
            Potencializado por IA Avançada
            
              Nosso assistente utiliza modelos multimodais da OpenAI e embeddings para oferecer uma experiência
              conversacional natural e inteligente.
            

            
              {[
                {
                  icon: ,
                  title: "Suporte Conversacional",
                  description: "Responde perguntas e oferece assistência em tempo real",
                },
                {
                  icon: ,
                  title: "Análise de Mercado",
                  description: "Fornece insights sobre tendências e preços de imóveis",
                },
                {
                  icon: ,
                  title: "Recomendações Personalizadas",
                  description: "Sugere propriedades e estratégias com base no seu perfil",
                },
                {
                  icon: ,
                  title: "Automação Inteligente",
                  description: "Automatiza tarefas rotineiras e processos administrativos",
                },
              ].map((feature, i) => (
                
                  
                    
                      {feature.icon}
                    
                    {feature.title}
                  
                  
                    {feature.description}
                  
                
              ))}
            

            
              
              
              
              
            

            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-assistant/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import {
  Bot,
  MessageSquare,
  Search,
  Sparkles,
  User,
  HelpCircle,
  Calculator,
  BarChart3,
  Wrench,
  FileCheck,
  LineChart,
  Wallet,
  Sun,
  ArrowLeft,
  Home,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

export default function AIAssistantPage() {
  return (
    
      {/* Header */}
      
        
          
            
            Yello
            /
            Cash
          
          
            
              
            
            
          
        
      

      
        
          
            
              
              Voltar para o Dashboard
            
            Assistente com IA
            
              Seu assistente multimodal com IA para gerenciar seus projetos solares de forma inteligente
            
          

          
            
              
                
                  
                    
                  
                  
                    Análise de Imóveis
                    Obtenha insights sobre o mercado imobiliário local
                  
                
              

              
                
                  
                  Powered by AI SDK
                

                {/* Barra de Navegação da Jornada Solar */}
                
                
                  Jornada Solar
                  
                    {[
                      { stage: "Avaliação", icon: , active: true },
                      { stage: "Dimensionamento", icon:  },
                      { stage: "Setup Pagamento", icon:  },
                      { stage: "Instalação", icon:  },
                      { stage: "Homologação", icon:  },
                      { stage: "Monitoramento", icon:  },
                    ].map((item, i) => (
                      
                        {item.icon}
                        {item.stage}
                        {item.active && }
                      
                    ))}
                  
                

                {/* Ações Rápidas Contextuais */}
                
                  
                    @ai-sdk/ui@1.1.0
                  
                
                
                  
                    
                      
                        
                          
                        
                        
                          Perguntas frequentes sobre solar
                        
                      

                      
                        
                          
                        
                        
                          Calcular potencial solar
                        
                      

                      
                        
                          
                        
                        
                          Comparar opções de financiamento
                        
                      
                    
                  
                

                
                  
                    
                    
                      Assistente Solar Yello/Cash
                      
                        Streaming com
                        
                          generateUI()
                        
                      
                    
                  
                  
                    
                      
                      Ativo
                    
                    
                  
                

                {/* Sugestões de Tópicos */}
                
                  
                    {[
                      "Potencial solar da minha região",
                      "Economia mensal estimada",
                      "Pagamento",
                      "Processo de instalação",
                      "Homologação junto à concessionária",
                    ].map((topic, i) => (
                      
                        {topic}
                      
                    ))}
                  
                

                
                  
                    
                      
                    
                    
                      
                        
                          streamText
                        
                        via AI SDK Core
                      
                      
                        Olá! Sou o assistente Yello/Cash alimentado por IA generativa multimodal. Posso analisar seu
                        potencial solar em tempo real, simular financiamentos personalizados e dimensionar projetos
                        fotovoltaicos com precisão. Como posso otimizar sua experiência solar hoje?
                      
                      
                        Modelo:
                        
                          gpt-4o
                        
                        Temperatura:
                        
                          0.7
                        
                      
                    
                  

                  
                    
                      
                        Preciso avaliar o potencial solar do telhado da minha casa. Pode me ajudar?
                      
                    
                    
                      
                    
                  

                  
                    
                      
                    
                    
                      
                        Claro! Posso analisar o potencial solar do seu telhado. Você poderia compartilhar uma imagem
                        aérea da sua residência ou o endereço para que eu possa acessar imagens de satélite?
                      
                    
                  

                  
                    
                      
                        Aqui está uma foto do meu telhado e minha localização. Gostaria de saber o potencial solar e as
                        opções de financiamento.
                      
                      
                        
                        
                          São Paulo, SP • 23°33'S 46°38'W
                        
                        
                          
                          Localizado
                        
                      
                    
                    
                      
                    
                  

                  
                    
                      
                    
                    
                      🔍 Analisando imagem com visão computacional...
                      
                        
                          Processando multi-embeddings para análise de superfície e orientação solar...
                        
                        
                          
                        
                      
                      
                        AHAA! Identifiquei um telhado com orientação norte-sul e área
                        útil aproximada de 48m²!
                      
                      
                        
                          Dimensões detectadas:
                          8m x 6m
                        
                        
                          
                          
                            
                              
                                48m²
                              
                            
                          
                        
                      
                    
                  

                  
                    
                      
                    
                    
                      
                        Com base na análise multimodal, posso oferecer as seguintes informações:
                      
                      
                        
                          Potencial Solar
                          
                            Irradiação média:
                            5.2 kWh/m²/dia
                          
                          
                            Capacidade estimada:
                            7.2 kWp
                          
                          
                            Geração mensal:
                            864 kWh
                          
                        

                        
                          
                            Dimensionamento do Sistema
                          
                          
                            Painéis recomendados:
                            18 x 400W
                          
                          
                            Inversor ideal:
                            8kW
                          
                          
                            Área ocupada:
                            36m² (75% do disponível)
                          
                        
                      
                      
                        WOW! 🌟 Com base no seu consumo médio estimado, este sistema poderia cobrir até 95% da sua
                        demanda energética!
                      
                    
                  

                  
                    
                      
                        Isso é incrível! Quanto custaria um sistema assim e quais seriam as opções de financiamento?
                      
                    
                    
                      
                    
                  

                  
                    
                      
                    
                    
                      
                        AHAA! Com base na análise completa, posso apresentar as
                        seguintes opções financeiras:
                      
                      
                        
                          Investimento Estimado: R$ 42.500
                        
                        
                          
                            Pagamento à vista:
                            R$ 38.250 (10% desc.)
                          
                          
                            Pagamento por marcos:
                            4x de R$ 10.625
                          
                          
                            Financiamento:
                            60x de R$ 990/mês
                          
                          
                            Economia mensal:
                            R$ 950/mês
                          
                          
                            Retorno do investimento:
                            3.7 anos
                          
                        
                      
                      
                        
                          
                            
                            
                            
                          
                          
                            Investimento
                            Economia
                          
                          
                            
                            
                              Hoje
                              5 anos
                              10 anos
                              15 anos
                            
                          
                          
                            
                              Payback
                            
                          
                          
                            
                              R$ 142.500 em 15 anos
                            
                          
                        
                      
                    
                  

                  
                    
                      
                    
                    
                      
                        Quer explorar mais detalhes sobre alguma das opções de financiamento? Posso detalhar os termos,
                        processos e próximos passos para qualquer uma delas.
                      
                      
                        
                        
                        
                      
                    
                  
                

                {/* Indicador de Progresso */}
                
                  
                    Progresso da sua jornada solar
                    1/6 etapas
                  
                  
                    
                  
                  
                    Avaliação
                    Dimensionamento
                    Financiamento
                    Instalação
                    Homologação
                    Monitoramento
                  
                

                
                  
                    
                      
                        
                        IA Playground
                      
                      
                        
                          Modo:
                          
                        
                        
                          SDK:
                          
                            v1.1.0
                          
                        
                      
                    
                    
                      
                      
                        
                        
                        
                      
                    
                  
                
              
            

            
              
                Seu Consultor Pessoal de IA
                
                  O Assistente Yello/Cash utiliza modelos multimodais avançados e análise de dados em tempo real para
                  oferecer suporte personalizado em todas as etapas do seu projeto solar.
                

                
                  {[
                    {
                      icon: ,
                      title: "Conversa Inteligente",
                      description: "Responde perguntas técnicas e oferece assistência personalizada em tempo real.",
                    },
                    {
                      icon: ,
                      title: "Análise de Potencial Solar",
                      description: "Avalia fotos e dados de satélite para determinar o potencial solar do seu imóvel.",
                    },
                    {
                      icon: ,
                      title: "Simulações Financeiras",
                      description: "Calcula retorno de investimento e compara diferentes opções de financiamento.",
                    },
                    {
                      icon: ,
                      title: "Monitoramento de Projetos",
                      description: "Acompanha cada etapa da sua jornada solar, com alertas e recomendações.",
                    },
                  ].map((feature, i) => (
                    
                      
                        
                          {feature.icon}
                        
                        {feature.title}
                      
                      
                        {feature.description}
                      
                    
                  ))}
                

                
                  Recursos Disponíveis
                  
                    
                      
                      Análise de imagens e documentos
                    
                    
                      
                      Cálculos de dimensionamento solar
                    
                    
                      
                      Simulador financeiro avançado
                    
                    
                      
                      Atendimento 24/7 para clientes premium
                    
                  
                
              

              
                
                  Próximos Passos
                
                
                  
                    
                    
                      Compartilhe Mais Informações
                      
                        Adicione sua fatura de energia ou informações sobre consumo para análises mais precisas.
                      
                    
                  

                  
                    
                    
                      Compare Opções de Financiamento
                      
                        Use o simulador para analisar diferentes cenários financeiros para seu projeto.
                      
                    
                  

                  
                    
                    
                      Agende uma Visita Técnica
                      
                        Após a análise inicial, agende uma visita técnica para validação presencial.
                      
                    
                  
                
              
            
          
        
      

      
        
          
            
            Yello
            /
            Cash
          
          © 2025 Yello/Cash. Todos os direitos reservados.
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-assistant/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true"
import type React from "react"
import { Sun } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
          
            
            Yello
            /
            Cash
          

          
            
              
            
            
              
            
            
              
            
            
              
            
          

          
            
            
          
        
      

      {children}

      
        
          
            
            Yello
            /
            Cash
          
          © 2025 Yello/Cash. Todos os direitos reservados.
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
import Link from "next/link"
import { Sun, ChevronRight, User, LineChart, BarChart3, Zap, Bot, FileCheck } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"

export default function Dashboard() {
  return (
    
      
        Dashboard Solar
        Bem-vindo à sua central de controle de projetos solares
      

      {/* Overview Cards */}
      
        
          
            Economia Total
          
          
            R$ 12.450
            +8.2% do mês anterior
            
          
        

        
          
            Geração Mensal
          
          
            864 kWh
            95% da sua demanda
            
          
        

        
          
            Projetos
          
          
            3
            1 em andamento
            
          
        

        
          
            Retorno do Investimento
          
          
            3.2 anos
            22% concluído
            
          
        
      

      {/* Main Content */}
      
        
          {/* Projects */}
          
            
              
                Projetos Ativos
                Acompanhe o progresso dos seus projetos solares
              
              
            
            
              {[
                {
                  name: "Residência Principal",
                  location: "São Paulo, SP",
                  status: "Em Andamento",
                  progress: 75,
                  stage: "Instalação",
                  nextStep: "Homologação concessionária",
                  icon: ,
                },
                {
                  name: "Casa de Praia",
                  location: "Ubatuba, SP",
                  status: "Concluído",
                  progress: 100,
                  stage: "Monitoramento",
                  nextStep: "Manutenção preventiva",
                  icon: ,
                },
                {
                  name: "Edifício Comercial",
                  location: "Campinas, SP",
                  status: "Planejamento",
                  progress: 25,
                  stage: "Dimensionamento",
                  nextStep: "Aprovação do financiamento",
                  icon: ,
                },
              ].map((project, index) => (
                
                  {project.icon}
                  
                    
                      {project.name}
                      
                        {project.status}
                      
                    
                    {project.location}
                    
                      
                        Progresso: {project.stage}
                        {project.progress}%
                      
                      
                    
                    
                      Próximo: {project.nextStep}
                      
                    
                  
                
              ))}
            
          

          {/* Analytics */}
          
            
              Métricas de Desempenho
            
            
              
                
                  
                  Gráficos de desempenho serão exibidos aqui
                
              
            
          
        

        
          {/* Sidebar - Quick Access */}
          
            
              Acesso Rápido
            
            
              
                
              

              
                
              

              
                
              

              
                
              
            
          

          {/* Notifications */}
          
            
              Notificações
            
            
              {[
                {
                  title: "Visita técnica agendada",
                  description: "Amanhã, 14:00 - Residência Principal",
                  icon: ,
                  time: "1 dia",
                },
                {
                  title: "Economia mensal atualizada",
                  description: "Você economizou R$ 950 este mês",
                  icon: ,
                  time: "2 dias",
                },
                {
                  title: "Novo relatório disponível",
                  description: "Análise de desempenho trimestral",
                  icon: ,
                  time: "1 semana",
                },
              ].map((notification, index) => (
                
                  {notification.icon}
                  
                    {notification.title}
                    {notification.description}
                    {notification.time} atrás
                  
                
              ))}

              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/api/financial-simulator/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import * as yup from "yup"
import { validateRequest } from "@/lib/api/validation"
import { logger } from "@/lib/utils/logger"
import { simulateSolarFinancing } from "@/lib/services/financial-simulator.service"
import { ApiResponse } from "@/lib/api/response"
import { HttpStatus } from "@/lib/api/status-codes"
import { errorHandler } from "@/lib/middleware/error-handler"

// Schema for financial simulator parameters
const simulatorParamsSchema = yup.object({
  projectValue: yup.number().required().min(1000).max(1000000),
  energySavings: yup.number().required().min(50).max(10000),
  selectedBank: yup.string().optional(),
  selectedPaymentMethod: yup.string().optional(),
  includeInstallation: yup.boolean().default(true),
  includeEquipment: yup.boolean().default(true),
  includeHomologation: yup.boolean().default(true),
  includeMonitoring: yup.boolean().default(false),
  energyPriceIncrease: yup.number().default(8).min(0).max(20),
  inflationRate: yup.number().default(4.5).min(0).max(20),
})

/**
 * POST /api/financial-simulator
 * Simulates financial options for solar projects
 */
export async function POST(req: NextRequest) {
  return errorHandler(req, async () => {
    try {
      // Validate request body
      const { isValid, data, errors } = await validateRequest(req, simulatorParamsSchema)

      if (!isValid) {
        return ApiResponse.error("Validation error", HttpStatus.BAD_REQUEST, "VALIDATION_ERROR", errors)
      }

      logger.info("Running financial simulation", { params: data })

      // Run financial simulation
      const results = await simulateSolarFinancing(data)

      return ApiResponse.success(results)
    } catch (error) {
      logger.error("Error in financial simulator", error)
      return ApiResponse.error(
        "Failed to run financial simulation",
        HttpStatus.INTERNAL_SERVER_ERROR,
        "SIMULATION_ERROR",
      )
    }
  })
}
[V0_FILE]typescript:file="lib/services/bank.service.ts" isMerged="true"
import { logger } from "@/lib/utils/logger"

/**
 * Interface for bank information
 */
export interface Bank {
  id: string
  name: string
  logo: string
  interestRate: number
  maxTerm: number
  minDownPayment: number
  description?: string
  specialRequirements?: string[]
  supportedPaymentMethods?: string[]
  contactInfo?: {
    phone?: string
    email?: string
    website?: string
  }
}

// Mock bank database
const banks: Bank[] = [
  {
    id: "banco-solar",
    name: "Banco Solar",
    logo: "BS",
    interestRate: 0.99,
    maxTerm: 72,
    minDownPayment: 10,
    description: "Especializado em financiamento de energia renovável",
    specialRequirements: ["Comprovação de renda mínima de R$ 3.500", "Score de crédito acima de 700", "Imóvel quitado"],
    supportedPaymentMethods: ["traditional", "upfront", "milestone"],
    contactInfo: {
      phone: "0800 123 4567",
      email: "contato@bancosolar.com.br",
      website: "https://www.bancosolar.com.br",
    },
  },
  {
    id: "eco-finance",
    name: "EcoFinance",
    logo: "EF",
    interestRate: 1.15,
    maxTerm: 60,
    minDownPayment: 0,
    description: "Soluções financeiras para projetos sustentáveis",
    specialRequirements: ["Projeto com certificação de sustentabilidade", "Score de crédito acima de 650"],
    supportedPaymentMethods: ["traditional", "subscription", "leasing"],
    contactInfo: {
      phone: "0800 987 6543",
      email: "atendimento@ecofinance.com.br",
      website: "https://www.ecofinance.com.br",
    },
  },
  {
    id: "green-bank",
    name: "GreenBank",
    logo: "GB",
    interestRate: 0.89,
    maxTerm: 84,
    minDownPayment: 15,
    description: "Banco verde com foco em projetos de impacto ambiental positivo",
    specialRequirements: ["Comprovação de renda mínima de R$ 5.000", "Análise de viabilidade técnica do projeto"],
    supportedPaymentMethods: ["traditional", "milestone", "leasing"],
    contactInfo: {
      phone: "0800 456 7890",
      email: "contato@greenbank.com.br",
      website: "https://www.greenbank.com.br",
    },
  },
  {
    id: "sun-credit",
    name: "SunCredit",
    logo: "SC",
    interestRate: 1.05,
    maxTerm: 96,
    minDownPayment: 5,
    description: "Crédito especializado para sistemas fotovoltaicos",
    specialRequirements: ["Projeto executado por empresa certificada", "Imóvel com bom potencial solar"],
    supportedPaymentMethods: ["traditional", "milestone", "subscription"],
    contactInfo: {
      phone: "0800 345 6789",
      email: "contato@suncredit.com.br",
      website: "https://www.suncredit.com.br",
    },
  },
  {
    id: "energia-coop",
    name: "Energia Coop",
    logo: "EC",
    interestRate: 0.79,
    maxTerm: 48,
    minDownPayment: 20,
    description: "Cooperativa de crédito focada em energia renovável",
    specialRequirements: ["Ser associado da cooperativa", "Projeto residencial ou de pequeno negócio"],
    supportedPaymentMethods: ["traditional", "milestone"],
    contactInfo: {
      phone: "0800 765 4321",
      email: "contato@energiacoop.com.br",
      website: "https://www.energiacoop.com.br",
    },
  },
]

/**
 * Get bank by ID
 */
export async function getBankById(id: string): Promise {
  try {
    const bank = banks.find((b) => b.id === id)
    return bank || null
  } catch (error) {
    logger.error(`Error getting bank with ID ${id}`, error)
    throw error
  }
}

/**
 * Get all banks or filter by ID
 */
export async function getBanksList(bankId?: string): Promise {
  try {
    if (bankId && bankId !== "all") {
      const bank = await getBankById(bankId)
      return bank ? [bank] : []
    }

    return [...banks]
  } catch (error) {
    logger.error("Error getting banks list", error)
    throw error
  }
}

/**
 * Get banks that support a specific payment method
 */
export async function getBanksByPaymentMethod(paymentMethodId: string): Promise {
  try {
    return banks.filter((bank) => bank.supportedPaymentMethods?.includes(paymentMethodId))
  } catch (error) {
    logger.error(`Error getting banks for payment method ${paymentMethodId}`, error)
    throw error
  }
}

/**
 * Get current interest rates from banks
 * In a real scenario, this would call bank APIs to get real-time rates
 */
export async function getCurrentInterestRates(): Promise> {
  try {
    // Simulate API call to get current rates
    // In a real implementation, this would fetch from bank APIs

    // For now, return the mock rates
    return banks.reduce(
      (rates, bank) => {
        rates[bank.id] = bank.interestRate
        return rates
      },
      {} as Record,
    )
  } catch (error) {
    logger.error("Error getting current interest rates", error)
    throw error
  }
}
[V0_FILE]typescript:file="lib/api/validation.ts" isMerged="true"
import type { NextRequest } from "next/server"
import { logger } from "@/lib/utils/logger"

/**
 * Validate request body against a schema
 */
export async function validateRequest(
  req: NextRequest,
  schema: any,
): Promise<{ isValid: boolean; data?: T; errors?: Record }> {
  try {
    // Parse request body
    const body = await req.json()

    // Validate against schema
    try {
      const data = await schema.validate(body, {
        abortEarly: false,
        stripUnknown: true,
      })

      return { isValid: true, data: data as T }
    } catch (error: any) {
      logger.debug("Validation error:", error)

      // Format validation errors
      const errors = error.inner?.reduce((acc: any, err: any) => {
        acc[err.path] = err.message
        return acc
      }, {}) || { _error: error.message }

      return { isValid: false, errors }
    }
  } catch (error) {
    logger.error("Error parsing request body:", error)
    return { isValid: false, errors: { _error: "Invalid JSON in request body" } }
  }
}
[V0_FILE]typescript:file="lib/api/status-codes.ts" isMerged="true"
/**
 * HTTP Status codes enum
 */
export enum HttpStatus {
  OK = 200,
  CREATED = 201,
  NO_CONTENT = 204,
  BAD_REQUEST = 400,
  UNAUTHORIZED = 401,
  FORBIDDEN = 403,
  NOT_FOUND = 404,
  CONFLICT = 409,
  UNPROCESSABLE_ENTITY = 422,
  TOO_MANY_REQUESTS = 429,
  INTERNAL_SERVER_ERROR = 500,
  BAD_GATEWAY = 502,
  SERVICE_UNAVAILABLE = 503,
}
[V0_FILE]typescriptreact:file="components/financial/ai-recommendation-panel.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 { Sparkles, Bot, ChevronDown, ChevronUp, Check } from "lucide-react"
import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format"
import { Skeleton } from "@/components/ui/skeleton"

interface AIRecommendationPanelProps {
  simulationResults: any[]
  projectValue: number
  energySavings: number
  onSelectOption: (index: number) => void
}

export function AIRecommendationPanel({
  simulationResults,
  projectValue,
  energySavings,
  onSelectOption,
}: AIRecommendationPanelProps) {
  const [isLoading, setIsLoading] = useState(true)
  const [recommendations, setRecommendations] = useState([])
  const [isExpanded, setIsExpanded] = useState(false)

  useEffect(() => {
    if (simulationResults.length === 0) return

    // Simulate AI processing delay
    setIsLoading(true)
    const timer = setTimeout(() => {
      // In a real application, this would call the AI API with the simulation results
      // and get personalized recommendations

      // For now, we'll use a simple algorithm to generate recommendations:
      // 1. Best ROI option
      // 2. Fastest payback option
      // 3. Lowest monthly payment option

      const bestROI = [...simulationResults].sort((a, b) => b.roi - a.roi)[0]
      const fastestPayback = [...simulationResults].sort((a, b) => a.paybackMonths - b.paybackMonths)[0]
      const lowestMonthly = [...simulationResults]
        .filter((r) => r.monthlyPayment > 0)
        .sort((a, b) => a.monthlyPayment - b.monthlyPayment)[0]

      // Find their indices in the original array
      const bestROIIndex = simulationResults.findIndex((r) => r.id === bestROI.id)
      const fastestPaybackIndex = simulationResults.findIndex((r) => r.id === fastestPayback.id)
      const lowestMonthlyIndex = simulationResults.findIndex((r) => r.id === lowestMonthly.id)

      // Create recommendation objects
      const recs = [
        {
          title: "Melhor Retorno sobre Investimento",
          description: "Esta opção maximiza seu ROI no longo prazo",
          result: bestROI,
          index: bestROIIndex,
          highlights: [
            `ROI de ${formatPercentage(bestROI.roi)}`,
            `Economia total de ${formatCurrency(bestROI.energySavings25Years)} em 25 anos`,
          ],
          explanation: `Para um investimento de ${formatCurrency(projectValue)}, esta opção oferece o maior retorno financeiro ao longo do tempo. Com uma economia mensal de ${formatCurrency(energySavings)}, seu retorno sobre investimento será maximizado.`,
        },
        {
          title: "Retorno Mais Rápido",
          description: "Esta opção permite recuperar seu investimento no menor tempo possível",
          result: fastestPayback,
          index: fastestPaybackIndex,
          highlights: [
            `Payback em apenas ${formatMonths(fastestPayback.paybackMonths)}`,
            `${fastestPayback.discount > 0 ? `Desconto de ${formatCurrency(fastestPayback.discount)}` : `Sem entrada inicial significativa`}`,
          ],
          explanation: `Se você deseja recuperar seu investimento o mais rápido possível, esta é a melhor opção. Com um período de payback de apenas ${formatMonths(fastestPayback.paybackMonths)}, você começará a ver retorno financeiro rapidamente.`,
        },
      ]

      // Add lowest monthly payment if it's different from the other recommendations
      if (lowestMonthlyIndex !== bestROIIndex && lowestMonthlyIndex !== fastestPaybackIndex) {
        recs.push({
          title: "Menor Pagamento Mensal",
          description: "Esta opção minimiza seu desembolso mensal",
          result: lowestMonthly,
          index: lowestMonthlyIndex,
          highlights: [
            `Apenas ${formatCurrency(lowestMonthly.monthlyPayment)} por mês`,
            `Prazo estendido de ${lowestMonthly.term} meses`,
          ],
          explanation: `Para um fluxo de caixa mais confortável, esta opção oferece o menor pagamento mensal. Isso facilita o encaixe no seu orçamento, embora o período de payback seja um pouco mais longo.`,
        })
      }

      setRecommendations(recs)
      setIsLoading(false)
    }, 2000)

    return () => clearTimeout(timer)
  }, [simulationResults, projectValue, energySavings])

  if (simulationResults.length === 0) {
    return null
  }

  return (
    
      
        
          
          Recomendações da IA
        
      
      
        {isLoading ? (
          
            
              
              
                
                
                
              
            
            
          
        ) : (
          
            {recommendations.slice(0, isExpanded ? recommendations.length : 1).map((rec, index) => (
              
                
                  
                    
                  
                  
                    {rec.title}
                    {rec.description}

                    
                      {rec.highlights.map((highlight, i) => (
                        
                          
                          {highlight}
                        
                      ))}
                    

                    
                      {rec.explanation}
                    

                    
                      
                    
                  
                

                {index < recommendations.length - 1 && !isExpanded && (
                  
                )}
              
            ))}

            {recommendations.length > 1 && (
              
            )}

            
              
                Estas recomendações são baseadas nas suas preferências e nos parâmetros fornecidos. Para uma análise
                mais personalizada, consulte um especialista financeiro.
              
            
          
        )}
      
    
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Modo claro (default) */
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 38 92% 50%; /* Amarelo da marca */
    --primary-foreground: 26 83.3% 14.1%;
    --secondary: 160 84% 39%; /* Verde da marca */
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 38 92% 50%; /* Amarelo da marca para acentos */
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 38 92% 50%; /* Amarelo da marca para foco */
    --radius: 0.5rem;
  }

  .dark {
    /* Modo escuro blackout */
    --background: 0 0% 0%; /* Preto puro */
    --foreground: 0 0% 98%; /* Branco quase puro para texto */
    --card: 0 0% 3%; /* Preto levemente mais claro para cards */
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3%;
    --popover-foreground: 0 0% 98%;
    --primary: 38 92% 50%; /* Mantém a cor primária */
    --primary-foreground: 0 0% 0%;
    --secondary: 160 84% 39%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 10%; /* Cinza muito escuro */
    --muted-foreground: 0 0% 70%; /* Cinza claro para texto secundário */
    --accent: 38 92% 50%; /* Amarelo da marca para acentos */
    --accent-foreground: 0 0% 0%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 15%; /* Bordas escuras mas visíveis */
    --input: 0 0% 15%;
    --ring: 38 92% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply tracking-tight;
  }

  /* Animações personalizadas para componentes da marca */
  .brand-button-hover {
    @apply transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98];
  }

  .brand-card-hover {
    @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
  }

  /* Gradientes personalizados */
  .brand-gradient-primary {
    @apply bg-gradient-to-r from-yellow-500 via-yellow-400 to-yellow-500;
  }

  .brand-gradient-secondary {
    @apply bg-gradient-to-r from-green-500 via-green-400 to-green-500;
  }

  /* Gradiente de fundo adaptado para modo escuro */
  .brand-gradient-background {
    @apply bg-gradient-to-br from-yellow-50 to-green-50 dark:from-yellow-950/10 dark:to-green-950/10;
  }
}

/* Adicionar classes de utilidade para a marca */
@layer utilities {
  .text-brand-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-yellow-600;
  }

  .bg-brand-gradient {
    @apply bg-gradient-to-r from-yellow-500 to-yellow-600;
  }

  .bg-brand-gradient-alt {
    @apply bg-gradient-to-r from-green-500 to-green-600;
  }

  .border-brand {
    @apply border-yellow-500;
  }

  .shadow-brand {
    @apply shadow-[0_0_10px_rgba(245,158,11,0.3)];
  }
}

/* Add solar-inspired animations */
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse-solar {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes float-solar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-shine {
  animation: shine 2s infinite;
}

.animate-pulse-solar {
  animation: pulse-solar 3s infinite;
}

.animate-float-solar {
  animation: float-solar 5s ease-in-out infinite;
}

/* Add gradient text utility */
.text-gradient-yello {
  background: linear-gradient(90deg, #ffce00, #ff6600, #ff0066);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Efeito de brilho para elementos no modo escuro */
.dark .glow-effect {
  box-shadow: 0 0 15px rgba(255, 206, 0, 0.3), 0 0 30px rgba(255, 102, 0, 0.1);
}

.dark .glow-text {
  text-shadow: 0 0 8px rgba(255, 206, 0, 0.5);
}
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import {
  ArrowRight,
  Sun,
  Home,
  Users,
  CreditCard,
  Zap,
  FileText,
  DollarSign,
  HelpCircle,
  Menu,
  LogIn,
  UserPlus,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import HeroSection from "@/components/hero-section"
import PropertyListings from "@/components/property-listings"
import OwnerProfiles from "@/components/owner-profiles"
import PaymentSystem from "@/components/payment-system"
import AIAssistant from "@/components/ai-assistant"
import Features from "@/components/features"
import { ThemeToggle } from "@/components/theme-toggle"
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"

export default function HomePage() {
  return (
    
      
        
          
            
            Yello
            /
            Cash
          

          
            {/* Desktop Navigation */}
            
              
                {[
                  { name: "Propriedades", href: "#properties", icon:  },
                  { name: "Proprietários", href: "#owners", icon:  },
                  { name: "Pagamentos", href: "#payment", icon:  },
                  { name: "Recursos", href: "#features", icon:  },
                  { name: "Blog", href: "/blog", icon:  },
                  { name: "Preços", href: "/pricing", icon:  },
                ].map((item) => (
                  
                    
                      {item.icon}
                      {item.name}
                    
                  
                ))}
              
            

            {/* Onboarding Button with Badge for new users */}
            
              
            

            {/* User Authentication */}
            
              
                
              
              
                
              
            

            {/* Theme Toggle */}
            
              
            

            {/* Mobile Menu Button */}
            
              
                
              
              
                
                  
                    
                    Yello
                    /
                    Cash
                  
                  Navegue pela plataforma de energia solar
                
                
                  
                    {[
                      { name: "Propriedades", href: "#properties", icon:  },
                      { name: "Proprietários", href: "#owners", icon:  },
                      { name: "Pagamentos", href: "#payment", icon:  },
                      { name: "Recursos", href: "#features", icon:  },
                      { name: "Blog", href: "/blog", icon:  },
                      { name: "Preços", href: "/pricing", icon:  },
                      {
                        name: "Tour Guiado",
                        href: "#tour",
                        icon: ,
                        badge: "Novo",
                      },
                    ].map((item) => (
                      
                        {item.icon}
                        {item.name}
                        {item.badge && (
                          
                            {item.badge}
                          
                        )}
                      
                    ))}
                  
                
                
                  
                    
                      
                    
                    
                      
                    
                  
                  
                
              
            
          
        
      

      
        

        

        

        

        

        

        
          
            Start managing your properties today
            
              Simplify property management, payments, and owner communication in one platform.
            
            
              
              
            
          
        
      

      
        
          
            
              Plataforma
              
                
                  
                    Recursos
                  
                
                
                  
                    Preços
                  
                
                
                  
                    Segurança
                  
                
              
            
            
              Suporte
              
                
                  
                    Documentação
                  
                
                
                  
                    Central de Ajuda
                  
                
                
                  
                    Contato
                  
                
              
            
            
              Legal
              
                
                  
                    Termos
                  
                
                
                  
                    Privacidade
                  
                
                
                  
                    Cookies
                  
                
              
            
            
              Empresa
              
                
                  
                    Sobre
                  
                
                
                  
                    Blog
                  
                
                
                  
                    Carreiras
                  
                
              
            
          
          
            
              
              Yello
              /
              Cash
            
            © 2025 Yello/Cash. All rights reserved.
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/property-listings.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  Home,
  MapPin,
  Maximize,
  Sun,
  ArrowUpRight,
  Info,
  CreditCard,
  Wallet,
  Layers,
  Zap,
  BanknoteIcon,
  Battery,
  Car,
  LineChart,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import { Gauge } from "@/components/ui/gauge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Slider } from "@/components/ui/slider"

// Solar Gauge component that uses the Gauge component
function SolarGauge({ value, type }: { value: number; type: "economia" | "roi" }) {
  return (
    
  )
}

export default function PropertyListings() {
  const properties = [
    {
      id: 1,
      title: "Casa Moderna com Energia Solar",
      type: "Residencial",
      location: "São Paulo, SP",
      area: "205 m²",
      price: "R$ 1.250.000",
      energy: "Sistema Solar Instalado",
      image: "/placeholder.svg?height=300&width=400",
      featured: true,
      paymentOptions: {
        type: "traditional",
        name: "Financiamento Tradicional",
        description: "Linha de crédito com taxa fixa de 9.5% a.a.",
        processor: "Lago Payments",
        details: "Aprovação em 48h, entrada de 20%",
      },
    },
    {
      id: 2,
      title: "Edifício Comercial Sustentável",
      type: "Comercial",
      location: "Rio de Janeiro, RJ",
      area: "510 m²",
      price: "R$ 2.800.000",
      energy: "Preparado para Energia Solar",
      image: "/placeholder.svg?height=300&width=400",
      featured: false,
      paymentOptions: {
        type: "flexible",
        name: "Pagamento Misto",
        description: "30% entrada + financiamento + cartão",
        processor: "Hyperswitch",
        details: "Parcelamento em até 60x",
      },
    },
    {
      id: 3,
      title: "Vila Ecológica",
      type: "Residencial",
      location: "Florianópolis, SC",
      area: "297 m²",
      price: "R$ 1.850.000",
      energy: "Energia Net Zero",
      image: "/placeholder.svg?height=300&width=400",
      featured: true,
      paymentOptions: {
        type: "milestone",
        name: "Pagamento por Marcos",
        description: "4 etapas de implementação solar",
        processor: "Finarect",
        details: "Pagamentos vinculados a entregas",
      },
    },
    {
      id: 4,
      title: "Apartamento Solar Urbano",
      type: "Residencial",
      location: "Belo Horizonte, MG",
      area: "167 m²",
      price: "R$ 950.000",
      energy: "Otimizado para Energia Solar",
      image: "/placeholder.svg?height=300&width=400",
      featured: false,
      paymentOptions: {
        type: "alternative",
        name: "Leasing Solar",
        description: "Sem investimento inicial",
        processor: "Lago Payments",
        details: "Economia imediata na conta de luz",
      },
    },
  ]

  const [showPaymentModal, setShowPaymentModal] = useState(false)
  const [projectValue, setProjectValue] = useState(40000)
  const [installments, setInstallments] = useState(12)
  const [downPayment, setDownPayment] = useState(0)
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("credit-card")

  return (
    
      
        
          
            Imóveis em Destaque
            
              Descubra propriedades energeticamente eficientes com soluções solares integradas
            
          
          
        

        
          {/* Guia de Métodos de Pagamento - Card Explicativo */}
          
            
              
                
                  
                    
                  
                  Métodos de Pagamento Habilitadores
                
                
                  Soluções financeiras adaptadas para cada perfil de consumo energético
                
              
              
                
                  {[
                    {
                      name: "Tradicional",
                      icon: ,
                      color: "bg-blue-100 text-blue-700",
                    },
                    { name: "Flexível", icon: , color: "bg-purple-100 text-purple-700" },
                    {
                      name: "Por Marcos",
                      icon: ,
                      color: "bg-yellow-100 text-yellow-700",
                    },
                    { name: "Alternativo", icon: , color: "bg-green-100 text-green-700" },
                  ].map((type, i) => (
                    
                      {type.icon}
                      {type.name}
                    
                  ))}
                

                
                  
                    Valor do projeto solar
                    
                       setProjectValue(Number(e.target.value))}
                      />
                      
                        R$ {projectValue.toLocaleString("pt-BR")}
                      
                    
                  
                

                
                  
                    
                      
                        
                      
                      Pagamento por Marcos
                    
                    
                      Recomendado
                    
                  

                  
                    {[
                      { name: "Marco 1: Planejamento", value: "R$ 6.000", percent: "15%", status: "Concluído" },
                      { name: "Marco 2: Aquisição", value: "R$ 14.000", percent: "35%", status: "Em andamento" },
                      { name: "Marco 3: Instalação", value: "R$ 10.000", percent: "25%", status: "Pendente" },
                      { name: "Marco 4: Homologação", value: "R$ 10.000", percent: "25%", status: "Pendente" },
                    ].map((milestone, i) => (
                      
                        
                          
                          {milestone.name}
                        
                        
                          
                            R$ {Math.round((projectValue * milestone.percentage) / 100).toLocaleString("pt-BR")}
                          
                          ({milestone.percent})
                        
                      
                    ))}
                  
                

                
                  
                    
                      
                        
                      
                      Tradicional
                    
                    Pagamento à vista
                    R$ {Math.round(projectValue * 0.9).toLocaleString("pt-BR")}
                    Economia de 10%
                  

                  
                    
                      
                        
                      
                      Alternativo
                    
                    Leasing Solar
                    R$ 650/mês
                    Sem entrada
                  
                

                
                  Instituições Financeiras Parceiras
                  
                    {[
                      { name: "Banco Solar", logo: "BS" },
                      { name: "EcoFinance", logo: "EF" },
                      { name: "GreenBank", logo: "GB" },
                      { name: "SunCredit", logo: "SC" },
                      { name: "Mais opções", logo: "+" },
                    ].map((bank, i) => (
                      
                        
                          {bank.logo}
                        
                        {bank.name}
                      
                    ))}
                  
                
              

              
                
              
            
          

          {/* Cross-Selling Card - NEW */}
          
            
              
                
                  
                    
                  
                  Upselling Solar
                
                
                  Amplie seu investimento com complementos inteligentes
                
              
              
                {[
                  {
                    name: "Bateria Residencial",
                    description: "Armazene energia para uso noturno",
                    price: "+R$ 15.000",
                    icon: ,
                  },
                  {
                    name: "Carregador Veicular",
                    description: "Carregue seu carro elétrico com energia solar",
                    price: "+R$ 8.500",
                    icon: ,
                  },
                  {
                    name: "Monitoramento Avançado",
                    description: "Acompanhe a geração em tempo real",
                    price: "+R$ 2.200",
                    icon: ,
                  },
                ].map((item, i) => (
                  
                    
                      {item.icon}
                      
                        {item.name}
                        {item.description}
                      
                    
                    {item.price}
                  
                ))}
              
              
                
              
            
          

          {properties.map((property) => (
            
              
                
                {property.featured && (
                  
                    Destaque
                  
                )}
                {property.paymentOptions && (
                  
                    {property.paymentOptions.name}
                  
                )}
              
              
                {property.title}
                
                  
                  {property.location}
                
              
              
                
                  
                    
                    {property.type}
                  
                  
                    
                    {property.area}
                  
                  
                    
                    {property.energy}
                  
                
                
                  {property.price}
                

                {property.paymentOptions && (
                  
                    
                      {property.paymentOptions.name}
                      
                        {property.paymentOptions.processor}
                      
                    
                    {property.paymentOptions.description}
                    {property.paymentOptions.details}
                  
                )}
              
              
                
                
              
            
          ))}
        
      
      {/* Multi-Credit Payment Calculator Modal */}
      
        
          
            
              
              Calculadora Multi-Crédito
            
            Simule diferentes formas de pagamento para seu projeto solar
          

          
            
              
                
                  Valor do Projeto
                  R$ {projectValue.toLocaleString("pt-BR")}
                
                 setProjectValue(value[0])}
                  className="w-full"
                />
                
                  R$ 10.000
                  R$ 100.000
                
              

              
                Entrada (opcional)
                
                   setDownPayment(Number(e.target.value))}
                    className="w-full"
                    placeholder="Valor da entrada"
                  />
                  
                
              
            

            
              
                
                  
                  Cartão
                
                
                  PIX
                
                
                  
                  Boleto
                
                
                  
                  Marcos
                
              

              
                
                  Cartão de Crédito
                  
                    
                      Número de Parcelas
                      
                         setInstallments(value[0])}
                          className="flex-1"
                        />
                        {installments}x
                      
                    

                    
                      
                        
                          
                          
                            
                              VISA
                            
                          
                        
                        
                          
                          
                            
                              MC
                            
                          
                        
                        
                          
                          
                            
                              OUTRO
                            
                          
                        
                      
                    

                    
                      
                        Valor financiado:
                        R$ {(projectValue - downPayment).toLocaleString("pt-BR")}
                      
                      
                        Parcelas:
                        
                          {installments}x de R${" "}
                          {Math.round((projectValue - downPayment) / installments).toLocaleString("pt-BR")}
                        
                      
                      
                        Taxa de juros:
                        1.99% a.m.
                      
                      
                        Total:
                        
                          R${" "}
                          {Math.round((projectValue - downPayment) * (1 + 0.0199) ** installments).toLocaleString(
                            "pt-BR",
                          )}
                        
                      
                    
                  
                

                
                  {[
                    { bank: "Banco Solar", rate: "1.99%", logo: "BS" },
                    { bank: "EcoFinance", rate: "2.15%", logo: "EF" },
                    { bank: "GreenBank", rate: "1.89%", logo: "GB" },
                  ].map((bank, i) => (
                    
                      
                        {bank.logo}
                      
                      {bank.bank}
                      {bank.rate} a.m.
                    
                  ))}
                
              

              
                
                  Pagamento via PIX
                  
                    
                      
                        
                          
                            QR Code PIX
                          
                        
                        Economize 10% pagando via PIX
                        Pagamento instantâneo
                      
                    

                    
                      
                        Valor original:
                        R$ {projectValue.toLocaleString("pt-BR")}
                      
                      
                        Desconto PIX (10%):
                        
                          - R$ {Math.round(projectValue * 0.1).toLocaleString("pt-BR")}
                        
                      
                      
                        Total a pagar:
                        
                          R$ {Math.round(projectValue * 0.9).toLocaleString("pt-BR")}
                        
                      
                    
                  
                

                
                  
                  
                    O pagamento via PIX é processado instantaneamente e o desconto é aplicado na hora!
                  
                
              

              
                
                  Pagamento via Boleto
                  
                    
                      Número de Parcelas
                      
                         setInstallments(value[0])}
                          className="flex-1"
                        />
                        {installments}x
                      
                    

                    
                      
                        
                        Boleto Bancário
                      
                      5% de desconto
                    

                    
                      
                        Valor original:
                        R$ {projectValue.toLocaleString("pt-BR")}
                      
                      
                        Desconto boleto (5%):
                        
                          - R$ {Math.round(projectValue * 0.05).toLocaleString("pt-BR")}
                        
                      
                      
                        Parcelas:
                        
                          {installments}x de R${" "}
                          {Math.round((projectValue * 0.95) / installments).toLocaleString("pt-BR")}
                        
                      
                    
                  
                

                
                  
                  Boletos são gerados com vencimento mensal e enviados para seu email.
                
              

              
                
                  Pagamento por Marcos
                  
                    
                      {[
                        { name: "Marco 1: Planejamento", percentage: 15, description: "Visita técnica e dossiê solar" },
                        { name: "Marco 2: Aquisição", percentage: 35, description: "Compra de equipamentos" },
                        {
                          name: "Marco 3: Instalação",
                          percentage: 25,
                          description: "Montagem e integração do sistema",
                        },
                        { name: "Marco 4: Homologação", percentage: 25, description: "Aprovação pela concessionária" },
                      ].map((milestone, i) => (
                        
                          
                            
                              
                                {i + 1}
                              
                              {milestone.name}
                            
                            {milestone.description}
                          
                          
                            {milestone.percentage}%
                            
                              R$ {Math.round((projectValue * milestone.percentage) / 100).toLocaleString("pt-BR")}
                            
                          
                        
                      ))}
                    

                    
                      
                        Total:
                        R$ {projectValue.toLocaleString("pt-BR")}
                      
                    
                  
                

                
                  
                  
                    Pagamentos vinculados à conclusão de cada etapa do projeto, reduzindo riscos.
                  
                
              
            
          

          
            
            
          
        
      
      {/* Estilos responsivos adicionais */}
      
    
  )
}
[V0_FILE]typescriptreact:file="app/propriedades/[id]/page.tsx" isMerged="true"
import { Suspense } from "react"
import { notFound } from "next/navigation"
import Link from "next/link"
import { ArrowLeft, Home, MapPin, Ruler, Zap } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { PropertyGallery } from "@/components/property-gallery"
import { PropertyContactForm } from "@/components/property-contact-form"
import { PropertyPaymentOptions } from "@/components/property-payment-options"
import { PropertyMap } from "@/components/property-map"
import { PropertySimilar } from "@/components/property-similar"
import { PropertyScheduleTour } from "@/components/property-schedule-tour"

async function getProperty(id: string) {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/properties/${id}`, {
      next: { revalidate: 3600 }, // Revalidate every hour
    })

    if (!res.ok) {
      if (res.status === 404) return null
      throw new Error("Failed to fetch property")
    }

    const data = await res.json()
    return data.success ? data.data : null
  } catch (error) {
    console.error("Error fetching property:", error)
    return null
  }
}

export default async function PropertyPage({ params }: { params: { id: string } }) {
  const property = await getProperty(params.id)

  if (!property) {
    notFound()
  }

  return (
    
      
        
          
          Voltar para listagem
        
      

      
        
          
            {property.title}
            
              
              {property.location}
            
          

          }>
            
          

          
            
              
                
                
                  Tipo
                  {property.type}
                
              
            
            
              
                
                
                  Área
                  {property.area}
                
              
            
            
              
                
                
                  Energia
                  {property.energy || "Convencional"}
                
              
            
          

          
            
              Detalhes
              Financiamento
              Localização
              Energia Solar
            
            
              Descrição
              
                {property.description ||
                  `Excelente ${property.type.toLowerCase()} localizado em ${property.location}, com área de ${property.area}. 
                  Ideal para quem busca conforto e qualidade de vida. A propriedade conta com excelente localização e 
                  infraestrutura completa.`}
              

              Características
              
                
                  
                  Área de {property.area}
                
                
                  
                  {property.type}
                
                
                  
                  {property.energy ? "Energia solar" : "Energia convencional"}
                
                
                  
                  Localização privilegiada
                
              
            
            
              }>
                
              
            
            
              }>
                
              
            
            
              
                Potencial de Energia Solar
                
                  Esta propriedade {property.energy ? "já possui" : "tem excelente potencial para"} instalação de
                  energia solar, proporcionando economia significativa na conta de luz e valorização do imóvel.
                

                
                  
                    
                      Economia Estimada
                      
                        R$ 850,00/mês
                      
                      Baseado no consumo médio da região
                    
                  
                  
                    
                      Retorno do Investimento
                      
                        4.5 anos
                      
                      Considerando financiamento Yello Solar
                    
                  
                

                
                  
                
              
            
          

          

          }>
            
          
        

        
          
            
              
                {property.price}
                Valor do imóvel
              

              

              }>
                
              

              

              }>
                
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/property-gallery.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight, Expand } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"

interface PropertyGalleryProps {
  images: string[]
}

export function PropertyGallery({ images }: PropertyGalleryProps) {
  const [currentIndex, setCurrentIndex] = useState(0)

  // If no images provided, use a placeholder
  const imageList = images.length > 0 ? images : ["/placeholder.svg?height=600&width=800"]

  const goToPrevious = () => {
    const isFirstImage = currentIndex === 0
    const newIndex = isFirstImage ? imageList.length - 1 : currentIndex - 1
    setCurrentIndex(newIndex)
  }

  const goToNext = () => {
    const isLastImage = currentIndex === imageList.length - 1
    const newIndex = isLastImage ? 0 : currentIndex + 1
    setCurrentIndex(newIndex)
  }

  return (
    
      
        
      

      {imageList.length > 1 && (
        <>
          

          
        
      )}

      
        
          
        
        
          
            
          

          {imageList.length > 1 && (
            
              {imageList.map((_, index) => (
                
          )}
        
      

      {imageList.length > 1 && (
        
          {currentIndex + 1} / {imageList.length}
        
      )}
    
  )
}
[V0_FILE]typescriptreact:file="components/property-contact-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Send } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/hooks/use-toast"

const formSchema = z.object({
  name: z.string().min(2, { message: "Nome deve ter pelo menos 2 caracteres" }),
  email: z.string().email({ message: "Email inválido" }),
  phone: z.string().min(10, { message: "Telefone inválido" }),
  message: z.string().optional(),
})

type FormValues = z.infer

interface PropertyContactFormProps {
  propertyId: string
  propertyTitle: string
}

export function PropertyContactForm({ propertyId, propertyTitle }: PropertyContactFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: "",
      message: `Olá, tenho interesse no imóvel "${propertyTitle}" e gostaria de mais informações.`,
    },
  })

  async function onSubmit(data: FormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Mensagem enviada com sucesso!",
        description: "Um de nossos consultores entrará em contato em breve.",
      })

      form.reset()
    } catch (error) {
      toast({
        title: "Erro ao enviar mensagem",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    
      
         (
            
              Nome
              
                
              
              
            
          )}
        />

         (
            
              Email
              
                
              
              
            
          )}
        />

         (
            
              Telefone
              
                
              
              
            
          )}
        />

         (
            
              Mensagem
              
                              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? (
            <>Enviando...</>
          ) : (
            <>
              <Send className="mr-2 h-4 w-4" />
              Enviar mensagem
            </>
          )}
        </Button>
      </form>
    </Form>
  )
}
[V0_FILE]typescriptreact:file="components/owner-communication-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Send, Phone, Video, Calendar, Mail } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/hooks/use-toast"

const messageFormSchema = z.object({
  subject: z.string().min(2, { message: "Assunto deve ter pelo menos 2 caracteres" }),
  message: z.string().min(10, { message: "Mensagem deve ter pelo menos 10 caracteres" }),
  priority: z.string().optional(),
})

const callFormSchema = z.object({
  date: z.string().min(1, { message: "Data é obrigatória" }),
  time: z.string().min(1, { message: "Horário é obrigatório" }),
  reason: z.string().min(5, { message: "Motivo deve ter pelo menos 5 caracteres" }),
  callType: z.enum(["phone", "video"]),
})

type MessageFormValues = z.infer<typeof messageFormSchema>
type CallFormValues = z.infer<typeof callFormSchema>

interface OwnerCommunicationPanelProps {
  owner: {
    id: string | number
    name: string
    email: string
    phone: string
    image?: string
    initials?: string
  }
}

export function OwnerCommunicationPanel({ owner }: OwnerCommunicationPanelProps) {
  const [activeTab, setActiveTab] = useState("message")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const messageForm = useForm<MessageFormValues>({
    resolver: zodResolver(messageFormSchema),
    defaultValues: {
      subject: "",
      message: "",
      priority: "normal",
    },
  })

  const callForm = useForm<CallFormValues>({
    resolver: zodResolver(callFormSchema),
    defaultValues: {
      date: "",
      time: "",
      reason: "",
      callType: "phone",
    },
  })

  async function onMessageSubmit(data: MessageFormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Mensagem enviada com sucesso!",
        description: `Sua mensagem foi enviada para ${owner.name}.`,
      })

      messageForm.reset()
    } catch (error) {
      toast({
        title: "Erro ao enviar mensagem",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  async function onCallSubmit(data: CallFormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Agendamento realizado!",
        description: `Seu ${data.callType === "phone" ? "telefonema" : "videochamada"} com ${owner.name} foi agendado para ${data.date} às ${data.time}.`,
      })

      callForm.reset()
    } catch (error) {
      toast({
        title: "Erro ao agendar chamada",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-xl">Comunicação com Proprietário</CardTitle>
        <CardDescription>Entre em contato com o proprietário deste imóvel</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center space-x-4 mb-6">
          <Avatar className="h-12 w-12">
            <AvatarImage src={owner.image || "/placeholder.svg"} alt={owner.name} />
            <AvatarFallback>{owner.initials || owner.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div>
            <p className="font-medium">{owner.name}</p>
            <p className="text-sm text-muted-foreground">{owner.email}</p>
          </div>
        </div>

        <Tabs defaultValue="message" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid grid-cols-3 mb-6">
            <TabsTrigger value="message">
              <Mail className="h-4 w-4 mr-2" />
              Mensagem
            </TabsTrigger>
            <TabsTrigger value="call">
              <Phone className="h-4 w-4 mr-2" />
              Chamada
            </TabsTrigger>
            <TabsTrigger value="history">
              <Calendar className="h-4 w-4 mr-2" />
              Histórico
            </TabsTrigger>
          </TabsList>

          <TabsContent value="message">
            <Form {...messageForm}>
              <form onSubmit={messageForm.handleSubmit(onMessageSubmit)} className="space-y-4">
                <FormField
                  control={messageForm.control}
                  name="subject"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Assunto</FormLabel>
                      <FormControl>
                        <Input placeholder="Assunto da mensagem" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={messageForm.control}
                  name="priority"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Prioridade</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Selecione a prioridade" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="low">Baixa</SelectItem>
                          <SelectItem value="normal">Normal</SelectItem>
                          <SelectItem value="high">Alta</SelectItem>
                          <SelectItem value="urgent">Urgente</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={messageForm.control}
                  name="message"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Mensagem</FormLabel>
                      <FormControl>
                        <Textarea placeholder="Digite sua mensagem" {...field} rows={5} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>Enviando...</>
                  ) : (
                    <>
                      <Send className="mr-2 h-4 w-4" />
                      Enviar mensagem
                    </>
                  )}
                </Button>
              </form>
            </Form>
          </TabsContent>

          <TabsContent value="call">
            <Form {...callForm}>
              <form onSubmit={callForm.handleSubmit(onCallSubmit)} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={callForm.control}
                    name="date"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Data</FormLabel>
                        <FormControl>
                          <Input type="date" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={callForm.control}
                    name="time"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Horário</FormLabel>
                        <FormControl>
                          <Input type="time" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <FormField
                  control={callForm.control}
                  name="callType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Tipo de chamada</FormLabel>
                      <div className="flex space-x-4">
                        <Button
                          type="button"
                          variant={field.value === "phone" ? "default" : "outline"}
                          className="flex-1"
                          onClick={() => callForm.setValue("callType", "phone")}
                        >
                          <Phone className="mr-2 h-4 w-4" />
                          Telefone
                        </Button>
                        <Button
                          type="button"
                          variant={field.value === "video" ? "default" : "outline"}
                          className="flex-1"
                          onClick={() => callForm.setValue("callType", "video")}
                        >
                          <Video className="mr-2 h-4 w-4" />
                          Vídeo
                        </Button>
                      </div>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={callForm.control}
                  name="reason"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Motivo da chamada</FormLabel>
                      <FormControl>
                        <Textarea placeholder="Descreva o motivo da chamada" {...field} rows={3} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>Agendando...</>
                  ) : (
                    <>
                      <Calendar className="mr-2 h-4 w-4" />
                      Agendar chamada
                    </>
                  )}
                </Button>
              </form>
            </Form>
          </TabsContent>

          <TabsContent value="history">
            <div className="space-y-4">
              <p className="text-sm text-muted-foreground mb-4">Histórico de comunicações com este proprietário</p>

              {/* Histórico vazio */}
              <div className="text-center py-8">
                <Mail className="h-12 w-12 mx-auto text-muted-foreground opacity-50" />
                <p className="mt-4 text-muted-foreground">Nenhuma comunicação anterior encontrada</p>
                <Button variant="outline" className="mt-4" onClick={() => setActiveTab("message")}>
                  Iniciar comunicação
                </Button>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/proprietarios/comunicacao/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Inbox, Users } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { OwnerCommunicationPanel } from "@/components/owner-communication-panel"
import { OwnerMessageList } from "@/components/owner-message-list"

// Mock data for owners
const owners = [
  {
    id: 1,
    name: "Carlos Oliveira",
    email: "carlos@example.com",
    phone: "(11) 98765-4321",
    image: "/placeholder.svg?height=40&width=40",
    initials: "CO",
    properties: 5,
    region: "São Paulo",
  },
  {
    id: 2,
    name: "Ana Silva",
    email: "ana@example.com",
    phone: "(21) 98765-4321",
    image: "/placeholder.svg?height=40&width=40",
    initials: "AS",
    properties: 3,
    region: "Rio de Janeiro",
  },
  {
    id: 3,
    name: "Roberto Santos",
    email: "roberto@example.com",
    phone: "(31) 98765-4321",
    image: "/placeholder.svg?height=40&width=40",
    initials: "RS",
    properties: 7,
    region: "Minas Gerais",
  },
]

export default function OwnerCommunicationPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Comunicação com Proprietários</h1>
          <p className="text-muted-foreground mt-1">Gerencie suas comunicações com proprietários de imóveis</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-1">
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">Proprietários</CardTitle>
              <CardDescription>Selecione um proprietário para comunicação</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                <div className="space-y-4">
                  {owners.map((owner) => (
                    <div
                      key={owner.id}
                      className="flex items-center p-3 rounded-lg hover:bg-muted cursor-pointer transition-colors"
                    >
                      <div className="flex-shrink-0 mr-3">
                        <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
                          {owner.initials}
                        </div>
                      </div>
                      <div className="flex-grow min-w-0">
                        <p className="font-medium truncate">{owner.name}</p>
                        <p className="text-sm text-muted-foreground truncate">{owner.region}</p>
                      </div>
                      <div className="flex-shrink-0 ml-2">
                        <div className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
                          {owner.properties} imóveis
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </Suspense>
            </CardContent>
          </Card>
        </div>

        <div className="lg:col-span-2">
          <Tabs defaultValue="messages">
            <TabsList className="mb-6">
              <TabsTrigger value="messages">
                <Inbox className="h-4 w-4 mr-2" />
                Mensagens
              </TabsTrigger>
              <TabsTrigger value="owners">
                <Users className="h-4 w-4 mr-2" />
                Proprietários
              </TabsTrigger>
            </TabsList>

            <TabsContent value="messages">
              <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                <OwnerMessageList />
              </Suspense>
            </TabsContent>

            <TabsContent value="owners">
              <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                <OwnerCommunicationPanel owner={owners[0]} />
              </Suspense>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/owner-message-list.tsx" isFixed="true" isMerged="true"
"use client"

import { useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { Archive, ArchiveX, Clock, MoreVertical, Search, Star, Trash2, Inbox } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"

// Mock data for messages
const messages = [
  {
    id: 1,
    from: "Carlos Oliveira",
    subject: "Atualização sobre o imóvel em São Paulo",
    message:
      "Olá, gostaria de informar que o imóvel em São Paulo está disponível para visitas a partir da próxima semana...",
    date: new Date(2023, 5, 15, 14, 30),
    read: true,
    starred: true,
    priority: "normal",
  },
  {
    id: 2,
    from: "Ana Silva",
    subject: "Documentação pendente",
    message: "Prezado, ainda estamos aguardando a documentação necessária para prosseguir com a venda do imóvel...",
    date: new Date(2023, 5, 14, 10, 15),
    read: false,
    starred: false,
    priority: "high",
  },
  {
    id: 3,
    from: "Roberto Santos",
    subject: "Proposta de compra recebida",
    message:
      "Recebemos uma proposta de compra para o imóvel em Belo Horizonte. O valor oferecido foi de R$ 450.000,00...",
    date: new Date(2023, 5, 12, 16, 45),
    read: false,
    starred: true,
    priority: "urgent",
  },
  {
    id: 4,
    from: "Juliana Costa",
    subject: "Agendamento de visita",
    message: "Gostaria de agendar uma visita ao imóvel para o próximo sábado, dia 20/06, às 14h. É possível?",
    date: new Date(2023, 5, 10, 9, 20),
    read: true,
    starred: false,
    priority: "normal",
  },
  {
    id: 5,
    from: "Marcelo Alves",
    subject: "Renovação de contrato",
    message: "O contrato de aluguel do imóvel em Campinas vence no próximo mês. Gostaria de discutir a renovação...",
    date: new Date(2023, 5, 8, 11, 30),
    read: true,
    starred: false,
    priority: "low",
  },
]

export function OwnerMessageList() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedMessage, setSelectedMessage] = useState<number | null>(null)

  // Filter messages based on search query
  const filteredMessages = messages.filter(
    (message) =>
      message.from.toLowerCase().includes(searchQuery.toLowerCase()) ||
      message.subject.toLowerCase().includes(searchQuery.toLowerCase()) ||
      message.message.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  // Get selected message details
  const messageDetails = selectedMessage ? messages.find((message) => message.id === selectedMessage) : null

  // Priority badge color
  const getPriorityBadge = (priority: string) => {
    switch (priority) {
      case "low":
        return <Badge variant="outline">Baixa</Badge>
      case "normal":
        return <Badge variant="secondary">Normal</Badge>
      case "high":
        return <Badge variant="default">Alta</Badge>
      case "urgent":
        return <Badge variant="destructive">Urgente</Badge>
      default:
        return null
    }
  }

  return (
    <div className="border rounded-lg overflow-hidden grid grid-cols-1 md:grid-cols-3 h-[600px]">
      {/* Message list */}
      <div className="md:col-span-1 border-r">
        <div className="p-4 border-b">
          <div className="relative">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Buscar mensagens..."
              className="pl-8"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
        </div>

        <ScrollArea className="h-[calc(600px-65px)]">
          {filteredMessages.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-full p-4">
              <ArchiveX className="h-12 w-12 text-muted-foreground opacity-50" />
              <p className="mt-2 text-center text-muted-foreground">Nenhuma mensagem encontrada</p>
            </div>
          ) : (
            <div>
              {filteredMessages.map((message) => (
                <div
                  key={message.id}
                  className={`p-4 border-b cursor-pointer transition-colors ${
                    selectedMessage === message.id ? "bg-muted" : "hover:bg-muted/50"
                  } ${!message.read ? "bg-primary/5" : ""}`}
                  onClick={() => setSelectedMessage(message.id)}
                >
                  <div className="flex justify-between items-start mb-1">
                    <p className={`font-medium ${!message.read ? "font-semibold" : ""}`}>{message.from}</p>
                    <div className="flex items-center space-x-1 text-muted-foreground">
                      <p className="text-xs">{format(message.date, "dd/MM", { locale: ptBR })}</p>
                      {message.starred && <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />}
                    </div>
                  </div>
                  <p className={`text-sm truncate ${!message.read ? "font-medium" : ""}`}>{message.subject}</p>
                  <p className="text-xs text-muted-foreground truncate mt-1">{message.message}</p>
                </div>
              ))}
            </div>
          )}
        </ScrollArea>
      </div>

      {/* Message details */}
      <div className="md:col-span-2">
        {messageDetails ? (
          <div className="h-full flex flex-col">
            <div className="p-4 border-b flex justify-between items-center">
              <h3 className="text-lg font-semibold">{messageDetails.subject}</h3>
              <div className="flex items-center space-x-2">
                <Button variant="ghost" size="icon">
                  <Archive className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon">
                  <Trash2 className="h-4 w-4" />
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem>Marcar como não lida</DropdownMenuItem>
                    <DropdownMenuItem>
                      {messageDetails.starred ? "Remover estrela" : "Adicionar estrela"}
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>Imprimir</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>

            <div className="p-4 border-b">
              <div className="flex justify-between items-start">
                <div className="flex items-start space-x-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
                    {messageDetails.from.charAt(0)}
                  </div>
                  <div>
                    <p className="font-medium">{messageDetails.from}</p>
                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                      <span>{format(messageDetails.date, "dd 'de' MMMM 'de' yyyy 'às' HH:mm", { locale: ptBR })}</span>
                      {getPriorityBadge(messageDetails.priority)}
                    </div>
                  </div>
                </div>
                <Button variant="ghost" size="sm">
                  <Clock className="h-4 w-4 mr-2" />
                  Histórico
                </Button>
              </div>
            </div>

            <ScrollArea className="flex-grow p-6">
              <div className="max-w-3xl mx-auto">
                <p className="whitespace-pre-line">{messageDetails.message}</p>

                {/* Mensagem completa simulada */}
                <p className="mt-4">Prezado(a),</p>
                <p className="mt-2">
                  Espero que esta mensagem o(a) encontre bem. Gostaria de fornecer algumas atualizações importantes
                  sobre o imóvel.
                </p>
                <p className="mt-2">
                  Conforme discutimos anteriormente, realizamos as melhorias solicitadas e o imóvel está agora em
                  perfeitas condições para comercialização. As fotos atualizadas já foram enviadas para o departamento
                  de marketing e estarão disponíveis no site em breve.
                </p>
                <p className="mt-2">
                  Além disso, recebemos algumas manifestações de interesse de potenciais compradores que gostariam de
                  agendar visitas nas próximas semanas. Seria possível confirmar sua disponibilidade para acompanhar
                  essas visitas ou autorizar nossa equipe a realizá-las?
                </p>
                <p className="mt-2">
                  Por fim, gostaria de sugerir uma reunião para discutirmos a estratégia de precificação, considerando
                  as recentes transações na região e o atual cenário do mercado imobiliário.
                </p>
                <p className="mt-4">Atenciosamente,</p>
                <p className="font-medium">{messageDetails.from}</p>
              </div>
            </ScrollArea>

            <div className="p-4 border-t">
              <Button className="w-full">Responder</Button>
            </div>
          </div>
        ) : (
          <div className="h-full flex flex-col items-center justify-center p-4">
            <Inbox className="h-16 w-16 text-muted-foreground opacity-50" />
            <p className="mt-4 text-lg font-medium">Selecione uma mensagem</p>
            <p className="text-muted-foreground text-center mt-1">
              Escolha uma mensagem da lista para visualizar seu conteúdo
            </p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/financeiro/page.tsx" isMerged="true"
import { Suspense } from "react"
import { ArrowDownIcon, ArrowUpIcon, BarChart3, Calendar, Download, FileText, PieChart, TrendingUp } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { FinancialOverview } from "@/components/financial/financial-overview"
import { TransactionHistory } from "@/components/financial/transaction-history"
import { RevenueChart } from "@/components/financial/revenue-chart"
import { PaymentMethodsChart } from "@/components/financial/payment-methods-chart"
import { FinancialReportGenerator } from "@/components/financial/financial-report-generator"

export default function FinancialReportsPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Relatórios Financeiros</h1>
          <p className="text-muted-foreground mt-1">Análise e relatórios detalhados das transações financeiras</p>
        </div>

        <div className="flex items-center space-x-2 mt-4 md:mt-0">
          <Select defaultValue="month">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Selecione o período" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="week">Última semana</SelectItem>
              <SelectItem value="month">Último mês</SelectItem>
              <SelectItem value="quarter">Último trimestre</SelectItem>
              <SelectItem value="year">Último ano</SelectItem>
              <SelectItem value="custom">Período personalizado</SelectItem>
            </SelectContent>
          </Select>

          <Button variant="outline">
            <Calendar className="h-4 w-4 mr-2" />
            Período
          </Button>

          <Button>
            <Download className="h-4 w-4 mr-2" />
            Exportar
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Receita Total</p>
                <p className="text-2xl font-bold mt-1">R$ 1.245.890,00</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center text-green-600 dark:text-green-400">
                <TrendingUp className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowUpIcon className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500 font-medium">12.5%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Transações</p>
                <p className="text-2xl font-bold mt-1">458</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400">
                <BarChart3 className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowUpIcon className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500 font-medium">8.2%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Ticket Médio</p>
                <p className="text-2xl font-bold mt-1">R$ 2.720,28</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center text-purple-600 dark:text-purple-400">
                <PieChart className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowUpIcon className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500 font-medium">3.7%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Taxa de Conversão</p>
                <p className="text-2xl font-bold mt-1">24.8%</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-amber-100 dark:bg-amber-900/20 flex items-center justify-center text-amber-600 dark:text-amber-400">
                <FileText className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <ArrowDownIcon className="h-4 w-4 text-red-500 mr-1" />
              <span className="text-red-500 font-medium">1.3%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="overview" className="mb-8">
        <TabsList className="mb-6">
          <TabsTrigger value="overview">Visão Geral</TabsTrigger>
          <TabsTrigger value="transactions">Transações</TabsTrigger>
          <TabsTrigger value="reports">Relatórios</TabsTrigger>
        </TabsList>

        <TabsContent value="overview">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle>Receita Mensal</CardTitle>
                <CardDescription>Análise da receita nos últimos 12 meses</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[350px] bg-muted animate-pulse rounded-lg"></div>}>
                  <RevenueChart />
                </Suspense>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Métodos de Pagamento</CardTitle>
                <CardDescription>Distribuição por método de pagamento</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <PaymentMethodsChart />
                </Suspense>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Visão Geral Financeira</CardTitle>
                <CardDescription>Resumo das principais métricas financeiras</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <FinancialOverview />
                </Suspense>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="transactions">
          <Card>
            <CardHeader>
              <CardTitle>Histórico de Transações</CardTitle>
              <CardDescription>Registro detalhado de todas as transações</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
                <TransactionHistory />
              </Suspense>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="reports">
          <Card>
            <CardHeader>
              <CardTitle>Gerador de Relatórios</CardTitle>
              <CardDescription>Crie relatórios personalizados para análise financeira</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
                <FinancialReportGenerator />
              </Suspense>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/financial/financial-overview.tsx" isMerged="true"
"use client"
import { Progress } from "@/components/ui/progress"
import { formatCurrency } from "@/lib/utils/number-format"

// Mock data
const financialData = {
  revenue: 1245890,
  expenses: 567340,
  profit: 678550,
  profitMargin: 54.5,
  targets: {
    revenue: {
      current: 1245890,
      target: 1500000,
      percentage: 83,
    },
    transactions: {
      current: 458,
      target: 500,
      percentage: 91.6,
    },
    conversion: {
      current: 24.8,
      target: 30,
      percentage: 82.7,
    },
  },
  categories: [
    { name: "Financiamento Solar", value: 720450, percentage: 57.8 },
    { name: "Venda de Imóveis", value: 325780, percentage: 26.1 },
    { name: "Aluguel", value: 156890, percentage: 12.6 },
    { name: "Outros", value: 42770, percentage: 3.5 },
  ],
}

export function FinancialOverview() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-3 gap-4">
        <div>
          <p className="text-sm font-medium text-muted-foreground">Receita</p>
          <p className="text-xl font-bold mt-1">{formatCurrency(financialData.revenue)}</p>
        </div>
        <div>
          <p className="text-sm font-medium text-muted-foreground">Despesas</p>
          <p className="text-xl font-bold mt-1">{formatCurrency(financialData.expenses)}</p>
        </div>
        <div>
          <p className="text-sm font-medium text-muted-foreground">Lucro</p>
          <p className="text-xl font-bold mt-1">{formatCurrency(financialData.profit)}</p>
        </div>
      </div>

      <div className="space-y-4">
        <p className="text-sm font-medium">Metas de Desempenho</p>

        <div className="space-y-3">
          <div>
            <div className="flex justify-between mb-1">
              <span className="text-sm">Receita</span>
              <span className="text-sm font-medium">{financialData.targets.revenue.percentage}%</span>
            </div>
            <Progress value={financialData.targets.revenue.percentage} className="h-2" />
            <div className="flex justify-between mt-1 text-xs text-muted-foreground">
              <span>{formatCurrency(financialData.targets.revenue.current)}</span>
              <span>{formatCurrency(financialData.targets.revenue.target)}</span>
            </div>
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <span className="text-sm">Transações</span>
              <span className="text-sm font-medium">{financialData.targets.transactions.percentage}%</span>
            </div>
            <Progress value={financialData.targets.transactions.percentage} className="h-2" />
            <div className="flex justify-between mt-1 text-xs text-muted-foreground">
              <span>{financialData.targets.transactions.current}</span>
              <span>{financialData.targets.transactions.target}</span>
            </div>
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <span className="text-sm">Taxa de Conversão</span>
              <span className="text-sm font-medium">{financialData.targets.conversion.percentage}%</span>
            </div>
            <Progress value={financialData.targets.conversion.percentage} className="h-2" />
            <div className="flex justify-between mt-1 text-xs text-muted-foreground">
              <span>{financialData.targets.conversion.current}%</span>
              <span>{financialData.targets.conversion.target}%</span>
            </div>
          </div>
        </div>
      </div>

      <div>
        <p className="text-sm font-medium mb-3">Distribuição por Categoria</p>

        <div className="space-y-2">
          {financialData.categories.map((category, index) => (
            <div key={index}>
              <div className="flex justify-between mb-1">
                <span className="text-sm">{category.name}</span>
                <span className="text-sm font-medium">{formatCurrency(category.value)}</span>
              </div>
              <Progress value={category.percentage} className="h-2" />
              <div className="flex justify-end mt-1 text-xs text-muted-foreground">
                <span>{category.percentage}%</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/financial/revenue-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
import { useTheme } from "next-themes"

// Mock data
const revenueData = [
  { month: "Jan", receita: 78450, despesas: 42300 },
  { month: "Fev", receita: 85200, despesas: 45100 },
  { month: "Mar", receita: 91500, despesas: 48700 },
  { month: "Abr", receita: 102300, despesas: 51200 },
  { month: "Mai", receita: 110450, despesas: 53800 },
  { month: "Jun", receita: 118700, despesas: 56400 },
  { month: "Jul", receita: 125300, despesas: 58900 },
  { month: "Ago", receita: 132100, despesas: 61500 },
  { month: "Set", receita: 138900, despesas: 64200 },
  { month: "Out", receita: 145600, despesas: 66800 },
  { month: "Nov", receita: 152400, despesas: 69500 },
  { month: "Dez", receita: 159800, despesas: 72300 },
]

export function RevenueChart() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  // Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <div className="h-[350px] flex items-center justify-center">Carregando gráfico...</div>
  }

  const isDark = theme === "dark"

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

  return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={revenueData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
        <XAxis
          dataKey="month"
          tick={{ fill: isDark ? "#ccc" : "#333" }}
          axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
        />
        <YAxis
          tickFormatter={formatCurrency}
          tick={{ fill: isDark ? "#ccc" : "#333" }}
          axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
        />
        <Tooltip
          formatter={(value) => formatCurrency(value as number)}
          contentStyle={{
            backgroundColor: isDark ? "#1f2937" : "#fff",
            border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
            color: isDark ? "#f9fafb" : "#111827",
          }}
        />
        <Legend />
        <Bar dataKey="receita" name="Receita" fill="#FFCE00" radius={[4, 4, 0, 0]} />
        <Bar dataKey="despesas" name="Despesas" fill="#FF0066" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/financial/payment-methods-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"
import { useTheme } from "next-themes"

// Mock data
const paymentMethodsData = [
  { name: "Cartão de Crédito", value: 45 },
  { name: "Boleto Bancário", value: 25 },
  { name: "Transferência", value: 20 },
  { name: "Financiamento", value: 10 },
]

const COLORS = ["#FFCE00", "#FF6600", "#FF0066", "#0EA5E9"]

export function PaymentMethodsChart() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  // Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <div className="h-[300px] flex items-center justify-center">Carregando gráfico...</div>
  }

  const isDark = theme === "dark"

  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={paymentMethodsData}
          cx="50%"
          cy="50%"
          labelLine={false}
          outerRadius={100}
          fill="#8884d8"
          dataKey="value"
          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
        >
          {paymentMethodsData.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip
          formatter={(value) => `${value}%`}
          contentStyle={{
            backgroundColor: isDark ? "#1f2937" : "#fff",
            border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
            color: isDark ? "#f9fafb" : "#111827",
          }}
        />
        <Legend />
      </PieChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/financial/transaction-history.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { ArrowDownIcon, ArrowUpIcon, CreditCard, Download, Filter, Search } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { formatCurrency } from "@/lib/utils/number-format"

// Mock data
const transactions = [
  {
    id: "TX123456",
    date: new Date(2023, 5, 15),
    description: "Financiamento Solar - Cliente: João Silva",
    amount: 12500,
    status: "completed",
    paymentMethod: "credit_card",
    type: "income",
  },
  {
    id: "TX123457",
    date: new Date(2023, 5, 14),
    description: "Comissão - Venda de Imóvel",
    amount: 8750,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "income",
  },
  {
    id: "TX123458",
    date: new Date(2023, 5, 14),
    description: "Pagamento de Fornecedor - Painéis Solares",
    amount: 5200,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "expense",
  },
  {
    id: "TX123459",
    date: new Date(2023, 5, 13),
    description: "Aluguel - Cliente: Maria Oliveira",
    amount: 2800,
    status: "completed",
    paymentMethod: "boleto",
    type: "income",
  },
  {
    id: "TX123460",
    date: new Date(2023, 5, 12),
    description: "Financiamento Solar - Cliente: Carlos Santos",
    amount: 15800,
    status: "pending",
    paymentMethod: "financing",
    type: "income",
  },
  {
    id: "TX123461",
    date: new Date(2023, 5, 10),
    description: "Despesas Operacionais",
    amount: 3450,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "expense",
  },
  {
    id: "TX123462",
    date: new Date(2023, 5, 8),
    description: "Venda de Imóvel - Comissão",
    amount: 12300,
    status: "completed",
    paymentMethod: "bank_transfer",
    type: "income",
  },
  {
    id: "TX123463",
    date: new Date(2023, 5, 5),
    description: "Pagamento de Marketing",
    amount: 1850,
    status: "completed",
    paymentMethod: "credit_card",
    type: "expense",
  },
  {
    id: "TX123464",
    date: new Date(2023, 5, 3),
    description: "Financiamento Solar - Cliente: Ana Pereira",
    amount: 14200,
    status: "failed",
    paymentMethod: "credit_card",
    type: "income",
  },
  {
    id: "TX123465",
    date: new Date(2023, 5, 1),
    description: "Aluguel - Cliente: Roberto Alves",
    amount: 3200,
    status: "completed",
    paymentMethod: "boleto",
    type: "income",
  },
]

export function TransactionHistory() {
  const [searchQuery, setSearchQuery] = useState("")

  // Filter transactions based on search query
  const filteredTransactions = transactions.filter(
    (transaction) =>
      transaction.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      transaction.id.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  // Status badge
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
            Concluído
          </Badge>
        )
      case "pending":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400">
            Pendente
          </Badge>
        )
      case "failed":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400">
            Falhou
          </Badge>
        )
      default:
        return null
    }
  }

  // Payment method
  const getPaymentMethod = (method: string) => {
    switch (method) {
      case "credit_card":
        return "Cartão de Crédito"
      case "bank_transfer":
        return "Transferência Bancária"
      case "boleto":
        return "Boleto Bancário"
      case "financing":
        return "Financiamento"
      default:
        return method
    }
  }

  return (
    <div>
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
        <div className="relative w-full md:w-auto">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar transações..."
            className="pl-8 w-full md:w-[300px]"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

        <div className="flex items-center gap-2 w-full md:w-auto">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">
                <Filter className="h-4 w-4 mr-2" />
                Filtrar
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-[200px]">
              <DropdownMenuLabel>Filtrar por</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                <DropdownMenuItem>Todos</DropdownMenuItem>
                <DropdownMenuItem>Receitas</DropdownMenuItem>
                <DropdownMenuItem>Despesas</DropdownMenuItem>
              </DropdownMenuGroup>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                <DropdownMenuItem>Concluídos</DropdownMenuItem>
                <DropdownMenuItem>Pendentes</DropdownMenuItem>
                <DropdownMenuItem>Falhas</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>

          <Button>
            <Download className="h-4 w-4 mr-2" />
            Exportar
          </Button>
        </div>
      </div>

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ID</TableHead>
              <TableHead>Data</TableHead>
              <TableHead className="w-[300px]">Descrição</TableHead>
              <TableHead>Método</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Valor</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredTransactions.map((transaction) => (
              <TableRow key={transaction.id}>
                <TableCell className="font-medium">{transaction.id}</TableCell>
                <TableCell>{format(transaction.date, "dd/MM/yyyy", { locale: ptBR })}</TableCell>
                <TableCell>{transaction.description}</TableCell>
                <TableCell>
                  <div className="flex items-center">
                    <CreditCard className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>{getPaymentMethod(transaction.paymentMethod)}</span>
                  </div>
                </TableCell>
                <TableCell>{getStatusBadge(transaction.status)}</TableCell>
                <TableCell className="text-right">
                  <div
                    className={`flex items-center justify-end ${
                      transaction.type === "income"
                        ? "text-green-600 dark:text-green-400"
                        : "text-red-600 dark:text-red-400"
                    }`}
                  >
                    {transaction.type === "income" ? (
                      <ArrowUpIcon className="h-4 w-4 mr-1" />
                    ) : (
                      <ArrowDownIcon className="h-4 w-4 mr-1" />
                    )}
                    {formatCurrency(transaction.amount)}
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/financial/financial-report-generator.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Calendar, Download, FileText, Loader2, PieChart, TableIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"

const formSchema = z.object({
  reportName: z.string().min(2, { message: "Nome do relatório é obrigatório" }),
  reportType: z.string(),
  dateRange: z.object({
    startDate: z.string(),
    endDate: z.string(),
  }),
  format: z.string(),
  sections: z.array(z.string()),
  includeCharts: z.boolean().default(true),
  includeTables: z.boolean().default(true),
})

type FormValues = z.infer<typeof formSchema>

export function FinancialReportGenerator() {
  const [isGenerating, setIsGenerating] = useState(false)
  const [generatedReport, setGeneratedReport] = useState<string | null>(null)
  const { toast } = useToast()

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      reportName: "",
      reportType: "monthly",
      dateRange: {
        startDate: "",
        endDate: "",
      },
      format: "pdf",
      sections: ["revenue", "expenses", "profit"],
      includeCharts: true,
      includeTables: true,
    },
  })

  async function onSubmit(data: FormValues) {
    setIsGenerating(true)
    setGeneratedReport(null)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2500))

      // Simulate generated report
      setGeneratedReport(`${data.reportName.replace(/\s+/g, "_")}_${new Date().getTime()}.${data.format}`)

      toast({
        title: "Relatório gerado com sucesso!",
        description: "Seu relatório está pronto para download.",
      })
    } catch (error) {
      toast({
        title: "Erro ao gerar relatório",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsGenerating(false)
    }
  }

  return (
    <Tabs defaultValue="generator" className="w-full">
      <TabsList className="mb-6">
        <TabsTrigger value="generator">Gerador de Relatórios</TabsTrigger>
        <TabsTrigger value="templates">Modelos Prontos</TabsTrigger>
        <TabsTrigger value="scheduled">Relatórios Agendados</TabsTrigger>
      </TabsList>

      <TabsContent value="generator">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormField
                control={form.control}
                name="reportName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Nome do Relatório</FormLabel>
                    <FormControl>
                      <Input placeholder="Ex: Relatório Financeiro Mensal" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="reportType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Tipo de Relatório</FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione o tipo de relatório" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="daily">Diário</SelectItem>
                        <SelectItem value="weekly">Semanal</SelectItem>
                        <SelectItem value="monthly">Mensal</SelectItem>
                        <SelectItem value="quarterly">Trimestral</SelectItem>
                        <SelectItem value="yearly">Anual</SelectItem>
                        <SelectItem value="custom">Personalizado</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormField
                control={form.control}
                name="dateRange.startDate"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Data Inicial</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Calendar className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="date" className="pl-8" {...field} />
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="dateRange.endDate"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Data Final</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Calendar className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="date" className="pl-8" {...field} />
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <Separator />

            <div>
              <FormLabel className="text-base">Seções do Relatório</FormLabel>
              <FormDescription>Selecione as seções que deseja incluir no relatório</FormDescription>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("revenue")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "revenue"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "revenue"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Receitas</FormLabel>
                        <FormDescription>Análise detalhada de receitas</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("expenses")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "expenses"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "expenses"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Despesas</FormLabel>
                        <FormDescription>Análise detalhada de despesas</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("profit")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "profit"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "profit"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Lucro</FormLabel>
                        <FormDescription>Análise de lucro e margens</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("transactions")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "transactions"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "transactions"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Transações</FormLabel>
                        <FormDescription>Histórico de transações</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("payment_methods")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "payment_methods"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "payment_methods"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Métodos de Pagamento</FormLabel>
                        <FormDescription>Análise por método de pagamento</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="sections"
                  render={() => (
                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                      <FormControl>
                        <Checkbox
                          checked={form.watch("sections").includes("projections")}
                          onCheckedChange={(checked) => {
                            const current = form.watch("sections")
                            if (checked) {
                              form.setValue("sections", [...current, "projections"])
                            } else {
                              form.setValue(
                                "sections",
                                current.filter((item) => item !== "projections"),
                              )
                            }
                          }}
                        />
                      </FormControl>
                      <div className="space-y-1 leading-none">
                        <FormLabel className="cursor-pointer">Projeções</FormLabel>
                        <FormDescription>Projeções financeiras futuras</FormDescription>
                      </div>
                    </FormItem>
                  )}
                />
              </div>
            </div>

            <Separator />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <FormLabel className="text-base">Elementos Visuais</FormLabel>
                <FormDescription>Selecione os elementos visuais para incluir no relatório</FormDescription>

                <div className="space-y-4 mt-4">
                  <FormField
                    control={form.control}
                    name="includeCharts"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel className="cursor-pointer flex items-center">
                            <PieChart className="h-4 w-4 mr-2" />
                            Incluir Gráficos
                          </FormLabel>
                        </div>
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="includeTables"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel className="cursor-pointer flex items-center">
                            <TableIcon className="h-4 w-4 mr-2" />
                            Incluir Tabelas
                          </FormLabel>
                        </div>
                      </FormItem>
                    )}
                  />
                </div>
              </div>

              <FormField
                control={form.control}
                name="format"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-base">Formato do Relatório</FormLabel>
                    <FormDescription>Selecione o formato de saída do relatório</FormDescription>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger className="mt-4">
                          <SelectValue placeholder="Selecione o formato" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="pdf">PDF</SelectItem>
                        <SelectItem value="excel">Excel</SelectItem>
                        <SelectItem value="csv">CSV</SelectItem>
                        <SelectItem value="html">HTML</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="flex justify-end">
              <Button type="submit" disabled={isGenerating}>
                {isGenerating ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Gerando relatório...
                  </>
                ) : (
                  <>
                    <FileText className="mr-2 h-4 w-4" />
                    Gerar Relatório
                  </>
                )}
              </Button>
            </div>

            {generatedReport && (
              <Card className="mt-6 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-900">
                <CardContent className="p-4 flex items-center justify-between">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 mr-2 text-green-600 dark:text-green-400" />
                    <span className="font-medium text-green-800 dark:text-green-400">{generatedReport}</span>
                  </div>
                  <Button variant="outline" className="bg-white dark:bg-green-900/50">
                    <Download className="h-4 w-4 mr-2" />
                    Download
                  </Button>
                </CardContent>
              </Card>
            )}
          </form>
        </Form>
      </TabsContent>

      <TabsContent value="templates">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card className="cursor-pointer hover:border-primary transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <FileText className="h-5 w-5" />
                </div>
                <Badge variant="outline">PDF</Badge>
              </div>
              <h3 className="font-medium text-lg mb-1">Relatório Mensal Completo</h3>
              <p className="text-sm text-muted-foreground">
                Relatório financeiro completo com todas as métricas e análises
              </p>
              <Button className="w-full mt-4">Gerar Agora</Button>
            </CardContent>
          </Card>

          <Card className="cursor-pointer hover:border-primary transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <PieChart className="h-5 w-5" />
                </div>
                <Badge variant="outline">Excel</Badge>
              </div>
              <h3 className="font-medium text-lg mb-1">Análise de Receitas</h3>
              <p className="text-sm text-muted-foreground">Relatório detalhado focado em receitas e fontes de renda</p>
              <Button className="w-full mt-4">Gerar Agora</Button>
            </CardContent>
          </Card>

          <Card className="cursor-pointer hover:border-primary transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <TableIcon className="h-5 w-5" />
                </div>
                <Badge variant="outline">CSV</Badge>
              </div>
              <h3 className="font-medium text-lg mb-1">Transações Detalhadas</h3>
              <p className="text-sm text-muted-foreground">
                Histórico completo de transações para análise em planilhas
              </p>
              <Button className="w-full mt-4">Gerar Agora</Button>
            </CardContent>
          </Card>
        </div>
      </TabsContent>

      <TabsContent value="scheduled">
        <div className="text-center py-12">
          <Calendar className="h-12 w-12 mx-auto text-muted-foreground opacity-50" />
          <h3 className="mt-4 text-lg font-medium">Nenhum relatório agendado</h3>
          <p className="text-muted-foreground mt-1 mb-4">
            Você ainda não configurou relatórios para geração automática
          </p>
          <Button>Agendar Novo Relatório</Button>
        </div>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="app/perfil/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Bell, CreditCard, Key, Shield, User } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserProfile } from "@/components/user/user-profile"
import { UserSecurity } from "@/components/user/user-security"
import { UserNotifications } from "@/components/user/user-notifications"
import { UserPaymentMethods } from "@/components/user/user-payment-methods"
import { UserApiKeys } from "@/components/user/user-api-keys"

export default function ProfilePage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Perfil do Usuário</h1>
          <p className="text-muted-foreground mt-1">Gerencie suas informações pessoais e preferências</p>
        </div>
      </div>

      <Tabs defaultValue="profile" className="space-y-8">
        <TabsList className="grid grid-cols-2 md:grid-cols-5 gap-2">
          <TabsTrigger value="profile" className="flex items-center">
            <User className="h-4 w-4 mr-2" />
            Perfil
          </TabsTrigger>
          <TabsTrigger value="security" className="flex items-center">
            <Shield className="h-4 w-4 mr-2" />
            Segurança
          </TabsTrigger>
          <TabsTrigger value="notifications" className="flex items-center">
            <Bell className="h-4 w-4 mr-2" />
            Notificações
          </TabsTrigger>
          <TabsTrigger value="payment" className="flex items-center">
            <CreditCard className="h-4 w-4 mr-2" />
            Pagamentos
          </TabsTrigger>
          <TabsTrigger value="api" className="flex items-center">
            <Key className="h-4 w-4 mr-2" />
            API
          </TabsTrigger>
        </TabsList>

        <TabsContent value="profile">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserProfile />
          </Suspense>
        </TabsContent>

        <TabsContent value="security">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserSecurity />
          </Suspense>
        </TabsContent>

        <TabsContent value="notifications">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserNotifications />
          </Suspense>
        </TabsContent>

        <TabsContent value="payment">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserPaymentMethods />
          </Suspense>
        </TabsContent>

        <TabsContent value="api">
          <Suspense fallback={<div className="h-[500px] bg-muted animate-pulse rounded-lg"></div>}>
            <UserApiKeys />
          </Suspense>
        </TabsContent>
      </Tabs>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-profile.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Camera, Loader2, Save } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"

const profileFormSchema = z.object({
  name: z.string().min(2, { message: "Nome deve ter pelo menos 2 caracteres" }),
  email: z.string().email({ message: "Email inválido" }),
  phone: z.string().min(10, { message: "Telefone inválido" }),
  company: z.string().optional(),
  role: z.string().optional(),
  bio: z.string().max(500, { message: "Bio deve ter no máximo 500 caracteres" }).optional(),
  language: z.string(),
  timezone: z.string(),
})

type ProfileFormValues = z.infer<typeof profileFormSchema>

// Mock user data
const user = {
  id: "user_123",
  name: "João Silva",
  email: "joao.silva@example.com",
  phone: "(11) 98765-4321",
  company: "Yello Solar",
  role: "Gerente de Vendas",
  bio: "Profissional com mais de 10 anos de experiência no mercado imobiliário e energia solar.",
  language: "pt-BR",
  timezone: "America/Sao_Paulo",
  avatar: "/placeholder.svg?height=100&width=100",
}

export function UserProfile() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileFormSchema),
    defaultValues: {
      name: user.name,
      email: user.email,
      phone: user.phone,
      company: user.company,
      role: user.role,
      bio: user.bio,
      language: user.language,
      timezone: user.timezone,
    },
  })

  async function onSubmit(data: ProfileFormValues) {
    setIsSubmitting(true)

    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Perfil atualizado com sucesso!",
        description: "Suas informações foram atualizadas.",
      })
    } catch (error) {
      toast({
        title: "Erro ao atualizar perfil",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Informações do Perfil</CardTitle>
          <CardDescription>Atualize suas informações pessoais e preferências</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-8">
            <div className="flex flex-col items-center space-y-4">
              <Avatar className="h-32 w-32">
                <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                <AvatarFallback className="text-2xl">{user.name.charAt(0)}</AvatarFallback>
              </Avatar>

              <Button variant="outline" className="w-full">
                <Camera className="h-4 w-4 mr-2" />
                Alterar Foto
              </Button>

              <div className="text-center mt-4">
                <p className="text-sm text-muted-foreground">
                  Recomendado: JPG, PNG. <br />
                  Tamanho máximo: 2MB
                </p>
              </div>
            </div>

            <div className="flex-1">
              <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <FormField
                      control={form.control}
                      name="name"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Nome Completo</FormLabel>
                          <FormControl>
                            <Input placeholder="Seu nome completo" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="email"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Email</FormLabel>
                          <FormControl>
                            <Input placeholder="seu@email.com" type="email" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="phone"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Telefone</FormLabel>
                          <FormControl>
                            <Input placeholder="(00) 00000-0000" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="company"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Empresa</FormLabel>
                          <FormControl>
                            <Input placeholder="Nome da empresa" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="role"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Cargo</FormLabel>
                          <FormControl>
                            <Input placeholder="Seu cargo" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="language"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Idioma</FormLabel>
                          <Select onValueChange={field.onChange} defaultValue={field.value}>
                            <FormControl>
                              <SelectTrigger>
                                <SelectValue placeholder="Selecione o idioma" />
                              </SelectTrigger>
                            </FormControl>
                            <SelectContent>
                              <SelectItem value="pt-BR">Português (Brasil)</SelectItem>
                              <SelectItem value="en-US">English (US)</SelectItem>
                              <SelectItem value="es">Español</SelectItem>
                            </SelectContent>
                          </Select>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <FormField
                    control={form.control}
                    name="bio"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Bio</FormLabel>
                        <FormControl>
                          <Textarea placeholder="Conte um pouco sobre você" {...field} rows={4} />
                        </FormControl>
                        <FormDescription>{field.value?.length || 0}/500 caracteres</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <div className="flex justify-end">
                    <Button type="submit" disabled={isSubmitting}>
                      {isSubmitting ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Salvando...
                        </>
                      ) : (
                        <>
                          <Save className="mr-2 h-4 w-4" />
                          Salvar Alterações
                        </>
                      )}
                    </Button>
                  </div>
                </form>
              </Form>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Dados da Conta</CardTitle>
          <CardDescription>Informações sobre sua conta e uso da plataforma</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">ID da Conta</h3>
              <p className="font-mono text-sm bg-muted p-2 rounded">{user.id}</p>
            </div>

            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">Membro Desde</h3>
              <p>15 de Março de 2023</p>
            </div>

            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">Plano Atual</h3>
              <p>
                Profissional{" "}
                <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full ml-2">Ativo</span>
              </p>
            </div>

            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">Último Acesso</h3>
              <p>Hoje, 14:32</p>
            </div>
          </div>

          <Separator className="my-6" />

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-4 border rounded-lg">
              <h3 className="font-medium mb-1">Propriedades</h3>
              <p className="text-2xl font-bold">12</p>
              <p className="text-sm text-muted-foreground">Propriedades gerenciadas</p>
            </div>

            <div className="p-4 border rounded-lg">
              <h3 className="font-medium mb-1">Transações</h3>
              <p className="text-2xl font-bold">48</p>
              <p className="text-sm text-muted-foreground">Transações realizadas</p>
            </div>

            <div className="p-4 border rounded-lg">
              <h3 className="font-medium mb-1">Projetos Solares</h3>
              <p className="text-2xl font-bold">5</p>
              <p className="text-sm text-muted-foreground">Projetos ativos</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solar-hub/monitoramento/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Battery, Calendar, Cloud, Download, LineChart, Settings, Sun, Zap } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { EnergyProductionChart } from "@/components/solar/energy-production-chart"
import { EnergyConsumptionChart } from "@/components/solar/energy-consumption-chart"
import { SolarPanelStatus } from "@/components/solar/solar-panel-status"
import { WeatherForecast } from "@/components/solar/weather-forecast"
import { BatteryStatus } from "@/components/solar/battery-status"
import { SavingsCalculator } from "@/components/solar/savings-calculator"

export default function SolarMonitoringPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold">Monitoramento Solar</h1>
          <p className="text-muted-foreground mt-1">Acompanhe a produção e consumo de energia em tempo real</p>
        </div>

        <div className="flex items-center space-x-2 mt-4 md:mt-0">
          <Select defaultValue="today">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Selecione o período" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">Hoje</SelectItem>
              <SelectItem value="week">Última semana</SelectItem>
              <SelectItem value="month">Último mês</SelectItem>
              <SelectItem value="year">Último ano</SelectItem>
              <SelectItem value="custom">Período personalizado</SelectItem>
            </SelectContent>
          </Select>

          <Button variant="outline">
            <Calendar className="h-4 w-4 mr-2" />
            Período
          </Button>

          <Button>
            <Download className="h-4 w-4 mr-2" />
            Exportar
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Produção Hoje</p>
                <p className="text-2xl font-bold mt-1">24.5 kWh</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-yellow-100 dark:bg-yellow-900/20 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
                <Sun className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-green-500 font-medium">92%</span>
              <span className="text-muted-foreground ml-1">da capacidade máxima</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Consumo Hoje</p>
                <p className="text-2xl font-bold mt-1">18.2 kWh</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400">
                <Zap className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-green-500 font-medium">-12%</span>
              <span className="text-muted-foreground ml-1">vs. média mensal</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Bateria</p>
                <p className="text-2xl font-bold mt-1">85%</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center text-green-600 dark:text-green-400">
                <Battery className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-muted-foreground">Estimativa: 14h restantes</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Economia</p>
                <p className="text-2xl font-bold mt-1">R$ 487,50</p>
              </div>
              <div className="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center text-purple-600 dark:text-purple-400">
                <LineChart className="h-6 w-6" />
              </div>
            </div>
            <div className="flex items-center mt-4 text-sm">
              <span className="text-green-500 font-medium">+8.3%</span>
              <span className="text-muted-foreground ml-1">vs. mês anterior</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="overview" className="mb-8">
        <TabsList className="mb-6">
          <TabsTrigger value="overview">Visão Geral</TabsTrigger>
          <TabsTrigger value="production">Produção</TabsTrigger>
          <TabsTrigger value="consumption">Consumo</TabsTrigger>
          <TabsTrigger value="equipment">Equipamentos</TabsTrigger>
        </TabsList>

        <TabsContent value="overview">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle>Produção vs. Consumo</CardTitle>
                <CardDescription>Análise comparativa de produção e consumo de energia</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[350px] bg-muted animate-pulse rounded-lg"></div>}>
                  <EnergyProductionChart />
                </Suspense>
              </CardContent>
            </Card>

            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Status do Sistema</CardTitle>
                  <CardDescription>Estado atual dos equipamentos</CardDescription>
                </CardHeader>
                <CardContent>
                  <Suspense fallback={<div className="h-[200px] bg-muted animate-pulse rounded-lg"></div>}>
                    <SolarPanelStatus />
                  </Suspense>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Previsão do Tempo</CardTitle>
                  <CardDescription>Impacto na produção de energia</CardDescription>
                </CardHeader>
                <CardContent>
                  <Suspense fallback={<div className="h-[200px] bg-muted animate-pulse rounded-lg"></div>}>
                    <WeatherForecast />
                  </Suspense>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="production">
          <div className="grid grid-cols-1 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Produção de Energia</CardTitle>
                <CardDescription>Análise detalhada da produção de energia solar</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                  <EnergyProductionChart detailed />
                </Suspense>
              </CardContent>
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Eficiência dos Painéis</CardTitle>
                  <CardDescription>Desempenho dos painéis solares</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel A (Telhado Sul)</span>
                        <span className="text-sm font-medium">98%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-green-500 rounded-full" style={{ width: "98%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel B (Telhado Leste)</span>
                        <span className="text-sm font-medium">92%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-green-500 rounded-full" style={{ width: "92%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel C (Telhado Oeste)</span>
                        <span className="text-sm font-medium">85%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-yellow-500 rounded-full" style={{ width: "85%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Painel D (Garagem)</span>
                        <span className="text-sm font-medium">78%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-yellow-500 rounded-full" style={{ width: "78%" }}></div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Fatores de Impacto</CardTitle>
                  <CardDescription>Elementos que afetam a produção</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Sun className="h-5 w-5 mr-3 text-yellow-500" />
                        <span>Incidência Solar</span>
                      </div>
                      <span className="font-medium">Excelente</span>
                    </div>

                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Cloud className="h-5 w-5 mr-3 text-blue-500" />
                        <span>Nebulosidade</span>
                      </div>
                      <span className="font-medium">Baixa (15%)</span>
                    </div>

                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Settings className="h-5 w-5 mr-3 text-gray-500" />
                        <span>Manutenção</span>
                      </div>
                      <span className="font-medium">Em dia</span>
                    </div>

                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center">
                        <Zap className="h-5 w-5 mr-3 text-purple-500" />
                        <span>Eficiência do Inversor</span>
                      </div>
                      <span className="font-medium">97%</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="consumption">
          <div className="grid grid-cols-1 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Consumo de Energia</CardTitle>
                <CardDescription>Análise detalhada do consumo de energia</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[400px] bg-muted animate-pulse rounded-lg"></div>}>
                  <EnergyConsumptionChart />
                </Suspense>
              </CardContent>
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Distribuição por Ambiente</CardTitle>
                  <CardDescription>Consumo por área da propriedade</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Sala e Cozinha</span>
                        <span className="text-sm font-medium">42%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "42%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Quartos</span>
                        <span className="text-sm font-medium">28%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "28%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Área Externa</span>
                        <span className="text-sm font-medium">18%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "18%" }}></div>
                      </div>
                    </div>

                    <div>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm">Banheiros</span>
                        <span className="text-sm font-medium">12%</span>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 rounded-full" style={{ width: "12%" }}></div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Economia e Sustentabilidade</CardTitle>
                  <CardDescription>Impacto financeiro e ambiental</CardDescription>
                </CardHeader>
                <CardContent>
                  <Suspense fallback={<div className="h-[200px] bg-muted animate-pulse rounded-lg"></div>}>
                    <SavingsCalculator />
                  </Suspense>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="equipment">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Status dos Painéis Solares</CardTitle>
                <CardDescription>Monitoramento em tempo real</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <SolarPanelStatus detailed />
                </Suspense>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Sistema de Armazenamento</CardTitle>
                <CardDescription>Status das baterias</CardDescription>
              </CardHeader>
              <CardContent>
                <Suspense fallback={<div className="h-[300px] bg-muted animate-pulse rounded-lg"></div>}>
                  <BatteryStatus />
                </Suspense>
              </CardContent>
            </Card>

            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Histórico de Manutenção</CardTitle>
                <CardDescription>Registro de manutenções e alertas</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center p-3 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded-lg">
                    <div className="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">15/05/2023:</span>
                    <span>Manutenção preventiva realizada com sucesso</span>
                  </div>

                  <div className="flex items-center p-3 bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400 rounded-lg">
                    <div className="h-2 w-2 bg-yellow-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">02/04/2023:</span>
                    <span>Alerta: Eficiência do Painel C abaixo do esperado</span>
                  </div>

                  <div className="flex items-center p-3 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded-lg">
                    <div className="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">15/03/2023:</span>
                    <span>Limpeza dos painéis realizada</span>
                  </div>

                  <div className="flex items-center p-3 bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded-lg">
                    <div className="h-2 w-2 bg-red-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">28/02/2023:</span>
                    <span>Falha no inversor detectada e corrigida</span>
                  </div>

                  <div className="flex items-center p-3 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded-lg">
                    <div className="h-2 w-2 bg-green-500 rounded-full mr-2"></div>
                    <span className="font-medium mr-2">15/01/2023:</span>
                    <span>Inspeção trimestral realizada</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/solar/energy-production-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"
import { useTheme } from "next-themes"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Mock data
const hourlyData = [
  { time: "00:00", production: 0, consumption: 1.2 },
  { time: "01:00", production: 0, consumption: 0.9 },
  { time: "02:00", production: 0, consumption: 0.8 },
  { time: "03:00", production: 0, consumption: 0.7 },
  { time: "04:00", production: 0, consumption: 0.7 },
  { time: "05:00", production: 0.2, consumption: 0.8 },
  { time: "06:00", production: 0.8, consumption: 1.1 },
  { time: "07:00", production: 1.5, consumption: 1.5 },
  { time: "08:00", production: 2.3, consumption: 1.8 },
  { time: "09:00", production: 3.1, consumption: 2.0 },
  { time: "10:00", production: 3.8, consumption: 2.1 },
  { time: "11:00", production: 4.2, consumption: 2.3 },
  { time: "12:00", production: 4.5, consumption: 2.5 },
  { time: "13:00", production: 4.3, consumption: 2.2 },
  { time: "14:00", production: 4.0, consumption: 2.0 },
  { time: "15:00", production: 3.5, consumption: 1.9 },
  { time: "16:00", production: 2.8, consumption: 2.1 },
  { time: "17:00", production: 2.0, consumption: 2.4 },
  { time: "18:00", production: 1.2, consumption: 2.8 },
  { time: "19:00", production: 0.5, consumption: 3.0 },
  { time: "20:00", production: 0.1, consumption: 2.5 },
  { time: "21:00", production: 0, consumption: 2.2 },
  { time: "22:00", production: 0, consumption: 1.8 },
  { time: "23:00", production: 0, consumption: 1.4 },
]

const dailyData = [
  { day: "Seg", production: 22.5, consumption: 18.2 },
  { day: "Ter", production: 24.8, consumption: 17.9 },
  { day: "Qua", production: 19.2, consumption: 18.5 },
  { day: "Qui", production: 21.3, consumption: 19.1 },
  { day: "Sex", production: 25.1, consumption: 18.7 },
  { day: "Sáb", production: 23.4, consumption: 16.8 },
  { day: "Dom", production: 24.5, consumption: 15.4 },
]

const monthlyData = [
  { month: "Jan", production: 580, consumption: 520 },
  { month: "Fev", production: 620, consumption: 510 },
  { month: "Mar", production: 710, consumption: 530 },
  { month: "Abr", production: 680, consumption: 540 },
  { month: "Mai", production: 650, consumption: 550 },
  { month: "Jun", production: 590, consumption: 560 },
  { month: "Jul", production: 610, consumption: 570 },
  { month: "Ago", production: 640, consumption: 550 },
  { month: "Set", production: 670, consumption: 540 },
  { month: "Out", production: 700, consumption: 530 },
  { month: "Nov", production: 630, consumption: 520 },
  { month: "Dez", production: 590, consumption: 510 },
]

interface EnergyProductionChartProps {
  detailed?: boolean
}

export function EnergyProductionChart({ detailed = false }: EnergyProductionChartProps) {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const [chartType, setChartType] = useState<"line" | "area" | "bar">("area")
  const [timeRange, setTimeRange] = useState<"hourly" | "daily" | "monthly">("hourly")

  // Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <div className="h-[350px] flex items-center justify-center">Carregando gráfico...</div>
  }

  const isDark = theme === "dark"

  // Select data based on time range
  const data = timeRange === "hourly" ? hourlyData : timeRange === "daily" ? dailyData : monthlyData

  // X-axis data key
  const xAxisKey = timeRange === "hourly" ? "time" : timeRange === "daily" ? "day" : "month"

  return (
    <div>
      {detailed && (
        <div className="flex flex-col sm:flex-row justify-between mb-6 gap-4">
          <div className="flex items-center space-x-4">
            <Select value={timeRange} onValueChange={(value) => setTimeRange(value as any)}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Selecione o período" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="hourly">Por Hora</SelectItem>
                <SelectItem value="daily">Por Dia</SelectItem>
                <SelectItem value="monthly">Por Mês</SelectItem>
              </SelectContent>
            </Select>

            <Select value={chartType} onValueChange={(value) => setChartType(value as any)}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Tipo de gráfico" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="line">Linha</SelectItem>
                <SelectItem value="area">Área</SelectItem>
                <SelectItem value="bar">Barras</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-4">
            <div className="flex items-center">
              <div className="h-3 w-3 rounded-full bg-yellow-400 mr-2"></div>
              <span className="text-sm">Produção</span>
            </div>
            <div className="flex items-center">
              <div className="h-3 w-3 rounded-full bg-blue-400 mr-2"></div>
              <span className="text-sm">Consumo</span>
            </div>
          </div>
        </div>
      )}

      <ResponsiveContainer width="100%" height={detailed ? 400 : 350}>
        {chartType === "line" ? (
          <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
            <XAxis
              dataKey={xAxisKey}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <YAxis
              label={{
                value: "kWh",
                angle: -90,
                position: "insideLeft",
                style: { textAnchor: "middle", fill: isDark ? "#ccc" : "#333" },
              }}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: isDark ? "#1f2937" : "#fff",
                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
                color: isDark ? "#f9fafb" : "#111827",
              }}
            />
            <Legend />
            <Line
              type="monotone"
              dataKey="production"
              name="Produção"
              stroke="#FFCE00"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
            <Line
              type="monotone"
              dataKey="consumption"
              name="Consumo"
              stroke="#0EA5E9"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
          </LineChart>
        ) : chartType === "area" ? (
          <AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
            <XAxis
              dataKey={xAxisKey}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <YAxis
              label={{
                value: "kWh",
                angle: -90,
                position: "insideLeft",
                style: { textAnchor: "middle", fill: isDark ? "#ccc" : "#333" },
              }}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: isDark ? "#1f2937" : "#fff",
                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
                color: isDark ? "#f9fafb" : "#111827",
              }}
            />
            <Legend />
            <Area
              type="monotone"
              dataKey="production"
              name="Produção"
              stroke="#FFCE00"
              fill="#FFCE00"
              fillOpacity={0.3}
            />
            <Area
              type="monotone"
              dataKey="consumption"
              name="Consumo"
              stroke="#0EA5E9"
              fill="#0EA5E9"
              fillOpacity={0.3}
            />
          </AreaChart>
        ) : (
          <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#333" : "#eee"} />
            <XAxis
              dataKey={xAxisKey}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <YAxis
              label={{
                value: "kWh",
                angle: -90,
                position: "insideLeft",
                style: { textAnchor: "middle", fill: isDark ? "#ccc" : "#333" },
              }}
              tick={{ fill: isDark ? "#ccc" : "#333" }}
              axisLine={{ stroke: isDark ? "#444" : "#ccc" }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: isDark ? "#1f2937" : "#fff",
                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
                color: isDark ? "#f9fafb" : "#111827",
              }}
            />
            <Legend />
            <Bar dataKey="production" name="Produção" fill="#FFCE00" radius={[4, 4, 0, 0]} />
            <Bar dataKey="consumption" name="Consumo" fill="#0EA5E9" radius={[4, 4, 0, 0]} />
          </BarChart>
        )}
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/battery-status.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { BatteryCharging, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function BatteryStatus() {
  // Mock battery data
  const batteryData = {
    level: 85,
    charging: true,
    timeRemaining: "14h",
    health: 98,
    cycles: 124,
    temperature: 28,
    voltage: 48.2,
    current: 12.5,
    capacity: {
      total: 15,
      used: 12.75,
    },
    history: [
      { time: "00:00", level: 92 },
      { time: "04:00", level: 90 },
      { time: "08:00", level: 85 },
      { time: "12:00", level: 82 },
      { time: "16:00", level: 78 },
      { time: "20:00", level: 85 },
    ],
  }

  // Battery icon based on level
  const getBatteryIcon = () => {
    if (batteryData.charging) return <BatteryCharging className="h-8 w-8 text-green-500" />
    if (batteryData.level > 90) return <BatteryFull className="h-8 w-8 text-green-500" />
    if (batteryData.level > 50) return <BatteryMedium className="h-8 w-8 text-green-500" />
    if (batteryData.level > 20) return <BatteryLow className="h-8 w-8 text-yellow-500" />
    return <BatteryWarning className="h-8 w-8 text-red-500" />
  }

  return (
    <Tabs defaultValue="status">
      <TabsList className="mb-4">
        <TabsTrigger value="status">Status</TabsTrigger>
        <TabsTrigger value="details">Detalhes</TabsTrigger>
        <TabsTrigger value="history">Histórico</TabsTrigger>
      </TabsList>

      <TabsContent value="status">
        <div className="flex flex-col items-center justify-center p-6">{getBatteryIcon()}</div>
      </TabsContent>

      <TabsContent value="details">
        <div>Detalhes</div>
      </TabsContent>

      <TabsContent value="history">
        <div>Histórico</div>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/ai-recommendation-panel.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 { Sparkles, Bot, ChevronDown, ChevronUp, Check } from "lucide-react"
import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format"
import { Skeleton } from "@/components/ui/skeleton"

interface AIRecommendationPanelProps {
  simulationResults: any[]
  projectValue: number
  energySavings: number
  onSelectOption: (index: number) => void
}

export function AIRecommendationPanel({
  simulationResults,
  projectValue,
  energySavings,
  onSelectOption,
}: AIRecommendationPanelProps) {
  const [isLoading, setIsLoading] = useState(true)
  const [recommendations, setRecommendations] = useState<any[]>([])
  const [isExpanded, setIsExpanded] = useState(false)

  useEffect(() => {
    if (simulationResults.length === 0) return

    // Simulate AI processing delay
    setIsLoading(true)
    const timer = setTimeout(() => {
      // In a real application, this would call the AI API with the simulation results
      // and get personalized recommendations

      // For now, we'll use a simple algorithm to generate recommendations:
      // 1. Best ROI option
      // 2. Fastest payback option
      // 3. Lowest monthly payment option

      const bestROI = [...simulationResults].sort((a, b) => b.roi - a.roi)[0]
      const fastestPayback = [...simulationResults].sort((a, b) => a.paybackMonths - b.paybackMonths)[0]
      const lowestMonthly = [...simulationResults]
        .filter((r) => r.monthlyPayment > 0)
        .sort((a, b) => a.monthlyPayment - b.monthlyPayment)[0]

      // Find their indices in the original array
      const bestROIIndex = simulationResults.findIndex((r) => r.id === bestROI.id)
      const fastestPaybackIndex = simulationResults.findIndex((r) => r.id === fastestPayback.id)
      const lowestMonthlyIndex = simulationResults.findIndex((r) => r.id === lowestMonthly.id)

      // Create recommendation objects
      const recs = [
        {
          title: "Melhor Retorno sobre Investimento",
          description: "Esta opção maximiza seu ROI no longo prazo",
          result: bestROI,
          index: bestROIIndex,
          highlights: [
            `ROI de ${formatPercentage(bestROI.roi)}`,
            `Economia total de ${formatCurrency(bestROI.energySavings25Years)} em 25 anos`,
          ],
          explanation: `Para um investimento de ${formatCurrency(projectValue)}, esta opção oferece o maior retorno financeiro ao longo do tempo. Com uma economia mensal de ${formatCurrency(energySavings)}, seu retorno sobre investimento será maximizado.`,
        },
        {
          title: "Retorno Mais Rápido",
          description: "Esta opção permite recuperar seu investimento no menor tempo possível",
          result: fastestPayback,
          index: fastestPaybackIndex,
          highlights: [
            `Payback em apenas ${formatMonths(fastestPayback.paybackMonths)}`,
            `${fastestPayback.discount > 0 ? `Desconto de ${formatCurrency(fastestPayback.discount)}` : `Sem entrada inicial significativa`}`,
          ],
          explanation: `Se você deseja recuperar seu investimento o mais rápido possível, esta é a melhor opção. Com um período de payback de apenas ${formatMonths(fastestPayback.paybackMonths)}, você começará a ver retorno financeiro rapidamente.`,
        },
      ]

      // Add lowest monthly payment if it's different from the other recommendations
      if (lowestMonthlyIndex !== bestROIIndex && lowestMonthlyIndex !== fastestPaybackIndex) {
        recs.push({
          title: "Menor Pagamento Mensal",
          description: "Esta opção minimiza seu desembolso mensal",
          result: lowestMonthly,
          index: lowestMonthlyIndex,
          highlights: [
            `Apenas ${formatCurrency(lowestMonthly.monthlyPayment)} por mês`,
            `Prazo estendido de ${lowestMonthly.term} meses`,
          ],
          explanation: `Para um fluxo de caixa mais confortável, esta opção oferece o menor pagamento mensal. Isso facilita o encaixe no seu orçamento, embora o período de payback seja um pouco mais longo.`,
        })
      }

      setRecommendations(recs)
      setIsLoading(false)
    }, 2000)

    return () => clearTimeout(timer)
  }, [simulationResults, projectValue, energySavings])

  if (simulationResults.length === 0) {
    return null
  }

  return (
    <Card className="border-yellow-200 dark:border-yellow-800">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-yellow-500" />
          Recomendações da IA
        </CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-4">
            <div className="flex items-start gap-4">
              <Skeleton className="w-10 h-10 rounded-full" />
              <div className="space-y-2 flex-1">
                <Skeleton className="h-5 w-2/3" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
              </div>
            </div>
            <Skeleton className="h-20 w-full" />
          </div>
        ) : (
          <div className="space-y-6">
            {recommendations.slice(0, isExpanded ? recommendations.length : 1).map((rec, index) => (
              <div key={index} className="space-y-3">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
                    <Bot className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-bold">{rec.title}</h3>
                    <p className="text-sm text-muted-foreground">{rec.description}</p>

                    <div className="mt-2 flex flex-wrap gap-2">
                      {rec.highlights.map((highlight, i) => (
                        <div
                          key={i}
                          className="inline-flex items-center gap-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs px-2 py-1 rounded-full"
                        >
                          <Check className="h-3 w-3" />
                          {highlight}
                        </div>
                      ))}
                    </div>

                    <div className="mt-3 bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded-md border border-yellow-200 dark:border-yellow-800 text-sm">
                      <p>{rec.explanation}</p>
                    </div>

                    <div className="mt-3">
                      <Button
                        className="bg-yellow-500 hover:bg-yellow-600 text-black"
                        onClick={() => onSelectOption(rec.index)}
                      >
                        Selecionar esta opção
                      </Button>
                    </div>
                  </div>
                </div>

                {index < recommendations.length - 1 && !isExpanded && (
                  <div className="border-t border-dashed border-gray-200 dark:border-gray-700"></div>
                )}
              </div>
            ))}

            {recommendations.length > 1 && (
              <Button variant="ghost" className="w-full mt-2" onClick={() => setIsExpanded(!isExpanded)}>
                {isExpanded ? (
                  <>
                    <ChevronUp className="h-4 w-4 mr-2" />
                    Ver menos recomendações
                  </>
                ) : (
                  <>
                    <ChevronDown className="h-4 w-4 mr-2" />
                    Ver mais recomendações ({recommendations.length - 1} restantes)
                  </>
                )}
              </Button>
            )}

            <div className="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 text-xs text-muted-foreground">
              <p>
                Estas recomendações são baseadas nas suas preferências e nos parâmetros fornecidos. Para uma análise
                mais personalizada, consulte um especialista financeiro.
              </p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/financial/loan-comparison-chart.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format"
import { Chart, type ChartConfiguration, type ChartData, registerables } from "chart.js"

// Register Chart.js components
Chart.register(...registerables)

interface LoanComparisonChartProps {
  results: any[]
  selectedIndices: number[]
}

export function LoanComparisonChart({ results, selectedIndices }: LoanComparisonChartProps) {
  const chartRef = useRef<HTMLCanvasElement | null>(null)
  const chartInstance = useRef<Chart | null>(null)

  useEffect(() => {
    if (!chartRef.current || selectedIndices.length === 0) return

    // Destroy existing chart
    if (chartInstance.current) {
      chartInstance.current.destroy()
    }

    const selectedResults = selectedIndices.map((index) => results[index])

    // Prepare data for chart
    const data: ChartData = {
      labels: ["Valor do Projeto", "Pagamento Total", "Economia em 25 anos"],
      datasets: selectedResults.map((result, i) => ({
        label: `${result.bank.name} - ${result.paymentMethod.name}`,
        data: [result.projectValue, result.totalPayment, result.energySavings25Years],
        backgroundColor: getBackgroundColor(i),
        borderColor: getBorderColor(i),
        borderWidth: 1,
      })),
    }

    // Chart configuration
    const config: ChartConfiguration = {
      type: "bar",
      data,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            callbacks: {
              label: (context) => {
                const value = context.raw as number
                return `${context.dataset.label}: ${formatCurrency(value)}`
              },
            },
          },
          legend: {
            position: "top",
          },
          title: {
            display: true,
            text: "Comparação Financeira",
          },
        },
        scales: {
          y: {
            ticks: {
              callback: (value) => formatCurrency(value as number),
            },
          },
        },
      },
    }

    // Create new chart
    chartInstance.current = new Chart(chartRef.current, config)

    // Cleanup on unmount
    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy()
      }
    }
  }, [results, selectedIndices])

  // Helper functions for chart colors
  function getBackgroundColor(index: number) {
    const colors = [
      "rgba(54, 162, 235, 0.5)",
      "rgba(255, 206, 86, 0.5)",
      "rgba(75, 192, 192, 0.5)",
      "rgba(153, 102, 255, 0.5)",
      "rgba(255, 159, 64, 0.5)",
    ]
    return colors[index % colors.length]
  }

  function getBorderColor(index: number) {
    const colors = [
      "rgba(54, 162, 235, 1)",
      "rgba(255, 206, 86, 1)",
      "rgba(75, 192, 192, 1)",
      "rgba(153, 102, 255, 1)",
      "rgba(255, 159, 64, 1)",
    ]
    return colors[index % colors.length]
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Comparação de Opções</CardTitle>
      </CardHeader>
      <CardContent>
        {selectedIndices.length > 0 ? (
          <>
            <div className="h-64 w-full">
              <canvas ref={chartRef}></canvas>
            </div>
            <div className="mt-6 overflow-x-auto">
              <table className="w-full border-collapse text-sm">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-2 px-3 font-medium text-muted-foreground">Métrica</th>
                    {selectedIndices.map((index) => (
                      <th key={index} className="text-left py-2 px-3 font-medium">
                        <div className="flex items-center gap-2">
                          <div className={`w-3 h-3 rounded-full ${results[index].paymentMethod.color}`}></div>
                          <span>{results[index].bank.name}</span>
                          <span className="text-xs text-muted-foreground">({results[index].paymentMethod.name})</span>
                        </div>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b">
                    <td className="py-2 px-3">Valor do Projeto</td>
                    {selectedIndices.map((index) => (
                      <td key={`proj-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].projectValue)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">Pagamento Mensal</td>
                    {selectedIndices.map((index) => (
                      <td key={`monthly-${index}`} className="py-2 px-3 font-medium">
                        {results[index].monthlyPayment > 0 ? formatCurrency(results[index].monthlyPayment) : "N/A"}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">Pagamento Total</td>
                    {selectedIndices.map((index) => (
                      <td key={`total-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].totalPayment)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">Período de Payback</td>
                    {selectedIndices.map((index) => (
                      <td key={`payback-${index}`} className="py-2 px-3 font-medium">
                        {formatMonths(results[index].paybackMonths)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">ROI</td>
                    {selectedIndices.map((index) => (
                      <td key={`roi-${index}`} className="py-2 px-3 font-medium">
                        {formatPercentage(results[index].roi)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">TIR</td>
                    {selectedIndices.map((index) => (
                      <td key={`irr-${index}`} className="py-2 px-3 font-medium">
                        {formatPercentage(results[index].irr)}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-3">VPL</td>
                    {selectedIndices.map((index) => (
                      <td key={`npv-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].npv)}
                      </td>
                    ))}
                  </tr>
                  <tr>
                    <td className="py-2 px-3">Economia em 25 anos</td>
                    {selectedIndices.map((index) => (
                      <td key={`savings-${index}`} className="py-2 px-3 font-medium">
                        {formatCurrency(results[index].energySavings25Years)}
                      </td>
                    ))}
                  </tr>
                </tbody>
              </table>
            </div>
          </>
        ) : (
          <div className="text-center py-12 text-muted-foreground">
            Selecione pelo menos uma opção para visualizar a comparação
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/financial/payment-method-card.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Check, ChevronDown, ChevronUp, Info } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { formatCurrency, formatMonths, formatPercentage } from "@/lib/utils/number-format"

interface PaymentMethodCardProps {
  result: any
  index: number
  isSelected: boolean
  isExpanded: boolean
  isBestOption: boolean
  compareMode: boolean
  onSelect: (index: number) => void
  onExpand: (index: number) => void
}

export function PaymentMethodCard({
  result,
  index,
  isSelected,
  isExpanded,
  isBestOption,
  compareMode,
  onSelect,
  onExpand,
}: PaymentMethodCardProps) {
  // Get the correct icon element based on payment method
  const getPaymentIcon = (iconName: string) => {
    // This is a simplified version - in a real app, you'd import all icons
    // and map them properly
    switch (iconName) {
      case "BanknoteIcon":
        return <span className="i-lucide-banknote h-4 w-4" />
      case "FileCheck":
        return <span className="i-lucide-file-check h-4 w-4" />
      case "Building":
        return <span className="i-lucide-building h-4 w-4" />
      case "Wallet":
        return <span className="i-lucide-wallet h-4 w-4" />
      case "Clock":
        return <span className="i-lucide-clock h-4 w-4" />
      default:
        return <Info className="h-4 w-4" />
    }
  }

  return (
    <Card
      className={`overflow-hidden transition-all ${
        isSelected ? "ring-2 ring-yellow-500" : ""
      } ${compareMode && isSelected ? "ring-2 ring-blue-500" : ""}`}
    >
      <div className={`h-1 ${result.paymentMethod.color}`}></div>
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 text-sm">
              {result.bank.logo}
            </div>
            <div>
              <CardTitle className="text-lg">{result.bank.name}</CardTitle>
              <CardDescription className="flex items-center gap-1">
                {getPaymentIcon(result.paymentMethod.icon)}
                <span>{result.paymentMethod.name}</span>
              </CardDescription>
            </div>
          </div>

          {isBestOption && <Badge className="bg-yellow-500 text-black">Melhor Opção</Badge>}

          {compareMode && (
            <Button variant={isSelected ? "default" : "outline"} size="sm" onClick={() => onSelect(index)}>
              {isSelected ? (
                <>
                  <Check className="h-4 w-4 mr-1" />
                  Selecionado
                </>
              ) : (
                "Comparar"
              )}
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="pb-2">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
          <div>
            <p className="text-xs text-muted-foreground">Valor do Projeto</p>
            <p className="font-medium">{formatCurrency(result.projectValue)}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground">Pagamento Mensal</p>
            <p className="font-medium">{result.monthlyPayment > 0 ? formatCurrency(result.monthlyPayment) : "N/A"}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground">Prazo</p>
            <p className="font-medium">{result.term > 1 ? `${result.term} meses` : "À vista"}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground">Pagamento Total</p>
            <p className="font-medium">{formatCurrency(result.totalPayment)}</p>
          </div>
        </div>

        <div className="space-y-3">
          <div>
            <div className="flex justify-between mb-1">
              <p className="text-xs text-muted-foreground">Período de Payback</p>
              <p className="text-xs font-medium">{formatMonths(result.paybackMonths)}</p>
            </div>
            <Progress value={(result.paybackMonths / 120) * 100} className="h-2" />
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <p className="text-xs text-muted-foreground">ROI</p>
              <p className="text-xs font-medium">{formatPercentage(result.roi)}</p>
            </div>
            <Progress value={Math.min(result.roi / 10, 100)} className="h-2" />
          </div>

          <div>
            <div className="flex justify-between mb-1">
              <p className="text-xs text-muted-foreground">TIR</p>
              <p className="text-xs font-medium">{formatPercentage(result.irr)}</p>
            </div>
            <Progress value={Math.min(result.irr / 5, 100)} className="h-2" />
          </div>
        </div>

        {/* Additional Details Toggle */}
        <button
          type="button"
          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mt-4"
          onClick={() => onExpand(index)}
        >
          {isExpanded ? (
            <>
              <ChevronUp className="h-3 w-3" />
              Menos detalhes
            </>
          ) : (
            <>
              <ChevronDown className="h-3 w-3" />
              Mais detalhes
            </>
          )}
        </button>

        {/* Expanded Details */}
        {isExpanded && (
          <div className="mt-4 pt-4 border-t space-y-4">
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div>
                <p className="text-xs text-muted-foreground">VPL</p>
                <p className="font-medium">{formatCurrency(result.npv)}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Economia Mensal</p>
                <p className="font-medium">{formatCurrency(result.monthlySavings)}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Economia em 25 anos</p>
                <p className="font-medium">{formatCurrency(result.energySavings25Years)}</p>
              </div>
              {result.discount > 0 && (
                <div>
                  <p className="text-xs text-muted-foreground">Desconto</p>
                  <p className="font-medium text-green-600">{formatCurrency(result.discount)}</p>
                </div>
              )}
              {result.downPayment > 0 && (
                <div>
                  <p className="text-xs text-muted-foreground">Entrada</p>
                  <p className="font-medium">{formatCurrency(result.downPayment)}</p>
                </div>
              )}
              <div>
                <p className="text-xs text-muted-foreground">LCOE</p>
                <p className="font-medium">R$ {result.lcoe.toFixed(2)}/kWh</p>
              </div>
            </div>

            {/* Bank Details */}
            <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-md">
              <p className="text-xs font-medium mb-2">Detalhes da Instituição</p>
              <div className="grid grid-cols-3 gap-2 text-xs">
                <div>
                  <p className="text-muted-foreground">Taxa de Juros</p>
                  <p className="font-medium">{result.bank.interestRate}% a.m.</p>
                </div>
                <div>
                  <p className="text-muted-foreground">Prazo Máximo</p>
                  <p className="font-medium">{result.bank.maxTerm} meses</p>
                </div>
                <div>
                  <p className="text-muted-foreground">Entrada Mínima</p>
                  <p className="font-medium">{result.bank.minDownPayment}%</p>
                </div>
              </div>

              {/* Special Requirements */}
              {result.bank.specialRequirements && (
                <div className="mt-2">
                  <div className="flex items-center gap-1">
                    <p className="text-xs text-muted-foreground">Requisitos Especiais</p>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3 w-3 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <ul className="text-xs space-y-1 list-disc pl-4">
                            {result.bank.specialRequirements.map((req: string, i: number) => (
                              <li key={i}>{req}</li>
                            ))}
                          </ul>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                </div>
              )}
            </div>

            {/* Milestones */}
            {result.milestones && result.milestones.length > 0 && (
              <div>
                <p className="text-xs font-medium mb-2">Marcos de Pagamento</p>
                <div className="space-y-2">
                  {result.milestones.map((milestone: any, i: number) => (
                    <div
                      key={i}
                      className="flex items-center justify-between text-xs p-2 bg-gray-50 dark:bg-gray-900 rounded-md"
                    >
                      <div className="flex items-center gap-2">
                        <div className="w-5 h-5 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-700 text-xs">
                          {i + 1}
                        </div>
                        <span>{milestone.name}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">{milestone.percentage}%</Badge>
                        <span className="font-medium">{formatCurrency(milestone.value)}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </CardContent>
      <CardFooter>
        <Button className="w-full">Solicitar esta opção</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/utils/number-format.ts" isEdit="true" isMerged="true"
/**
 * Format currency
 */
export function formatCurrency(value: number): string {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(value)
}

/**
 * Format percentage
 */
export function formatPercentage(value: number): string {
  return `${value.toFixed(2)}%`
}

/**
 * Format months as years and months
 */
export function formatMonths(months: number): string {
  const years = Math.floor(months / 12)
  const remainingMonths = months % 12

  if (years === 0) return `${remainingMonths} meses`
  if (remainingMonths === 0) return `${years} anos`
  return `${years} anos e ${remainingMonths} meses`
}
[V0_FILE]typescriptreact:file="app/financiamento/page.tsx" isEdit="true" isMerged="true"
"use client"

import { CardFooter } from "@/components/ui/card"

import { useState, useEffect } from "react"
import Link from "next/link"
import {
  ArrowLeft,
  Sun,
  Calculator,
  ChevronDown,
  ChevronUp,
  Info,
  HelpCircle,
  Download,
  Share2,
  AlertTriangle,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { toast } from "@/components/ui/use-toast"
import { PaymentMethodCard } from "@/components/financial/payment-method-card"
import { LoanComparisonChart } from "@/components/financial/loan-comparison-chart"
import { AIRecommendationPanel } from "@/components/financial/ai-recommendation-panel"
import { formatCurrency } from "@/lib/utils/number-format"

export default function FinanciamentoPage() {
  // State for simulation parameters
  const [projectValue, setProjectValue] = useState(40000)
  const [energySavings, setEnergySavings] = useState(850)
  const [selectedBank, setSelectedBank] = useState("all")
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("all")
  const [includeInstallation, setIncludeInstallation] = useState(true)
  const [includeEquipment, setIncludeEquipment] = useState(true)
  const [includeHomologation, setIncludeHomologation] = useState(true)
  const [includeMonitoring, setIncludeMonitoring] = useState(false)
  const [energyPriceIncrease, setEnergyPriceIncrease] = useState(8)
  const [inflationRate, setInflationRate] = useState(4.5)
  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
  const [simulationResults, setSimulationResults] = useState<any>(null)
  const [isCalculating, setIsCalculating] = useState(false)
  const [selectedResult, setSelectedResult] = useState<number | null>(null)
  const [compareMode, setCompareMode] = useState(false)
  const [comparedResults, setComparedResults] = useState<number[]>([])
  const [activeTab, setActiveTab] = useState("all")

  // API call to get simulation results
  const runSimulation = async () => {
    setIsCalculating(true)

    try {
      const response = await fetch("/api/financial-simulator", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          projectValue,
          energySavings,
          selectedBank,
          selectedPaymentMethod,
          includeInstallation,
          includeEquipment,
          includeHomologation,
          includeMonitoring,
          energyPriceIncrease,
          inflationRate,
        }),
      })

      if (!response.ok) {
        throw new Error("Falha ao executar a simulação")
      }

      const data = await response.json()

      if (data.success) {
        setSimulationResults(data.data)
        // Reset selection states when running a new simulation
        setSelectedResult(null)
        setComparedResults([])
      } else {
        toast({
          title: "Erro na simulação",
          description: data.error?.message || "Ocorreu um erro ao processar sua simulação.",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Erro na simulação:", error)
      toast({
        title: "Erro na simulação",
        description: "Ocorreu um erro ao processar sua simulação. Por favor, tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsCalculating(false)
    }
  }

  // Toggle result selection for comparison
  const toggleResultComparison = (index: number) => {
    if (comparedResults.includes(index)) {
      setComparedResults(comparedResults.filter((i) => i !== index))
    } else {
      if (comparedResults.length < 3) {
        setComparedResults([...comparedResults, index])
      } else {
        toast({
          title: "Limite de comparação",
          description: "Você só pode comparar até 3 opções simultaneamente.",
          variant: "default",
        })
      }
    }
  }

  // Handle expanding/collapsing result details
  const handleExpandResult = (index: number) => {
    setSelectedResult(selectedResult === index ? null : index)
  }

  // Filter results by payment method
  const getFilteredResults = () => {
    if (!simulationResults) return []

    if (activeTab === "all") {
      return simulationResults
    }

    return simulationResults.filter((result: any) => {
      if (activeTab === "traditional") {
        return ["traditional", "upfront"].includes(result.paymentMethod.id)
      } else if (activeTab === "milestone") {
        return result.paymentMethod.id === "milestone"
      } else if (activeTab === "alternative") {
        return ["leasing", "subscription"].includes(result.paymentMethod.id)
      }

      return false
    })
  }

  // Select a recommendation from the AI panel
  const handleSelectRecommendation = (index: number) => {
    setSelectedResult(index)
    // Scroll to the selected option
    setTimeout(() => {
      const element = document.getElementById(`result-${index}`)
      if (element) {
        element.scrollIntoView({ behavior: "smooth", block: "center" })
      }
    }, 100)
  }

  // Export simulation results to CSV
  const exportToCSV = () => {
    if (!simulationResults || simulationResults.length === 0) return

    // Prepare CSV headers
    const headers = [
      "Banco",
      "Método de Pagamento",
      "Valor do Projeto",
      "Pagamento Mensal",
      "Pagamento Total",
      "Prazo (meses)",
      "Período de Payback (meses)",
      "ROI (%)",
      "TIR (%)",
      "VPL",
      "Economia em 25 anos",
    ].join(",")

    // Prepare CSV data
    const csvData = simulationResults.map((result: any) =>
      [
        result.bank.name,
        result.paymentMethod.name,
        result.projectValue,
        result.monthlyPayment,
        result.totalPayment,
        result.term,
        result.paybackMonths,
        result.roi.toFixed(2),
        result.irr.toFixed(2),
        result.npv,
        result.energySavings25Years,
      ].join(","),
    )

    // Combine headers and data
    const csv = [headers, ...csvData].join("
")
\
    // Create a download link
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", `simulacao-financeira-${new Date().toISOString().split("T")[0]}.csv`)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    toast({
      title: "Exportação concluída",
      description: "Os resultados da simulação foram exportados com sucesso.",
    })
  }

  // Share simulation results
  const shareResults = () => {
    // In a real app, this would generate a shareable link with the simulation parameters

    // For now, just copy the current URL to clipboard
    navigator.clipboard.writeText(window.location.href)

    toast({
      title: "Link copiado",
      description: "O link para esta simulação foi copiado para a área de transferência.",
    })
  }

  // Run initial simulation on component mount
  useEffect(() => {
    runSimulation()
  }, [])

  return (
    <div className="flex flex-col min-h-screen">
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <Sun className="h-6 w-6 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </Link>
        </div>
      </header>

      <main className="flex-1">
        <div className="container py-8">
          <div className="mb-8">
            <Link
              href="/"
              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar para a página inicial
            </Link>
            <h1 className="text-3xl font-bold tracking-tight">Simulador Financeiro Multi-Banco</h1>
            <p className="mt-2 text-lg text-muted-foreground max-w-3xl">
              Compare diferentes opções de financiamento, calcule ROI e período de payback para seu projeto solar
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Simulation Parameters */}
            <div className="lg:col-span-1 space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Calculator className="h-5 w-5 text-yellow-500" />
                    Parâmetros da Simulação
                  </CardTitle>
                  <CardDescription>Configure os detalhes do seu projeto solar</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* Project Value */}
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <Label>Valor do Projeto</Label>
                      <span className="text-sm font-medium">{formatCurrency(projectValue)}</span>
                    </div>
                    <Slider
                      value={[projectValue]}
                      min={10000}
                      max={200000}
                      step={5000}
                      onValueChange={(value) => setProjectValue(value[0])}
                    />
                    <div className="flex justify-between text-xs text-muted-foreground">
                      <span>R$ 10.000</span>
                      <span>R$ 200.000</span>
                    </div>
                  </div>

                  {/* Monthly Energy Savings */}
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <Label>Economia Mensal de Energia</Label>
                      <span className="text-sm font-medium">{formatCurrency(energySavings)}</span>
                    </div>
                    <Slider
                      value={[energySavings]}
                      min={100}
                      max={3000}
                      step={50}
                      onValueChange={(value) => setEnergySavings(value[0])}
                    />
                    <div className="flex justify-between text-xs text-muted-foreground">
                      <span>R$ 100</span>
                      <span>R$ 3.000</span>
                    </div>
                  </div>

                  {/* Bank Selection */}
                  <div className="space-y-2">
                    <Label>Instituição Financeira</Label>
                    <Select value={selectedBank} onValueChange={setSelectedBank}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione um banco" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos os Bancos</SelectItem>
                        <SelectItem value="banco-solar">Banco Solar</SelectItem>
                        <SelectItem value="eco-finance">EcoFinance</SelectItem>
                        <SelectItem value="green-bank">GreenBank</SelectItem>
                        <SelectItem value="sun-credit">SunCredit</SelectItem>
                        <SelectItem value="energia-coop">Energia Coop</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Payment Method Selection */}
                  <div className="space-y-2">
                    <Label>Método de Pagamento</Label>
                    <Select value={selectedPaymentMethod} onValueChange={setSelectedPaymentMethod}>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione um método" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos os Métodos</SelectItem>
                        <SelectItem value="traditional">Pagamento Tradicional</SelectItem>
                        <SelectItem value="milestone">Pagamento por Marcos</SelectItem>
                        <SelectItem value="leasing">Leasing Solar</SelectItem>
                        <SelectItem value="upfront">Pagamento à Vista</SelectItem>
                        <SelectItem value="subscription">Assinatura Solar</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Project Components */}
                  <div className="space-y-3">
                    <Label>Componentes do Projeto</Label>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch
                            id="installation"
                            checked={includeInstallation}
                            onCheckedChange={setIncludeInstallation}
                          />
                          <Label htmlFor="installation" className="cursor-pointer">
                            Instalação
                          </Label>
                        </div>
                        <Badge variant="outline">+15%</Badge>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch id="equipment" checked={includeEquipment} onCheckedChange={setIncludeEquipment} />
                          <Label htmlFor="equipment" className="cursor-pointer">
                            Equipamentos Premium
                          </Label>
                        </div>
                        <Badge variant="outline">+10%</Badge>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch
                            id="homologation"
                            checked={includeHomologation}
                            onCheckedChange={setIncludeHomologation}
                          />
                          <Label htmlFor="homologation" className="cursor-pointer">
                            Homologação
                          </Label>
                        </div>
                        <Badge variant="outline">+5%</Badge>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Switch id="monitoring" checked={includeMonitoring} onCheckedChange={setIncludeMonitoring} />
                          <Label htmlFor="monitoring" className="cursor-pointer">
                            Monitoramento
                          </Label>
                        </div>
                        <Badge variant="outline">+8%</Badge>
                      </div>
                    </div>
                  </div>

                  {/* Advanced Options Toggle */}
                  <div>
                    <button
                      type="button"
                      className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground"
                      onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
                    >
                      {showAdvancedOptions ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                      Opções Avançadas
                    </button>

                    {showAdvancedOptions && (
                      <div className="mt-4 space-y-4 pt-4 border-t">
                        {/* Energy Price Increase */}
                        <div className="space-y-2">
                          <div className="flex justify-between">
                            <Label>Aumento Anual da Energia</Label>
                            <span className="text-sm font-medium">{energyPriceIncrease}%</span>
                          </div>
                          <Slider
                            value={[energyPriceIncrease]}
                            min={0}
                            max={15}
                            step={0.5}
                            onValueChange={(value) => setEnergyPriceIncrease(value[0])}
                          />
                          <div className="flex justify-between text-xs text-muted-foreground">
                            <span>0%</span>
                            <span>15%</span>
                          </div>
                        </div>

                        {/* Inflation Rate */}
                        <div className="space-y-2">
                          <div className="flex justify-between">
                            <Label>Taxa de Inflação</Label>
                            <span className="text-sm font-medium">{inflationRate}%</span>
                          </div>
                          <Slider
                            value={[inflationRate]}
                            min={2}
                            max={10}
                            step={0.5}
                            onValueChange={(value) => setInflationRate(value[0])}
                          />
                          <div className="flex justify-between text-xs text-muted-foreground">
                            <span>2%</span>
                            <span>10%</span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </CardContent>
                <CardFooter>
                  <Button
                    className="w-full bg-yellow-500 hover:bg-yellow-600 text-black"
                    onClick={runSimulation}
                    disabled={isCalculating}
                  >
                    {isCalculating ? (
                      <>
                        <svg
                          className="animate-spin -ml-1 mr-2 h-4 w-4 text-black"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                          ></path>
                        </svg>
                        Calculando...
                      </>
                    ) : (
                      <>
                        <Calculator className="mr-2 h-4 w-4" />
                        Simular Financiamento
                      </>
                    )}
                  </Button>
                </CardFooter>
              </Card>

              {/* Comparison Mode */}
              {simulationResults && simulationResults.length > 0 && (
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-base">Modo de Comparação</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center justify-between">
                      <Label htmlFor="compare-mode">Comparar opções</Label>
                      <Switch id="compare-mode" checked={compareMode} onCheckedChange={setCompareMode} />
                    </div>

                    {compareMode && (
                      <div className="mt-4">
                        <p className="text-sm text-muted-foreground mb-2">Selecione até 3 opções para comparar</p>
                        <div className="flex flex-wrap gap-2">
                          {comparedResults.map((index) => (
                            <Badge key={index} className="bg-yellow-500 text-black">
                              {simulationResults[index].bank.name} - {simulationResults[index].paymentMethod.name}
                            </Badge>
                          ))}
                          {comparedResults.length === 0 && (
                            <p className="text-xs text-muted-foreground">Nenhuma opção selecionada</p>
                          )}
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              )}

              {/* AI Recommendations Panel */}
              {simulationResults && simulationResults.length > 0 && (
                <AIRecommendationPanel
                  simulationResults={simulationResults}
                  projectValue={projectValue}
                  energySavings={energySavings}
                  onSelectOption={handleSelectRecommendation}
                />
              )}

              {/* Financial Metrics Explanation */}
              <Accordion type="single" collapsible className="bg-white dark:bg-gray-800 rounded-lg border">
                <AccordionItem value="metrics">
                  <AccordionTrigger className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      <Info className="h-4 w-4 text-yellow-500" />
                      <span>Entenda as Métricas Financeiras</span>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="px-4 pb-4 space-y-3">
                    <div>
                      <p className="text-sm font-medium">ROI (Retorno sobre Investimento)</p>
                      <p className="text-xs text-muted-foreground">
                        Percentual que indica quanto você receberá de retorno para cada real investido ao longo da vida
                        útil do sistema.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">Payback</p>
                      <p className="text-xs text-muted-foreground">
                        Tempo necessário para recuperar o investimento inicial através das economias geradas.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">VPL (Valor Presente Líquido)</p>
                      <p className="text-xs text-muted-foreground">
                        Valor atual de todos os fluxos de caixa futuros, descontados pela taxa de inflação.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">TIR (Taxa Interna de Retorno)</p>
                      <p className="text-xs text-muted-foreground">
                        Taxa de desconto que faz com que o VPL seja zero, indicando a rentabilidade do investimento.
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">LCOE (Custo Nivelado de Energia)</p>
                      <p className="text-xs text-muted-foreground">
                        Custo por kWh considerando todos os gastos ao longo da vida útil do sistema.
                      </p>
                    </div>
                  </AccordionContent>
                </AccordionItem>
              </Accordion>
            </div>

            {/* Simulation Results */}
            <div className="lg:col-span-2">
              {isCalculating ? (
                <div className="flex flex-col items-center justify-center h-96 bg-white dark:bg-gray-800 rounded-lg border p-8">
                  <div className="w-16 h-16 border-4 border-yellow-500 border-t-transparent rounded-full animate-spin mb-4"></div>
                  <h3 className="text-xl font-bold mb-2">Calculando as melhores opções...</h3>
                  <p className="text-muted-foreground text-center max-w-md">
                    Estamos analisando múltiplas instituições financeiras e métodos de pagamento para encontrar a melhor
                    solução para seu projeto solar.
                  </p>
                </div>
              ) : simulationResults && simulationResults.length > 0 ? (
                <div className="space-y-6">
                  {/* Results Header */}
                  <div className="flex items-center justify-between">
                    <h2 className="text-xl font-bold">{simulationResults.length} Opções de Financiamento</h2>
                    <div className="flex items-center gap-2">
                      <Button variant="outline" size="sm" onClick={exportToCSV}>
                        <Download className="h-4 w-4 mr-2" />
                        Exportar
                      </Button>
                      <Button variant="outline" size="sm" onClick={shareResults}>
                        <Share2 className="h-4 w-4 mr-2" />
                        Compartilhar
                      </Button>
                    </div>
                  </div>

                  {/* Comparison View */}
                  {compareMode && comparedResults.length > 0 && (
                    <LoanComparisonChart results={simulationResults} selectedIndices={comparedResults} />
                  )}

                  {/* Results List */}
                  <div className="space-y-4">
                    <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
                      <TabsList>
                        <TabsTrigger value="all">Todas as Opções</TabsTrigger>
                        <TabsTrigger value="traditional">Tradicionais</TabsTrigger>
                        <TabsTrigger value="milestone">Por Marcos</TabsTrigger>
                        <TabsTrigger value="alternative">Alternativas</TabsTrigger>
                      </TabsList>

                      <TabsContent value={activeTab} className="mt-4 space-y-4">
                        {getFilteredResults().map((result, index) => (
                          <div id={`result-${index}`} key={index}>
                            <PaymentMethodCard
                              result={result}
                              index={index}
                              isSelected={comparedResults.includes(index)}
                              isExpanded={selectedResult === index}
                              isBestOption={index === 0}
                              compareMode={compareMode}
                              onSelect={toggleResultComparison}
                              onExpand={handleExpandResult}
                            />
                          </div>
                        ))}

                        {getFilteredResults().length === 0 && (
                          <div className="flex flex-col items-center justify-center py-12 bg-white dark:bg-gray-800 rounded-lg border">
                            <AlertTriangle className="h-12 w-12 text-yellow-500 mb-4" />
                            <h3 className="text-xl font-bold mb-2">Nenhum resultado encontrado</h3>
                            <p className="text-muted-foreground text-center max-w-md">
                              Não há opções de financiamento disponíveis para os filtros selecionados. Tente selecionar
                              outro método de pagamento ou banco.
                            </p>
                          </div>
                        )}
                      </TabsContent>
                    </Tabs>
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-96 bg-white dark:bg-gray-800 rounded-lg border p-8">
                  <HelpCircle className="h-16 w-16 text-muted-foreground mb-4" />
                  <h3 className="text-xl font-bold mb-2">Nenhum resultado encontrado</h3>
                  <p className="text-muted-foreground text-center max-w-md">
                    Não foi possível encontrar opções de financiamento com os parâmetros selecionados. Tente ajustar os
                    valores ou selecionar diferentes métodos de pagamento.
                  </p>
                  <Button className="mt-6" onClick={runSimulation}>
                    Tentar novamente
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t py-6 mt-12">
        <div className="container flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-2 font-bold">
            <Sun className="h-5 w-5 text-yellow-500" />
            <span className="text-yellow-500">Yello</span>
            <span className="text-gray-300">/</span>
            <span className="text-green-500">Cash</span>
          </div>
          <p className="text-sm text-muted-foreground">© 2025 Yello/Cash. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/ai/recommendations/route.ts" isEdit="true" isMerged="true"
import type { NextRequest } from "next/server"
import { errorHandler } from "@/lib/middleware/error-handler"
import { logger } from "@/lib/utils/logger"
import { ApiResponse } from "@/lib/api/response"
import { HttpStatus } from "@/lib/api/status-codes"

/**
 * POST /api/ai/recommendations
 * Generates personalized financial recommendations using AI
 */
export async function POST(req: NextRequest) {
  return errorHandler(req, async () => {
    try {
      // Extract request body
      const body = await req.json()

      const { simulationResults, projectValue, energySavings, userPreferences } = body

      if (!simulationResults || !Array.isArray(simulationResults) || simulationResults.length === 0) {
        return ApiResponse.error("Invalid simulation results", HttpStatus.BAD_REQUEST, "INVALID_RESULTS")
      }

      logger.info("Generating AI recommendations", {
        resultCount: simulationResults.length,
        projectValue,
        energySavings,
      })

      // This would normally call an AI service to generate personalized recommendations
      // For now, we'll use a simple algorithm to generate recommendations

      const recommendations = generateRecommendations(simulationResults, projectValue, energySavings, userPreferences)

      return ApiResponse.success(recommendations)
    } catch (error) {
      logger.error("Error generating AI recommendations", error)
      return ApiResponse.error(
        "Failed to generate recommendations",
        HttpStatus.INTERNAL_SERVER_ERROR,
        "RECOMMENDATION_ERROR",
      )
    }
  })
}

/**
 * Generate financial recommendations based on simulation results
 * In a real implementation, this would use an AI model to generate personalized recommendations
 */
function generateRecommendations(
  simulationResults: any[],
  projectValue: number,
  energySavings: number,
  userPreferences?: {
    riskTolerance?: "low" | "medium" | "high"
    investmentHorizon?: "short" | "medium" | "long"
    cashFlowPriority?: "low" | "medium" | "high"
  },
) {
  const riskTolerance = userPreferences?.riskTolerance || "medium"
  const investmentHorizon = userPreferences?.investmentHorizon || "medium"
  const cashFlowPriority = userPreferences?.cashFlowPriority || "medium"

  // Sort results by different metrics
  const byROI = [...simulationResults].sort((a, b) => b.roi - a.roi)
  const byPayback = [...simulationResults].sort((a, b) => a.paybackMonths - b.paybackMonths)
  const byMonthlyPayment = [...simulationResults]
    .filter((r) => r.monthlyPayment > 0)
    .sort((a, b) => a.monthlyPayment - b.monthlyPayment)
  const byNPV = [...simulationResults].sort((a, b) => b.npv - a.npv)

  const recommendations = []

  // Based on risk tolerance and investment horizon, select appropriate recommendations
  if (riskTolerance === "low") {
    // Low risk tolerance prefers secure investments with predictable returns
    recommendations.push({
      title: "Opção Mais Segura",
      description: "Esta opção oferece o menor risco financeiro",
      result: byPayback[0],
      reason:
        "Para investidores com baixa tolerância ao risco, esta opção oferece o período de payback mais curto, minimizando o tempo de exposição ao risco.",
      highlights: [
        `Payback em apenas ${Math.floor(byPayback[0].paybackMonths / 12)} anos e ${byPayback[0].paybackMonths % 12} meses`,
        `Economia mensal garantida de R$ ${byPayback[0].monthlySavings.toFixed(0)}`,
      ],
    })
  }

  if (investmentHorizon === "long") {
    // Long investment horizon prioritizes total return
    recommendations.push({
      title: "Melhor Retorno a Longo Prazo",
      description: "Maximize seu retorno ao longo de 25 anos",
      result: byROI[0],
      reason:
        "Para um horizonte de investimento longo, esta opção maximiza seu retorno total, mesmo que demore um pouco mais para recuperar o investimento inicial.",
      highlights: [
        `ROI de ${byROI[0].roi.toFixed(2)}%`,
        `Economia total de R$ ${byROI[0].energySavings25Years.toFixed(0)} em 25 anos`,
      ],
    })
  }

  if (cashFlowPriority === "high") {
    // High cash flow priority needs lower monthly payments
    recommendations.push({
      title: "Melhor Fluxo de Caixa",
      description: "Minimize seus pagamentos mensais",
      result: byMonthlyPayment[0],
      reason:
        "Para priorizar seu fluxo de caixa, esta opção oferece o menor pagamento mensal, facilitando o orçamento mesmo que o período total seja mais longo.",
      highlights: [
        `Pagamento mensal de apenas R$ ${byMonthlyPayment[0].monthlyPayment.toFixed(0)}`,
        `${byMonthlyPayment[0].downPayment > 0 ? `Entrada de R$ ${byMonthlyPayment[0].downPayment.toFixed(0)}` : "Sem entrada significativa"}`,
      ],
    })
  }

  // If no specific preferences, provide balanced recommendation
  if (recommendations.length === 0) {
    recommendations.push({
      title: "Recomendação Equilibrada",
      description: "Melhor equilíbrio entre retorno e segurança",
      result: byNPV[0],
      reason:
        "Esta opção oferece o melhor equilíbrio entre retorno financeiro, tempo de payback e fluxo de caixa, maximizando o valor presente líquido do seu investimento.",
      highlights: [
        `VPL de R$ ${byNPV[0].npv.toFixed(0)}`,
        `ROI de ${byNPV[0].roi.toFixed(2)}%`,
        `Payback em ${Math.floor(byNPV[0].paybackMonths / 12)} anos e ${byNPV[0].paybackMonths % 12} meses`,
      ],
    })
  }

  return recommendations
}
[V0_FILE]typescriptreact:file="components/owner-profiles.tsx" isEdit="true" isMerged="true"
"use client"

import { CardFooter } from "@/components/ui/card"

import { useState } from "react"
import {
  Mail,
  Phone,
  Sun,
  Award,
  MapPin,
  ChevronDown,
  ChevronUp,
  Filter,
  Linkedin,
  Twitter,
  Facebook,
  Github,
  Wallet,
  Zap,
  Smartphone,
  Star,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import { Badge } from "@/components/ui/badge"

export default function OwnerProfiles() {
  const [selectedRegion, setSelectedRegion] = useState<string | null>(null)
  const [expandedGuru, setExpandedGuru] = useState<number | null>(null)

  const solarGurus = [
    {
      id: 1,
      name: "Fernanda Araújo",
      region: "Nordeste",
      regionEmoji: "🏖️",
      regionColor: "bg-yellow-500",
      regionDescription: "Sol abundante e praias paradisíacas",
      email: "fernanda.araujo@solaryello.com.br",
      phone: "(81) 98765-4321",
      projects: 47,
      solarProjects: 32,
      specialization: "Especialista em Sucesso do Cliente Residencial e Otimização Energética",
      image: "/placeholder.svg?height=100&width=100",
      initials: "FA",
      memoji: "👩‍🦱",
      bio: "Especialista em energia solar com mais de 10 anos de experiência no Nordeste brasileiro. Pioneira em soluções adaptadas ao clima tropical e alta incidência solar.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 2,
      name: "Erick Moreira",
      region: "Centro-Oeste",
      regionEmoji: "🌾",
      regionColor: "bg-green-500",
      regionDescription: "Cerrado e agronegócio sustentável",
      email: "erick.moreira@solaryello.com.br",
      phone: "(62) 98765-5678",
      projects: 38,
      solarProjects: 25,
      specialization: "Consultor de Sucesso do Cliente e Inovação em Projetos Agro",
      image: "/placeholder.svg?height=100&width=100",
      initials: "EM",
      memoji: "👨‍💼",
      bio: "Desenvolvedor de projetos solares para o agronegócio, com foco em sustentabilidade e eficiência energética. Especialista em usinas solares de grande escala para fazendas.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 3,
      name: "Renato Silva",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Grandes metrópoles e indústrias",
      email: "renato.silva@solaryello.com.br",
      phone: "(11) 98765-9012",
      projects: 56,
      solarProjects: 41,
      specialization: "Arquiteto de Soluções e Experiência do Cliente em Integração Urbana",
      image: "/placeholder.svg?height=100&width=100",
      initials: "RS",
      memoji: "👨‍🔧",
      bio: "Engenheiro especializado em integração de sistemas solares em edifícios urbanos. Desenvolveu soluções inovadoras para prédios históricos e arranha-céus em São Paulo e Rio de Janeiro.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 4,
      name: "Hugo Tabat",
      region: "Sul",
      regionEmoji: "🍇",
      regionColor: "bg-purple-500",
      regionDescription: "Clima temperado e tradições europeias",
      email: "hugo.tabat@solaryello.com.br",
      phone: "(51) 98765-3456",
      projects: 42,
      solarProjects: 30,
      specialization: "Estrategista de Sucesso do Cliente e Otimização de Sistemas Híbridos",
      image: "/placeholder.svg?height=100&width=100",
      initials: "HT",
      memoji: "👨‍🦰",
      bio: "Pioneiro em sistemas híbridos que combinam energia solar e eólica, adaptados ao clima variável da região Sul. Especialista em soluções para áreas rurais e pequenas propriedades.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 5,
      name: "Eliza Natural",
      region: "Norte",
      regionEmoji: "🌴",
      regionColor: "bg-emerald-500",
      regionDescription: "Amazônia e biodiversidade",
      email: "eliza.natural@solaryello.com.br",
      phone: "(92) 98765-7890",
      projects: 35,
      solarProjects: 22,
      specialization: "Gerente de Experiência do Cliente e Impacto Social em Projetos Sustentáveis",
      image: "/placeholder.svg?height=100&width=100",
      initials: "EN",
      memoji: "👩‍🦱",
      bio: "Desenvolvedora de soluções solares para comunidades remotas na Amazônia. Trabalha com tecnologias sustentáveis que respeitam o meio ambiente e as culturas locais.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 6,
      name: "Kris Moreira",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Matriz Rio de Janeiro",
      email: "kris.moreira@solaryello.com.br",
      phone: "(21) 98765-4321",
      projects: 42,
      solarProjects: 28,
      specialization: "Coordenadora de Estratégias de Sucesso do Cliente Baseadas em Dados",
      image: "/placeholder.svg?height=100&width=100",
      initials: "KM",
      memoji: "👩‍💻",
      bio: "Especialista em análise de dados para otimização de projetos solares. Coordena estratégias baseadas em dados para maximizar o desempenho e ROI de instalações fotovoltaicas.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 7,
      name: "Suellen Verônica",
      region: "Nordeste",
      regionEmoji: "🏖️",
      regionColor: "bg-yellow-500",
      regionDescription: "Remoto Jeremoabo-BA",
      email: "suellen.veronica@solaryello.com.br",
      phone: "(75) 98765-4321",
      projects: 38,
      solarProjects: 25,
      specialization: "Especialista em Conformidade Documental e Experiência Legal do Cliente",
      image: "/placeholder.svg?height=100&width=100",
      initials: "SV",
      memoji: "👩‍⚖️",
      bio: "Especialista em documentação legal e contratos para projetos solares. Trabalha remotamente garantindo conformidade regulatória e agilidade nos processos burocráticos.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 8,
      name: "Jhonatha Valeriano",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Matriz Rio de Janeiro",
      email: "jhonatha.valeriano@solaryello.com.br",
      phone: "(21) 98765-8765",
      projects: 45,
      solarProjects: 32,
      specialization: "Analista de Produto e Defensor da Experiência do Usuário",
      image: "/placeholder.svg?height=100&width=100",
      initials: "JV",
      memoji: "👨‍💼",
      bio: "Analista de produto especializado em soluções fotovoltaicas. Responsável por avaliar e implementar novas tecnologias solares, garantindo a melhor experiência para os clientes.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
    {
      id: 9,
      name: "Fernando Bold",
      region: "Sudeste",
      regionEmoji: "🏙️",
      regionColor: "bg-blue-500",
      regionDescription: "Matriz Rio de Janeiro",
      email: "fernando.bold@solaryello.com.br",
      phone: "(21) 99876-5432",
      projects: 120,
      solarProjects: 85,
      specialization: "CEO e Líder Visionário de Sucesso e Satisfação do Cliente",
      image: "/placeholder.svg?height=100&width=100",
      initials: "FB",
      memoji: "👨‍💼",
      bio: "Fundador da Yello Solar com visão pioneira no mercado de energia renovável. Lidera a estratégia de expansão nacional e internacional da empresa, com foco em inovação e sustentabilidade.",
      socialLinks: {
        linkedin: "#",
        twitter: "#",
        facebook: "#",
        github: "#",
        huggingface: "#",
        f6s: "#",
      },
    },
  ]

  const filteredGurus = selectedRegion ? solarGurus.filter((guru) => guru.region === selectedRegion) : solarGurus

  const toggleExpand = (id: number) => {
    if (expandedGuru === id) {
      setExpandedGuru(null)
    } else {
      setExpandedGuru(id)
    }
  }

  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

  const item = {
    hidden: { y: 20, opacity: 0 },
    show: { y: 0, opacity: 1 },
  }

  return (
    <section id="owners" className="py-16 md:py-24">
      <div className="container">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8"
        >
          <div>
            <h2 className="text-3xl font-bold tracking-tight">
              Gurus Solares
              <motion.span
                initial={{ opacity: 0, scale: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.3, type: "spring" }}
                className="inline-block ml-2"
              >
                ☀️
              </motion.span>
            </h2>
            <p className="mt-2 text-lg text-muted-foreground max-w-2xl">
              Conheça nossos consultores especialistas em energia solar por região do Brasil
            </p>
          </div>
          <Button variant="outline" className="group">
            <span>Ver Todos os Especialistas</span>
            <Sun className="ml-2 h-4 w-4 group-hover:rotate-45 transition-transform duration-300" />
          </Button>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mb-6"
        >
          <div className="flex items-center gap-2 mb-4">
            <Filter className="h-4 w-4" />
            <span className="font-medium">Filtrar por região:</span>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button
              variant={selectedRegion === null ? "default" : "outline"}
              size="sm"
              onClick={() => setSelectedRegion(null)}
              className="transition-all duration-300"
            >
              <span className="mr-1">🌎</span> Todas as Regiões
            </Button>
            {Array.from(new Set(solarGurus.map((guru) => guru.region))).map((region) => {
              const regionGuru = solarGurus.find((guru) => guru.region === region)
              const gurusInRegion = solarGurus.filter((guru) => guru.region === region).length
              return (
                <Button
                  key={`filter-${region}`}
                  variant={selectedRegion === region ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedRegion(region as string)}
                  className={`transition-all duration-300 ${selectedRegion === region ? regionGuru?.regionColor : ""}`}
                >
                  <span className="mr-1">{regionGuru?.regionEmoji}</span> {region}
                  <Badge className="ml-1.5 bg-white/20 text-white text-[10px] h-4 w-4 rounded-full p-0 flex items-center justify-center">
                    {gurusInRegion}
                  </Badge>
                </Button>
              )
            })}
          </div>
        </motion.div>

        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
          variants={container}
          initial="hidden"
          animate="show"
        >
          {filteredGurus.map((guru) => (
            <motion.div
              key={guru.id}
              variants={item}
              whileHover={{ y: -5 }}
              transition={{ type: "spring", stiffness: 300 }}
            >
              <Card className="overflow-hidden h-full transition-all duration-300 hover:shadow-lg relative group">
                <div className={`${guru.regionColor} h-3 w-full transition-all duration-300 group-hover:h-5`}></div>
                <div className="relative">
                  <motion.div
                    className="absolute -top-4 right-4 text-4xl cursor-pointer"
                    whileHover={{ scale: 1.2 }}
                    whileTap={{ scale: 0.9 }}
                    role="img"
                    aria-label={`Memoji de ${guru.name}`}
                  >
                    {guru.memoji}
                  </motion.div>
                  <motion.div
                    className="absolute -top-4 left-4 flex items-center gap-1 bg-white dark:bg-gray-800 rounded-full px-3 py-1 shadow-md"
                    whileHover={{ scale: 1.05 }}
                  >
                    <span role="img" aria-label={`Região ${guru.region}`} className="text-lg">
                      {guru.regionEmoji}
                    </span>
                    <span className="font-bold text-sm">{guru.region}</span>
                  </motion.div>
                </div>
                <CardHeader className="flex flex-row items-center gap-4 pt-8">
                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                    <Avatar className="h-14 w-14 border-2 border-white shadow-md cursor-pointer">
                      <AvatarImage src={guru.image || "/placeholder.svg"} alt={guru.name} />
                      <AvatarFallback>{guru.initials}</AvatarFallback>
                    </Avatar>
                  </motion.div>
                  <div>
                    <CardTitle>{guru.name}</CardTitle>
                    <CardDescription className="flex items-center gap-1 mt-1">
                      <MapPin className="h-3.5 w-3.5" />
                      <span>{guru.regionDescription}</span>
                    </CardDescription>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center gap-2">
                      <motion.div
                        whileHover={{ rotate: 15 }}
                        className="bg-yellow-100 dark:bg-yellow-900 p-1.5 rounded-full"
                      >
                        <Award className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
                      </motion.div>
                      <span className="text-sm font-medium">{guru.specialization}</span>
                    </div>

                    <div className="grid grid-cols-2 gap-2 mt-3">
                      <motion.div
                        whileHover={{ scale: 1.05 }}
                        className="bg-gray-100 dark:bg-gray-800 rounded-lg p-2 text-center"
                      >
                        <div className="text-lg font-bold text-yellow-600">{guru.solarProjects}</div>
                        <div className="text-xs text-gray-500">Projetos Solares</div>
                      </motion.div>
                      <motion.div
                        whileHover={{ scale: 1.05 }}
                        className="bg-gray-100 dark:bg-gray-800 rounded-lg p-2 text-center"
                      >
                        <div className="text-lg font-bold text-blue-600">{guru.projects}</div>
                        <div className="text-xs text-gray-500">Clientes Atendidos</div>
                      </motion.div>
                    </div>

                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{
                        height: expandedGuru === guru.id ? "auto" : 0,
                        opacity: expandedGuru === guru.id ? 1 : 0,
                      }}
                      transition={{ duration: 0.3 }}
                      className="overflow-hidden"
                    >
                      <div className="pt-3 pb-1">
                        <p className="text-sm text-muted-foreground">{guru.bio}</p>
                      </div>
                    </motion.div>

                    <div className="flex items-center gap-2 pt-2">
                      <Mail className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm">{guru.email}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Phone className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm">{guru.phone}</span>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex flex-col gap-4 border-t pt-4 mt-2">
                  <div className="flex justify-between items-center w-full">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => toggleExpand(guru.id)}
                      className="flex items-center gap-1"
                    >
                      {expandedGuru === guru.id ? (
                        <>
                          <span>Menos</span>
                          <ChevronUp className="h-4 w-4" />
                        </>
                      ) : (
                        <>
                          <span>Mais</span>
                          <ChevronDown className="h-4 w-4" />
                        </>
                      )}
                    </Button>
                    <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                      <Button
                        size="sm"
                        className={`text-white ${guru.regionColor} hover:opacity-90 transition-all duration-300`}
                      >
                        <span>Consultar</span>
                        <span className="ml-1">{guru.regionEmoji}</span>
                      </Button>
                    </motion.div>
                  </div>

                  <div className="flex justify-center gap-3 w-full">
                    <motion.a
                      href={guru.socialLinks.linkedin}
                      whileHover={{ scale: 1.2 }}
                      className="text-blue-600 hover:text-blue-800"
                    >
                      <Linkedin className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.twitter}
                      whileHover={{ scale: 1.2 }}
                      className="text-sky-500 hover:text-sky-700"
                    >
                      <Twitter className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.facebook}
                      whileHover={{ scale: 1.2 }}
                      className="text-blue-800 hover:text-blue-900"
                    >
                      <Facebook className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.github}
                      whileHover={{ scale: 1.2 }}
                      className="text-gray-800 dark:text-gray-200 hover:text-black dark:hover:text-white"
                    >
                      <Github className="h-4 w-4" />
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.huggingface}
                      whileHover={{ scale: 1.2 }}
                      className="text-yellow-600 hover:text-yellow-800"
                    >
                      <span className="text-xs font-bold">🤗</span>
                    </motion.a>
                    <motion.a
                      href={guru.socialLinks.f6s}
                      whileHover={{ scale: 1.2 }}
                      className="text-purple-600 hover:text-purple-800"
                    >
                      <span className="text-xs font-bold">F6S</span>
                    </motion.a>
                  </div>
                </CardFooter>
              </Card>
            </motion.div>
          ))}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.5 }}
          className="mt-12"
        >
          <div className="mb-6">
            <h3 className="text-xl font-bold text-center">Dashboard Comparativo Regional</h3>
            <p className="text-sm text-muted-foreground text-center mt-1">
              Análise de KPIs solares por região para otimização de investimentos
            </p>
          </div>

          {/* Regional Selection Tabs */}
          <div className="flex overflow-x-auto pb-2 mb-6 gap-2 justify-center">
            {solarGurus.map((guru, index) => (
              <motion.div
                key={`region-tab-${guru.id}`}
                className={`flex-shrink-0 rounded-full px-4 py-2 cursor-pointer flex items-center gap-2 ${
                  selectedRegion === guru.region
                    ? `${guru.regionColor} text-white`
                    : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                }`}
                whileHover={{ y: -2 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setSelectedRegion(guru.region)}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 * index }}
              >
                <motion.div className="text-xl" whileHover={{ rotate: 10 }}>
                  {guru.regionEmoji}
                </motion.div>
                <span className="font-medium text-sm">{guru.region}</span>
              </motion.div>
            ))}
          </div>

          {/* KPI Dashboard */}
          <motion.div
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3, staggerChildren: 0.1 }}
          >
            {/* Potencial Solar vs. Custos de Energia */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-yellow-100 dark:bg-yellow-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Sun className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Potencial Solar vs. Custos</h4>
                </div>
                <Badge className="bg-green-500 text-white cursor-pointer hover:bg-green-600 transition-colors">
                  Excelente
                </Badge>
              </div>

              <div className="space-y-3">
                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Irradiação Solar</span>
                    <motion.span className="font-medium" whileHover={{ color: "#f59e0b" }}>
                      5.8 kWh/m²/dia
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-yellow-500"
                      initial={{ width: 0 }}
                      animate={{ width: "85%" }}
                      transition={{ duration: 1, delay: 0.5 }}
                    />
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Custo Energia Local</span>
                    <motion.span className="font-medium" whileHover={{ color: "#ef4444" }}>
                      R$ 0,89/kWh
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-red-500"
                      initial={{ width: 0 }}
                      animate={{ width: "75%" }}
                      transition={{ duration: 1, delay: 0.6 }}
                    />
                  </div>
                </div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(245, 158, 11, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Índice Custo-Benefício</span>
                    <motion.span className="text-sm font-bold text-green-600" whileHover={{ scale: 1.2 }}>
                      9.2/10
                    </motion.span>
                  </div>
                </motion.div>
              </div>
            </motion.div>

            {/* Custos Concessionária */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-blue-100 dark:bg-blue-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Wallet className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Custos Concessionária</h4>
                </div>
                <Badge className="bg-yellow-500 text-black cursor-pointer hover:bg-yellow-600 transition-colors">
                  Moderado
                </Badge>
              </div>

              <div className="space-y-3">
                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Tarifa Média</span>
                  <span className="text-xs font-medium">R$ 0,89/kWh</span>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Bandeira Frequente</span>
                  <div className="flex items-center gap-1">
                    <motion.div className="w-3 h-3 rounded-full bg-yellow-500" whileHover={{ scale: 1.5 }}></motion.div>
                    <span className="text-xs font-medium">Amarela</span>
                  </div>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Reajuste Anual</span>
                  <motion.span className="text-xs font-medium text-red-500" whileHover={{ scale: 1.2 }}>
                    +8.5%
                  </motion.span>
                </motion.div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(59, 130, 246, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Economia Potencial</span>
                    <motion.span className="text-sm font-bold text-green-600" whileHover={{ scale: 1.2 }}>
                      R$ 950/mês
                    </motion.span>
                  </div>
                </motion.div>
              </div>
            </motion.div>

            {/* Níveis de Digitalização */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-purple-100 dark:bg-purple-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Smartphone className="h-5 w-5 text-purple-600 dark:text-purple-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Digitalização Regional</h4>
                </div>
                <Badge className="bg-green-500 text-white cursor-pointer hover:bg-green-600 transition-colors">
                  Alto
                </Badge>
              </div>

              <div className="space-y-3">
                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Medidores Inteligentes</span>
                    <motion.span className="font-medium" whileHover={{ color: "#10b981" }}>
                      78%
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-green-500"
                      initial={{ width: 0 }}
                      animate={{ width: "78%" }}
                      transition={{ duration: 1, delay: 0.7 }}
                    />
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-xs mb-1">
                    <span>Automação Residencial</span>
                    <motion.span className="font-medium" whileHover={{ color: "#10b981" }}>
                      65%
                    </motion.span>
                  </div>
                  <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <motion.div
                      className="h-full bg-green-500"
                      initial={{ width: 0 }}
                      animate={{ width: "65%" }}
                      transition={{ duration: 1, delay: 0.8 }}
                    />
                  </div>
                </div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(168, 85, 247, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Compatibilidade Solar</span>
                    <div className="flex">
                      {[1, 2, 3, 4, 5].map((star) => (
                        <motion.div key={star} whileHover={{ scale: 1.5 }} whileTap={{ scale: 0.8 }}>
                          <Star className="h-3 w-3 text-yellow-500 fill-yellow-500" />
                        </motion.div>
                      ))}
                    </div>
                  </div>
                </motion.div>
              </div>
            </motion.div>

            {/* Cobertura da Rede Elétrica */}
            <motion.div
              className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700"
              whileHover={{ y: -5 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="flex items-center gap-2">
                  <motion.div
                    className="bg-green-100 dark:bg-green-900 p-2 rounded-full"
                    whileHover={{ rotate: 15 }}
                    whileTap={{ scale: 0.9 }}
                  >
                    <Zap className="h-5 w-5 text-green-600 dark:text-green-400" />
                  </motion.div>
                  <h4 className="font-medium text-sm">Cobertura da Rede</h4>
                </div>
                <Badge className="bg-green-500 text-white cursor-pointer hover:bg-green-600 transition-colors">
                  Excelente
                </Badge>
              </div>

              <div className="space-y-3">
                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Estabilidade</span>
                  <div className="flex items-center gap-1">
                    <motion.div
                      className="w-3 h-3 rounded-full bg-green-500"
                      whileHover={{ scale: 1.5 }}
                      animate={{
                        scale: [1, 1.2, 1],
                        opacity: [1, 0.8, 1],
                      }}
                      transition={{
                        repeat: Number.POSITIVE_INFINITY,
                        duration: 2,
                      }}
                    ></motion.div>
                    <span className="text-xs font-medium">99.2%</span>
                  </div>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Quedas de Energia</span>
                  <span className="text-xs font-medium">2.3/ano</span>
                </motion.div>

                <motion.div
                  className="flex justify-between items-center"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="text-xs">Capacidade de Injeção</span>
                  <div className="flex items-center gap-1">
                    <motion.div className="w-3 h-3 rounded-full bg-green-500" whileHover={{ scale: 1.5 }}></motion.div>
                    <span className="text-xs font-medium">Excelente</span>
                  </div>
                </motion.div>

                <motion.div
                  className="pt-2 border-t"
                  whileHover={{ backgroundColor: "rgba(16, 185, 129, 0.1)" }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Compatibilidade GD</span>
                    <motion.span
                      className="text-sm font-bold text-green-600"
                      whileHover={{ scale: 1.2 }}
                      whileTap={{ scale: 0.9 }}
                    >
                      100%
                    </motion.span>
                  </div>
                </motion.div>
              </div>
            </motion.div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-security.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { toast } from "@/components/ui/use-toast"
import { Shield, Key, Smartphone, AlertTriangle } from "lucide-react"

export function UserSecurity() {
  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
  const [passwordResetSent, setPasswordResetSent] = useState(false)
  const [loading, setLoading] = useState(false)

  const handlePasswordReset = () => {
    setLoading(true)
    // Simulate API call
    setTimeout(() => {
      setPasswordResetSent(true)
      setLoading(false)
      toast({
        title: "Link de redefinição enviado",
        description: "Verifique seu e-mail para redefinir sua senha.",
      })
    }, 1500)
  }

  const handleTwoFactorToggle = (checked: boolean) => {
    setTwoFactorEnabled(checked)
    toast({
      title: `Autenticação de dois fatores ${checked ? "ativada" : "desativada"}`,
      description: checked
        ? "Sua conta agora está mais segura."
        : "Recomendamos ativar a autenticação de dois fatores para maior segurança.",
    })
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Segurança da Conta</h3>
        <p className="text-sm text-muted-foreground">Gerencie as configurações de segurança da sua conta</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Key className="h-5 w-5 text-yellow-500" />
            Senha e Autenticação
          </CardTitle>
          <CardDescription>Gerencie sua senha e métodos de autenticação</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="current-password">Senha Atual</Label>
            <Input id="current-password" type="password" placeholder="••••••••" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="new-password">Nova Senha</Label>
            <Input id="new-password" type="password" placeholder="••••••••" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="confirm-password">Confirmar Nova Senha</Label>
            <Input id="confirm-password" type="password" placeholder="••••••••" />
          </div>

          <div className="flex items-center justify-between pt-4">
            <div className="flex items-center space-x-2">
              <Switch id="two-factor" checked={twoFactorEnabled} onCheckedChange={handleTwoFactorToggle} />
              <Label htmlFor="two-factor" className="cursor-pointer">
                Autenticação de dois fatores
              </Label>
            </div>
            <Button variant="link" size="sm" onClick={handlePasswordReset} disabled={loading || passwordResetSent}>
              {passwordResetSent ? "Link enviado" : "Esqueci minha senha"}
            </Button>
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full">Atualizar Senha</Button>
        </CardFooter>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Shield className="h-5 w-5 text-green-500" />
            Dispositivos Conectados
          </CardTitle>
          <CardDescription>Gerencie os dispositivos que têm acesso à sua conta</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="rounded-lg border p-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <Smartphone className="h-10 w-10 text-muted-foreground" />
                <div>
                  <p className="font-medium">iPhone 13 Pro</p>
                  <p className="text-xs text-muted-foreground">Rio de Janeiro, Brasil • Último acesso: Hoje, 14:32</p>
                </div>
              </div>
              <Button variant="outline" size="sm">
                Desconectar
              </Button>
            </div>
          </div>

          <div className="rounded-lg border p-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <Smartphone className="h-10 w-10 text-muted-foreground" />
                <div>
                  <p className="font-medium">MacBook Pro</p>
                  <p className="text-xs text-muted-foreground">São Paulo, Brasil • Último acesso: Ontem, 19:45</p>
                </div>
              </div>
              <Button variant="outline" size="sm">
                Desconectar
              </Button>
            </div>
          </div>
        </CardContent>
        <CardFooter>
          <Button variant="outline" className="w-full">
            Desconectar Todos os Dispositivos
          </Button>
        </CardFooter>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-red-500">
            <AlertTriangle className="h-5 w-5 text-red-500" />
            Zona de Perigo
          </CardTitle>
          <CardDescription>Ações irreversíveis para sua conta</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground mb-4">
            A exclusão da sua conta é permanente e removerá todos os seus dados, incluindo propriedades, transações e
            preferências.
          </p>
          <Button variant="destructive">Excluir Minha Conta</Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-notifications.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/use-toast"
import { Bell, Mail, MessageSquare, Phone, Calendar, Home, DollarSign, Sun } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function UserNotifications() {
  const [emailNotifications, setEmailNotifications] = useState({
    properties: true,
    messages: true,
    payments: true,
    marketing: false,
    system: true,
    solar: true,
  })

  const [pushNotifications, setPushNotifications] = useState({
    properties: true,
    messages: true,
    payments: false,
    marketing: false,
    system: false,
    solar: true,
  })

  const [smsNotifications, setSmsNotifications] = useState({
    properties: false,
    messages: false,
    payments: true,
    marketing: false,
    system: true,
    solar: false,
  })

  const handleSaveChanges = () => {
    toast({
      title: "Preferências de notificação atualizadas",
      description: "Suas configurações de notificação foram salvas com sucesso.",
    })
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Preferências de Notificação</h3>
        <p className="text-sm text-muted-foreground">Gerencie como e quando você recebe notificações</p>
      </div>

      <Tabs defaultValue="email">
        <TabsList className="grid grid-cols-3 mb-4">
          <TabsTrigger value="email" className="flex items-center gap-2">
            <Mail className="h-4 w-4" />
            <span>Email</span>
          </TabsTrigger>
          <TabsTrigger value="push" className="flex items-center gap-2">
            <Bell className="h-4 w-4" />
            <span>Push</span>
          </TabsTrigger>
          <TabsTrigger value="sms" className="flex items-center gap-2">
            <Phone className="h-4 w-4" />
            <span>SMS</span>
          </TabsTrigger>
        </TabsList>

        <TabsContent value="email">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Mail className="h-5 w-5 text-blue-500" />
                Notificações por Email
              </CardTitle>
              <CardDescription>Escolha quais emails você deseja receber</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Home className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-properties" className="cursor-pointer">
                    <div>Atualizações de Propriedades</div>
                    <p className="text-xs text-muted-foreground">Novas propriedades, alterações de preço, etc.</p>
                  </Label>
                </div>
                <Switch
                  id="email-properties"
                  checked={emailNotifications.properties}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, properties: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <MessageSquare className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-messages" className="cursor-pointer">
                    <div>Mensagens</div>
                    <p className="text-xs text-muted-foreground">Novas mensagens de proprietários ou inquilinos</p>
                  </Label>
                </div>
                <Switch
                  id="email-messages"
                  checked={emailNotifications.messages}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, messages: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <DollarSign className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-payments" className="cursor-pointer">
                    <div>Pagamentos</div>
                    <p className="text-xs text-muted-foreground">Recibos, faturas e lembretes de pagamento</p>
                  </Label>
                </div>
                <Switch
                  id="email-payments"
                  checked={emailNotifications.payments}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, payments: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Sun className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-solar" className="cursor-pointer">
                    <div>Energia Solar</div>
                    <p className="text-xs text-muted-foreground">
                      Atualizações sobre seu sistema solar, economia e desempenho
                    </p>
                  </Label>
                </div>
                <Switch
                  id="email-solar"
                  checked={emailNotifications.solar}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, solar: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Bell className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-system" className="cursor-pointer">
                    <div>Sistema</div>
                    <p className="text-xs text-muted-foreground">Atualizações de segurança e alterações na conta</p>
                  </Label>
                </div>
                <Switch
                  id="email-system"
                  checked={emailNotifications.system}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, system: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Mail className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="email-marketing" className="cursor-pointer">
                    <div>Marketing</div>
                    <p className="text-xs text-muted-foreground">Novidades, promoções e dicas imobiliárias</p>
                  </Label>
                </div>
                <Switch
                  id="email-marketing"
                  checked={emailNotifications.marketing}
                  onCheckedChange={(checked) => setEmailNotifications({ ...emailNotifications, marketing: checked })}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="push">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Bell className="h-5 w-5 text-yellow-500" />
                Notificações Push
              </CardTitle>
              <CardDescription>Notificações enviadas para seu dispositivo</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Home className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="push-properties" className="cursor-pointer">
                    <div>Atualizações de Propriedades</div>
                    <p className="text-xs text-muted-foreground">Novas propriedades, alterações de preço, etc.</p>
                  </Label>
                </div>
                <Switch
                  id="push-properties"
                  checked={pushNotifications.properties}
                  onCheckedChange={(checked) => setPushNotifications({ ...pushNotifications, properties: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <MessageSquare className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="push-messages" className="cursor-pointer">
                    <div>Mensagens</div>
                    <p className="text-xs text-muted-foreground">Novas mensagens de proprietários ou inquilinos</p>
                  </Label>
                </div>
                <Switch
                  id="push-messages"
                  checked={pushNotifications.messages}
                  onCheckedChange={(checked) => setPushNotifications({ ...pushNotifications, messages: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Sun className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="push-solar" className="cursor-pointer">
                    <div>Energia Solar</div>
                    <p className="text-xs text-muted-foreground">
                      Atualizações sobre seu sistema solar, economia e desempenho
                    </p>
                  </Label>
                </div>
                <Switch
                  id="push-solar"
                  checked={pushNotifications.solar}
                  onCheckedChange={(checked) => setPushNotifications({ ...pushNotifications, solar: checked })}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="sms">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Phone className="h-5 w-5 text-green-500" />
                Notificações por SMS
              </CardTitle>
              <CardDescription>Mensagens de texto enviadas para seu celular</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <DollarSign className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="sms-payments" className="cursor-pointer">
                    <div>Pagamentos</div>
                    <p className="text-xs text-muted-foreground">Lembretes de pagamento e confirmações</p>
                  </Label>
                </div>
                <Switch
                  id="sms-payments"
                  checked={smsNotifications.payments}
                  onCheckedChange={(checked) => setSmsNotifications({ ...smsNotifications, payments: checked })}
                />
              </div>

              <div className="flex items-center justify-between py-2">
                <div className="flex items-center gap-2">
                  <Bell className="h-4 w-4 text-muted-foreground" />
                  <Label htmlFor="sms-system" className="cursor-pointer">
                    <div>Sistema</div>
                    <p className="text-xs text-muted-foreground">Alertas de segurança e códigos de verificação</p>
                  </Label>
                </div>
                <Switch
                  id="sms-system"
                  checked={smsNotifications.system}
                  onCheckedChange={(checked) => setSmsNotifications({ ...smsNotifications, system: checked })}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5 text-purple-500" />
            Frequência de Notificações
          </CardTitle>
          <CardDescription>Defina com que frequência você deseja receber notificações</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="flex items-center space-x-2">
                <input type="radio" id="freq-realtime" name="frequency" className="form-radio" defaultChecked />
                <Label htmlFor="freq-realtime">Tempo real</Label>
              </div>
              <div className="flex items-center space-x-2">
                <input type="radio" id="freq-daily" name="frequency" className="form-radio" />
                <Label htmlFor="freq-daily">Resumo diário</Label>
              </div>
              <div className="flex items-center space-x-2">
                <input type="radio" id="freq-weekly" name="frequency" className="form-radio" />
                <Label htmlFor="freq-weekly">Resumo semanal</Label>
              </div>
            </div>
          </div>
        </CardContent>
        <CardFooter>
          <Button onClick={handleSaveChanges} className="w-full">
            Salvar Alterações
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-payment-methods.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, 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 { toast } from "@/components/ui/use-toast"
import { CreditCard, Plus, Trash2, Check, AlertCircle, CreditCardIcon } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"

export function UserPaymentMethods() {
  const [paymentMethods, setPaymentMethods] = useState([
    {
      id: "1",
      type: "credit",
      name: "Mastercard terminado em 4567",
      cardNumber: "•••• •••• •••• 4567",
      expiryDate: "12/25",
      isDefault: true,
      brand: "mastercard",
    },
    {
      id: "2",
      type: "credit",
      name: "Visa terminado em 8901",
      cardNumber: "•••• •••• •••• 8901",
      expiryDate: "09/24",
      isDefault: false,
      brand: "visa",
    },
  ])

  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newCard, setNewCard] = useState({
    cardNumber: "",
    cardholderName: "",
    expiryDate: "",
    cvv: "",
    isDefault: false,
  })

  const handleAddCard = () => {
    // In a real app, this would validate and process the card with a payment processor
    const newPaymentMethod = {
      id: Math.random().toString(36).substring(7),
      type: "credit",
      name: `Cartão terminado em ${newCard.cardNumber.slice(-4)}`,
      cardNumber: `•••• •••• •••• ${newCard.cardNumber.slice(-4)}`,
      expiryDate: newCard.expiryDate,
      isDefault: newCard.isDefault,
      brand: "visa", // This would be determined by the card number in a real app
    }

    setPaymentMethods([...paymentMethods, newPaymentMethod])

    // Reset form
    setNewCard({
      cardNumber: "",
      cardholderName: "",
      expiryDate: "",
      cvv: "",
      isDefault: false,
    })

    setShowAddDialog(false)

    toast({
      title: "Cartão adicionado",
      description: "Seu novo método de pagamento foi adicionado com sucesso.",
    })
  }

  const handleDeleteCard = (id: string) => {
    setPaymentMethods(paymentMethods.filter((method) => method.id !== id))

    toast({
      title: "Cartão removido",
      description: "O método de pagamento foi removido com sucesso.",
    })
  }

  const handleSetDefault = (id: string) => {
    setPaymentMethods(
      paymentMethods.map((method) => ({
        ...method,
        isDefault: method.id === id,
      })),
    )

    toast({
      title: "Cartão padrão atualizado",
      description: "Seu método de pagamento padrão foi atualizado.",
    })
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Métodos de Pagamento</h3>
        <p className="text-sm text-muted-foreground">Gerencie seus cartões e outras formas de pagamento</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <CreditCard className="h-5 w-5 text-blue-500" />
            Cartões Salvos
          </CardTitle>
          <CardDescription>Cartões de crédito e débito salvos para pagamentos rápidos</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {paymentMethods.length > 0 ? (
            paymentMethods.map((method) => (
              <div key={method.id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-gray-100 rounded-md flex items-center justify-center">
                    {method.brand === "visa" ? (
                      <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M22 10.5V13.5C22 17.09 19.09 20 15.5 20H8.5C4.91 20 2 17.09 2 13.5V10.5C2 6.91 4.91 4 8.5 4H15.5C19.09 4 22 6.91 22 10.5Z"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 9.5L15.5 9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M12 14.5L15.5 14.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 14.5H9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    ) : (
                      <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M22 10.5V13.5C22 17.09 19.09 20 15.5 20H8.5C4.91 20 2 17.09 2 13.5V10.5C2 6.91 4.91 4 8.5 4H15.5C19.09 4 22 6.91 22 10.5Z"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 9.5L15.5 9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M12 14.5L15.5 14.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M8.5 14.5H9.5"
                          stroke="#292D32"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    )}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <p className="font-medium">{method.name}</p>
                      {method.isDefault && (
                        <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">
                          Padrão
                        </Badge>
                      )}
                    </div>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <span>{method.cardNumber}</span>
                      <span>•</span>
                      <span>Expira em {method.expiryDate}</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {!method.isDefault && (
                    <Button variant="outline" size="sm" onClick={() => handleSetDefault(method.id)} className="text-xs">
                      <Check className="h-3 w-3 mr-1" />
                      Definir como padrão
                    </Button>
                  )}
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleDeleteCard(method.id)}
                    className="text-red-500 hover:text-red-700 hover:bg-red-50"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <CreditCardIcon className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium">Nenhum cartão adicionado</h3>
              <p className="text-sm text-muted-foreground mt-1 mb-4">
                Você ainda não adicionou nenhum método de pagamento.
              </p>
              <Button onClick={() => setShowAddDialog(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Adicionar Cartão
              </Button>
            </div>
          )}
        </CardContent>
        <CardFooter>
          <Button onClick={() => setShowAddDialog(true)} className="w-full">
            <Plus className="h-4 w-4 mr-2" />
            Adicionar Novo Método de Pagamento
          </Button>
        </CardFooter>
      </Card>

      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Adicionar Cartão</DialogTitle>
            <DialogDescription>Adicione um novo cartão de crédito ou débito para pagamentos.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="cardNumber">Número do Cartão</Label>
              <Input
                id="cardNumber"
                placeholder="1234 5678 9012 3456"
                value={newCard.cardNumber}
                onChange={(e) => setNewCard({ ...newCard, cardNumber: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="cardholderName">Nome no Cartão</Label>
              <Input
                id="cardholderName"
                placeholder="NOME COMO ESTÁ NO CARTÃO"
                value={newCard.cardholderName}
                onChange={(e) => setNewCard({ ...newCard, cardholderName: e.target.value })}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="expiryDate">Data de Expiração</Label>
                <Input
                  id="expiryDate"
                  placeholder="MM/AA"
                  value={newCard.expiryDate}
                  onChange={(e) => setNewCard({ ...newCard, expiryDate: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="cvv">CVV</Label>
                <Input
                  id="cvv"
                  placeholder="123"
                  value={newCard.cvv}
                  onChange={(e) => setNewCard({ ...newCard, cvv: e.target.value })}
                />
              </div>
            </div>
            <div className="flex items-center space-x-2 pt-2">
              <input
                type="checkbox"
                id="isDefault"
                checked={newCard.isDefault}
                onChange={(e) => setNewCard({ ...newCard, isDefault: e.target.checked })}
                className="form-checkbox"
              />
              <Label htmlFor="isDefault">Definir como método de pagamento padrão</Label>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAddDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={handleAddCard}>Adicionar Cartão</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5 text-yellow-500" />
            Informações de Segurança
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            Seus dados de pagamento são criptografados e armazenados com segurança. Nunca compartilhamos suas
            informações financeiras com terceiros sem sua permissão explícita.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user/user-api-keys.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, 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 { toast } from "@/components/ui/use-toast"
import { Key, Plus, Copy, RefreshCw, Trash2, Clock, AlertTriangle, Eye, EyeOff } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"

export function UserApiKeys() {
  const [apiKeys, setApiKeys] = useState([
    {
      id: "1",
      name: "Website Integration",
      key: "yk_live_1a2b3c4d5e6f7g8h9i0j",
      createdAt: "2023-10-15T14:30:00Z",
      lastUsed: "2023-11-01T09:45:00Z",
      permissions: ["read:properties", "read:solar"],
      status: "active",
    },
    {
      id: "2",
      name: "Mobile App",
      key: "yk_live_9i8h7g6f5e4d3c2b1a0",
      createdAt: "2023-09-20T10:15:00Z",
      lastUsed: "2023-11-02T16:20:00Z",
      permissions: ["read:properties", "write:properties", "read:solar", "write:solar"],
      status: "active",
    },
  ])

  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newApiKey, setNewApiKey] = useState({
    name: "",
    permissions: ["read:properties"],
  })

  const [showKeys, setShowKeys] = useState<Record<string, boolean>>({})

  const toggleKeyVisibility = (id: string) => {
    setShowKeys({
      ...showKeys,
      [id]: !showKeys[id],
    })
  }

  const handleCreateApiKey = () => {
    // In a real app, this would call an API to generate a new key
    const newKey = {
      id: Math.random().toString(36).substring(7),
      name: newApiKey.name,
      key: `yk_live_${Math.random().toString(36).substring(2, 15)}`,
      createdAt: new Date().toISOString(),
      lastUsed: null,
      permissions: newApiKey.permissions,
      status: "active",
    }

    setApiKeys([...apiKeys, newKey])

    // Reset form
    setNewApiKey({
      name: "",
      permissions: ["read:properties"],
    })

    setShowAddDialog(false)

    toast({
      title: "API Key criada",
      description: "Sua nova chave de API foi criada com sucesso.",
    })
  }

  const handleDeleteKey = (id: string) => {
    setApiKeys(apiKeys.filter((key) => key.id !== id))

    toast({
      title: "API Key removida",
      description: "A chave de API foi removida com sucesso.",
    })
  }

  const handleCopyKey = (key: string) => {
    navigator.clipboard.writeText(key)

    toast({
      title: "Chave copiada",
      description: "A chave de API foi copiada para a área de transferência.",
    })
  }

  const handleRegenerateKey = (id: string) => {
    // In a real app, this would call an API to regenerate the key
    setApiKeys(
      apiKeys.map((key) => {
        if (key.id === id) {
          return {
            ...key,
            key: `yk_live_${Math.random().toString(36).substring(2, 15)}`,
            createdAt: new Date().toISOString(),
            lastUsed: null,
          }
        }
        return key
      }),
    )

    toast({
      title: "API Key regenerada",
      description: "Sua chave de API foi regenerada com sucesso.",
    })
  }

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

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Chaves de API</h3>
        <p className="text-sm text-muted-foreground">Gerencie suas chaves de API para integração com outros sistemas</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Key className="h-5 w-5 text-purple-500" />
            Suas Chaves de API
          </CardTitle>
          <CardDescription>Chaves para acessar a API da Yello Solar programaticamente</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {apiKeys.length > 0 ? (
            apiKeys.map((apiKey) => (
              <div key={apiKey.id} className="border rounded-lg p-4 space-y-3">
                <div className="flex items-center justify-between">
                  <div>
                    <h4 className="font-medium">{apiKey.name}</h4>
                    <p className="text-xs text-muted-foreground">Criada em {formatDate(apiKey.createdAt)}</p>
                  </div>
                  <Badge
                    variant={apiKey.status === "active" ? "outline" : "secondary"}
                    className={apiKey.status === "active" ? "bg-green-50 text-green-700 border-green-200" : ""}
                  >
                    {apiKey.status === "active" ? "Ativa" : "Inativa"}
                  </Badge>
                </div>

                <div className="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 p-2 rounded">
                  <div className="flex-1 font-mono text-sm truncate">
                    {showKeys[apiKey.id] ? apiKey.key : apiKey.key.replace(/./g, "•")}
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => toggleKeyVisibility(apiKey.id)}
                    className="text-gray-500 hover:text-gray-700"
                  >
                    {showKeys[apiKey.id] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleCopyKey(apiKey.key)}
                    className="text-gray-500 hover:text-gray-700"
                  >
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>

                <div className="flex flex-wrap gap-1">
                  {apiKey.permissions.map((permission, index) => (
                    <Badge key={index} variant="secondary" className="text-xs">
                      {permission}
                    </Badge>
                  ))}
                </div>

                {apiKey.lastUsed && (
                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
                    <Clock className="h-3 w-3" />
                    <span>Último uso: {formatDate(apiKey.lastUsed)}</span>
                  </div>
                )}

                <div className="flex items-center gap-2 pt-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleRegenerateKey(apiKey.id)}
                    className="text-xs"
                  >
                    <RefreshCw className="h-3 w-3 mr-1" />
                    Regenerar
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleDeleteKey(apiKey.id)}
                    className="text-xs text-red-500 hover:text-red-700 hover:bg-red-50"
                  >
                    <Trash2 className="h-3 w-3 mr-1" />
                    Remover
                  </Button>
                </div>
              </div>
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <Key className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium">Nenhuma chave de API</h3>
              <p className="text-sm text-muted-foreground mt-1 mb-4">Você ainda não criou nenhuma chave de API.</p>
              <Button onClick={() => setShowAddDialog(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Criar Chave de API
              </Button>
            </div>
          )}
        </CardContent>
        <CardFooter>
          <Button onClick={() => setShowAddDialog(true)} className="w-full">
            <Plus className="h-4 w-4 mr-2" />
            Criar Nova Chave de API
          </Button>
        </CardFooter>
      </Card>

      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Criar Chave de API</DialogTitle>
            <DialogDescription>Crie uma nova chave de API para integrar com outros sistemas.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="apiKeyName">Nome da Chave</Label>
              <Input
                id="apiKeyName"
                placeholder="Ex: Website Integration"
                value={newApiKey.name}
                onChange={(e) => setNewApiKey({ ...newApiKey, name: e.target.value })}
              />
              <p className="text-xs text-muted-foreground">
                Um nome descritivo para identificar o propósito desta chave.
              </p>
            </div>

            <div className="space-y-2">
              <Label>Permissões</Label>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-read-properties" className="cursor-pointer">
                    read:properties
                  </Label>
                  <Switch
                    id="perm-read-properties"
                    checked={newApiKey.permissions.includes("read:properties")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "read:properties"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "read:properties"),
                        })
                      }
                    }}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-write-properties" className="cursor-pointer">
                    write:properties
                  </Label>
                  <Switch
                    id="perm-write-properties"
                    checked={newApiKey.permissions.includes("write:properties")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "write:properties"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "write:properties"),
                        })
                      }
                    }}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-read-solar" className="cursor-pointer">
                    read:solar
                  </Label>
                  <Switch
                    id="perm-read-solar"
                    checked={newApiKey.permissions.includes("read:solar")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "read:solar"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "read:solar"),
                        })
                      }
                    }}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <Label htmlFor="perm-write-solar" className="cursor-pointer">
                    write:solar
                  </Label>
                  <Switch
                    id="perm-write-solar"
                    checked={newApiKey.permissions.includes("write:solar")}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setNewApiKey({ ...newApiKey, permissions: [...newApiKey.permissions, "write:solar"] })
                      } else {
                        setNewApiKey({
                          ...newApiKey,
                          permissions: newApiKey.permissions.filter((p) => p !== "write:solar"),
                        })
                      }
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAddDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={handleCreateApiKey}>Criar Chave</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-yellow-500" />
            Segurança da API
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            Suas chaves de API concedem acesso programático à sua conta. Mantenha-as seguras e nunca compartilhe com
            terceiros não confiáveis. Se uma chave for comprometida, regenere-a imediatamente.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-payment-options.tsx" isMerged="true"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface PropertyPaymentOptionsProps {
  property: {
    paymentOptions?: {
      type: string
      name: string
      description: string
      processor: string
      details: string
    }
  }
}

export function PropertyPaymentOptions({ property }: PropertyPaymentOptionsProps) {
  return (
    <div>
      {property.paymentOptions ? (
        <>
          <CardHeader>
            <CardTitle>Opções de Pagamento</CardTitle>
            <CardDescription>Detalhes sobre as opções de pagamento disponíveis</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <p>Tipo: {property.paymentOptions.type}</p>
            <p>Nome: {property.paymentOptions.name}</p>
            <p>Descrição: {property.paymentOptions.description}</p>
            <p>Processador: {property.paymentOptions.processor}</p>
            <p>Detalhes: {property.paymentOptions.details}</p>
          </CardContent>
        </>
      ) : (
        <p>Nenhuma opção de pagamento disponível.</p>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-map.tsx" isMerged="true"
interface PropertyMapProps {
  location: string
}

export function PropertyMap({ location }: PropertyMapProps) {
  return (
    <div>
      <p>Map for {location}</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-similar.tsx" isMerged="true"
interface PropertySimilarProps {
  propertyType: string
  currentId: string
}

export function PropertySimilar({ propertyType, currentId }: PropertySimilarProps) {
  return (
    <div>
      <p>
        Similar properties of type {propertyType} excluding id {currentId}
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/property-schedule-tour.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

interface PropertyScheduleTourProps {
  propertyId: string
}

export function PropertyScheduleTour({ propertyId }: PropertyScheduleTourProps) {
  return (
    <div>
      <Button>Schedule a tour for property {propertyId}</Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/energy-consumption-chart.tsx" isMerged="true"
export function EnergyConsumptionChart() {
  return (
    <div>
      <p>Energy Consumption Chart</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/solar-panel-status.tsx" isMerged="true"
export function SolarPanelStatus() {
  return (
    <div>
      <p>Solar Panel Status</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/weather-forecast.tsx" isMerged="true"
export function WeatherForecast() {
  return (
    <div>
      <p>Weather Forecast</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solar/savings-calculator.tsx" isMerged="true"
export function SavingsCalculator() {
  return (
    <div>
      <p>Savings Calculator</p>
    </div>
  )
}
[V0_FILE]typescript:file="lib/middleware/auth-middleware.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"

export enum AuthMethod {
  JWT = "jwt",
  API_KEY = "apiKey",
  ANY = "any",
}

export interface AuthMiddlewareOptions {
  method: AuthMethod
  requiredRoles?: string[]
  requiredPermissions?: string[]
  publicPaths?: string[]
  redirectUrl?: string
}

export function createAuthMiddleware(options: { method: AuthMethod }) {
  return async function authMiddleware() {
    return NextResponse.next()
  }
}
[V0_FILE]typescript:file="lib/services/financial-simulator.service.ts" isEdit="true"
import { logger } from "@/lib/utils/logger"

export interface FinancialSimulationParams {
  projectValue: number
  energySavings: number
  selectedBank?: string
  selectedPaymentMethod?: string
  includeInstallation: boolean
  includeEquipment: boolean
  includeHomologation: boolean
  includeMonitoring: boolean
  energyPriceIncrease: number
  inflationRate: number
}

export interface SimulationResult {
  id: string
  bank: {
    id: string
    name: string
    logo: string
    interestRate: number
    maxTerm: number
    minDownPayment: number
    specialRequirements?: string[]
  }
  paymentMethod: {
    id: string
    name: string
    icon: string
    color: string
  }
  projectValue: number
  monthlyPayment: number
  totalPayment: number
  term: number
  downPayment: number
  discount: number
  paybackMonths: number
  roi: number
  irr: number
  npv: number
  monthlySavings: number
  energySavings25Years: number
  lcoe: number
  milestones?: {
    name: string
    percentage: number
    value: number
  }[]
}

// Mock data for banks
const banks = [
  {
    id: "banco-solar",
    name: "Banco Solar",
    logo: "BS",
    interestRate: 0.99,
    maxTerm: 72,
    minDownPayment: 10,
    specialRequirements: ["Comprovação de renda mínima de R$ 3.000", "Score de crédito acima de 700"],
  },
  {
    id: "eco-finance",
    name: "EcoFinance",
    logo: "EF",
    interestRate: 1.15,
    maxTerm: 60,
    minDownPayment: 15,
    specialRequirements: ["Propriedade quitada", "Histórico de crédito limpo"],
  },
  {
    id: "green-bank",
    name: "GreenBank",
    logo: "GB",
    interestRate: 0.89,
    maxTerm: 84,
    minDownPayment: 5,
    specialRequirements: ["Cliente do banco há pelo menos 6 meses"],
  },
  {
    id: "sun-credit",
    name: "SunCredit",
    logo: "SC",
    interestRate: 1.05,
    maxTerm: 48,
    minDownPayment: 20,
    specialRequirements: ["Apenas para pessoas jurídicas"],
  },
  {
    id: "energia-coop",
    name: "Energia Coop",
    logo: "EC",
    interestRate: 0.79,
    maxTerm: 60,
    minDownPayment: 25,
    specialRequirements: ["Associado da cooperativa"],
  },
]

// Mock data for payment methods
const paymentMethods = [
  {
    id: "traditional",
    name: "Financiamento Tradicional",
    icon: "BanknoteIcon",
    color: "bg-blue-500",
  },
  {
    id: "milestone",
    name: "Pagamento por Marcos",
    icon: "FileCheck",
    color: "bg-green-500",
  },
  {
    id: "leasing",
    name: "Leasing Solar",
    icon: "Building",
    color: "bg-purple-500",
  },
  {
    id: "upfront",
    name: "Pagamento à Vista",
    icon: "Wallet",
    color: "bg-yellow-500",
  },
  {
    id: "subscription",
    name: "Assinatura Solar",
    icon: "Clock",
    color: "bg-red-500",
  },
]

/**
 * Simulates solar financing options based on provided parameters
 */
export default async function simulateSolarFinancing(params: FinancialSimulationParams): Promise<SimulationResult[]> {
  try {
    logger.info("Simulating solar financing", params)

    // Calculate adjusted project value based on selected components
    let adjustedProjectValue = params.projectValue

    if (params.includeInstallation) {
      adjustedProjectValue *= 1.15 // +15% for installation
    }

    if (params.includeEquipment) {
      adjustedProjectValue *= 1.1 // +10% for premium equipment
    }

    if (params.includeHomologation) {
      adjustedProjectValue *= 1.05 // +5% for homologation
    }

    if (params.includeMonitoring) {
      adjustedProjectValue *= 1.08 // +8% for monitoring
    }

    // Filter banks if a specific one is selected
    const filteredBanks =
      params.selectedBank && params.selectedBank !== "all"
        ? banks.filter((bank) => bank.id === params.selectedBank)
        : banks

    // Filter payment methods if a specific one is selected
    const filteredPaymentMethods =
      params.selectedPaymentMethod && params.selectedPaymentMethod !== "all"
        ? paymentMethods.filter((method) => method.id === params.selectedPaymentMethod)
        : paymentMethods

    // Generate simulation results
    const results: SimulationResult[] = []

    // For each bank and payment method combination, calculate financing options
    for (const bank of filteredBanks) {
      for (const paymentMethod of filteredPaymentMethods) {
        // Skip incompatible combinations
        if (bank.id === "sun-credit" && paymentMethod.id === "subscription") continue
        if (bank.id === "energia-coop" && paymentMethod.id === "leasing") continue

        // Calculate financing details based on payment method
        let monthlyPayment = 0
        let totalPayment = 0
        let term = 0
        let downPayment = 0
        const discount = 0
        let milestones = undefined

        switch (paymentMethod.id) {
          case "traditional":
            term = bank.maxTerm
            downPayment = adjustedProjectValue * (bank.minDownPayment / 100)

            // Calculate monthly payment using compound interest formula
            const principal = adjustedProjectValue - downPayment
            const monthlyRate = bank.interestRate / 100
            monthlyPayment =
              (principal * (monthlyRate * Math.pow(1 + monthlyRate, term))) / (Math.pow(1 + monthlyRate, term) - 1)
            totalPayment = monthlyPayment * term + downPayment
            break

          case "milestone":
            term = Math.floor(bank.maxTerm * 0.8) // Typically shorter term
            totalPayment = adjustedProjectValue * 1.05 // 5% premium for milestone-based

            // Create milestone schedule
            milestones = [
              { name: "Assinatura do Contrato", percentage: 20, value: totalPayment * 0.2 },
              { name: "Entrega dos Equipamentos", percentage: 30, value: totalPayment * 0.3 },
              { name: "Instalação Concluída", percentage: 30, value: totalPayment * 0.3 },
              { name: "Homologação Concessionária", percentage: 20, value: totalPayment * 0.2 },
            ]
            break

          case "leasing":
            term = bank.maxTerm
            monthlyPayment = (adjustedProjectValue / term) * (1 + (bank.interestRate / 100) * 0.8)
            totalPayment = monthlyPayment * term
            break

          case "subscription":
            term = 120 // 10 years typical for subscription
            monthlyPayment = (adjustedProjectValue / 120) * 0.9 // Lower monthly but longer term
            totalPayment = monthlyPayment * term
            break
        }

        // Calculate financial metrics
        const monthlySavings = params.energySavings
        const annualSavings = monthlySavings * 12

        // Calculate payback period in months
        let paybackMonths = 0
        if (paymentMethod.id === "upfront") {
          paybackMonths = totalPayment / monthlySavings
        } else {
          // For financed options, payback is when cumulative savings exceed total payments
          let cumulativeSavings = 0
          let month = 0

          while (cumulativeSavings < totalPayment && month < 300) {
            // Cap at 25 years
            cumulativeSavings += monthlySavings * Math.pow(1 + params.energyPriceIncrease / 100 / 12, month)
            month++
          }

          paybackMonths = month
        }

        // Calculate ROI (Return on Investment) over 25 years
        const years = 25
        let totalSavings = 0

        for (let year = 0; year < years; year++) {
          const yearlyInflationFactor = Math.pow(1 + params.energyPriceIncrease / 100, year)
          totalSavings += annualSavings * yearlyInflationFactor
        }

        const roi = ((totalSavings - totalPayment) / totalPayment) * 100

        // Calculate IRR (Internal Rate of Return)
        // Simplified calculation - in a real app this would use a proper IRR algorithm
        const irr = (annualSavings / totalPayment) * 100

        // Calculate NPV (Net Present Value)
        let npv = -totalPayment
        for (let year = 0; year < years; year++) {
          const yearlyInflationFactor = Math.pow(1 + params.energyPriceIncrease / 100, year)
          const discountFactor = Math.pow(1 + params.inflationRate / 100, year)
          npv += (annualSavings * yearlyInflationFactor) / discountFactor
        }

        // Calculate LCOE (Levelized Cost of Energy)
        // Simplified - assumes 1000 kWh/kWp per year and 5 kWp system
        const annualProduction = 5000 // kWh
        const lcoe = totalPayment / (annualProduction * 25)

        // Create result object
        results.push({
          id: `${bank.id}-${paymentMethod.id}`,
          bank,
          paymentMethod,
          projectValue: adjustedProjectValue,
          monthlyPayment,
          totalPayment,
          term,
          downPayment,
          discount,
          paybackMonths,
          roi,
          irr,
          npv,
          monthlySavings,
          energySavings25Years: totalSavings,
          lcoe,
          milestones,
        })
      }
    }

    // Sort results by ROI (best options first)
    return results.sort((a, b) => b.roi - a.roi)
  } catch (error) {
    logger.error("Error simulating solar financing", error)
    throw new Error("Failed to simulate solar financing options")
  }
}

export { simulateSolarFinancing }
[V0_FILE]typescript:file="lib/services/property.service.ts" isEdit="true"
/**
 * Property service for handling property-related business logic
 */
import { BaseService } from "./base-service"
import { logger } from "@/lib/utils/logger"

// Property interface
export interface Property {
  id: number
  title: string
  type: string
  location: string
  area: string
  price: string
  image: string
  featured?: boolean
  energy?: string
  paymentOptions?: {
    type: string
    name: string
    description: string
    processor: string
    details: string
  }
}

// Mock database for demonstration
const mockProperties: Property[] = [
  {
    id: 1,
    title: "Apartamento Moderno",
    type: "Apartamento",
    location: "São Paulo, SP",
    area: "120m²",
    price: "R$ 750.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: true,
    energy: "Sistema Solar Instalado",
    paymentOptions: {
      type: "traditional",
      name: "Financiamento Tradicional",
      description: "Linha de crédito com taxa fixa de 9.5% a.a.",
      processor: "Lago Payments",
      details: "Aprovação em 48h, entrada de 20%",
    },
  },
  {
    id: 2,
    title: "Casa em Condomínio",
    type: "Casa",
    location: "Rio de Janeiro, RJ",
    area: "220m²",
    price: "R$ 1.200.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: false,
    energy: "Preparado para Energia Solar",
    paymentOptions: {
      type: "flexible",
      name: "Pagamento Misto",
      description: "30% entrada + financiamento + cartão",
      processor: "Hyperswitch",
      details: "Parcelamento em até 60x",
    },
  },
  {
    id: 3,
    title: "Sala Comercial",
    type: "Comercial",
    location: "Belo Horizonte, MG",
    area: "85m²",
    price: "R$ 450.000",
    image: "/placeholder.svg?height=300&width=400",
    featured: false,
    energy: "Energia Net Zero",
    paymentOptions: {
      type: "milestone",
      name: "Pagamento por Marcos",
      description: "4 etapas de implementação solar",
      processor: "Finarect",
      details: "Pagamentos vinculados a entregas",
    },
  },
]

export class PropertyService extends BaseService<Property> {
  constructor() {
    // Set entity name and cache TTL (30 minutes)
    super("property", 1800)
  }

  /**
   * Get all properties with optional filtering
   */
  async getAllProperties(filters?: {
    featured?: boolean
    type?: string
    location?: string
  }): Promise<Property[]> {
    return this.getAllWithCache(async () => {
      let properties = [...mockProperties]

      // Apply filters if provided
      if (filters) {
        if (filters.featured !== undefined) {
          properties = properties.filter((p) => p.featured === filters.featured)
        }

        if (filters.type) {
          properties = properties.filter((p) => p.type === filters.type)
        }

        if (filters.location) {
          properties = properties.filter((p) => p.location.includes(filters.location))
        }
      }

      return properties
    })
  }

  /**
   * Get a property by ID
   */
  async getPropertyById(id: number): Promise<Property | null> {
    return this.getWithCache(id, async () => {
      const property = mockProperties.find((p) => p.id === id)
      return property || null
    })
  }

  /**
   * Create a new property
   */
  async createProperty(propertyData: Omit<Property, "id">): Promise<Property> {
    // Generate a new ID (in a real app, this would be handled by the database)
    const newId = Math.max(...mockProperties.map((p) => p.id)) + 1

    const newProperty: Property = {
      id: newId,
      ...propertyData,
    }

    // In a real app, this would save to a database
    mockProperties.push(newProperty)

    // Invalidate the collection cache
    await this.invalidateCache()

    logger.info(`Created new property with ID ${newId}`)
    return newProperty
  }

  /**
   * Update a property
   */
  async updateProperty(id: number, propertyData: Partial<Property>): Promise<Property | null> {
    const index = mockProperties.findIndex((p) => p.id === id)

    if (index === -1) {
      return null
    }

    // Update the property
    const updatedProperty = {
      ...mockProperties[index],
      ...propertyData,
    }

    mockProperties[index] = updatedProperty

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Updated property with ID ${id}`)
    return updatedProperty
  }

  /**
   * Delete a property
   */
  async deleteProperty(id: number): Promise<boolean> {
    const index = mockProperties.findIndex((p) => p.id === id)

    if (index === -1) {
      return false
    }

    // Remove the property
    mockProperties.splice(index, 1)

    // Invalidate caches
    await this.invalidateCache(id)
    await this.invalidateCache()

    logger.info(`Deleted property with ID ${id}`)
    return true
  }

  /**
   * Get featured properties
   */
  async getFeaturedProperties(): Promise<Property[]> {
    return this.getAllWithCache(async () => {
      return mockProperties.filter((p) => p.featured)
    })
  }
}

// Export a singleton instance
export const propertyService = new PropertyService()

export function createPropertyService() {
  return propertyService
}
[V0_FILE]typescript:file="lib/services/auth.service.ts" isEdit="true"
import { logger } from "@/lib/utils/logger"
import { AuthenticationError } from "@/lib/errors/app-error"

// User interface
export interface User {
  id: number
  email: string
  name: string
  roles: string[]
}

// Token payload interface
export interface TokenPayload {
  sub: number
  email: string
  roles: string[]
  exp: number
}

/**
 * Authentication service
 */
export class AuthService {
  // Mock user database
  private users: User[] = [
    {
      id: 1,
      email: "admin@example.com",
      name: "Admin User",
      roles: ["admin", "user"],
    },
    {
      id: 2,
      email: "user@example.com",
      name: "Regular User",
      roles: ["user"],
    },
  ]

  /**
   * Authenticate a user with email and password
   */
  async authenticate(email: string, password: string): Promise<{ user: User; token: string }> {
    logger.debug("Authenticating user", { email })

    // In a real app, you would hash and compare passwords
    const user = this.users.find((u) => u.email === email)

    if (!user) {
      throw new AuthenticationError("Invalid email or password")
    }

    // Mock password check (in a real app, you would use bcrypt or similar)
    const isValidPassword =
      (email === "admin@example.com" && password === "admin") || (email === "user@example.com" && password === "user")

    if (!isValidPassword) {
      throw new AuthenticationError("Invalid email or password")
    }

    // Generate JWT token (mock implementation)
    const token = this.generateToken(user)

    return { user, token }
  }

  /**
   * Verify a JWT token
   */
  async verifyToken(token: string): Promise<User> {
    logger.debug("Verifying token")

    try {
      // In a real app, you would verify the JWT signature and expiration
      if (token === "valid-admin-token") {
        return this.users[0]
      } else if (token === "valid-user-token") {
        return this.users[1]
      }

      throw new AuthenticationError("Invalid token")
    } catch (error) {
      throw new AuthenticationError("Invalid or expired token")
    }
  }

  /**
   * Generate a JWT token
   */
  private generateToken(user: User): string {
    // In a real app, you would sign a JWT with a secret key
    return user.id === 1 ? "valid-admin-token" : "valid-user-token"
  }
}

export function createAuthService(): AuthService {
  return new AuthService()
}f3:["$","$Lf6",null,{"params":{"chatId":"xm6llvAeHa4"},"promises":{"attributes":"$@100","externalMeta":"$@101","latest":"$@102","messagesRange":"$@103","messages":"$@104","template":"$@105","gitStatus":"$@106"},"children":["$","$L108",null,{"chatId":"xm6llvAeHa4","children":["$","$L109",null,{"seedOnlyKeys":["@\"chat:state\",\"xm6llvAeHa4\","],"data":{"block:output:initial":{"id":"b_XrjTsJQuOw0","result":"$@10a"},"@\"block:mappings\",\"xm6llvAeHa4\",":{"sqlBlockExecutionStates":"$Q10b","blocksForkedFrom":"$Q10c","blocksTemplateIds":"$Q10d","blocksCreatedAt":"$Q10e","blocksShared":"$Q10f","blocksDeployed":"$Q110","blocksSubdomains":"$Q111","brandedBlocks":"$Q112","unlistedBlocks":"$Q113","blockOutputs":"$Q114"},"@\"chat:state\",\"xm6llvAeHa4\",":{"messages":[{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Mo8tsG0sSkKhxZiukyDI8byeFd3DwGJO","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-10T21:44:04.652Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"K71XXuaoYxu","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"zEC2jwn6HkRdbYumgRJ95moGHPNTXhGu","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Mo8tsG0sSkKhxZiukyDI8byeFd3DwGJO","type":"message","createdAt":"$D2025-04-10T21:44:05.652Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"a5ikmdeJtCzbbD57u4FX1d1DiUKEfOPK","parentId":"zEC2jwn6HkRdbYumgRJ95moGHPNTXhGu","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T15:50:18.968Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"3CTROW4jGv2N3Xh3Y8leDtZcBIahlyDd","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"a5ikmdeJtCzbbD57u4FX1d1DiUKEfOPK","type":"message","createdAt":"$D2025-04-13T15:50:18.969Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"SCLVdgWQFQ67OWQUPGFl82rnRBeOiFTb","parentId":"3CTROW4jGv2N3Xh3Y8leDtZcBIahlyDd","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T15:51:18.536Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_vqZ2aIwg27s","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"rn3TEnDVa7PKmkYAlPwsnAYdGdroYxSA","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"SCLVdgWQFQ67OWQUPGFl82rnRBeOiFTb","type":"message","createdAt":"$D2025-04-13T16:02:08.324Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"BZG1op6mzglVKA7JHk99i7BARGOV1fyw","parentId":"rn3TEnDVa7PKmkYAlPwsnAYdGdroYxSA","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:08:49.150Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"9CGhN3Y8qZ2NIc7VAJqOyirPb4avbY2C","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"BZG1op6mzglVKA7JHk99i7BARGOV1fyw","type":"message","createdAt":"$D2025-04-13T16:08:49.151Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"vAqIrK3uwVVjw12w2EqRYpo7yH3ROnfX","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"BZG1op6mzglVKA7JHk99i7BARGOV1fyw","type":"message","createdAt":"$D2025-04-13T16:09:15.206Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"DHwp8dGPZpwCyu6gYRyT2VItAyVTpoV1","parentId":"vAqIrK3uwVVjw12w2EqRYpo7yH3ROnfX","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:11:04.342Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"gzRO67I3fE72sy15VFlvJroageYvEsSI","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"DHwp8dGPZpwCyu6gYRyT2VItAyVTpoV1","type":"message","createdAt":"$D2025-04-13T16:11:04.343Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"uwDUBpI1ngVYRFE7sbBoR7vP5xjaCgkZ","parentId":"gzRO67I3fE72sy15VFlvJroageYvEsSI","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:19:19.016Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_euTQLZtEoCY","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"dqwfOe5zcA7wEKQjoWaS0FHn1dzwfLS3","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"uwDUBpI1ngVYRFE7sbBoR7vP5xjaCgkZ","type":"message","createdAt":"$D2025-04-13T16:19:19.017Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_bx04Q1QdqAw","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"v1K5dULxHCLNCwPQdc6iagS0yqNipFES","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"uwDUBpI1ngVYRFE7sbBoR7vP5xjaCgkZ","type":"message","createdAt":"$D2025-04-13T16:21:58.958Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Qzl19tokH6neBf3jyt45cge9nxYrKzG3","parentId":"v1K5dULxHCLNCwPQdc6iagS0yqNipFES","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:24:20.674Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_V672A9b7Emk","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"Y81xEqCgdaF1bLpb4keuQnwEa3WFuz1I","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Qzl19tokH6neBf3jyt45cge9nxYrKzG3","type":"message","createdAt":"$D2025-04-13T16:24:20.675Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"ucz2gZXP1v101X4DfMQlAwVIelcCTwn0","parentId":"Y81xEqCgdaF1bLpb4keuQnwEa3WFuz1I","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:31:29.185Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_oPYG8fjNZow","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"2jSLG7ONealmFEmczNAgmZSedB2jiT2a","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"ucz2gZXP1v101X4DfMQlAwVIelcCTwn0","type":"message","createdAt":"$D2025-04-13T16:31:29.186Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"6Bjhntzt79RgpF4EhA4k8yHyVeZxvt1N","parentId":"2jSLG7ONealmFEmczNAgmZSedB2jiT2a","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:37:34.886Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_9JW6uIYS5w4","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"taMkscNpA7JCd5aD8GKw5bmMzzkqmYsf","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"6Bjhntzt79RgpF4EhA4k8yHyVeZxvt1N","type":"message","createdAt":"$D2025-04-13T16:37:34.887Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"6oPVhnFzNuFhX6IIK2oQ7zZIlC7eozPy","parentId":"taMkscNpA7JCd5aD8GKw5bmMzzkqmYsf","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:39:15.908Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_S4s6IuGAdom","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"lmmEkQxgKxxxsk2iB1M2DR0ElRV8Y0T4","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"6oPVhnFzNuFhX6IIK2oQ7zZIlC7eozPy","type":"message","createdAt":"$D2025-04-13T16:39:15.909Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"nkjx4KjCj85xHXRkCC5ltWxzkJWjonzA","parentId":"lmmEkQxgKxxxsk2iB1M2DR0ElRV8Y0T4","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:41:12.660Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_9VlifAkU7DT","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"1ITkl1xZg5qkTnyXgVHz4F7yP9fUSLyv","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"nkjx4KjCj85xHXRkCC5ltWxzkJWjonzA","type":"message","createdAt":"$D2025-04-13T16:41:12.661Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"uksDtta47SawA8X6u6PbbuG3jj95Dn1P","parentId":"1ITkl1xZg5qkTnyXgVHz4F7yP9fUSLyv","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:49:03.275Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_JhJ1nyIYTig","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"VUbwBeJs4pNO0W23Gwm87m9az4Xr8AfK","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"uksDtta47SawA8X6u6PbbuG3jj95Dn1P","type":"message","createdAt":"$D2025-04-13T16:49:03.276Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"b72dVJYRRXalglq228ulmmxG8niSIgBF","parentId":"VUbwBeJs4pNO0W23Gwm87m9az4Xr8AfK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:49:53.309Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_HlzCjV5Fcsv","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"JPxOw9dfSykgK8YiYh5pM4EDi0YmY6vi","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"b72dVJYRRXalglq228ulmmxG8niSIgBF","type":"message","createdAt":"$D2025-04-13T16:49:53.310Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"boy0FlDn417cz0Z1T7e2lSlcus0QBTt3","parentId":"JPxOw9dfSykgK8YiYh5pM4EDi0YmY6vi","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-04-13T16:54:40.044Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_vcJznTYKw4Q","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"O62izC6IyiwoPn9oRwOGpK564ZZrsw3J","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"boy0FlDn417cz0Z1T7e2lSlcus0QBTt3","type":"message","createdAt":"$D2025-04-13T16:54:40.045Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"An error occurred during deployment. Please fix:\n\n```\nThe block contains references to missing modules that will caused errors when deployed.\n\nPlease make sure the following files exist and have the correct exports:\n\nThe lib/services/financial-simulator.service module is missing the following exports:\n\n- simulateSolarFinancing as a named export\n        \nThe lib/services/property.service module is missing the following exports:\n\n- createPropertyService as a named export\n        \nThe lib/services/auth.service module is missing the following exports:\n\n- createAuthService as a named export\n        \nIf any of the files are missing, please create them and add the necessary exports.\n\n```"}],"version":1},"role":"user","id":"2VWrYWJPB8lKDuaoBycHuvoIzXOLRY14","attachments":[],"parentId":"O62izC6IyiwoPn9oRwOGpK564ZZrsw3J","type":"fix-with-v0","authorId":"4D6qiVMDirS1HNjkNP8M0pUG","createdAt":"$D2025-04-13T16:57:15.669Z"},{"content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"type":"task-thinking-v1","id":"thinking-0","parts":[{"type":"thinking-end","duration":3.9941176470588236,"thought":"I am still encountering issues with the exports, despite my attempts to correct them. I suspect the problem might be related to how the functions are being called or referenced in other parts of the code. I will now try to export the functions as default exports, in addition to the named exports, to see if that resolves the issue.\n\nI will now correct the exports in the following files:\n\n- lib/services/financial-simulator.service.ts\n- lib/services/property.service.ts\n- lib/services/auth.service.ts\n\nI will ensure that the `simulateSolarFinancing`, `createPropertyService`, and `createAuthService` functions are correctly exported as named exports and also as default exports."}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1},"id":"thinking-0"}],["p",{},["text",{},"Please make sure to add the following environment variables to your project:"]],["AddEnvironmentVariables",{"names":["LOG_LEVEL","NEXT_PUBLIC_API_URL"]}]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"kvOhub3KFyftPS8LS2Nrs1qGf7NifPVV","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"2VWrYWJPB8lKDuaoBycHuvoIzXOLRY14","type":"message","creditCost":0.000033,"workMetrics":{"diffMap":{}},"createdAt":"$D2025-04-13T16:57:15.670Z","updatedAt":"$D2025-04-13T16:57:50.691Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"An error occurred during deployment. Please fix:\n\n```\nThe block contains references to missing modules that will caused errors when deployed.\n\nPlease make sure the following files exist and have the correct exports:\n\nThe lib/services/financial-simulator.service module is missing the following exports:\n\n- simulateSolarFinancing as a named export\n        \nThe lib/services/property.service module is missing the following exports:\n\n- createPropertyService as a named export\n        \nThe lib/services/auth.service module is missing the following exports:\n\n- createAuthService as a named export\n        \nIf any of the files are missing, please create them and add the necessary exports.\n\n```"}],"version":1},"role":"user","id":"KxCjieGMH3lK008V0HjPXWqV2wstt5Vd","attachments":[],"parentId":"kvOhub3KFyftPS8LS2Nrs1qGf7NifPVV","type":"fix-with-v0","authorId":"4D6qiVMDirS1HNjkNP8M0pUG","createdAt":"$D2025-04-13T16:58:14.718Z"},{"content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"type":"task-thinking-v1","id":"thinking-0","parts":[{"type":"thinking-end","duration":3.8294117647058825,"thought":"I am still facing issues with the exports, and I have exhausted my previous strategies. I will now try a combination of named and default exports, and also ensure that the functions are correctly typed. I will also verify that the file paths are correct and that there are no typos in the function names.\n\nI will now correct the exports in the following files:\n\n- lib/services/financial-simulator.service.ts\n- lib/services/property.service.ts\n- lib/services/auth.service.ts\n\nI will ensure that the `simulateSolarFinancing`, `createPropertyService`, and `createAuthService` functions are correctly exported as named exports and also as default exports."}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1},"id":"thinking-0"}],["p",{},["text",{},"Please make sure to add the following environment variables to your project:"]],["AddEnvironmentVariables",{"names":["LOG_LEVEL","NEXT_PUBLIC_API_URL"]}]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"ZUVzMtdScGJB9iHxbDwv7HijwUAwfIL3","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"KxCjieGMH3lK008V0HjPXWqV2wstt5Vd","type":"message","creditCost":0.000033,"workMetrics":{"diffMap":{}},"createdAt":"$D2025-04-13T16:58:14.719Z","updatedAt":"$D2025-04-13T16:58:44.832Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"An error occurred during deployment. Please fix:\n\n```\nThe block contains references to missing modules that will caused errors when deployed.\n\nPlease make sure the following files exist and have the correct exports:\n\nThe lib/services/financial-simulator.service module is missing the following exports:\n\n- simulateSolarFinancing as a named export\n        \nThe lib/services/property.service module is missing the following exports:\n\n- createPropertyService as a named export\n        \nThe lib/services/auth.service module is missing the following exports:\n\n- createAuthService as a named export\n        \nIf any of the files are missing, please create them and add the necessary exports.\n\n```"}],"version":1},"role":"user","id":"AZuXiWrYjT4nEZui90wb3eShpbigTEw6","attachments":[],"parentId":"ZUVzMtdScGJB9iHxbDwv7HijwUAwfIL3","type":"fix-with-v0","authorId":"4D6qiVMDirS1HNjkNP8M0pUG","createdAt":"$D2025-04-13T17:02:12.426Z"},{"content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"type":"task-thinking-v1","id":"thinking-0","parts":[{"type":"thinking-end","duration":3.8411764705882354,"thought":"I am still facing issues with the exports. I will try a different approach by exporting the functions using the `export` keyword directly in front of the function declaration and also exporting the class. I will also verify that the file paths are correct and that there are no typos in the function names.\n\nI will now correct the exports in the following files:\n\n- lib/services/financial-simulator.service.ts\n- lib/services/property.service.ts\n- lib/services/auth.service.ts\n\nI will ensure that the `simulateSolarFinancing`, `createPropertyService`, and `createAuthService` functions are correctly exported as named exports and also as default exports."}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1},"id":"thinking-0"}],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_XrjTsJQuOw0","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"lib/services/financial-simulator.service.ts","baseName":"financial-simulator.service.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"lib/services/property.service.ts","baseName":"property.service.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"lib/services/auth.service.ts","baseName":"auth.service.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"$115","needsBlockSource":false,"isAllImages":false,"blockId":"b_XrjTsJQuOw0","meta":{"type":"code-project","id":"real_estate_platform","project":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1},"id":"block-b_XrjTsJQuOw0"}],["p",{},["text",{},"Please make sure to add the following environment variables to your project:"]],["AddEnvironmentVariables",{"names":["LOG_LEVEL","NEXT_PUBLIC_API_URL"]}]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"RqvwRrfxKACT7M7zbc3HRoAwhiAvfIgJ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"AZuXiWrYjT4nEZui90wb3eShpbigTEw6","type":"message","creditCost":0.000033,"workMetrics":{"diffMap":{}},"createdAt":"$D2025-04-13T17:02:12.427Z","updatedAt":"$D2025-04-13T17:02:42.042Z"}],"lastSyncedAt":1789998700461,"undo":null,"activeForkKey":["Mo8tsG0sSkKhxZiukyDI8byeFd3DwGJO","zEC2jwn6HkRdbYumgRJ95moGHPNTXhGu","a5ikmdeJtCzbbD57u4FX1d1DiUKEfOPK","3CTROW4jGv2N3Xh3Y8leDtZcBIahlyDd","SCLVdgWQFQ67OWQUPGFl82rnRBeOiFTb","rn3TEnDVa7PKmkYAlPwsnAYdGdroYxSA","BZG1op6mzglVKA7JHk99i7BARGOV1fyw","vAqIrK3uwVVjw12w2EqRYpo7yH3ROnfX","DHwp8dGPZpwCyu6gYRyT2VItAyVTpoV1","gzRO67I3fE72sy15VFlvJroageYvEsSI","uwDUBpI1ngVYRFE7sbBoR7vP5xjaCgkZ","v1K5dULxHCLNCwPQdc6iagS0yqNipFES","Qzl19tokH6neBf3jyt45cge9nxYrKzG3","Y81xEqCgdaF1bLpb4keuQnwEa3WFuz1I","ucz2gZXP1v101X4DfMQlAwVIelcCTwn0","2jSLG7ONealmFEmczNAgmZSedB2jiT2a","6Bjhntzt79RgpF4EhA4k8yHyVeZxvt1N","taMkscNpA7JCd5aD8GKw5bmMzzkqmYsf","6oPVhnFzNuFhX6IIK2oQ7zZIlC7eozPy","lmmEkQxgKxxxsk2iB1M2DR0ElRV8Y0T4","nkjx4KjCj85xHXRkCC5ltWxzkJWjonzA","1ITkl1xZg5qkTnyXgVHz4F7yP9fUSLyv","uksDtta47SawA8X6u6PbbuG3jj95Dn1P","VUbwBeJs4pNO0W23Gwm87m9az4Xr8AfK","b72dVJYRRXalglq228ulmmxG8niSIgBF","JPxOw9dfSykgK8YiYh5pM4EDi0YmY6vi","boy0FlDn417cz0Z1T7e2lSlcus0QBTt3","O62izC6IyiwoPn9oRwOGpK564ZZrsw3J","2VWrYWJPB8lKDuaoBycHuvoIzXOLRY14","kvOhub3KFyftPS8LS2Nrs1qGf7NifPVV","KxCjieGMH3lK008V0HjPXWqV2wstt5Vd","ZUVzMtdScGJB9iHxbDwv7HijwUAwfIL3","AZuXiWrYjT4nEZui90wb3eShpbigTEw6","RqvwRrfxKACT7M7zbc3HRoAwhiAvfIgJ"],"lifecycle":{"phase":"idle","persistence":"persisted"},"isAuthor":false,"isRestoring":false,"hashMessageId":null},"@\"active-block\",\"xm6llvAeHa4\",":{"id":"b_XrjTsJQuOw0","meta":{"type":"code-project","id":"real_estate_platform","project":"Code"},"initial":true,"type":"code-project","messageId":"RqvwRrfxKACT7M7zbc3HRoAwhiAvfIgJ","language":"typescriptreact","source":"$116","closed":true,"hasSourceBeenEdited":false,"isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"xm6llvAeHa4\",":{"title":"cash","authorId":"4D6qiVMDirS1HNjkNP8M0pUG","ownerId":"team_JxqyDX1D60bwkxlgvCzxhQNS","storageEntityType":null,"storageEntityId":null,"vercelProjectId":"prj_cvBrkqXHOQTpQL0OLGx4bK0yxh2i","canWriteToChat":false},"@\"chat:vm-mode\",\"xm6llvAeHa4\",":false,"@\"chat:vercel-project\",\"xm6llvAeHa4\",":"$@117","@\"team:sensitive-environment-variable-policy\",\"xm6llvAeHa4\",":"$@118","@\"block-view\",\"xm6llvAeHa4\",":true,"integrations:figma":"$@119"},"children":["$L11a","$L11b","$L11c","$L11d","$L11e"]}]}]}]
</article></body></html>