diff --git a/src/components/help/ContactForm.tsx b/src/components/help/ContactForm.tsx index 903c46e..b9911a0 100644 --- a/src/components/help/ContactForm.tsx +++ b/src/components/help/ContactForm.tsx @@ -93,7 +93,7 @@ const ContactForm = ({ onBack }: ContactFormProps) => { try { console.log("Enviando dados para webhook N8N:", webhookData); - const response = await fetch('https://webhookn8n.innova1001.com.br/webhook/faleconosco', { + const webhookResponse = await fetch('https://webhookn8n.innova1001.com.br/webhook/faleconosco', { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -101,11 +101,16 @@ const ContactForm = ({ onBack }: ContactFormProps) => { body: JSON.stringify(webhookData), }); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); + console.log("Status da resposta do webhook:", webhookResponse.status); + + if (webhookResponse.ok) { + const responseText = await webhookResponse.text(); + console.log("Resposta do webhook:", responseText); + } else { + console.error("Erro no webhook - Status:", webhookResponse.status); } - console.log("Dados do Fale Conosco enviados com sucesso para o webhook N8N"); + console.log("Dados do Fale Conosco enviados para o webhook N8N"); } catch (webhookError) { console.error("Erro ao enviar para webhook N8N:", webhookError); // Não interrompe o fluxo se o webhook falhar diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 0fd4e05..0ea830d 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { useIsMobile } from '@/hooks/use-mobile'; import Header from './Header'; import Sidebar from './Sidebar'; -import ModernLayout from './ModernLayout'; +import NewModernLayout from './NewModernLayout'; import OnboardingTour from '@/components/onboarding/OnboardingTour'; import HelpIcon from '@/components/help/HelpIcon'; import { useOnboardingTour } from '@/hooks/useOnboardingTour'; @@ -27,7 +27,7 @@ export default function Layout({ children, useModernSidebar = true }: LayoutProp // Se useModernSidebar for true, usa o novo layout moderno if (useModernSidebar) { - return {children}; + return {children}; } // Layout antigo para compatibilidade diff --git a/src/components/layout/NewModernLayout.tsx b/src/components/layout/NewModernLayout.tsx new file mode 100644 index 0000000..2798c72 --- /dev/null +++ b/src/components/layout/NewModernLayout.tsx @@ -0,0 +1,228 @@ + +import React from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import { + Sidebar, + SidebarProvider, + SidebarContent, + SidebarGroup, + SidebarGroupLabel, + SidebarGroupContent, + SidebarMenu, + SidebarMenuItem, + SidebarMenuButton, + SidebarHeader, + SidebarFooter, + SidebarTrigger, + SidebarInset, +} from "@/components/ui/sidebar"; +import { + Home, + Receipt, + CreditCard, + ListFilter, + Target, + Calendar, + Crown, + MessageSquareText, + Users, + Settings +} from 'lucide-react'; +import OnboardingTour from '@/components/onboarding/OnboardingTour'; +import HelpIcon from '@/components/help/HelpIcon'; +import { useOnboardingTour } from '@/hooks/useOnboardingTour'; + +interface NewModernLayoutProps { + children: React.ReactNode; +} + +const Logo = () => { + return ( + + Finance Home Logo + + Finance Home + + + ); +}; + +export default function NewModernLayout({ children }: NewModernLayoutProps) { + const location = useLocation(); + + const { + isOpen: tourOpen, + currentStep, + nextStep, + skipTour, + closeTour + } = useOnboardingTour(); + + const mainItems = [ + { + title: "Dashboard", + url: "/", + icon: Home, + }, + { + title: "Transações", + url: "/transacoes", + icon: Receipt, + }, + { + title: "Cartões de Crédito", + url: "/cartoes", + icon: CreditCard, + }, + { + title: "Categorias", + url: "/categorias", + icon: ListFilter, + }, + { + title: "Metas", + url: "/metas", + icon: Target, + }, + { + title: "Calendário", + url: "/calendario", + icon: Calendar, + }, + { + title: "Assinatura", + url: "/assinatura", + icon: Crown, + } + ]; + + const whatsappItems = [ + { + title: "Conectar WhatsApp", + url: "/whatsapp", + icon: MessageSquareText, + }, + { + title: "Grupos", + url: "/grupos-whatsapp", + icon: Users, + } + ]; + + const configItems = [ + { + title: "Configurações", + url: "/configuracoes", + icon: Settings, + } + ]; + + return ( +
+ + + + + + + + + Principal + + + {mainItems.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + + WhatsApp + + + {whatsappItems.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + + + + + {configItems.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + + +
+ +
+
+
+ {children} +
+
+ + + + {/* Help Icon */} + + + {/* Tour de Onboarding */} + +
+ ); +} diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx index 1a566bf..faeb3d7 100644 --- a/src/components/ui/sidebar.tsx +++ b/src/components/ui/sidebar.tsx @@ -1,3 +1,6 @@ + +"use client" + import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { VariantProps, cva } from "class-variance-authority" @@ -17,7 +20,7 @@ import { TooltipTrigger, } from "@/components/ui/tooltip" -const SIDEBAR_COOKIE_NAME = "sidebar:state" +const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem" @@ -437,7 +440,7 @@ const SidebarGroupLabel = React.forwardRef< ref={ref} data-sidebar="group-label" className={cn( - "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", + "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className )} diff --git a/src/index.css b/src/index.css index 76a2784..ab9497b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,87 +1,83 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { - --background: 210 40% 98%; - --foreground: 222.2 84% 4.9%; - + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - + --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - - --primary: 221.2 83% 53.3%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 221.2 83% 53.3%; - + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 10% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; --radius: 0.5rem; - - --sidebar-background: 210 40% 98%; - --sidebar-foreground: 222.2 84% 4.9%; - --sidebar-primary: 221.2 83% 53.3%; + + /* Sidebar variables */ + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; - --sidebar-accent: 210 40% 96.1%; - --sidebar-accent-foreground: 222.2 47.4% 11.2%; - --sidebar-border: 214.3 31.8% 91.4%; - --sidebar-ring: 221.2 83% 53.3%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; } .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - - --primary: 217.2 91.2% 59.8%; - --primary-foreground: 222.2 47.4% 11.2%; - - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 224.3 76.3% 48%; - - --sidebar-background: 222.2 84% 4.9%; - --sidebar-foreground: 210 40% 98%; - --sidebar-primary: 217.2 91.2% 59.8%; - --sidebar-primary-foreground: 222.2 47.4% 11.2%; - --sidebar-accent: 217.2 32.6% 17.5%; - --sidebar-accent-foreground: 210 40% 98%; - --sidebar-border: 217.2 32.6% 17.5%; - --sidebar-ring: 224.3 76.3% 48%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + + /* Sidebar dark variables */ + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; } } @@ -89,38 +85,23 @@ * { @apply border-border; } - body { @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; + font-family: "Inter", sans-serif; } } -@layer utilities { - .scrollbar-hide::-webkit-scrollbar { - display: none; - } - - .scrollbar-hide { - -ms-overflow-style: none; - scrollbar-width: none; - } - - .dashboard-card { - @apply bg-card rounded-lg border p-4 md:p-5 shadow-sm transition-all hover:shadow-md; - } - - .data-card { - @apply bg-card rounded-lg border p-3 md:p-4 shadow-sm transition-all; - } - - /* Responsive utilities */ - .responsive-grid { - @apply grid gap-2 sm:gap-3 md:gap-4; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - } - - .responsive-container { - @apply px-2 sm:px-4 md:px-6; - } +/* Definir cores no Tailwind */ +.sidebar { + background-color: hsl(var(--sidebar-background)); + color: hsl(var(--sidebar-foreground)); +} + +.sidebar-accent { + background-color: hsl(var(--sidebar-accent)); + color: hsl(var(--sidebar-accent-foreground)); +} + +.sidebar-border { + border-color: hsl(var(--sidebar-border)); } diff --git a/tailwind.config.ts b/tailwind.config.ts index c023174..00e122c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,123 +1,103 @@ import type { Config } from "tailwindcss"; -export default { - darkMode: ["class"], - content: [ - "./pages/**/*.{ts,tsx}", - "./components/**/*.{ts,tsx}", - "./app/**/*.{ts,tsx}", - "./src/**/*.{ts,tsx}", - ], - prefix: "", - 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))' - }, - sidebar: { - DEFAULT: 'hsl(var(--sidebar-background))', - foreground: 'hsl(var(--sidebar-foreground))', - primary: 'hsl(var(--sidebar-primary))', - 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', - accent: 'hsl(var(--sidebar-accent))', - 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', - border: 'hsl(var(--sidebar-border))', - ring: 'hsl(var(--sidebar-ring))' - }, - // Financial dashboard specific colors - finance: { - 'blue': '#1D4ED8', - 'light-blue': '#60A5FA', - 'green': '#10B981', - 'light-green': '#34D399', - 'red': '#EF4444', - 'yellow': '#F59E0B', - 'purple': '#8B5CF6' - } - }, - 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' - } - }, - 'fade-in': { - '0%': { - opacity: '0', - transform: 'translateY(10px)' - }, - '100%': { - opacity: '1', - transform: 'translateY(0)' - } - }, - 'pulse-gentle': { - '0%, 100%': { opacity: '1' }, - '50%': { opacity: '0.8' } - } - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - 'fade-in': 'fade-in 0.5s ease-out', - 'pulse-gentle': 'pulse-gentle 2s infinite' - } - } - }, - plugins: [require("tailwindcss-animate")], +const config: Config = { + darkMode: ["class"], + content: [ + "./pages/**/*.{ts,tsx}", + "./components/**/*.{ts,tsx}", + "./app/**/*.{ts,tsx}", + "./src/**/*.{ts,tsx}", + ], + prefix: "", + 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))", + }, + sidebar: { + DEFAULT: "hsl(var(--sidebar-background))", + foreground: "hsl(var(--sidebar-foreground))", + primary: "hsl(var(--sidebar-primary))", + "primary-foreground": "hsl(var(--sidebar-primary-foreground))", + accent: "hsl(var(--sidebar-accent))", + "accent-foreground": "hsl(var(--sidebar-accent-foreground))", + border: "hsl(var(--sidebar-border))", + ring: "hsl(var(--sidebar-ring))", + }, + chart: { + "1": "hsl(var(--chart-1))", + "2": "hsl(var(--chart-2))", + "3": "hsl(var(--chart-3))", + "4": "hsl(var(--chart-4))", + "5": "hsl(var(--chart-5))", + }, + }, + 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" }, + }, + "caret-blink": { + "0%,70%,100%": { opacity: "1" }, + "20%,50%": { opacity: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + "caret-blink": "caret-blink 1.25s ease-out infinite", + }, + }, + }, + plugins: [require("tailwindcss-animate")], } satisfies Config; + +export default config;