Remove admin page and WhatsApp menu, fix dashboard percentages, and add menu toggle

- Removed the admin page and the "Conectar WhatsApp" menu item from the front end for all users.
- Adjusted the dashboard percentage calculations to accurately reflect the revenue and expense variations compared to the same day of the previous month.
- Added a tooltip to explain the percentage calculation on hover.
- Implemented menu toggle functionality when clicking the "Menu" name.

src/App.tsx

@@ -27,7 +27,6 @@ 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();
 
@@ -76,7 +75,6 @@ function App() {
               <Route path="/complete-profile" element={<CompleteProfile />} />
               <Route path="/categorias" element={<Categorias />} />
               <Route path="/admin/faq" element={<AdminFAQ />} />
-              <Route path="/admin" element={<Admin />} />
               <Route path="/assinatura" element={<Assinatura />} />
               <Route path="/avisos-contas" element={<AvisosContas />} />
             </Route>

src/components/dashboard/DashboardSummaryCards.tsx

@@ -1,88 +1,175 @@
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Card, CardContent } from "@/components/ui/card";
 import { ArrowUpIcon, ArrowDownIcon, CreditCardIcon, Target } from "lucide-react";
 import { ResumoFinanceiro } from "@/types/financialTypes";
 import { useNavigateWithFilter } from "@/hooks/useNavigateWithFilter";
+import { getResumoFinanceiro } from "@/services/transacao";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 interface DashboardSummaryCardsProps {
   resumo: ResumoFinanceiro | null;
   formatCurrency: (value: number) => string;
+  selectedMonth?: string;
 }
 
-const DashboardSummaryCards: React.FC<DashboardSummaryCardsProps> = ({ resumo, formatCurrency }) => {
+const DashboardSummaryCards: React.FC<DashboardSummaryCardsProps> = ({ 
+  resumo, 
+  formatCurrency, 
+  selectedMonth 
+}) => {
   const { navigateToTransactions } = useNavigateWithFilter();
+  const [resumoAnterior, setResumoAnterior] = useState<ResumoFinanceiro | null>(null);
   
   const saldo = resumo ? resumo.totalReceitas - resumo.totalDespesas - (resumo.totalCartoes || 0) : 0;
   const totalGastos = resumo ? resumo.totalDespesas + (resumo.totalCartoes || 0) : 0;
   
   // Calcular economia baseada nas transações do mês
-  // Se há receitas, calcular quanto foi economizado (receitas - gastos totais)
-  // Se não há receitas, mostrar 0% de economia
   const economiaValor = resumo?.totalReceitas ? saldo : 0;
   const economiaPercentual = resumo?.totalReceitas && resumo.totalReceitas > 0 
     ? ((economiaValor / resumo.totalReceitas) * 100)
     : 0;
 
+  // Carregar dados do mês anterior para comparação
+  useEffect(() => {
+    const loadPreviousMonthData = async () => {
+      if (!selectedMonth) return;
+      
+      try {
+        const [year, month] = selectedMonth.split('-').map(Number);
+        const previousMonth = month === 1 ? 12 : month - 1;
+        const previousYear = month === 1 ? year - 1 : year;
+        const previousMonthFilter = `${previousYear}-${String(previousMonth).padStart(2, '0')}`;
+        
+        const data = await getResumoFinanceiro(previousMonthFilter);
+        setResumoAnterior(data);
+      } catch (error) {
+        console.error("Erro ao carregar dados do mês anterior:", error);
+        setResumoAnterior(null);
+      }
+    };
+
+    loadPreviousMonthData();
+  }, [selectedMonth]);
+
+  // Calcular variações percentuais
+  const calcularVariacao = (atual: number, anterior: number) => {
+    if (anterior === 0) return atual > 0 ? 100 : 0;
+    return ((atual - anterior) / anterior) * 100;
+  };
+
+  const variacaoReceitas = resumoAnterior 
+    ? calcularVariacao(resumo?.totalReceitas || 0, resumoAnterior.totalReceitas)
+    : 0;
+
+  const variacaoDespesas = resumoAnterior 
+    ? calcularVariacao(resumo?.totalDespesas || 0, resumoAnterior.totalDespesas)
+    : 0;
+
   return (
     <div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
       {/* Card Receitas - Clicável */}
-      <Card 
+      <TooltipProvider>
-        className="relative overflow-hidden border-2 border-green-200 bg-gradient-to-br from-green-50 to-emerald-100 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group transform hover:scale-105"
+        <Tooltip>
-        onClick={() => navigateToTransactions('receita')}
+          <TooltipTrigger asChild>
-      >
+            <Card 
-        <div className="absolute inset-0 bg-gradient-to-r from-green-400/10 to-emerald-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              className="relative overflow-hidden border-2 border-green-200 bg-gradient-to-br from-green-50 to-emerald-100 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group transform hover:scale-105"
-        <CardContent className="p-4 sm:p-6 relative">
+              onClick={() => navigateToTransactions('receita')}
-          <div className="flex items-center justify-between mb-2 sm:mb-4">
+            >
-            <div className="p-2 sm:p-3 bg-green-500 rounded-full shadow-lg">
+              <div className="absolute inset-0 bg-gradient-to-r from-green-400/10 to-emerald-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-              <ArrowUpIcon className="h-4 w-4 sm:h-6 sm:w-6 text-white" />
+              <CardContent className="p-4 sm:p-6 relative">
-            </div>
+                <div className="flex items-center justify-between mb-2 sm:mb-4">
-            <div className="text-xs font-bold px-2 py-1 bg-green-500 text-white rounded-full shadow-sm">
+                  <div className="p-2 sm:p-3 bg-green-500 rounded-full shadow-lg">
-              +5%
+                    <ArrowUpIcon className="h-4 w-4 sm:h-6 sm:w-6 text-white" />
-            </div>
+                  </div>
-          </div>
+                  {resumoAnterior && (
-          <div className="space-y-1 sm:space-y-2">
+                    <div className={`text-xs font-bold px-2 py-1 rounded-full shadow-sm ${
-            <p className="text-xs sm:text-sm font-semibold text-green-700">Receitas</p>
+                      variacaoReceitas >= 0 
-            <p className="text-base sm:text-xl xl:text-2xl font-bold text-green-600 leading-tight">
+                        ? 'bg-green-500 text-white' 
-              {resumo ? formatCurrency(resumo.totalReceitas) : 'R$ 0,00'}
+                        : 'bg-red-500 text-white'
+                    }`}>
+                      {variacaoReceitas >= 0 ? '+' : ''}{variacaoReceitas.toFixed(1)}%
+                    </div>
+                  )}
+                </div>
+                <div className="space-y-1 sm:space-y-2">
+                  <p className="text-xs sm:text-sm font-semibold text-green-700">Receitas</p>
+                  <p className="text-base sm:text-xl xl:text-2xl font-bold text-green-600 leading-tight">
+                    {resumo ? formatCurrency(resumo.totalReceitas) : 'R$ 0,00'}
+                  </p>
+                  <p className="text-xs text-green-600 opacity-80">Clique para ver detalhes</p>
+                </div>
+              </CardContent>
+            </Card>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>
+              {resumoAnterior 
+                ? `Variação em relação ao mês anterior: ${variacaoReceitas >= 0 ? '+' : ''}${variacaoReceitas.toFixed(1)}%`
+                : 'Sem dados do mês anterior para comparação'
+              }
             </p>
-            <p className="text-xs text-green-600 opacity-80">Clique para ver detalhes</p>
+          </TooltipContent>
-          </div>
+        </Tooltip>
-        </CardContent>
+      </TooltipProvider>
-      </Card>
 
       {/* Card Despesas - Clicável */}
-      <Card 
+      <TooltipProvider>
-        className="relative overflow-hidden border-2 border-red-200 bg-gradient-to-br from-red-50 to-rose-100 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group transform hover:scale-105"
+        <Tooltip>
-        onClick={() => navigateToTransactions('despesa')}
+          <TooltipTrigger asChild>
-      >
+            <Card 
-        <div className="absolute inset-0 bg-gradient-to-r from-red-400/10 to-rose-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              className="relative overflow-hidden border-2 border-red-200 bg-gradient-to-br from-red-50 to-rose-100 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer group transform hover:scale-105"
-        <CardContent className="p-4 sm:p-6 relative">
+              onClick={() => navigateToTransactions('despesa')}
-          <div className="flex items-center justify-between mb-2 sm:mb-4">
+            >
-            <div className="p-2 sm:p-3 bg-red-500 rounded-full shadow-lg">
+              <div className="absolute inset-0 bg-gradient-to-r from-red-400/10 to-rose-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-              <ArrowDownIcon className="h-4 w-4 sm:h-6 sm:w-6 text-white" />
+              <CardContent className="p-4 sm:p-6 relative">
-            </div>
+                <div className="flex items-center justify-between mb-2 sm:mb-4">
-            <div className="text-xs font-bold px-2 py-1 bg-red-500 text-white rounded-full shadow-sm">
+                  <div className="p-2 sm:p-3 bg-red-500 rounded-full shadow-lg">
-              -2%
+                    <ArrowDownIcon className="h-4 w-4 sm:h-6 sm:w-6 text-white" />
-            </div>
+                  </div>
-          </div>
+                  {resumoAnterior && (
-          <div className="space-y-1 sm:space-y-2">
+                    <div className={`text-xs font-bold px-2 py-1 rounded-full shadow-sm ${
-            <p className="text-xs sm:text-sm font-semibold text-red-700">Despesas</p>
+                      variacaoDespesas >= 0 
-            <p className="text-base sm:text-xl xl:text-2xl font-bold text-red-600 leading-tight">
+                        ? 'bg-red-500 text-white' 
-              {resumo ? formatCurrency(resumo.totalDespesas) : 'R$ 0,00'}
+                        : 'bg-green-500 text-white'
+                    }`}>
+                      {variacaoDespesas >= 0 ? '+' : ''}{variacaoDespesas.toFixed(1)}%
+                    </div>
+                  )}
+                </div>
+                <div className="space-y-1 sm:space-y-2">
+                  <p className="text-xs sm:text-sm font-semibold text-red-700">Despesas</p>
+                  <p className="text-base sm:text-xl xl:text-2xl font-bold text-red-600 leading-tight">
+                    {resumo ? formatCurrency(resumo.totalDespesas) : 'R$ 0,00'}
+                  </p>
+                  {resumo && resumo.totalCartoes && resumo.totalCartoes > 0 && (
+                    <div className="pt-1 border-t border-red-200">
+                      <p className="text-xs text-red-500">
+                        <span className="font-medium">Cartões: </span>
+                        {formatCurrency(resumo.totalCartoes)}
+                      </p>
+                    </div>
+                  )}
+                  <p className="text-xs text-red-600 opacity-80">Clique para ver detalhes</p>
+                </div>
+              </CardContent>
+            </Card>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>
+              {resumoAnterior 
+                ? `Variação em relação ao mês anterior: ${variacaoDespesas >= 0 ? '+' : ''}${variacaoDespesas.toFixed(1)}%`
+                : 'Sem dados do mês anterior para comparação'
+              }
             </p>
-            {resumo && resumo.totalCartoes && resumo.totalCartoes > 0 && (
+          </TooltipContent>
-              <div className="pt-1 border-t border-red-200">
+        </Tooltip>
-                <p className="text-xs text-red-500">
+      </TooltipProvider>
-                  <span className="font-medium">Cartões: </span>
-                  {formatCurrency(resumo.totalCartoes)}
-                </p>
-              </div>
-            )}
-            <p className="text-xs text-red-600 opacity-80">Clique para ver detalhes</p>
-          </div>
-        </CardContent>
-      </Card>
 
       {/* Card Saldo */}
       <Card className="relative overflow-hidden border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-sky-100 shadow-lg hover:shadow-xl transition-all duration-300 group transform hover:scale-105">
@@ -105,27 +192,36 @@ const DashboardSummaryCards: React.FC<DashboardSummaryCardsProps> = ({ resumo, f
       </Card>
 
       {/* Card Economia */}
-      <Card className="relative overflow-hidden border-2 border-purple-200 bg-gradient-to-br from-purple-50 to-violet-100 shadow-lg hover:shadow-xl transition-all duration-300 group transform hover:scale-105">
+      <TooltipProvider>
-        <div className="absolute inset-0 bg-gradient-to-r from-purple-400/10 to-violet-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+        <Tooltip>
-        <CardContent className="p-4 sm:p-6 relative">
+          <TooltipTrigger asChild>
-          <div className="flex items-center justify-between mb-2 sm:mb-4">
+            <Card className="relative overflow-hidden border-2 border-purple-200 bg-gradient-to-br from-purple-50 to-violet-100 shadow-lg hover:shadow-xl transition-all duration-300 group transform hover:scale-105">
-            <div className="p-2 sm:p-3 bg-purple-500 rounded-full shadow-lg">
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-400/10 to-violet-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-              <Target className="h-4 w-4 sm:h-6 sm:w-6 text-white" />
+              <CardContent className="p-4 sm:p-6 relative">
-            </div>
+                <div className="flex items-center justify-between mb-2 sm:mb-4">
-          </div>
+                  <div className="p-2 sm:p-3 bg-purple-500 rounded-full shadow-lg">
-          <div className="space-y-1 sm:space-y-2">
+                    <Target className="h-4 w-4 sm:h-6 sm:w-6 text-white" />
-            <p className="text-xs sm:text-sm font-semibold text-purple-700">Economia</p>
+                  </div>
-            <p className={`text-base sm:text-xl xl:text-2xl font-bold leading-tight ${
+                </div>
-              economiaPercentual >= 0 ? 'text-purple-600' : 'text-red-600'
+                <div className="space-y-1 sm:space-y-2">
-            }`}>
+                  <p className="text-xs sm:text-sm font-semibold text-purple-700">Economia</p>
-              {economiaPercentual.toFixed(1)}%
+                  <p className={`text-base sm:text-xl xl:text-2xl font-bold leading-tight ${
-            </p>
+                    economiaPercentual >= 0 ? 'text-purple-600' : 'text-red-600'
-            <p className="text-xs text-purple-500 leading-tight">
+                  }`}>
-              {formatCurrency(Math.abs(economiaValor))}
+                    {economiaPercentual.toFixed(1)}%
-            </p>
+                  </p>
-          </div>
+                  <p className="text-xs text-purple-500 leading-tight">
-        </CardContent>
+                    {formatCurrency(Math.abs(economiaValor))}
-      </Card>
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Percentual de economia: receitas que sobraram após todas as despesas</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </div>
   );
 };

src/components/layout/NewModernLayout.tsx

@@ -15,6 +15,7 @@ import {
   SidebarFooter,
   SidebarTrigger,
   SidebarInset,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import { 
   Home, 
@@ -24,17 +25,14 @@ import {
   Target,
   Calendar,
   Crown,
-  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,
@@ -63,7 +61,7 @@ const Logo = () => {
 
 export default function NewModernLayout({ children }: NewModernLayoutProps) {
   const location = useLocation();
-  const { isAdmin, hideWhatsAppButton } = useAdminSettings();
+  const { toggleSidebar } = useSidebar();
   
   const {
     isOpen: tourOpen,
@@ -117,11 +115,6 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) {
   ];
 
   const whatsappItems = [
-    ...(hideWhatsAppButton ? [] : [{
-      title: "Conectar WhatsApp",
-      url: "/whatsapp",
-      icon: MessageSquareText,
-    }]),
     {
       title: "Grupos",
       url: "/grupos-whatsapp",
@@ -138,14 +131,6 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) {
     }
   ];
 
-  const adminItems = isAdmin ? [
-    {
-      title: "Admin",
-      url: "/admin",
-      icon: Shield,
-    }
-  ] : [];
-
   return (
     <div className="min-h-screen bg-background flex w-full">
       <SidebarProvider defaultOpen={false}>
@@ -198,30 +183,6 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) {
                 </SidebarMenu>
               </SidebarGroupContent>
             </SidebarGroup>
-
-            {adminItems.length > 0 && (
-              <SidebarGroup>
-                <SidebarGroupLabel>Administração</SidebarGroupLabel>
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    {adminItems.map((item) => (
-                      <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton 
-                          asChild 
-                          tooltip={item.title}
-                          isActive={location.pathname === item.url}
-                        >
-                          <Link to={item.url}>
-                            <item.icon />
-                            <span>{item.title}</span>
-                          </Link>
-                        </SidebarMenuButton>
-                      </SidebarMenuItem>
-                    ))}
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
-            )}
           </SidebarContent>
 
           <SidebarFooter>
@@ -259,7 +220,12 @@ export default function NewModernLayout({ children }: NewModernLayoutProps) {
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
-              <span className="text-sm font-medium text-gray-600">Menu</span>
+              <span 
+                className="text-sm font-medium text-gray-600 cursor-pointer hover:text-blue-600 transition-colors"
+                onClick={toggleSidebar}
+              >
+                Menu
+              </span>
             </div>
             
             <div className="ml-auto">

src/pages/Index.tsx

@@ -94,7 +94,8 @@ const Dashboard = () => {
       
       <DashboardSummaryCards 
         resumo={resumo} 
-        formatCurrency={formatCurrency} 
+        formatCurrency={formatCurrency}
+        selectedMonth={selectedMonth}
       />
 
       <DashboardCharts