diff --git a/src/App.tsx b/src/App.tsx index 94773a1..bec03ea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,6 +27,7 @@ import Categorias from "./pages/Categorias"; import AdminFAQ from "./pages/AdminFAQ"; import Assinatura from "./pages/Assinatura"; import AvisosContas from "./pages/AvisosContas"; +import Admin from "./pages/Admin"; const queryClient = new QueryClient(); @@ -75,6 +76,7 @@ function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/components/admin/AdminPanel.tsx b/src/components/admin/AdminPanel.tsx new file mode 100644 index 0000000..36c6ff6 --- /dev/null +++ b/src/components/admin/AdminPanel.tsx @@ -0,0 +1,42 @@ + +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Switch } from '@/components/ui/switch'; +import { Label } from '@/components/ui/label'; +import { Shield } from 'lucide-react'; +import { useAdminSettings } from '@/hooks/useAdminSettings'; + +const AdminPanel = () => { + const { isAdmin, hideWhatsAppButton, loading, toggleWhatsAppButton } = useAdminSettings(); + + if (!isAdmin || loading) { + return null; + } + + return ( + + + + + Painel Administrativo + + + +
+ + +
+

+ Quando ativado, o botão "Conectar WhatsApp" ficará oculto para todos os usuários do sistema. +

+
+
+ ); +}; + +export default AdminPanel; diff --git a/src/components/layout/NewModernLayout.tsx b/src/components/layout/NewModernLayout.tsx index 196051e..51029fc 100644 --- a/src/components/layout/NewModernLayout.tsx +++ b/src/components/layout/NewModernLayout.tsx @@ -27,12 +27,14 @@ import { MessageSquareText, Users, Settings, - Bell + Bell, + Shield } from 'lucide-react'; import OnboardingTour from '@/components/onboarding/OnboardingTour'; import HelpIcon from '@/components/help/HelpIcon'; import UserProfileButton from '@/components/dashboard/UserProfileButton'; import { useOnboardingTour } from '@/hooks/useOnboardingTour'; +import { useAdminSettings } from '@/hooks/useAdminSettings'; import { Tooltip, TooltipContent, @@ -46,10 +48,7 @@ interface NewModernLayoutProps { const Logo = () => { return ( - +
Finance Home Logo { Finance Home - +
); }; export default function NewModernLayout({ children }: NewModernLayoutProps) { const location = useLocation(); + const { isAdmin, hideWhatsAppButton } = useAdminSettings(); const { isOpen: tourOpen, @@ -117,15 +117,16 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) { ]; const whatsappItems = [ - { + ...(hideWhatsAppButton ? [] : [{ title: "Conectar WhatsApp", url: "/whatsapp", icon: MessageSquareText, - }, + }]), { title: "Grupos", url: "/grupos-whatsapp", icon: Users, + 'data-tour': 'grupos-menu' } ]; @@ -137,6 +138,14 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) { } ]; + const adminItems = isAdmin ? [ + { + title: "Admin", + url: "/admin", + icon: Shield, + } + ] : []; + return (
@@ -179,7 +188,7 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) { tooltip={item.title} isActive={location.pathname === item.url} > - + {item.title} @@ -189,6 +198,30 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) { + + {adminItems.length > 0 && ( + + Administração + + + {adminItems.map((item) => ( + + + + + {item.title} + + + + ))} + + + + )} diff --git a/src/components/onboarding/OnboardingTour.tsx b/src/components/onboarding/OnboardingTour.tsx index 07f9ed6..54a6d3f 100644 --- a/src/components/onboarding/OnboardingTour.tsx +++ b/src/components/onboarding/OnboardingTour.tsx @@ -23,34 +23,34 @@ const OnboardingTour: React.FC = ({ const steps = [ { - title: "Passo 1 - Conecte seu WhatsApp", + title: "Bem-vindo ao Finance Home! 🎉", content: ( <>

- Para que o app funcione, você precisa integrar seu WhatsApp com nossa plataforma. + Olá! Este é o Finance Home, sua ferramenta para controle financeiro automático.

- Isso permitirá que suas transações feitas no WhatsApp apareçam automaticamente aqui no Finance Home. + Vamos te ensinar como navegar pelo sistema e usar suas principais funcionalidades.

- 👉 Clique em "Conectar WhatsApp", digite o código da cidade + seu número de WhatsApp e depois clique em "Criar Instância". + 👉 Use o botão do menu (☰) no canto superior esquerdo para abrir e retrair o menu lateral.

), - spotlight: 'whatsapp-menu' + spotlight: null }, { - title: "Passo 2 - Crie seu Grupo com a IA", + title: "Passo 1 - Crie seu Grupo com a IA", content: ( <>

- Agora você precisa criar um grupo no WhatsApp com o nosso bot de IA chamado Angelina. + Para começar, você precisa criar um grupo no WhatsApp com o nosso bot de IA chamado Angelina.

Nele, você vai mandar mensagens, áudios ou comprovantes, e o sistema vai registrar automaticamente suas despesas e receitas.

- 👉 Clique em "Grupos", escolha o nome do grupo e clique em "Cadastrar Grupo". + 👉 Clique em "Grupos" no menu lateral, escolha o nome do grupo e clique em "Cadastrar Grupo".

), @@ -63,9 +63,12 @@ const OnboardingTour: React.FC = ({

Agora você pode começar a usar o Finance Home de forma automática.

-

+

Tudo que você enviar para o grupo vai ser registrado no app.

+

+ 💡 Dica: Use o menu lateral para navegar entre as diferentes seções do sistema. +

), spotlight: null @@ -87,7 +90,6 @@ const OnboardingTour: React.FC = ({ }); }; - // Aplicar highlight no elemento const highlightElementStyle = () => { const currentStepData = steps[currentStep]; if (!currentStepData?.spotlight) return; @@ -112,7 +114,6 @@ const OnboardingTour: React.FC = ({ return; } - // Limpar estilos anteriores removeHighlightStyle(); const currentStepData = steps[currentStep]; @@ -134,7 +135,6 @@ const OnboardingTour: React.FC = ({ }; }, [isOpen, currentStep]); - // Cleanup quando o componente for desmontado useEffect(() => { return () => { removeHighlightStyle(); diff --git a/src/hooks/useAdminSettings.ts b/src/hooks/useAdminSettings.ts new file mode 100644 index 0000000..a27606b --- /dev/null +++ b/src/hooks/useAdminSettings.ts @@ -0,0 +1,60 @@ + +import { useState, useEffect } from 'react'; +import { supabase } from '@/integrations/supabase/client'; + +const ADMIN_EMAIL = 'rodrigobm10@gmail.com'; +const SETTINGS_KEY = 'admin_hide_whatsapp_button'; + +export const useAdminSettings = () => { + const [isAdmin, setIsAdmin] = useState(false); + const [hideWhatsAppButton, setHideWhatsAppButton] = useState(false); + const [loading, setLoading] = useState(true); + + useEffect(() => { + checkAdminStatus(); + loadSettings(); + }, []); + + const checkAdminStatus = async () => { + try { + const { data: { user } } = await supabase.auth.getUser(); + if (user?.email === ADMIN_EMAIL) { + setIsAdmin(true); + } + } catch (error) { + console.error('Erro ao verificar status admin:', error); + } + }; + + const loadSettings = async () => { + try { + const savedSetting = localStorage.getItem(SETTINGS_KEY); + if (savedSetting) { + setHideWhatsAppButton(JSON.parse(savedSetting)); + } + } catch (error) { + console.error('Erro ao carregar configurações:', error); + } finally { + setLoading(false); + } + }; + + const toggleWhatsAppButton = async () => { + if (!isAdmin) return; + + try { + const newValue = !hideWhatsAppButton; + setHideWhatsAppButton(newValue); + localStorage.setItem(SETTINGS_KEY, JSON.stringify(newValue)); + } catch (error) { + console.error('Erro ao salvar configuração:', error); + } + }; + + return { + isAdmin, + hideWhatsAppButton, + loading, + toggleWhatsAppButton + }; +}; diff --git a/src/hooks/useOnboardingTour.ts b/src/hooks/useOnboardingTour.ts index 15d3d2e..b813535 100644 --- a/src/hooks/useOnboardingTour.ts +++ b/src/hooks/useOnboardingTour.ts @@ -27,7 +27,7 @@ export const useOnboardingTour = () => { console.log('🔍 [TOUR] Iniciando verificação de condições do tour...'); // Só mostrar o tour na página inicial (dashboard) - if (location.pathname !== '/') { + if (location.pathname !== '/dashboard') { console.log('❌ [TOUR] Tour só aparece no dashboard, página atual:', location.pathname); setShouldShowTour(false); return; @@ -108,7 +108,7 @@ export const useOnboardingTour = () => { // Verificar condições quando a localização mudar ou na inicialização useEffect(() => { - if (!tourCheckedRef.current && location.pathname === '/') { + if (!tourCheckedRef.current && location.pathname === '/dashboard') { console.log('🔄 [TOUR] useEffect disparado - verificando condições do tour'); tourCheckedRef.current = true; const timer = setTimeout(() => { @@ -123,7 +123,7 @@ export const useOnboardingTour = () => { useEffect(() => { const handleUserLoggedIn = (event: CustomEvent) => { console.log('🎉 [TOUR] Evento de login recebido:', event.detail); - if (location.pathname === '/') { + if (location.pathname === '/dashboard') { console.log('📧 [TOUR] Login detectado no dashboard, re-verificando condições do tour'); tourCheckedRef.current = false; sessionStorage.removeItem(TOUR_SESSION_KEY); diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx new file mode 100644 index 0000000..fd57bdd --- /dev/null +++ b/src/pages/Admin.tsx @@ -0,0 +1,35 @@ + +import AdminPanel from '@/components/admin/AdminPanel'; +import { useAdminSettings } from '@/hooks/useAdminSettings'; +import { Navigate } from 'react-router-dom'; + +const Admin = () => { + const { isAdmin, loading } = useAdminSettings(); + + if (loading) { + return ( +
+
+
+

Carregando...

+
+
+ ); + } + + if (!isAdmin) { + return ; + } + + return ( +
+
+

Administração

+
+ + +
+ ); +}; + +export default Admin;