ajuste na tabela

src/app/DRE/page.tsx

@@ -2,9 +2,7 @@ import Teste from './teste';
 
 export default function DrePage() {
   return (
-    <div className="flex flex-col items-center justify-center gap-2 max-w-10/12 mx-auto">
+    <div className="w-full min-h-screen p-4">
-      <h1>DRE-GERENCIAL</h1>
-
       <Teste />
     </div>
   );

src/app/DRE/teste.tsx

@@ -1,14 +1,7 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
-import {
+// Removed unused table imports
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import { ArrowDown, ArrowUp, ArrowUpDown, BarChart3 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -479,33 +472,24 @@ export default function Teste() {
   }
 
   const hierarchicalData = buildHierarchicalData();
-  const totalGeral = data.reduce(
-    (sum, item) => sum + parseFloat(item.valor),
-    0
-  );
 
   return (
-    <div className="p-6">
+    <div className="w-full flex flex-col items-center">
-      <div className="mb-6">
+      <div className="mb-2">
-        <h1 className="text-2xl font-bold mb-2">DRE Gerencial - Hierárquica</h1>
+        <h1 className="text-lg font-bold mb-2">DRE Gerencial</h1>
-        <div className="p-4 bg-muted rounded-lg">
-          <h3 className="text-lg font-semibold">
-            Total Geral: {formatCurrency(totalGeral)}
-          </h3>
-        </div>
       </div>
 
-      <div className="max-h-[400px] overflow-y-auto border rounded-md relative">
+      <div className="w-[95%] max-h-[400px] overflow-y-auto border rounded-md relative">
         {/* Header fixo separado */}
         <div
           className="sticky top-0 z-30 border-b shadow-sm"
           style={{ backgroundColor: 'white', opacity: 1 }}
         >
           <div
-            className="flex items-center p-4 font-semibold"
+            className="flex p-3 font-semibold text-xs"
             style={{ backgroundColor: 'white', opacity: 1 }}
           >
-            <div className="flex-1 min-w-[200px]">
+            <div className="flex-1 min-w-[200px] max-w-[300px]">
               <Button
                 variant="ghost"
                 onClick={() => handleSort('descricao')}
@@ -516,11 +500,14 @@ export default function Teste() {
               </Button>
             </div>
             {mesesDisponiveis.map((mes) => (
-              <div key={mes} className="w-24 text-right px-2">
+              <div
+                key={mes}
+                className="flex-1 min-w-[120px] max-w-[150px] text-right px-2"
+              >
                 {mes}
               </div>
             ))}
-            <div className="w-24 text-right px-2">
+            <div className="flex-1 min-w-[120px] max-w-[150px] text-right px-2">
               <Button
                 variant="ghost"
                 onClick={() => handleSort('valor')}
@@ -533,42 +520,31 @@ export default function Teste() {
           </div>
         </div>
 
-        <Table>
+        <div className="flex flex-col">
-          <TableHeader className="hidden">
-            <TableRow>
-              <TableHead></TableHead>
-              {mesesDisponiveis.map((mes) => (
-                <TableHead key={mes}></TableHead>
-              ))}
-              <TableHead></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
           {hierarchicalData.map((row, index) => (
-              <TableRow key={index} className={getRowStyle(row)}>
+            <div key={index} className={`flex ${getRowStyle(row)}`}>
-                <TableCell
+              <div
-                  className="flex-1 min-w-[200px]"
+                className="flex-1 min-w-[200px] max-w-[300px] p-1 border-b text-xs"
                 style={getIndentStyle(row.level)}
               >
                 {renderCellContent(row)}
-                </TableCell>
+              </div>
               {mesesDisponiveis.map((mes) => (
-                  <TableCell
+                <div
                   key={mes}
-                    className="w-24 text-right font-medium px-2"
+                  className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs"
                 >
                   {row.valoresPorMes && row.valoresPorMes[mes]
                     ? formatCurrency(row.valoresPorMes[mes])
                     : '-'}
-                  </TableCell>
+                </div>
               ))}
-                <TableCell className="w-24 text-right font-medium px-2">
+              <div className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs">
                 {formatCurrency(row.total!)}
-                </TableCell>
+              </div>
-              </TableRow>
+            </div>
           ))}
-          </TableBody>
+        </div>
-        </Table>
       </div>
     </div>
   );