Fix: AuthStore import and component props

- Corrected import of `useAuthStore` in `src/App.tsx`, `src/components/avisos/ContaRecorrenteForm.tsx`, and `src/components/avisos/ContasRecorrentesList.tsx`.
- Added `children` prop to `ProtectedRoute` and `Layout` components in `src/App.tsx`.
- Fixed type error in `src/components/layout/Layout.tsx` related to `Sidebar` props.

src/App.tsx

@@ -2,7 +2,7 @@
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 import { useEffect } from "react";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuthStore } from "@/stores/authStore";
@@ -63,22 +63,20 @@ function App() {
             <Route path="/email-confirmation" element={<EmailConfirmation />} />
             
             {/* Rotas protegidas */}
-            <Route element={<ProtectedRoute />}>
-              <Route element={<Layout />}>
-                <Route path="/dashboard" element={<Index />} />
-                <Route path="/transacoes" element={<Transacoes />} />
-                <Route path="/cartoes" element={<CartoesCredito />} />
-                <Route path="/configuracoes" element={<Configuracoes />} />
-                <Route path="/metas" element={<Metas />} />
-                <Route path="/calendario" element={<Calendario />} />
-                <Route path="/whatsapp" element={<WhatsApp />} />
-                <Route path="/grupos-whatsapp" element={<GruposWhatsApp />} />
-                <Route path="/complete-profile" element={<CompleteProfile />} />
-                <Route path="/categorias" element={<Categorias />} />
-                <Route path="/admin/faq" element={<AdminFAQ />} />
-                <Route path="/assinatura" element={<Assinatura />} />
-                <Route path="/avisos-contas" element={<AvisosContas />} />
-              </Route>
+            <Route path="/" element={<ProtectedRoute><Layout><Outlet /></Layout></ProtectedRoute>}>
+              <Route path="/dashboard" element={<Index />} />
+              <Route path="/transacoes" element={<Transacoes />} />
+              <Route path="/cartoes" element={<CartoesCredito />} />
+              <Route path="/configuracoes" element={<Configuracoes />} />
+              <Route path="/metas" element={<Metas />} />
+              <Route path="/calendario" element={<Calendario />} />
+              <Route path="/whatsapp" element={<WhatsApp />} />
+              <Route path="/grupos-whatsapp" element={<GruposWhatsApp />} />
+              <Route path="/complete-profile" element={<CompleteProfile />} />
+              <Route path="/categorias" element={<Categorias />} />
+              <Route path="/admin/faq" element={<AdminFAQ />} />
+              <Route path="/assinatura" element={<Assinatura />} />
+              <Route path="/avisos-contas" element={<AvisosContas />} />
             </Route>
 
             {/* Rota 404 */}

src/components/auth/ProtectedRoute.tsx

@@ -2,7 +2,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import LoadingState from '../whatsapp/LoadingState';
-import { authStore } from '@/stores/authStore';
+import { useAuthStore } from '@/stores/authStore';
 import { supabase } from '@/integrations/supabase/client';
 import { Session } from '@supabase/supabase-js';
 import { useProfileCompletion } from '@/hooks/useProfileCompletion';
@@ -16,9 +16,9 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   const [isLoading, setIsLoading] = useState(true);
   const location = useLocation();
 
-  const setLoggedIn = authStore((state) => state.setLoggedIn);
-  const setUser = authStore((state) => state.setUser);
-  const isProfileComplete = authStore((state) => state.isProfileComplete);
+  const setLoggedIn = useAuthStore((state) => state.setLoggedIn);
+  const setUser = useAuthStore((state) => state.setUser);
+  const isProfileComplete = useAuthStore((state) => state.isProfileComplete);
   
   // Hook para verificar completude do perfil
   const { isChecking } = useProfileCompletion(session?.user?.email || '');

src/components/layout/Layout.tsx

@@ -58,7 +58,7 @@ export default function Layout({ children, useModernSidebar = true }: LayoutProp
           : 'relative'
         }
       `}>
-        <Sidebar isOpen={sidebarOpen} onClose={handleSidebarClose} />
+        <Sidebar />
       </div>
 
       {/* Main content */}

src/stores/authStore.ts

@@ -4,17 +4,21 @@ import { create } from 'zustand';
 interface AuthState {
   isLoggedIn: boolean;
   user: { id: string } | null;
+  session: any;
   isProfileComplete: boolean;
   setLoggedIn: (status: boolean) => void;
   setUser: (user: { id: string } | null) => void;
+  setSession: (session: any) => void;
   setProfileComplete: (complete: boolean) => void;
 }
 
-export const authStore = create<AuthState>((set) => ({
+export const useAuthStore = create<AuthState>((set) => ({
   isLoggedIn: false,
   user: null,
+  session: null,
   isProfileComplete: true, // Default true para não afetar usuários existentes
   setLoggedIn: (status) => set({ isLoggedIn: status }),
   setUser: (user) => set({ user }),
+  setSession: (session) => set({ session }),
   setProfileComplete: (complete) => set({ isProfileComplete: complete }),
 }));