From 36b64f7e5c234cba6d1553dfdbc1e9300c82a36c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 22 Jun 2025 00:37:45 +0000
Subject: [PATCH] Fix: Restore user identification and improve chart

Restore the user identification section in the header. Improve the category chart by removing the value from the center and improving the tooltip display.
---
 src/components/dashboard/CategoryChart.tsx | 24 +++----
 src/components/layout/Header.tsx           | 74 +++++++++++++++++++++-
 2 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/src/components/dashboard/CategoryChart.tsx b/src/components/dashboard/CategoryChart.tsx
index 8de11b6..73428df 100644
--- a/src/components/dashboard/CategoryChart.tsx
+++ b/src/components/dashboard/CategoryChart.tsx
@@ -11,7 +11,6 @@ interface CategoryChartProps {
 
 const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = false }) => {
   const validCategories = categories.filter(cat => cat.valor > 0);
-  const totalValue = validCategories.reduce((sum, cat) => sum + cat.valor, 0);
 
   const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }: any) => {
     if (percent < 0.05) return null;
@@ -60,10 +59,10 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
   const renderCustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length) {
       return (
-        <div className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 p-2 rounded-xl shadow-lg transition-all duration-300">
-          <p className="font-semibold text-sm text-zinc-800 dark:text-white">{payload[0].name}</p>
-          <p className="font-bold">{formatCurrency(payload[0].value)}</p>
-          <p className="text-xs">{`${(payload[0].payload.percentage * 100).toFixed(1)}%`}</p>
+        <div className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 p-3 rounded-xl shadow-lg transition-all duration-300">
+          <p className="font-semibold text-sm text-zinc-800 dark:text-white mb-1">{payload[0].name}</p>
+          <p className="font-bold text-base">{formatCurrency(payload[0].value)}</p>
+          <p className="text-xs text-gray-600 dark:text-gray-400">{`${(payload[0].payload.percentage * 100).toFixed(1)}%`}</p>
         </div>
       );
     }
@@ -88,17 +87,17 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
             <span className="text-xs mt-2">Verifique se existem transações do tipo 'despesa' cadastradas</span>
           </div>
         ) : (
-          <div className="h-[320px] relative">
+          <div className="h-[300px] relative">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
                 <Pie
                   data={validCategories}
                   cx="50%"
-                  cy="46%"
+                  cy="45%"
                   labelLine={false}
                   label={renderCustomizedLabel}
-                  outerRadius={105}
-                  innerRadius={65}
+                  outerRadius={90}
+                  innerRadius={40}
                   fill="#8884d8"
                   dataKey="valor"
                   nameKey="categoria"
@@ -120,13 +119,6 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
                 <Legend content={renderCustomLegend} layout="horizontal" verticalAlign="bottom" />
               </PieChart>
             </ResponsiveContainer>
-            {/* Valor total no centro */}
-            <div 
-              className="absolute top-[46%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none"
-              style={{ width: '120px' }}
-            >
-              <div className="font-bold text-lg text-zinc-800 dark:text-white">{formatCurrency(totalValue)}</div>
-            </div>
           </div>
         )}
       </CardContent>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 57aede5..c0342e1 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,7 +1,17 @@
 
-import { Menu } from 'lucide-react';
+import { Menu, User, LogOut } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useIsMobile } from '@/hooks/use-mobile';
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { supabase } from '@/integrations/supabase/client';
+import { useToast } from '@/hooks/use-toast';
+import { useNavigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 
 interface HeaderProps {
   onMenuToggle: () => void;
@@ -9,6 +19,45 @@ interface HeaderProps {
 
 export default function Header({ onMenuToggle }: HeaderProps) {
   const isMobile = useIsMobile();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const [userEmail, setUserEmail] = useState<string>('');
+
+  useEffect(() => {
+    // Buscar dados do usuário logado
+    const getUserData = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (user?.email) {
+        setUserEmail(user.email);
+      }
+    };
+    
+    getUserData();
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      const { error } = await supabase.auth.signOut();
+      if (error) throw error;
+      
+      // Limpar localStorage
+      localStorage.removeItem('userEmail');
+      
+      toast({
+        title: "Logout realizado",
+        description: "Você foi desconectado com sucesso"
+      });
+      
+      navigate('/auth');
+    } catch (error) {
+      console.error('Erro no logout:', error);
+      toast({
+        title: "Erro no logout",
+        description: "Ocorreu um erro ao sair da conta",
+        variant: "destructive"
+      });
+    }
+  };
 
   return (
     <div className="flex h-14 items-center gap-4 border-b px-4 lg:h-[60px] lg:px-6">
@@ -26,6 +75,29 @@ export default function Header({ onMenuToggle }: HeaderProps) {
       <div className="w-full flex-1">
         <h1 className="text-lg font-semibold md:text-2xl">Finance Home</h1>
       </div>
+      
+      {/* User Menu */}
+      <div className="flex items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 hover:bg-gray-100">
+              <User className="h-4 w-4" />
+              <span className="hidden md:inline-block text-sm">
+                {userEmail || 'Usuário'}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuItem 
+              onClick={handleLogout}
+              className="flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+            >
+              <LogOut className="h-4 w-4" />
+              Sair
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </div>
   );
 }