diff --git a/package-lock.json b/package-lock.json
index 7e99986..ec0efb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "dre-gerencial",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-select": "^2.2.6",
@@ -1536,6 +1537,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
diff --git a/package.json b/package.json
index a5a9ebb..e9dd4d8 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
diff --git a/src/app/DRE/analitico.tsx b/src/app/DRE/analitico.tsx
index ef6d98f..28595ad 100644
--- a/src/app/DRE/analitico.tsx
+++ b/src/app/DRE/analitico.tsx
@@ -7,6 +7,7 @@ import {
   getSortedRowModel,
   getFilteredRowModel,
   ColumnFiltersState,
+  ColumnSizingState,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Input } from "@/components/ui/input";
@@ -67,6 +68,7 @@ interface AnaliticoProps {
     codigoGrupo?: string;
     codigoSubgrupo?: string;
     codigoConta?: string;
+    linhaSelecionada?: string; // Adicionar propriedade para linha selecionada
   };
 }
 
@@ -75,6 +77,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
   const [loading, setLoading] = React.useState(false);
   const [globalFilter, setGlobalFilter] = React.useState("");
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({});
   const [open, setOpen] = React.useState(false);
   const [conditions, setConditions] = React.useState([
     { column: "", operator: "contains", value: "" },
@@ -88,6 +91,14 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
     console.log('🔄 Analítico - useEffect dos filtros chamado');
     console.log('📋 Filtros recebidos via props:', filtros);
     console.log('📋 Filtros externos atuais:', filtrosExternos);
+    console.log('🔍 Detalhes dos filtros:', {
+      dataInicio: filtros.dataInicio,
+      dataFim: filtros.dataFim,
+      centroCusto: filtros.centroCusto,
+      codigoGrupo: filtros.codigoGrupo,
+      codigoConta: filtros.codigoConta,
+      linhaSelecionada: filtros.linhaSelecionada
+    });
     setFiltrosExternos(filtros);
   }, [filtros, filtrosExternos]);
 
@@ -125,6 +136,13 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
 
       const url = `/api/analitico-oracle?${params.toString()}`;
       console.log('🌐 Fazendo requisição para:', url);
+      console.log('📋 Parâmetros enviados:', {
+        dataInicio: filtrosExternos.dataInicio,
+        dataFim: filtrosExternos.dataFim,
+        centroCusto: filtrosExternos.centroCusto,
+        codigoGrupo: filtrosExternos.codigoGrupo,
+        codigoConta: filtrosExternos.codigoConta
+      });
       
       const response = await fetch(url);
       if (response.ok) {
@@ -153,6 +171,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "data_vencimento",
         header: "Data de Vencimento",
         filterFn: "advancedText",
+        size: 140,
+        minSize: 100,
+        maxSize: 200,
         cell: ({ getValue }: { getValue: () => string }) => {
           const value = getValue();
           return new Date(value).toLocaleDateString("pt-BR");
@@ -162,6 +183,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "data_caixa",
         header: "Data de Caixa",
         filterFn: "advancedText",
+        size: 120,
+        minSize: 100,
+        maxSize: 180,
         cell: ({ getValue }: { getValue: () => string }) => {
           const value = getValue();
           return new Date(value).toLocaleDateString("pt-BR");
@@ -171,6 +195,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "entidade",
         header: "Entidade",
         filterFn: "advancedText",
+        size: 120,
+        minSize: 80,
+        maxSize: 200,
         cell: ({ getValue }: { getValue: () => string }) => {
           const value = getValue();
           return value || "-";
@@ -180,31 +207,49 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "codigo_fornecedor",
         header: "Código do Fornecedor",
         filterFn: "advancedText",
+        size: 120,
+        minSize: 100,
+        maxSize: 150,
       },
       {
         accessorKey: "nome_fornecedor",
         header: "Nome do Fornecedor",
         filterFn: "advancedText",
+        size: 220,
+        minSize: 150,
+        maxSize: 400,
       },
       {
         accessorKey: "codigo_centrocusto",
         header: "Centro de Custo",
         filterFn: "advancedText",
+        size: 140,
+        minSize: 100,
+        maxSize: 200,
       },
       {
         accessorKey: "codigo_conta",
         header: "Código da Conta",
         filterFn: "advancedText",
+        size: 130,
+        minSize: 100,
+        maxSize: 180,
       },
       {
         accessorKey: "conta",
         header: "Nome da Conta",
         filterFn: "advancedText",
+        size: 160,
+        minSize: 120,
+        maxSize: 300,
       },
       {
         accessorKey: "valor",
         header: "Valor Realizado",
         filterFn: "advancedText",
+        size: 130,
+        minSize: 100,
+        maxSize: 200,
         cell: ({ getValue }: { getValue: () => number }) => {
           const value = getValue();
           const formatted = new Intl.NumberFormat("pt-BR", {
@@ -223,6 +268,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "valor_previsto",
         header: "Valor Previsto",
         filterFn: "advancedText",
+        size: 120,
+        minSize: 100,
+        maxSize: 180,
         cell: ({ getValue }: { getValue: () => number }) => {
           const value = getValue();
           if (!value || value === 0) return "-";
@@ -242,6 +290,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "valor_confirmado",
         header: "Valor Confirmado",
         filterFn: "advancedText",
+        size: 130,
+        minSize: 100,
+        maxSize: 200,
         cell: ({ getValue }: { getValue: () => number }) => {
           const value = getValue();
           if (!value || value === 0) return "-";
@@ -261,6 +312,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "valor_pago",
         header: "Valor Pago",
         filterFn: "advancedText",
+        size: 140,
+        minSize: 100,
+        maxSize: 200,
         cell: ({ getValue }: { getValue: () => number }) => {
           const value = getValue();
           if (!value || value === 0) return "-";
@@ -280,16 +334,25 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
         accessorKey: "historico",
         header: "Histórico",
         filterFn: "advancedText",
+        size: 320,
+        minSize: 200,
+        maxSize: 500,
       },
       {
         accessorKey: "historico2",
         header: "Histórico 2",
         filterFn: "advancedText",
+        size: 500,
+        minSize: 300,
+        maxSize: 800,
       },
       {
         accessorKey: "numero_lancamento",
         header: "Número do Lançamento",
         filterFn: "advancedText",
+        size: 30,
+        minSize: 20,
+        maxSize: 50,
         cell: ({ getValue }: { getValue: () => number }) => {
           const value = getValue();
           return value || "-";
@@ -341,13 +404,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
   const table = useReactTable({
     data,
     columns: columns as any,
-    state: { globalFilter, columnFilters },
+    state: { globalFilter, columnFilters, columnSizing },
     onGlobalFilterChange: setGlobalFilter,
     onColumnFiltersChange: setColumnFilters,
+    onColumnSizingChange: setColumnSizing,
     filterFns,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange',
   });
 
   const parentRef = React.useRef<HTMLDivElement>(null);
@@ -542,39 +608,70 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
   };
 
   return (
-    <div className="w-full max-w-none mx-auto p-6">
+    <div className="w-full max-w-none mx-auto p-2">
       {/* Header Section */}
-      <div className="mb-6">
-        <div className="flex items-center gap-3 mb-4">
-          {/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
-            <svg
-              className="w-7 h-7 text-white"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-              />
-            </svg>
-          </div> */}
+      <div className="mb-2">
+        <div className="flex items-center justify-between mb-1">
           <div>
             <h1 className="text-2xl font-bold text-gray-900">
-              Análise Analítica
+              Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""}
             </h1>
             <p className="text-sm text-gray-500">
               Relatório detalhado de transações
             </p>
           </div>
-        </div>
+          
+          {/* Controls */}
+          <div className="flex gap-2 flex-wrap">
+            <Input
+              placeholder="Filtrar tudo..."
+              value={globalFilter ?? ""}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setGlobalFilter(e.target.value)
+              }
+              className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+            />
+            <Button
+              variant="outline"
+              onClick={() => setOpen(true)}
+              className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
+            >
+              <Filter className="w-4 h-4 mr-2" />
+              Filtros Avançados
+              {columnFilters.length > 0 && (
+                <span className="ml-2 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
+                  {columnFilters.length}
+                </span>
+              )}
+            </Button>
+            {(columnFilters.length > 0 || globalFilter) && (
+              <Button
+                variant="outline"
+                onClick={clearFilters}
+                className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
+              >
+                <X className="w-4 h-4 mr-2" />
+                Limpar Filtros Avançados
+              </Button>
+            )}
+        {data.length > 0 && (
+          <Button
+            onClick={exportToExcel}
+            variant="outline"
+            size="sm"
+                className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700"
+          >
+            <Download className="h-4 w-4" />
+            Exportar XLSX
+          </Button>
+        )}
+          </div>
+      </div>
 
         {/* Filtros Externos Ativos */}
         {(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
-          <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
-            <div className="flex items-center gap-2 mb-2">
+          <div className="mb-2 p-2 bg-transparent border-transparent rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
               <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
               <span className="text-sm font-medium text-blue-900">Filtros aplicados pela tabela DRE Gerencial:</span>
             </div>
@@ -582,72 +679,27 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
               {filtrosExternos.dataInicio && filtrosExternos.dataFim && (
                 <span className="px-2 py-1 bg-blue-100 rounded">
                   Período: {filtrosExternos.dataInicio} a {filtrosExternos.dataFim}
-                </span>
-              )}
+              </span>
+            )}
               {filtrosExternos.centroCusto && (
                 <span className="px-2 py-1 bg-blue-100 rounded">
                   Centro: {filtrosExternos.centroCusto}
-                </span>
-              )}
+              </span>
+            )}
               {filtrosExternos.codigoGrupo && (
                 <span className="px-2 py-1 bg-blue-100 rounded">
                   Grupo: {filtrosExternos.codigoGrupo}
-                </span>
-              )}
+              </span>
+            )}
               {filtrosExternos.codigoConta && (
                 <span className="px-2 py-1 bg-blue-100 rounded">
                   Conta: {filtrosExternos.codigoConta}
-                </span>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Controls */}
-        <div className="flex gap-3 flex-wrap">
-          <Input
-            placeholder="Filtrar tudo..."
-            value={globalFilter ?? ""}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setGlobalFilter(e.target.value)
-            }
-            className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-          />
-          <Button
-            variant="outline"
-            onClick={() => setOpen(true)}
-            className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
-          >
-            <Filter className="w-4 h-4 mr-2" />
-            Filtros Avançados
-            {columnFilters.length > 0 && (
-              <span className="ml-2 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
-                {columnFilters.length}
               </span>
             )}
-          </Button>
-          {(columnFilters.length > 0 || globalFilter) && (
-            <Button
-              variant="outline"
-              onClick={clearFilters}
-              className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
-            >
-              <X className="w-4 h-4 mr-2" />
-              Limpar Filtros Avançados
-            </Button>
-          )}
-        {data.length > 0 && (
-          <Button
-            onClick={exportToExcel}
-            variant="outline"
-            size="sm"
-              className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700"
-          >
-            <Download className="h-4 w-4" />
-            Exportar XLSX
-          </Button>
-        )}
+          </div>
         </div>
+        )}
+
       </div>
 
       {/* Table Container */}
@@ -656,38 +708,28 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
           {/* Table Header */}
           <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
             <div className="flex items-center px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
-              <div className="w-[140px] whitespace-nowrap">
-                Data de Vencimento
-              </div>
-              <div className="w-[120px] whitespace-nowrap">Data de Caixa</div>
-              <div className="w-[120px] whitespace-nowrap">Entidade</div>
-              <div className="w-[120px] whitespace-nowrap">
-                Cód. Fornec
-              </div>
-              <div className="w-[220px] whitespace-nowrap">
-                Nome do Fornecedor
-              </div>
-              <div className="w-[140px] whitespace-nowrap">Centro de Custo</div>
-              <div className="w-[130px] whitespace-nowrap">Código da Conta</div>
-              <div className="w-[160px] whitespace-nowrap">Nome da Conta</div>
-              <div className="w-[130px] whitespace-nowrap text-right">
-                Valor Realizado
-              </div>
-              <div className="w-[120px] whitespace-nowrap text-right">
-                Valor Previsto
-              </div>
-              <div className="w-[130px] whitespace-nowrap text-right">
-                Valor Confirmado
-              </div>
-              <div className="w-[140px] whitespace-nowrap text-right">
-                Valor Pago
-              </div>
-              <div className="w-[20px] whitespace-nowrap"></div>
-              <div className="w-[320px] whitespace-nowrap">Histórico</div>
-              <div className="w-[500px] whitespace-nowrap">Histórico 2</div>
-              <div className="w-[30px] whitespace-nowrap">
-                Número do Lançamento
-              </div>
+              {table.getHeaderGroups().map(headerGroup => (
+                headerGroup.headers.map(header => (
+                  <div
+                    key={header.id}
+                    className="whitespace-nowrap flex items-center"
+                    style={{ width: header.getSize() }}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <div className="flex items-center gap-2 w-full">
+                        <span>{String(header.column.columnDef.header)}</span>
+                        {header.column.getCanResize() && (
+                          <div
+                            className="w-1 h-6 bg-gray-300 hover:bg-blue-500 cursor-col-resize"
+                            onMouseDown={header.getResizeHandler()}
+                            onTouchStart={header.getResizeHandler()}
+                          />
+                        )}
+            </div>
+                    )}
+            </div>
+                ))
+              ))}
           </div>
         </div>
 
@@ -700,13 +742,13 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
               scrollbarColor: "#cbd5e0 #f7fafc",
             }}
           >
-            {loading ? (
+          {loading ? (
               <div className="flex items-center justify-center h-64">
                 <div className="text-center">
                   <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
                   <p className="text-gray-500">Carregando dados...</p>
-                </div>
-              </div>
+            </div>
+            </div>
             ) : virtualRows.length === 0 ? (
               <div className="flex items-center justify-center h-64">
                 <div className="text-center">
@@ -724,11 +766,11 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
                         d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                       />
                     </svg>
-                  </div>
+                </div>
                   <p className="text-gray-500">Nenhum dado encontrado</p>
                 </div>
-              </div>
-            ) : (
+                </div>
+          ) : (
               <div
                 className="relative"
                 style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
@@ -741,189 +783,101 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
                       className="absolute top-0 left-0 w-full flex items-center px-4 py-3 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors"
                       style={{ transform: `translateY(${virtualRow.start}px)` }}
                     >
-                      <div className="w-[140px] text-gray-600 whitespace-nowrap">
-                        {new Date(
-                          row.original.data_vencimento
-                        ).toLocaleDateString("pt-BR")}
-            </div>
-                      <div className="w-[120px] text-gray-600 whitespace-nowrap">
-                        {new Date(row.original.data_caixa).toLocaleDateString(
-                          "pt-BR"
-                        )}
-            </div>
-                      <div className="w-[120px] text-gray-500 whitespace-nowrap">
-                        {row.original.entidade || "-"}
-            </div>
-                      <div className="w-[120px] font-medium text-gray-900 whitespace-nowrap">
-                        {row.original.codigo_fornecedor}
-            </div>
-                      <div
-                        className="w-[220px] text-gray-700 truncate"
-                        title={row.original.nome_fornecedor}
-                      >
-                        {row.original.nome_fornecedor}
-            </div>
-                      <div className="w-[140px] text-gray-600 whitespace-nowrap">
-                        {row.original.codigo_centrocusto}
-            </div>
-                      <div className="w-[130px] text-gray-600 whitespace-nowrap">
-                        {row.original.codigo_conta}
-            </div>
-                      <div
-                        className="w-[160px] text-gray-700 truncate"
-                        title={row.original.conta}
-                      >
-                        {row.original.conta}
-            </div>
-                      <div
-                        className={`w-[130px] text-right font-semibold whitespace-nowrap ${
-                          row.original.valor < 0
-                            ? "text-red-600"
-                            : "text-gray-900"
-                        }`}
-                      >
-                        {new Intl.NumberFormat("pt-BR", {
-                          style: "currency",
-                          currency: "BRL",
-                        }).format(row.original.valor)}
-            </div>
-                      <div className="w-[120px] text-right whitespace-nowrap">
-                        {row.original.valor_previsto && row.original.valor_previsto !== 0 ? (
-                          <span className={`font-semibold ${
-                            row.original.valor_previsto < 0 ? "text-red-600" : "text-gray-900"
-                          }`}>
-                            {new Intl.NumberFormat("pt-BR", {
-                              style: "currency",
-                              currency: "BRL",
-                            }).format(row.original.valor_previsto)}
-                          </span>
-                        ) : (
-                          <span className="text-gray-500">-</span>
-                        )}
-          </div>
-                      <div className="w-[130px] text-right whitespace-nowrap">
-                        {row.original.valor_confirmado && row.original.valor_confirmado !== 0 ? (
-                          <span className={`font-semibold ${
-                            row.original.valor_confirmado < 0 ? "text-red-600" : "text-gray-900"
-                          }`}>
-                            {new Intl.NumberFormat("pt-BR", {
-                              style: "currency",
-                              currency: "BRL",
-                            }).format(row.original.valor_confirmado)}
-                          </span>
-                        ) : (
-                          <span className="text-gray-500">-</span>
-                        )}
-        </div>
-                      <div className="w-[140px] text-right whitespace-nowrap">
-                        {row.original.valor_pago && row.original.valor_pago !== 0 ? (
-                          <span className={`font-semibold ${
-                            row.original.valor_pago < 0 ? "text-red-600" : "text-gray-900"
-                          }`}>
-                            {new Intl.NumberFormat("pt-BR", {
-                              style: "currency",
-                              currency: "BRL",
-                            }).format(row.original.valor_pago)}
-                          </span>
-                        ) : (
-                          <span className="text-gray-500">-</span>
-                        )}
-                </div>
-                      <div className="w-[20px] whitespace-nowrap"></div>
-                      <div
-                        className="w-[320px] text-gray-700 truncate"
-                        title={row.original.historico}
-                      >
-                        {row.original.historico}
-                </div>
-                      <div
-                        className="w-[500px] text-gray-700 truncate"
-                        title={row.original.historico2}
-                      >
-                        {row.original.historico2}
-                </div>
-                      <div className="w-[30px] text-gray-500 whitespace-nowrap">
-                        {row.original.numero_lancamento || "-"}
+                      {row.getVisibleCells().map(cell => (
+                        <div
+                          key={cell.id}
+                          className="whitespace-nowrap overflow-hidden"
+                          style={{ width: cell.column.getSize() }}
+                        >
+                          {String(cell.renderValue() || '')}
                 </div>
+                      ))}
                 </div>
                   );
                 })}
                 </div>
-            )}
+          )}
                 </div>
 
           {/* Footer com Totalizador das Colunas */}
           {data.length > 0 && (
             <div className="bg-gradient-to-r from-gray-50 to-gray-100 border-t border-gray-200 sticky bottom-0 z-10">
               <div className="flex items-center px-4 py-3 text-sm font-semibold text-gray-900">
-                <div className="w-[140px] whitespace-nowrap text-gray-600">
-                  TOTAL: {table.getRowModel().rows.length} registros
-                </div>
-                <div className="w-[120px] whitespace-nowrap"></div>
-                <div className="w-[120px] whitespace-nowrap"></div>
-                <div className="w-[120px] whitespace-nowrap"></div>
-                <div className="w-[220px] whitespace-nowrap"></div>
-                <div className="w-[140px] whitespace-nowrap"></div>
-                <div className="w-[130px] whitespace-nowrap"></div>
-                <div className="w-[160px] whitespace-nowrap"></div>
-                <div
-                  className={`w-[130px] text-right font-bold whitespace-nowrap ${
-                    columnTotals.valorRealizado < 0
-                      ? "text-red-600"
-                      : "text-green-600"
-                  }`}
-                >
-                  {new Intl.NumberFormat("pt-BR", {
-                    style: "currency",
-                    currency: "BRL",
-                  }).format(columnTotals.valorRealizado)}
-                </div>
-                <div className="w-[120px] text-right whitespace-nowrap">
-                  {columnTotals.valorPrevisto !== 0 ? (
-                    <span className={`font-bold ${
-                      columnTotals.valorPrevisto < 0 ? "text-red-600" : "text-green-600"
-                    }`}>
-                      {new Intl.NumberFormat("pt-BR", {
-                        style: "currency",
-                        currency: "BRL",
-                      }).format(columnTotals.valorPrevisto)}
+                {table.getHeaderGroups().map(headerGroup => (
+                  headerGroup.headers.map((header, index) => (
+                    <div
+                      key={header.id}
+                      className="whitespace-nowrap"
+                      style={{ width: header.getSize() }}
+                    >
+                      {index === 0 && (
+                        <span className="text-gray-600">
+                          TOTAL: {table.getRowModel().rows.length} registros
+                        </span>
+                      )}
+                      {index === 8 && (
+                        <span className={`text-right font-bold ${
+                          columnTotals.valorRealizado < 0
+                            ? "text-red-600"
+                            : "text-green-600"
+                        }`}>
+                          {new Intl.NumberFormat("pt-BR", {
+                            style: "currency",
+                            currency: "BRL",
+                          }).format(columnTotals.valorRealizado)}
+                        </span>
+                      )}
+                      {index === 9 && (
+                        <span className="text-right">
+                          {columnTotals.valorPrevisto !== 0 ? (
+                            <span className={`font-bold ${
+                              columnTotals.valorPrevisto < 0 ? "text-red-600" : "text-green-600"
+                            }`}>
+                              {new Intl.NumberFormat("pt-BR", {
+                                style: "currency",
+                                currency: "BRL",
+                              }).format(columnTotals.valorPrevisto)}
+                            </span>
+                          ) : (
+                            <span className="text-gray-500">-</span>
+                          )}
+                        </span>
+                      )}
+                      {index === 10 && (
+                        <span className="text-right">
+                          {columnTotals.valorConfirmado !== 0 ? (
+                            <span className={`font-bold ${
+                              columnTotals.valorConfirmado < 0 ? "text-red-600" : "text-green-600"
+                            }`}>
+                              {new Intl.NumberFormat("pt-BR", {
+                                style: "currency",
+                                currency: "BRL",
+                              }).format(columnTotals.valorConfirmado)}
+                            </span>
+                          ) : (
+                            <span className="text-gray-500">-</span>
+                          )}
+                        </span>
+                      )}
+                      {index === 11 && (
+                        <span className="text-right">
+                          {columnTotals.valorPago !== 0 ? (
+                            <span className={`font-bold ${
+                              columnTotals.valorPago < 0 ? "text-red-600" : "text-green-600"
+                            }`}>
+                              {new Intl.NumberFormat("pt-BR", {
+                                style: "currency",
+                                currency: "BRL",
+                              }).format(columnTotals.valorPago)}
+                            </span>
+                          ) : (
+                            <span className="text-gray-500">-</span>
+                          )}
                       </span>
-                  ) : (
-                    <span className="text-gray-500">-</span>
-                  )}
+                      )}
                 </div>
-                <div className="w-[130px] text-right whitespace-nowrap">
-                  {columnTotals.valorConfirmado !== 0 ? (
-                    <span className={`font-bold ${
-                      columnTotals.valorConfirmado < 0 ? "text-red-600" : "text-green-600"
-                    }`}>
-                      {new Intl.NumberFormat("pt-BR", {
-                        style: "currency",
-                        currency: "BRL",
-                      }).format(columnTotals.valorConfirmado)}
-                      </span>
-                  ) : (
-                    <span className="text-gray-500">-</span>
-                  )}
-                </div>
-                <div className="w-[140px] text-right whitespace-nowrap">
-                  {columnTotals.valorPago !== 0 ? (
-                    <span className={`font-bold ${
-                      columnTotals.valorPago < 0 ? "text-red-600" : "text-green-600"
-                    }`}>
-                      {new Intl.NumberFormat("pt-BR", {
-                        style: "currency",
-                        currency: "BRL",
-                      }).format(columnTotals.valorPago)}
-                    </span>
-                  ) : (
-                    <span className="text-gray-500">-</span>
-                  )}
-                </div>
-                <div className="w-[20px] whitespace-nowrap"></div>
-                <div className="w-[320px] whitespace-nowrap"></div>
-                <div className="w-[500px] whitespace-nowrap"></div>
-                <div className="w-[30px] whitespace-nowrap"></div>
+                  ))
+                ))}
                 </div>
               </div>
           )}
@@ -987,7 +941,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
             {conditions.map((cond, idx) => (
               <div
                 key={idx}
-                className="flex gap-3 items-start p-4 bg-gray-50 rounded-lg border border-gray-200"
+                className="flex gap-2 items-start p-2 bg-gray-50 rounded-lg border border-gray-200"
               >
                 <div className="flex-1">
                   <label className="block text-sm font-medium text-gray-700 mb-1">
@@ -1100,7 +1054,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
             </div>
           </div>
 
-          <DialogFooter className="flex gap-3 pt-6 border-t border-gray-200">
+          <DialogFooter className="flex gap-2 pt-3 border-t border-gray-200">
             <Button
               variant="outline"
               onClick={clearFilters}
diff --git a/src/app/DRE/teste.tsx b/src/app/DRE/teste.tsx
index f3fd760..a0bfa35 100644
--- a/src/app/DRE/teste.tsx
+++ b/src/app/DRE/teste.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import { LoaderPinwheel, ChevronDown, ChevronRight, Filter } from "lucide-react";
-import { useEffect, useState } from "react";
+import { LoaderPinwheel, ChevronDown, ChevronRight, Filter, Maximize2, Minimize2, Download } from "lucide-react";
+import React, { useEffect, useState, useCallback, startTransition, memo } from "react";
 import AnaliticoComponent from "./analitico";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import * as XLSX from "xlsx";
 import {
   Sheet,
   SheetContent,
@@ -30,6 +32,7 @@ interface DREItem {
   grupo: string;
   subgrupo: string;
   centro_custo: string;
+  codigo_centro_custo: string;
   codigo_conta: number;
   conta: string;
   valor: string;
@@ -43,6 +46,7 @@ interface HierarchicalRow {
   grupo?: string;
   subgrupo?: string;
   centro_custo?: string;
+  codigo_centro_custo?: string;
   conta?: string;
   codigo_conta?: number;
   total?: number;
@@ -52,14 +56,126 @@ interface HierarchicalRow {
   isCalculado?: boolean;
 }
 
+// Componente memoizado para linhas da tabela
+const TableRow = memo(({ 
+  row, 
+  index, 
+  toggleGroup, 
+  toggleCentro, 
+  handleRowClick, 
+  getRowStyle, 
+  getIndentStyle, 
+  renderCellContent,
+  mesesDisponiveis,
+  formatCurrency,
+  formatCurrencyWithColor
+}: {
+  row: HierarchicalRow;
+  index: number;
+  toggleGroup: (grupo: string) => void;
+  toggleCentro: (centro: string) => void;
+  handleRowClick: (row: HierarchicalRow, mes?: string) => void;
+  getRowStyle: (row: HierarchicalRow) => string;
+  getIndentStyle: (level: number) => React.CSSProperties;
+  renderCellContent: (row: HierarchicalRow) => React.ReactNode;
+  mesesDisponiveis: string[];
+  formatCurrency: (value: number) => string;
+  formatCurrencyWithColor: (value: number) => { formatted: string; isNegative: boolean };
+}) => {
+  return (
+    <div
+      key={index}
+      className={`flex items-center gap-2 px-4 py-1 text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(
+        row
+      )}`}
+    >
+      <div
+        className="flex-1 min-w-[300px] max-w-[400px] whitespace-nowrap overflow-hidden"
+        style={getIndentStyle(row.level)}
+      >
+        {renderCellContent(row)}
+      </div>
+      
+      {/* Colunas de valores por mês */}
+      {mesesDisponiveis.map((mes) => (
+        <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
+          <div
+            className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
+            onClick={() => handleRowClick(row, mes)}
+            title={
+              row.valoresPorMes && row.valoresPorMes[mes]
+                ? formatCurrency(row.valoresPorMes[mes])
+                : "-"
+            }
+          >
+            {row.valoresPorMes && row.valoresPorMes[mes]
+              ? (() => {
+                  const { formatted, isNegative } =
+                    formatCurrencyWithColor(row.valoresPorMes[mes]);
+                  return (
+                    <span
+                      className={
+                        isNegative
+                          ? "text-red-600 font-bold"
+                          : "text-gray-900"
+                      }
+                    >
+                      {formatted}
+                    </span>
+                  );
+                })()
+              : "-"}
+          </div>
+          <div
+            className="flex-1 min-w-[100px] text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
+            onClick={() => handleRowClick(row, mes)}
+            title={
+              row.percentuaisPorMes &&
+              row.percentuaisPorMes[mes] !== undefined
+                ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
+                : "-"
+            }
+          >
+            {row.percentuaisPorMes &&
+            row.percentuaisPorMes[mes] !== undefined
+              ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
+              : "-"}
+          </div>
+        </div>
+      ))}
+      
+      {/* Coluna Total */}
+      <div
+        className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
+        onClick={() => handleRowClick(row)}
+        title={row.total ? formatCurrency(row.total) : "-"}
+      >
+        {(() => {
+          const { formatted, isNegative } = formatCurrencyWithColor(
+            row.total!
+          );
+          return (
+            <span
+              className={
+                isNegative ? "text-red-600 font-bold" : "text-gray-900"
+              }
+            >
+              {formatted}
+            </span>
+          );
+        })()}
+      </div>
+    </div>
+  );
+});
+
+TableRow.displayName = 'TableRow';
+
 export default function Teste() {
   const [data, setData] = useState<DREItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
-  const [expandedSubgrupos, setExpandedSubgrupos] = useState<Set<string>>(
-    new Set()
-  );
   const [expandedCentros, setExpandedCentros] = useState<Set<string>>(
     new Set()
   );
@@ -77,9 +193,18 @@ export default function Teste() {
     valorMax: "",
     buscaTextual: ""
   });
+  
+  // Estados para multi-seleção
+  const [centrosCustoSelecionados, setCentrosCustoSelecionados] = useState<string[]>([]);
+  // Estado para armazenar os códigos dos centros de custo
+  const [codigosCentrosCusto, setCodigosCentrosCusto] = useState<Record<string, string>>({});
+  const [contasSelecionadas, setContasSelecionadas] = useState<string[]>([]);
+  // Estado para armazenar os códigos das contas
+  const [codigosContas, setCodigosContas] = useState<Record<string, string>>({});
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [dadosFiltrados, setDadosFiltrados] = useState<DREItem[]>([]);
   const [filtrosAplicados, setFiltrosAplicados] = useState(false);
+  const [ordemHierarquiaContasPrimeiro, setOrdemHierarquiaContasPrimeiro] = useState(true);
   
   // Estados para opções dos filtros
   const [opcoesGrupos, setOpcoesGrupos] = useState<string[]>([]);
@@ -95,8 +220,10 @@ export default function Teste() {
     codigoGrupo: "",
     codigoSubgrupo: "",
     codigoConta: "",
+    linhaSelecionada: "", // Adicionar informação da linha selecionada
   });
   const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
+  const [isAllExpanded, setIsAllExpanded] = useState(false);
 
   useEffect(() => {
     // Carregar períodos disponíveis da API
@@ -136,14 +263,43 @@ export default function Teste() {
       const subgruposUnicos = [...new Set(dadosCompletos.map((item: DREItem) => item.subgrupo))].sort() as string[];
       setOpcoesSubgrupos(subgruposUnicos);
       
-      // Extrair centros de custo únicos
+      // Extrair centros de custo únicos com nome e código
       const centrosCustoUnicos = [...new Set(dadosCompletos.map((item: DREItem) => item.centro_custo))].sort() as string[];
-      setOpcoesCentrosCusto(centrosCustoUnicos);
+      
+      // Filtrar centro de custo com código específico
+      const centrosCustoFiltrados = centrosCustoUnicos.filter(centro => {
+        const item = dadosCompletos.find((d: DREItem) => d.centro_custo === centro);
+        return item?.codigo_centro_custo !== "002.003.017";
+      });
+      
+      setOpcoesCentrosCusto(centrosCustoFiltrados);
+      
+      // Criar objeto de códigos dos centros de custo
+      const codigos: Record<string, string> = {};
+      dadosCompletos.forEach((item: DREItem) => {
+        if (item.centro_custo && item.codigo_centro_custo) {
+          codigos[item.centro_custo] = item.codigo_centro_custo;
+        }
+      });
+      setCodigosCentrosCusto(codigos);
       
       // Extrair contas únicas
       const contasUnicas = [...new Set(dadosCompletos.map((item: DREItem) => item.conta))].sort() as string[];
       setOpcoesContas(contasUnicas);
       
+      // Criar objeto de códigos das contas
+      const codigosContasObj: Record<string, string> = {};
+      dadosCompletos.forEach((item: DREItem) => {
+        if (item.conta && item.codigo_conta) {
+          codigosContasObj[item.conta] = item.codigo_conta.toString();
+        }
+      });
+      setCodigosContas(codigosContasObj);
+      
+      // Inicializar com todos os itens selecionados
+      setCentrosCustoSelecionados(centrosCustoUnicos);
+      setContasSelecionadas(contasUnicas);
+      
     } catch (error) {
       console.error("Erro ao carregar períodos:", error);
     }
@@ -166,10 +322,8 @@ export default function Teste() {
       const meses = [
         ...new Set(
           result.map((item: DREItem) => {
-            const dataCompetencia = new Date(item.data_competencia);
-            return `${dataCompetencia.getFullYear()}-${String(
-              dataCompetencia.getMonth() + 1
-            ).padStart(2, "0")}`;
+            // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM
+            return item.data_competencia;
           })
         ),
       ].sort() as string[];
@@ -254,48 +408,81 @@ export default function Teste() {
     const dataInicioFiltro = mesSelecionado || dataInicioStr;
     const dataFimFiltro = mesSelecionado || dataFimStr;
 
+    // Determinar filtros baseado na ordem hierárquica e tipo da linha
+    let centroCustoFiltro = "";
+    let codigoContaFiltro = "";
+    
+    if (ordemHierarquiaContasPrimeiro) {
+      // Ordem: Contas → Centros de Custo
+      // SEMPRE filtrar por código da conta, independente do tipo da linha
+      codigoContaFiltro = row.codigo_conta?.toString() || "";
+      // Se for centro de custo, também filtrar por código do centro de custo
+      centroCustoFiltro = row.type === "centro_custo" ? (row.codigo_centro_custo || "") : "";
+    } else {
+      // Ordem: Centros de Custo → Contas
+      // SEMPRE filtrar por código do centro de custo, independente do tipo da linha
+      centroCustoFiltro = row.codigo_centro_custo || "";
+      // Se for conta, também filtrar por código da conta
+      codigoContaFiltro = row.type === "conta" ? (row.codigo_conta?.toString() || "") : "";
+    }
+
+    console.log('🎯 Filtros determinados:', { 
+      centroCustoFiltro, 
+      codigoContaFiltro, 
+      ordemHierarquia: ordemHierarquiaContasPrimeiro ? 'Contas→Centros' : 'Centros→Contas',
+      tipoLinha: row.type,
+      rowData: {
+        codigo_conta: row.codigo_conta,
+        codigo_centro_custo: row.codigo_centro_custo,
+        centro_custo: row.centro_custo,
+        conta: row.conta
+      }
+    });
+
     const novosFiltros = {
       dataInicio: dataInicioFiltro,
       dataFim: dataFimFiltro,
-      centroCusto: row.centro_custo || "",
+      centroCusto: centroCustoFiltro,
       codigoGrupo,
       codigoSubgrupo,
-      codigoConta: row.codigo_conta?.toString() || "",
+      codigoConta: codigoContaFiltro,
+      linhaSelecionada: row.grupo || row.subgrupo || row.centro_custo || row.conta || "", // Incluir informação da linha selecionada
     };
 
     console.log('🎯 Novos filtros para analítico:', novosFiltros);
+    console.log('🔍 Verificação final dos filtros:', {
+      centroCusto: novosFiltros.centroCusto,
+      codigoConta: novosFiltros.codigoConta,
+      codigoContaType: typeof novosFiltros.codigoConta,
+      codigoContaLength: novosFiltros.codigoConta?.length
+    });
     setAnaliticoFiltros(novosFiltros);
   };
 
-  const toggleGroup = (grupo: string) => {
-    const newExpanded = new Set(expandedGroups);
+  const toggleGroup = useCallback((grupo: string) => {
+    setExpandedGroups(prev => {
+      const newExpanded = new Set(prev);
     if (newExpanded.has(grupo)) {
       newExpanded.delete(grupo);
     } else {
       newExpanded.add(grupo);
     }
-    setExpandedGroups(newExpanded);
-  };
+      return newExpanded;
+    });
+  }, []);
 
-  const toggleSubgrupo = (subgrupo: string) => {
-    const newExpanded = new Set(expandedSubgrupos);
-    if (newExpanded.has(subgrupo)) {
-      newExpanded.delete(subgrupo);
-    } else {
-      newExpanded.add(subgrupo);
-    }
-    setExpandedSubgrupos(newExpanded);
-  };
 
-  const toggleCentro = (centro: string) => {
-    const newExpanded = new Set(expandedCentros);
+  const toggleCentro = useCallback((centro: string) => {
+    setExpandedCentros(prev => {
+      const newExpanded = new Set(prev);
     if (newExpanded.has(centro)) {
       newExpanded.delete(centro);
     } else {
       newExpanded.add(centro);
     }
-    setExpandedCentros(newExpanded);
-  };
+      return newExpanded;
+    });
+  }, []);
 
   const handleFiltroChange = (campo: string, valor: string) => {
     setFiltros(prev => ({
@@ -304,6 +491,382 @@ export default function Teste() {
     }));
   };
 
+  // Funções para multi-seleção
+  const toggleCentroCusto = (centro: string) => {
+    setCentrosCustoSelecionados(prev => {
+      if (prev.includes(centro)) {
+        return prev.filter(c => c !== centro);
+    } else {
+        return [...prev, centro];
+      }
+    });
+  };
+
+  const toggleConta = (conta: string) => {
+    setContasSelecionadas(prev => {
+      if (prev.includes(conta)) {
+        return prev.filter(c => c !== conta);
+    } else {
+        return [...prev, conta];
+      }
+    });
+  };
+
+  const selecionarTodosCentros = () => {
+    setCentrosCustoSelecionados(opcoesCentrosCusto);
+  };
+
+  const limparCentros = () => {
+    setCentrosCustoSelecionados([]);
+  };
+
+  const selecionarTodasContas = () => {
+    setContasSelecionadas(opcoesContas);
+  };
+
+  const limparContas = () => {
+    setContasSelecionadas([]);
+  };
+
+  // Função auxiliar para obter o código do centro de custo
+  const obterCodigoCentroCusto = React.useCallback((nomeCentro: string): string => {
+    if (!data || data.length === 0) {
+      return '';
+    }
+    
+    // Buscar o primeiro item que corresponde ao nome do centro de custo
+    const item = data.find(item => item.centro_custo === nomeCentro);
+    
+    if (item && item.codigo_centro_custo) {
+      return item.codigo_centro_custo;
+    }
+    
+    return '';
+  }, [data]);
+
+  const exportarXLSX = () => {
+    if (!data.length) {
+      console.log('⚠️ Nenhum dado para exportar');
+      return;
+    }
+
+    console.log('📊 Exportando TODOS os dados expandidos para XLSX...');
+    
+    // Criar uma versão completamente expandida dos dados hierárquicos
+    const dadosCompletosExpandidos = buildHierarchicalDataCompleta();
+    
+    // Preparar dados para exportação
+    const dadosExportacao = dadosCompletosExpandidos.map((row, index) => {
+      const linha: any = {
+        'Linha': index + 1,
+        'Tipo': row.type,
+        'Nível': row.level,
+        'Grupo': row.grupo || '',
+        'Centro de Custo': row.centro_custo || '',
+        'Conta': row.conta || '',
+        'Código Centro': row.codigo_centro_custo || '',
+        'Código Conta': row.codigo_conta || '',
+        'Total': row.total || 0,
+      };
+
+      // Adicionar colunas dos meses
+      mesesDisponiveis.forEach(mes => {
+        const valor = row.valoresPorMes?.[mes] || 0;
+        const percentual = row.percentuaisPorMes?.[mes] || 0;
+        linha[`Valor ${mes}`] = valor;
+        linha[`% ${mes}`] = percentual;
+      });
+
+      return linha;
+    });
+
+    // Criar workbook
+    const wb = XLSX.utils.book_new();
+    
+    // Criar worksheet principal
+    const ws = XLSX.utils.json_to_sheet(dadosExportacao);
+    
+    // Ajustar largura das colunas
+    const colWidths = [
+      { wch: 8 },   // Linha
+      { wch: 15 },  // Tipo
+      { wch: 8 },   // Nível
+      { wch: 30 },  // Grupo
+      { wch: 25 },  // Centro de Custo
+      { wch: 35 },  // Conta
+      { wch: 15 },  // Código Centro
+      { wch: 12 },  // Código Conta
+      { wch: 15 },  // Total
+    ];
+    
+    // Adicionar larguras para colunas dos meses
+    mesesDisponiveis.forEach(() => {
+      colWidths.push({ wch: 15 }); // Valor
+      colWidths.push({ wch: 10 }); // %
+    });
+    
+    ws['!cols'] = colWidths;
+    
+    // Adicionar worksheet ao workbook
+    XLSX.utils.book_append_sheet(wb, ws, 'DRE Gerencial Completo');
+    
+    // Criar worksheet de resumo
+    const resumoData = [
+      { 'Informação': 'Período', 'Valor': `${filtros.periodoDe} a ${filtros.periodoAte}` },
+      { 'Informação': 'Grupo', 'Valor': filtros.grupo },
+      { 'Informação': 'Subgrupo', 'Valor': filtros.subgrupo },
+      { 'Informação': 'Centro de Custo', 'Valor': filtros.centroCusto },
+      { 'Informação': 'Conta', 'Valor': filtros.conta },
+      { 'Informação': 'Valor Mínimo', 'Valor': filtros.valorMin || 'N/A' },
+      { 'Informação': 'Valor Máximo', 'Valor': filtros.valorMax || 'N/A' },
+      { 'Informação': 'Busca Textual', 'Valor': filtros.buscaTextual || 'N/A' },
+      { 'Informação': 'Ordem Hierárquica', 'Valor': ordemHierarquiaContasPrimeiro ? 'Contas → Centros' : 'Centros → Contas' },
+      { 'Informação': 'Total de Registros', 'Valor': dadosCompletosExpandidos.length },
+      { 'Informação': 'Data de Exportação', 'Valor': new Date().toLocaleString('pt-BR') },
+    ];
+    
+    const wsResumo = XLSX.utils.json_to_sheet(resumoData);
+    wsResumo['!cols'] = [{ wch: 20 }, { wch: 30 }];
+    XLSX.utils.book_append_sheet(wb, wsResumo, 'Resumo');
+    
+    // Gerar nome do arquivo
+    const dataAtual = new Date().toISOString().split('T')[0];
+    const nomeArquivo = `DRE_Gerencial_Completo_${dataAtual}.xlsx`;
+    
+    // Exportar arquivo
+    XLSX.writeFile(wb, nomeArquivo);
+    
+    console.log('✅ Arquivo XLSX completo exportado:', nomeArquivo);
+  };
+
+  // Função para construir dados hierárquicos completamente expandidos
+  const buildHierarchicalDataCompleta = (): HierarchicalRow[] => {
+    const rows: HierarchicalRow[] = [];
+
+    // Agrupar dados por grupo
+    const grupos = data.reduce((acc, item) => {
+      if (!acc[item.grupo]) {
+        acc[item.grupo] = [];
+      }
+      acc[item.grupo].push(item);
+      return acc;
+    }, {} as Record<string, DREItem[]>);
+
+    // Ordenar grupos por código
+    const sortedGrupos = Object.entries(grupos).sort(([grupoA, itemsA], [grupoB, itemsB]) => {
+      const codigoA = itemsA[0]?.codgrupo || "";
+      const codigoB = itemsB[0]?.codgrupo || "";
+      return codigoA.localeCompare(codigoB);
+    });
+
+    sortedGrupos.forEach(([grupo, items]) => {
+      const totalGrupo = items.reduce(
+        (sum, item) => sum + parseFloat(item.valor),
+        0
+      );
+
+      // Linha do grupo (Level 0)
+      const valoresGrupoPorMes = calcularValoresPorMes(items);
+      rows.push({
+        type: "grupo",
+        level: 0,
+        grupo,
+        total: totalGrupo,
+        valoresPorMes: valoresGrupoPorMes,
+        percentuaisPorMes: calcularPercentuaisPorMes(valoresGrupoPorMes, grupo),
+        isCalculado: items[0]?.isCalculado || false,
+      });
+
+      if (ordemHierarquiaContasPrimeiro) {
+        // ORDEM: Grupos → Contas → Centros de Custo
+        
+        // Agrupar por conta dentro do grupo
+        const contas = items.reduce((acc, item) => {
+          if (!acc[item.conta]) {
+            acc[item.conta] = [];
+          }
+          acc[item.conta].push(item);
+          return acc;
+        }, {} as Record<string, DREItem[]>);
+
+        // Ordenar contas por CODCONTA
+        const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
+          const codigoA = itemsA[0]?.codigo_conta || 0;
+          const codigoB = itemsB[0]?.codigo_conta || 0;
+          return codigoA - codigoB;
+        });
+
+        sortedContas.forEach(([conta, contaItems]) => {
+          const totalConta = contaItems.reduce(
+            (sum, item) => sum + parseFloat(item.valor),
+            0
+          );
+
+          // Linha da conta (Level 1)
+          const valoresContaPorMes = calcularValoresPorMes(contaItems);
+          rows.push({
+            type: "conta",
+            level: 1,
+            grupo,
+            conta,
+            codigo_conta: contaItems[0].codigo_conta,
+            codigo_centro_custo: contaItems[0].codigo_centro_custo,
+            total: totalConta,
+            valoresPorMes: valoresContaPorMes,
+            percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
+          });
+
+          // Agrupar por centro de custo dentro da conta
+          const centros = contaItems.reduce((acc, item) => {
+            if (!acc[item.centro_custo]) {
+              acc[item.centro_custo] = [];
+            }
+            acc[item.centro_custo].push(item);
+            return acc;
+          }, {} as Record<string, DREItem[]>);
+
+          // Ordenar centros de custo por CODIGOCENTROCUSTO
+          const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
+            const codigoA = itemsA[0]?.codigo_centro_custo || "";
+            const codigoB = itemsB[0]?.codigo_centro_custo || "";
+            return codigoA.localeCompare(codigoB);
+          });
+
+          sortedCentros.forEach(([centro, centroItems]) => {
+            const totalCentro = centroItems.reduce(
+              (sum, item) => sum + parseFloat(item.valor),
+              0
+            );
+
+            // Linha do centro de custo (Level 2)
+            const valoresCentroPorMes = calcularValoresPorMes(centroItems);
+            rows.push({
+              type: "centro_custo",
+              level: 2,
+              grupo,
+              centro_custo: centro,
+              conta,
+              codigo_conta: contaItems[0].codigo_conta,
+              codigo_centro_custo: centroItems[0].codigo_centro_custo,
+              total: totalCentro,
+              valoresPorMes: valoresCentroPorMes,
+              percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
+            });
+          });
+        });
+      } else {
+        // ORDEM ORIGINAL: Grupos → Centros de Custo → Contas
+        
+        // Agrupar por centro de custo dentro do grupo
+        const centros = items.reduce((acc, item) => {
+          if (!acc[item.centro_custo]) {
+            acc[item.centro_custo] = [];
+          }
+          acc[item.centro_custo].push(item);
+          return acc;
+        }, {} as Record<string, DREItem[]>);
+
+        // Ordenar centros de custo por CODIGOCENTROCUSTO
+        const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
+          const codigoA = itemsA[0]?.codigo_centro_custo || "";
+          const codigoB = itemsB[0]?.codigo_centro_custo || "";
+          return codigoA.localeCompare(codigoB);
+        });
+
+        sortedCentros.forEach(([centro, centroItems]) => {
+          const totalCentro = centroItems.reduce(
+            (sum, item) => sum + parseFloat(item.valor),
+            0
+          );
+
+          // Linha do centro de custo (Level 1)
+          const valoresCentroPorMes = calcularValoresPorMes(centroItems);
+          rows.push({
+            type: "centro_custo",
+            level: 1,
+            grupo,
+            centro_custo: centro,
+            codigo_conta: centroItems[0].codigo_conta,
+            codigo_centro_custo: centroItems[0].codigo_centro_custo,
+            total: totalCentro,
+            valoresPorMes: valoresCentroPorMes,
+            percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
+          });
+
+          // Agrupar por conta dentro do centro de custo
+          const contas = centroItems.reduce((acc, item) => {
+            if (!acc[item.conta]) {
+              acc[item.conta] = [];
+            }
+            acc[item.conta].push(item);
+            return acc;
+          }, {} as Record<string, DREItem[]>);
+
+          // Ordenar contas por CODCONTA
+          const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
+            const codigoA = itemsA[0]?.codigo_conta || 0;
+            const codigoB = itemsB[0]?.codigo_conta || 0;
+            return codigoA - codigoB;
+          });
+
+          sortedContas.forEach(([conta, contaItems]) => {
+            const totalConta = contaItems.reduce(
+              (sum, item) => sum + parseFloat(item.valor),
+              0
+            );
+
+            // Linha da conta (Level 2)
+            const valoresContaPorMes = calcularValoresPorMes(contaItems);
+            rows.push({
+              type: "conta",
+              level: 2,
+              grupo,
+              centro_custo: centro,
+              conta,
+              codigo_conta: contaItems[0].codigo_conta,
+              codigo_centro_custo: centroItems[0].codigo_centro_custo,
+              total: totalConta,
+              valoresPorMes: valoresContaPorMes,
+              percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
+            });
+          });
+        });
+      }
+    });
+
+    return rows;
+  };
+
+  const toggleExpandAll = useCallback(() => {
+    if (isAllExpanded) {
+      // Recolher tudo - usar startTransition para atualizações não urgentes
+      startTransition(() => {
+        setExpandedGroups(new Set());
+        setExpandedCentros(new Set());
+        setIsAllExpanded(false);
+      });
+    } else {
+      // Expandir todos os grupos e contas usando dados originais - usar startTransition para atualizações não urgentes
+      startTransition(() => {
+        const todosGrupos = [...new Set(data.map(item => item.grupo))];
+        
+        if (ordemHierarquiaContasPrimeiro) {
+          // Nova ordem: expandir grupos e contas
+          const todasContas = [...new Set(data.map(item => `${item.grupo}-${item.conta}`))];
+          setExpandedGroups(new Set(todosGrupos));
+          setExpandedCentros(new Set(todasContas));
+        } else {
+          // Ordem original: expandir grupos e centros de custo
+          const todosCentros = [...new Set(data.map(item => `${item.grupo}-${item.centro_custo}`))];
+          setExpandedGroups(new Set(todosGrupos));
+          setExpandedCentros(new Set(todosCentros));
+        }
+        
+        setIsAllExpanded(true);
+      });
+    }
+  }, [isAllExpanded, data, ordemHierarquiaContasPrimeiro]);
+
   const limparFiltros = () => {
     const agora = new Date();
     const anoAtual = agora.getFullYear();
@@ -322,11 +885,20 @@ export default function Teste() {
       buscaTextual: ""
     });
     
+    // Limpar multi-seleções
+    setCentrosCustoSelecionados([]);
+    setContasSelecionadas([]);
+    
     // Limpar dados da tabela
     setData([]);
     setDadosFiltrados([]);
     setFiltrosAplicados(false);
     setMesesDisponiveis([]);
+    setIsAllExpanded(false);
+    setOrdemHierarquiaContasPrimeiro(false);
+    
+    // Recarregar opções e selecionar todos novamente
+    carregarPeriodosDisponiveis();
   };
 
   const aplicarFiltros = async () => {
@@ -372,17 +944,17 @@ export default function Teste() {
           );
         }
         
-        // Filtro por centro de custo
-        if (filtros.centroCusto !== "Todos") {
+        // Filtro por centro de custo (multi-seleção)
+        if (centrosCustoSelecionados.length > 0) {
           dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
-            item.centro_custo === filtros.centroCusto
+            centrosCustoSelecionados.includes(item.centro_custo)
           );
         }
         
-        // Filtro por conta
-        if (filtros.conta !== "Todas") {
+        // Filtro por conta (multi-seleção)
+        if (contasSelecionadas.length > 0) {
           dadosFiltrados = dadosFiltrados.filter((item: DREItem) => 
-            item.conta === filtros.conta
+            contasSelecionadas.includes(item.conta)
           );
         }
         
@@ -434,10 +1006,8 @@ export default function Teste() {
     const valoresPorMes: Record<string, number> = {};
 
     items.forEach((item) => {
-      const dataCompetencia = new Date(item.data_competencia);
-      const anoMes = `${dataCompetencia.getFullYear()}-${String(
-        dataCompetencia.getMonth() + 1
-      ).padStart(2, "0")}`;
+      // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM
+      const anoMes = item.data_competencia;
 
       if (!valoresPorMes[anoMes]) {
         valoresPorMes[anoMes] = 0;
@@ -469,11 +1039,8 @@ export default function Teste() {
 
       // Encontrar o valor do grupo 03 para o mesmo mês
       const grupo03Items = data.filter((item) => {
-        const dataCompetencia = new Date(item.data_competencia);
-        const anoMes = `${dataCompetencia.getFullYear()}-${String(
-          dataCompetencia.getMonth() + 1
-        ).padStart(2, "0")}`;
-        return anoMes === mes && item.grupo.includes("03");
+        // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM
+        return item.data_competencia === mes && item.grupo.includes("03");
       });
 
       const valorGrupo03 = grupo03Items.reduce(
@@ -496,10 +1063,10 @@ export default function Teste() {
 
     // Agrupar por grupo
     const grupos = data.reduce((acc, item) => {
-      if (!acc[item.grupo]) {
-        acc[item.grupo] = [];
-      }
-      acc[item.grupo].push(item);
+        if (!acc[item.grupo]) {
+          acc[item.grupo] = [];
+        }
+        acc[item.grupo].push(item);
       return acc;
     }, {} as Record<string, DREItem[]>);
 
@@ -542,55 +1109,60 @@ export default function Teste() {
       });
 
       if (expandedGroups.has(grupo)) {
-        // Agrupar por subgrupo dentro do grupo
-        const subgrupos = items.reduce((acc, item) => {
-          // Se o item originalmente era do grupo 05, agrupar tudo sob o nome do grupo 05
-          if (item.grupo.includes("05")) {
-            const subgrupoKey = item.grupo; // Usar o nome completo do grupo 05
-            if (!acc[subgrupoKey]) {
-              acc[subgrupoKey] = [];
+        if (ordemHierarquiaContasPrimeiro) {
+          // ORDEM: Grupos → Contas → Centros de Custo
+          
+          // Agrupar por conta dentro do grupo
+          const contas = items.reduce((acc, item) => {
+            if (!acc[item.conta]) {
+              acc[item.conta] = [];
             }
-            acc[subgrupoKey].push(item);
-          } else {
-            // Para outros itens, agrupar normalmente por subgrupo
-            if (!acc[item.subgrupo]) {
-              acc[item.subgrupo] = [];
-            }
-            acc[item.subgrupo].push(item);
-          }
+            acc[item.conta].push(item);
           return acc;
         }, {} as Record<string, DREItem[]>);
 
-        // Ordenar subgrupos
-        const sortedSubgrupos = Object.entries(subgrupos).sort(([a], [b]) =>
-          a.localeCompare(b)
-        );
+          // Ordenar contas por CODCONTA
+          const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
+            const codcontaA = itemsA[0]?.codigo_conta || 0;
+            const codcontaB = itemsB[0]?.codigo_conta || 0;
+            
+            if (codcontaA && codcontaB) {
+              return codcontaA - codcontaB;
+            }
+            
+            if (codcontaA && !codcontaB) return -1;
+            if (!codcontaA && codcontaB) return 1;
+            
+            return contaA.localeCompare(contaB);
+          });
 
-        sortedSubgrupos.forEach(([subgrupo, subgrupoItems]) => {
-          const totalSubgrupo = subgrupoItems.reduce(
+          sortedContas.forEach(([conta, contaItems]) => {
+            const totalConta = contaItems.reduce(
             (sum, item) => sum + parseFloat(item.valor),
             0
           );
 
-          // Linha do subgrupo
-          const valoresSubgrupoPorMes = calcularValoresPorMes(subgrupoItems);
+            // Linha da conta (Level 1)
+            const valoresContaPorMes = calcularValoresPorMes(contaItems);
           rows.push({
-            type: "subgrupo",
+              type: "conta",
             level: 1,
             grupo,
-            subgrupo,
-            total: totalSubgrupo,
-            isExpanded: expandedSubgrupos.has(`${grupo}-${subgrupo}`),
-            valoresPorMes: valoresSubgrupoPorMes,
+              conta,
+              codigo_conta: contaItems[0].codigo_conta,
+              codigo_centro_custo: contaItems[0].codigo_centro_custo, // ✅ Adicionar código do centro de custo
+              total: totalConta,
+              isExpanded: expandedCentros.has(`${grupo}-${conta}`),
+              valoresPorMes: valoresContaPorMes,
             percentuaisPorMes: calcularPercentuaisPorMes(
-              valoresSubgrupoPorMes,
+                valoresContaPorMes,
               grupo
             ),
           });
 
-          if (expandedSubgrupos.has(`${grupo}-${subgrupo}`)) {
-            // Agrupar por centro de custo dentro do subgrupo
-            const centros = subgrupoItems.reduce((acc, item) => {
+            if (expandedCentros.has(`${grupo}-${conta}`)) {
+              // Agrupar por centro de custo dentro da conta
+              const centros = contaItems.reduce((acc, item) => {
               if (!acc[item.centro_custo]) {
                 acc[item.centro_custo] = [];
               }
@@ -598,10 +1170,73 @@ export default function Teste() {
               return acc;
             }, {} as Record<string, DREItem[]>);
 
-            // Ordenar centros de custo
-            const sortedCentros = Object.entries(centros).sort(([a], [b]) =>
-              a.localeCompare(b)
-            );
+              // Ordenar centros de custo por CODIGOCENTROCUSTO
+              const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
+                const codigoA = itemsA[0]?.codigo_centro_custo || "";
+                const codigoB = itemsB[0]?.codigo_centro_custo || "";
+                
+                if (codigoA && codigoB) {
+                  return codigoA.localeCompare(codigoB);
+                }
+                
+                if (codigoA && !codigoB) return -1;
+                if (!codigoA && codigoB) return 1;
+                
+                return centroA.localeCompare(centroB);
+              });
+
+              sortedCentros.forEach(([centro, centroItems]) => {
+                const totalCentro = centroItems.reduce(
+                  (sum, item) => sum + parseFloat(item.valor),
+                  0
+                );
+
+                // Linha do centro de custo (Level 2)
+                const valoresCentroPorMes = calcularValoresPorMes(centroItems);
+                rows.push({
+                  type: "centro_custo",
+                  level: 2,
+                  grupo,
+                  centro_custo: centro,
+                  conta,
+                  codigo_conta: contaItems[0].codigo_conta, // ✅ Adicionar código da conta
+                  codigo_centro_custo: centroItems[0].codigo_centro_custo,
+                  total: totalCentro,
+                  valoresPorMes: valoresCentroPorMes,
+                  percentuaisPorMes: calcularPercentuaisPorMes(
+                    valoresCentroPorMes,
+                    grupo
+                  ),
+                });
+              });
+            }
+          });
+        } else {
+          // ORDEM ORIGINAL: Grupos → Centros de Custo → Contas
+          
+          // Agrupar por centro de custo dentro do grupo
+          const centros = items.reduce((acc, item) => {
+            if (!acc[item.centro_custo]) {
+              acc[item.centro_custo] = [];
+            }
+            acc[item.centro_custo].push(item);
+            return acc;
+          }, {} as Record<string, DREItem[]>);
+
+          // Ordenar centros de custo por CODIGOCENTROCUSTO
+          const sortedCentros = Object.entries(centros).sort(([centroA, itemsA], [centroB, itemsB]) => {
+            const codigoA = itemsA[0]?.codigo_centro_custo || "";
+            const codigoB = itemsB[0]?.codigo_centro_custo || "";
+            
+            if (codigoA && codigoB) {
+              return codigoA.localeCompare(codigoB);
+            }
+            
+            if (codigoA && !codigoB) return -1;
+            if (!codigoA && codigoB) return 1;
+            
+            return centroA.localeCompare(centroB);
+          });
 
             sortedCentros.forEach(([centro, centroItems]) => {
               const totalCentro = centroItems.reduce(
@@ -609,18 +1244,17 @@ export default function Teste() {
                 0
               );
 
-              // Linha do centro de custo
+            // Linha do centro de custo (Level 1)
               const valoresCentroPorMes = calcularValoresPorMes(centroItems);
               rows.push({
-                type: "centro_custo",
-                level: 2,
+              type: "centro_custo",
+              level: 1,
                 grupo,
-                subgrupo,
                 centro_custo: centro,
+              codigo_conta: centroItems[0].codigo_conta, // ✅ Adicionar código da conta
+              codigo_centro_custo: centroItems[0].codigo_centro_custo,
                 total: totalCentro,
-                isExpanded: expandedCentros.has(
-                  `${grupo}-${subgrupo}-${centro}`
-                ),
+              isExpanded: expandedCentros.has(`${grupo}-${centro}`),
                 valoresPorMes: valoresCentroPorMes,
                 percentuaisPorMes: calcularPercentuaisPorMes(
                   valoresCentroPorMes,
@@ -628,7 +1262,7 @@ export default function Teste() {
                 ),
               });
 
-              if (expandedCentros.has(`${grupo}-${subgrupo}-${centro}`)) {
+            if (expandedCentros.has(`${grupo}-${centro}`)) {
                 // Agrupar por conta dentro do centro de custo
                 const contas = centroItems.reduce((acc, item) => {
                   if (!acc[item.conta]) {
@@ -638,10 +1272,20 @@ export default function Teste() {
                   return acc;
                 }, {} as Record<string, DREItem[]>);
 
-                // Ordenar contas
-                const sortedContas = Object.entries(contas).sort(([a], [b]) =>
-                  a.localeCompare(b)
-                );
+              // Ordenar contas por CODCONTA
+              const sortedContas = Object.entries(contas).sort(([contaA, itemsA], [contaB, itemsB]) => {
+                const codcontaA = itemsA[0]?.codigo_conta || 0;
+                const codcontaB = itemsB[0]?.codigo_conta || 0;
+                
+                if (codcontaA && codcontaB) {
+                  return codcontaA - codcontaB;
+                }
+                
+                if (codcontaA && !codcontaB) return -1;
+                if (!codcontaA && codcontaB) return 1;
+                
+                return contaA.localeCompare(contaB);
+                });
 
                 sortedContas.forEach(([conta, contaItems]) => {
                   const totalConta = contaItems.reduce(
@@ -649,16 +1293,16 @@ export default function Teste() {
                     0
                   );
 
-                  // Linha da conta (sem ano/mês no nome)
+                // Linha da conta (Level 2)
                   const valoresContaPorMes = calcularValoresPorMes(contaItems);
                   rows.push({
-                    type: "conta",
-                    level: 3,
+                  type: "conta",
+                  level: 2,
                     grupo,
-                    subgrupo,
                     centro_custo: centro,
                     conta,
                     codigo_conta: contaItems[0].codigo_conta,
+                    codigo_centro_custo: centroItems[0].codigo_centro_custo, // ✅ Adicionar código do centro de custo
                     total: totalConta,
                     valoresPorMes: valoresContaPorMes,
                     percentuaisPorMes: calcularPercentuaisPorMes(
@@ -670,7 +1314,6 @@ export default function Teste() {
               }
             });
           }
-        });
       }
     });
 
@@ -687,6 +1330,9 @@ export default function Teste() {
     }-${row.codigo_conta || ""}`;
     const isSelected = linhaSelecionada === linhaId;
 
+    // Verificar se é um grupo calculado
+    const isCalculado = row.isCalculado === true;
+
     let style = baseStyle;
 
     if (isSelected) {
@@ -696,6 +1342,10 @@ export default function Teste() {
 
     switch (row.type) {
       case "grupo":
+        if (isCalculado) {
+          // Destacar grupos calculados com cor mais vibrante
+          return `${style} bg-gradient-to-r from-amber-100/80 to-yellow-100/80 font-bold text-gray-900 border-b-2 border-amber-300 shadow-sm`;
+        }
         return `${style} bg-gradient-to-r from-blue-50/20 to-indigo-50/20 font-bold text-gray-900 border-b-2 border-blue-200`;
       case "subgrupo":
         return `${style} bg-gradient-to-r from-gray-50/30 to-blue-50/20 font-semibold text-gray-800`;
@@ -719,15 +1369,15 @@ export default function Teste() {
     switch (row.type) {
       case "grupo":
         return (
-          <div className="flex items-center gap-3 whitespace-nowrap">
+          <div className="flex items-center gap-2 whitespace-nowrap">
             <button
               onClick={() => toggleGroup(row.grupo!)}
-              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
+              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-150 ease-in-out flex items-center justify-center w-8 h-8 flex-shrink-0 transform hover:scale-105"
             >
               {row.isExpanded ? (
-                <ChevronDown className="w-4 h-4 text-blue-600" />
+                <ChevronDown className="w-4 h-4 text-blue-600 transition-transform duration-150" />
               ) : (
-                <ChevronRight className="w-4 h-4 text-blue-600" />
+                <ChevronRight className="w-4 h-4 text-blue-600 transition-transform duration-150" />
               )}
             </button>
             <button
@@ -738,72 +1388,84 @@ export default function Teste() {
                 <span className="font-bold text-gray-900">
                   {row.grupo}
                 </span>
-                {isCalculado && (
+                {/* {isCalculado && (
                   <span className="text-blue-600 font-bold text-sm">⚡</span>
-                )}
+                )} */}
               </div>
             </button>
           </div>
         );
-      case "subgrupo":
-        return (
-          <div className="flex items-center gap-3 whitespace-nowrap">
-            <button
-              onClick={() => toggleSubgrupo(`${row.grupo}-${row.subgrupo}`)}
-              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
-            >
-              {row.isExpanded ? (
-                <ChevronDown className="w-4 h-4 text-blue-600" />
-              ) : (
-                <ChevronRight className="w-4 h-4 text-blue-600" />
-              )}
-            </button>
-            <button
-              onClick={() => handleRowClick(row)}
-              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
-            >
-              <span className="font-semibold text-gray-800">
-                {row.subgrupo}
-              </span>
-            </button>
-          </div>
-        );
-      case "centro_custo":
-        return (
-          <div className="flex items-center gap-3 whitespace-nowrap">
-            <button
-              onClick={() =>
-                toggleCentro(`${row.grupo}-${row.subgrupo}-${row.centro_custo}`)
-              }
-              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
-            >
-              {row.isExpanded ? (
-                <ChevronDown className="w-4 h-4 text-blue-600" />
-              ) : (
-                <ChevronRight className="w-4 h-4 text-blue-600" />
-              )}
-            </button>
-            <button
-              onClick={() => handleRowClick(row)}
-              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
-            >
-              <span className="font-medium text-gray-700">
-                {row.centro_custo}
-              </span>
-            </button>
-          </div>
-        );
       case "conta":
         return (
-          <div className="flex items-center gap-3 whitespace-nowrap">
-            <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
-              <span className="text-gray-400 font-bold text-lg">•</span>
-            </div>
+          <div className="flex items-center gap-2 whitespace-nowrap">
+            {ordemHierarquiaContasPrimeiro ? (
+              // Nova ordem: Conta é level 1 (com botão de toggle)
+            <button
+                onClick={() => toggleCentro(`${row.grupo}-${row.conta}`)}
+                className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-150 ease-in-out flex items-center justify-center w-8 h-8 flex-shrink-0 transform hover:scale-105"
+              >
+                {row.isExpanded ? (
+                  <ChevronDown className="w-4 h-4 text-blue-600 transition-transform duration-150" />
+                ) : (
+                  <ChevronRight className="w-4 h-4 text-blue-600 transition-transform duration-150" />
+                )}
+            </button>
+            ) : (
+              // Ordem original: Conta é level 2 (sem botão de toggle)
+              <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
+                <span className="text-gray-400 font-bold text-lg">•</span>
+              </div>
+            )}
             <button
               onClick={() => handleRowClick(row)}
               className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
             >
-              <span className="font-normal text-gray-600">{row.conta}</span>
+              <div className="flex items-center gap-2">
+                <span className="font-semibold text-gray-800">
+                  {row.conta}
+                </span>
+                {row.codigo_conta && (
+                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                    {row.codigo_conta}
+                  </span>
+                )}
+              </div>
+            </button>
+          </div>
+        );
+      case "centro_custo":
+        return (
+          <div className="flex items-center gap-2 whitespace-nowrap">
+            {ordemHierarquiaContasPrimeiro ? (
+              // Nova ordem: Centro de custo é level 2 (sem botão de toggle)
+              <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
+                <span className="text-gray-400 font-bold text-lg">•</span>
+              </div>
+            ) : (
+              // Ordem original: Centro de custo é level 1 (com botão de toggle)
+            <button
+                onClick={() => toggleCentro(`${row.grupo}-${row.centro_custo}`)}
+                className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-150 ease-in-out flex items-center justify-center w-8 h-8 flex-shrink-0 transform hover:scale-105"
+              >
+                {row.isExpanded ? (
+                  <ChevronDown className="w-4 h-4 text-blue-600 transition-transform duration-150" />
+                ) : (
+                  <ChevronRight className="w-4 h-4 text-blue-600 transition-transform duration-150" />
+                )}
+            </button>
+            )}
+            <button
+              onClick={() => handleRowClick(row)}
+              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
+            >
+          <div className="flex items-center gap-2">
+                <span className="font-medium text-gray-700">
+                  {row.codigo_centro_custo 
+                    ? `${row.centro_custo} - ${row.codigo_centro_custo}`
+                    : row.centro_custo
+                  }
+                </span>
+              </div>
             </button>
           </div>
         );
@@ -819,21 +1481,56 @@ export default function Teste() {
   const hierarchicalData = buildHierarchicalData();
 
   return (
-    <div className="w-full max-w-none mx-auto p-6">
+    <div className="w-full max-w-none mx-auto p-2">
       {/* Header Section */}
-      <div className="mb-6">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-3">
+      <div className="mb-2">
+        <div className="flex items-center justify-between mb-1">
+          <div className="flex items-center gap-2">
             <div>
               <h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
               <p className="text-sm text-gray-500">
                 Demonstração do Resultado do Exercício
               </p>
-            </div>
           </div>
-          
-          {/* Botão de Filtro */}
-          <Sheet open={isFilterOpen} onOpenChange={setIsFilterOpen}>
+      </div>
+
+          {/* Controles */}
+          <div className="flex items-center gap-2">
+            {/* Botão de Exportar XLSX */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={exportarXLSX}
+              disabled={!filtrosAplicados || hierarchicalData.length === 0}
+              className="flex items-center gap-2 text-xs h-8 px-3 transition-all duration-150 ease-in-out hover:scale-105 disabled:hover:scale-100"
+            >
+              <Download className="w-4 h-4" />
+              Exportar XLSX
+            </Button>
+
+            {/* Botão de Expandir/Recolher */}
+              <Button
+              variant="outline"
+              size="sm"
+              onClick={toggleExpandAll}
+              disabled={!filtrosAplicados || hierarchicalData.length === 0}
+              className="flex items-center gap-2 text-xs h-8 px-3 transition-all duration-150 ease-in-out hover:scale-105 disabled:hover:scale-100"
+            >
+              {isAllExpanded ? (
+                <>
+                  <Minimize2 className="w-4 h-4" />
+                  Recolher Tudo
+                </>
+              ) : (
+                <>
+                  <Maximize2 className="w-4 h-4" />
+                  Expandir Tudo
+                </>
+              )}
+              </Button>
+            
+            {/* Botão de Filtro */}
+            <Sheet open={isFilterOpen} onOpenChange={setIsFilterOpen}>
             <SheetTrigger asChild>
               <Button variant="outline" className="flex items-center gap-2">
                 <Filter className="w-4 h-4" />
@@ -848,11 +1545,11 @@ export default function Teste() {
                 </SheetDescription>
               </SheetHeader>
               
-              <div className="grid flex-1 auto-rows-min gap-6 py-4">
+              <div className="grid flex-1 auto-rows-min gap-3 py-2">
                 {/* Período */}
-                <div className="grid gap-3">
+                <div className="grid gap-2">
                   <Label>Período</Label>
-                  <div className="grid grid-cols-2 gap-3">
+                  <div className="grid grid-cols-2 gap-2">
                     <div>
                       <Label htmlFor="periodo-de" className="text-xs text-gray-500">DE</Label>
                       <Select value={filtros.periodoDe} onValueChange={(value) => handleFiltroChange('periodoDe', value)}>
@@ -865,7 +1562,7 @@ export default function Teste() {
                           ))}
                         </SelectContent>
                       </Select>
-                    </div>
+            </div>
                     <div>
                       <Label htmlFor="periodo-ate" className="text-xs text-gray-500">ATÉ</Label>
                       <Select value={filtros.periodoAte} onValueChange={(value) => handleFiltroChange('periodoAte', value)}>
@@ -878,12 +1575,12 @@ export default function Teste() {
                           ))}
                         </SelectContent>
                       </Select>
-                    </div>
-                  </div>
                 </div>
+                </div>
+              </div>
 
                 {/* Grupo 
-                <div className="grid gap-3">
+                <div className="grid gap-2">
                   <Label htmlFor="grupo">GRUPO</Label>
                   <Select value={filtros.grupo} onValueChange={(value) => handleFiltroChange('grupo', value)}>
                     <SelectTrigger>
@@ -899,7 +1596,7 @@ export default function Teste() {
                 </div>*/}
 
                 {/* Subgrupo 
-                <div className="grid gap-3">
+                <div className="grid gap-2">
                   <Label htmlFor="subgrupo">SUBGRUPO</Label>
                   <Select value={filtros.subgrupo} onValueChange={(value) => handleFiltroChange('subgrupo', value)}>
                     <SelectTrigger>
@@ -914,42 +1611,108 @@ export default function Teste() {
                   </Select>
                 </div>*/}
 
-                {/* Centro de Custo 
-                <div className="grid gap-3">
-                  <Label htmlFor="centro-custo">CENTRO DE CUSTO</Label>
-                  <Select value={filtros.centroCusto} onValueChange={(value) => handleFiltroChange('centroCusto', value)}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Selecione" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="Todos">Todos</SelectItem>
-                      {opcoesCentrosCusto.map(centro => (
-                        <SelectItem key={centro} value={centro}>{centro}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>*/}
+                {/* Centro de Custo */}
+                <div className="grid gap-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="centro-custo">CENTRO DE CUSTO</Label>
+                    <div className="flex gap-1">
+              <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={selecionarTodosCentros}
+                        className="text-xs h-5 px-2"
+                      >
+                        Todos
+                      </Button>
+              <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={limparCentros}
+                        className="text-xs h-5 px-2"
+                      >
+                        Limpar
+              </Button>
+            </div>
+          </div>
+                  <div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
+                    {opcoesCentrosCusto.map(centro => (
+                      <div key={centro} className="flex items-center space-x-1">
+                        <Checkbox
+                          id={`centro-${centro}`}
+                          checked={centrosCustoSelecionados.includes(centro)}
+                          onCheckedChange={() => toggleCentroCusto(centro)}
+                        />
+                        <Label
+                          htmlFor={`centro-${centro}`}
+                          className="text-sm font-normal cursor-pointer flex-1"
+                        >
+                          {centro}{codigosCentrosCusto[centro] ? ` - ${codigosCentrosCusto[centro]}` : ''}
+                        </Label>
+              </div>
+            ))}
+                  </div>
+                  {centrosCustoSelecionados.length > 0 && (
+                    <div className="text-xs text-gray-500">
+                      {centrosCustoSelecionados.length} centro(s) selecionado(s)
+                    </div>
+                  )}
+        </div>
 
-                {/* Conta 
-                <div className="grid gap-3">
-                  <Label htmlFor="conta">CONTA</Label>
-                  <Select value={filtros.conta} onValueChange={(value) => handleFiltroChange('conta', value)}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Selecione" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="Todas">Todas</SelectItem>
-                      {opcoesContas.map(conta => (
-                        <SelectItem key={conta} value={conta}>{conta}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>*/}
+                {/* Conta */}
+                <div className="grid gap-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="conta">CONTA</Label>
+                    <div className="flex gap-1">
+              <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={selecionarTodasContas}
+                        className="text-xs h-5 px-2"
+                      >
+                        Todas
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={limparContas}
+                        className="text-xs h-5 px-2"
+                      >
+                        Limpar
+              </Button>
+              </div>
+          </div>
+                  <div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
+                    {opcoesContas.map(conta => (
+                      <div key={conta} className="flex items-center space-x-1">
+                        <Checkbox
+                          id={`conta-${conta}`}
+                          checked={contasSelecionadas.includes(conta)}
+                          onCheckedChange={() => toggleConta(conta)}
+                        />
+                        <Label
+                          htmlFor={`conta-${conta}`}
+                          className="text-sm font-normal cursor-pointer flex-1"
+                        >
+                          {conta}{codigosContas[conta] ? ` - ${codigosContas[conta]}` : ''}
+                        </Label>
+                      </div>
+                    ))}
+                  </div>
+                  {contasSelecionadas.length > 0 && (
+                    <div className="text-xs text-gray-500">
+                      {contasSelecionadas.length} conta(s) selecionada(s)
+                    </div>
+                  )}
+        </div>
 
                 {/* Valor 
-                <div className="grid gap-3">
+                <div className="grid gap-2">
                   <Label>Valor</Label>
-                  <div className="grid grid-cols-2 gap-3">
+                  <div className="grid grid-cols-2 gap-2">
                     <div>
                       <Label htmlFor="valor-min" className="text-xs text-gray-500">VALOR MÍN.</Label>
                       <div className="relative">
@@ -980,7 +1743,7 @@ export default function Teste() {
                 </div>*/}
 
                 {/* Busca Textual 
-                <div className="grid gap-3">
+                <div className="grid gap-2">
                   <Label htmlFor="busca-textual">BUSCA TEXTUAL</Label>
                   <Input
                     id="busca-textual"
@@ -989,9 +1752,30 @@ export default function Teste() {
                     placeholder="Pesquise por grupo, subgrupo, centro ou conta"
                   />
                 </div>*/}
+
+                {/* Ordem da Hierarquia */}
+                <div className="grid gap-2">
+                  <Label>Ordem da Hierarquia</Label>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="ordem-hierarquia"
+                      checked={ordemHierarquiaContasPrimeiro}
+                      onCheckedChange={(checked: boolean) => setOrdemHierarquiaContasPrimeiro(checked)}
+                    />
+                    <Label htmlFor="ordem-hierarquia" className="text-sm">
+                      Contas antes de Centros de Custo
+                    </Label>
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    {ordemHierarquiaContasPrimeiro 
+                      ? "📄 Contas → 🏢 Centros de Custo" 
+                      : "🏢 Centros de Custo → 📄 Contas"
+                    }
+                  </div>
+                </div>
               </div>
 
-              <SheetFooter className="flex gap-3">
+              <SheetFooter className="flex gap-2">
                 {/* <Button variant="outline" onClick={limparFiltros} className="flex-1">
                   Limpar filtros
                 </Button> */}
@@ -1004,18 +1788,19 @@ export default function Teste() {
               </SheetFooter>
             </SheetContent>
           </Sheet>
+          </div>
         </div>
       </div>
 
       {/* Loading quando aplicando filtros */}
       {loading && (
-        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 text-center">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
+        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-4 text-center">
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
               <LoaderPinwheel className="w-8 h-8 text-blue-600 animate-spin" />
             </div>
             <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+              <h3 className="text-lg font-semibold text-gray-900 mb-1">
                 Aplicando filtros...
               </h3>
               <p className="text-gray-500">
@@ -1028,9 +1813,9 @@ export default function Teste() {
 
       {/* Erro */}
       {error && !loading && (
-        <div className="bg-white rounded-xl shadow-lg border border-red-200 p-8 text-center">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
+        <div className="bg-white rounded-xl shadow-lg border border-red-200 p-4 text-center">
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
               <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
@@ -1040,7 +1825,7 @@ export default function Teste() {
                 Erro ao carregar dados
               </h3>
               <p className="text-red-600 mb-4">{error}</p>
-              <Button onClick={() => aplicarFiltros()} className="flex items-center gap-2">
+              <Button onClick={() => aplicarFiltros()} className="flex items-center gap-1">
                 Tentar novamente
               </Button>
             </div>
@@ -1050,16 +1835,16 @@ export default function Teste() {
 
       {/* Mensagem quando não há dados */}
       {!filtrosAplicados && !loading && !error && (
-        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 text-center">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
+        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-4 text-center">
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
               <Filter className="w-8 h-8 text-gray-400" />
             </div>
             <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+              <h3 className="text-lg font-semibold text-gray-900 mb-1">
                 Nenhum dado exibido
               </h3>
-              <p className="text-gray-500 mb-4">
+              <p className="text-gray-500 mb-2">
                 Clique no botão "Filtros" para definir os critérios de busca e visualizar os dados do DRE.
               </p>
               
@@ -1072,103 +1857,40 @@ export default function Teste() {
       {filtrosAplicados && !loading && !error && (
         <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
         {/* Table Header */}
-        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
-          <div className="flex items-center gap-4 px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
-            <div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
-            {mesesDisponiveis.map((mes) => (
-              <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
-                <div className="flex-1 min-w-[120px] text-right">{mes}</div>
-                <div className="flex-1 min-w-[100px] text-center text-xs text-gray-500">
+        <div className="p-2 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
+          <div className="flex items-center justify-between px-4 py-1">
+            <div className="flex items-center gap-2 text-xs font-semibold text-gray-700 uppercase tracking-wide">
+              <div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
+              {mesesDisponiveis.map((mes) => (
+                <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
+                  <div className="flex-1 min-w-[120px] text-right">{mes}</div>
+                  <div className="flex-1 min-w-[100px] text-center text-xs text-gray-500">
                   %
+                  </div>
                 </div>
+              ))}
+              <div className="flex-1 min-w-[120px] text-right">Total</div>
               </div>
-            ))}
-            <div className="flex-1 min-w-[120px] text-right">Total</div>
-          </div>
+            </div>
         </div>
 
         {/* Table Body */}
         <div className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
           {hierarchicalData.map((row, index) => (
-            <div
+            <TableRow
               key={index}
-              className={`flex items-center gap-4 px-4 py-3 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors ${getRowStyle(
-                row
-              )}`}
-            >
-              <div
-                className="flex-1 min-w-[300px] max-w-[400px] whitespace-nowrap overflow-hidden"
-                style={getIndentStyle(row.level)}
-              >
-                {renderCellContent(row)}
-              </div>
-              {mesesDisponiveis.map((mes) => (
-                <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
-                  <div
-                    className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
-                    onClick={() => handleRowClick(row, mes)}
-                    title={
-                      row.valoresPorMes && row.valoresPorMes[mes]
-                        ? formatCurrency(row.valoresPorMes[mes])
-                        : "-"
-                    }
-                  >
-                    {row.valoresPorMes && row.valoresPorMes[mes]
-                      ? (() => {
-                          const { formatted, isNegative } =
-                            formatCurrencyWithColor(row.valoresPorMes[mes]);
-                          return (
-                            <span
-                              className={
-                                isNegative
-                                  ? "text-red-600 font-bold"
-                                  : "text-gray-900"
-                              }
-                            >
-                              {formatted}
-                            </span>
-                          );
-                        })()
-                      : "-"}
-                  </div>
-                  <div
-                    className="flex-1 min-w-[100px] text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
-                    onClick={() => handleRowClick(row, mes)}
-                    title={
-                      row.percentuaisPorMes &&
-                      row.percentuaisPorMes[mes] !== undefined
-                        ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
-                        : "-"
-                    }
-                  >
-                    {row.percentuaisPorMes &&
-                    row.percentuaisPorMes[mes] !== undefined
-                      ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
-                      : "-"}
-                  </div>
-                </div>
-              ))}
-              <div
-                className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
-                onClick={() => handleRowClick(row)}
-                title={row.total ? formatCurrency(row.total) : "-"}
-              >
-                {(() => {
-                  const { formatted, isNegative } = formatCurrencyWithColor(
-                    row.total!
-                  );
-                  return (
-                    <span
-                      className={
-                        isNegative ? "text-red-600 font-bold" : "text-gray-900"
-                      }
-                    >
-                      {formatted}
-                    </span>
-                  );
-                })()}
-              </div>
-            </div>
+              row={row}
+              index={index}
+              toggleGroup={toggleGroup}
+              toggleCentro={toggleCentro}
+              handleRowClick={handleRowClick}
+              getRowStyle={getRowStyle}
+              getIndentStyle={getIndentStyle}
+              renderCellContent={renderCellContent}
+              mesesDisponiveis={mesesDisponiveis}
+              formatCurrency={formatCurrency}
+              formatCurrencyWithColor={formatCurrencyWithColor}
+            />
           ))}
         </div>
       </div>
diff --git a/src/app/api/dre-oracle/route.ts b/src/app/api/dre-oracle/route.ts
index 463dd89..4509281 100644
--- a/src/app/api/dre-oracle/route.ts
+++ b/src/app/api/dre-oracle/route.ts
@@ -23,7 +23,8 @@ export async function GET(request: NextRequest) {
         data_cai: item.DATA || "2023-03", // Usar DATA do Oracle
         grupo: codgrupo ? `${codgrupo} - ${nomeGrupo}` : nomeGrupo, // Concatenar código + nome
         subgrupo: item.CENTROCUSTO || "", // Usar CENTROCUSTO como subgrupo
-        centro_custo: item.CODIGOCENTROCUSTO || "", // Usar CODIGOCENTROCUSTO
+        centro_custo: item.CENTROCUSTO || "", // Usar CENTROCUSTO (nome do centro)
+        codigo_centro_custo: item.CODIGOCENTROCUSTO || "", // Usar CODIGOCENTROCUSTO (código do centro)
         codigo_conta: parseInt(item.CODCONTA) || 0, // Converter CODCONTA para número
         conta: item.CONTA || "", // Usar CONTA do Oracle
         valor: item.VALOR?.toString() || "0", // Converter VALOR para string
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }