Refactor: Sum category values in Categorias page

Use the 'categoria' column to sum values in the Categorias menu.

src/pages/Categorias.tsx

@@ -6,6 +6,14 @@ import { getCategorySummary } from '@/services/transacaoService';
 import { CategorySummary } from '@/types/financialTypes';
 import { useToast } from "@/components/ui/use-toast";
 import { Progress } from "@/components/ui/progress";
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from "@/components/ui/table";
 
 const CategoriasPage = () => {
   const [categories, setCategories] = useState<CategorySummary[]>([]);
@@ -42,6 +50,8 @@ const CategoriasPage = () => {
     }).format(value);
   };
   
+  const totalGastos = categories.reduce((total, category) => total + category.valor, 0);
+
   return (
     <Layout>
       <div className="space-y-6">
@@ -70,6 +80,7 @@ const CategoriasPage = () => {
             </CardContent>
           </Card>
         ) : (
+          <>
             <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
               {categories.map((category) => (
                 <Card key={category.categoria}>
@@ -90,7 +101,10 @@ const CategoriasPage = () => {
                       <Progress 
                         value={category.percentage * 100} 
                         className="h-2"
-                      indicatorColor={category.color}
+                        style={{ 
+                          backgroundColor: 'rgba(0,0,0,0.1)',  
+                          '--progress-background': category.color 
+                        } as React.CSSProperties}
                       />
                       <div className="text-xs text-muted-foreground">
                         {(category.percentage * 100).toFixed(1)}% do total de despesas
@@ -100,6 +114,44 @@ const CategoriasPage = () => {
                 </Card>
               ))}
             </div>
+            
+            <Card className="mt-6">
+              <CardHeader>
+                <CardTitle>Resumo de Categorias</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Categoria</TableHead>
+                      <TableHead>Valor</TableHead>
+                      <TableHead>Percentual</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {categories.map((category) => (
+                      <TableRow key={category.categoria}>
+                        <TableCell className="font-medium flex items-center">
+                          <span
+                            className="w-3 h-3 rounded-full mr-2" 
+                            style={{ backgroundColor: category.color }}
+                          />
+                          {category.categoria}
+                        </TableCell>
+                        <TableCell>{formatCurrency(category.valor)}</TableCell>
+                        <TableCell>{(category.percentage * 100).toFixed(1)}%</TableCell>
+                      </TableRow>
+                    ))}
+                    <TableRow className="bg-muted/50">
+                      <TableCell className="font-bold">Total</TableCell>
+                      <TableCell className="font-bold">{formatCurrency(totalGastos)}</TableCell>
+                      <TableCell>100%</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          </>
         )}
       </div>
     </Layout>

src/services/transacaoService.ts

@@ -25,7 +25,7 @@ export async function getTransacoes(): Promise<Transaction[]> {
     quando: item.quando || new Date().toISOString(),
     detalhes: item.detalhes || '',
     estabelecimento: item.estabelecimento || '',
-    tipo: item.tipo || 'saida',
+    tipo: item.tipo || 'despesa',
     categoria: item.categoria || 'Outros'
   }));
 }
@@ -79,10 +79,11 @@ export async function getCategorySummary() {
   const categorias: Record<string, number> = {};
   data.forEach(item => {
     if (item.categoria && item.valor) {
-      if (!categorias[item.categoria]) {
+      const categoriaKey = item.categoria || 'Outros';
-        categorias[item.categoria] = 0;
+      if (!categorias[categoriaKey]) {
+        categorias[categoriaKey] = 0;
       }
-      categorias[item.categoria] += Math.abs(item.valor);
+      categorias[categoriaKey] += Math.abs(item.valor);
     }
   });
   

src/types/financialTypes.ts

@@ -7,7 +7,7 @@ export interface Transaction {
   quando: string;
   detalhes: string;
   estabelecimento: string;
-  tipo: 'entrada' | 'saida';
+  tipo: string;
   categoria: string;
 }