diff --git a/package-lock.json b/package-lock.json
index 089cf27..1f38f5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "tailwind-merge": "^3.3.1",
+        "vaul": "^1.1.2",
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
@@ -11778,6 +11779,19 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/when-exit": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/when-exit/-/when-exit-2.1.4.tgz",
diff --git a/package.json b/package.json
index d3cea65..57db787 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^3.3.1",
+    "vaul": "^1.1.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
diff --git a/src/app/DRE/analitico.tsx b/src/app/DRE/analitico.tsx
index d6d6d1c..d2cd729 100644
--- a/src/app/DRE/analitico.tsx
+++ b/src/app/DRE/analitico.tsx
@@ -33,7 +33,17 @@ import {
   SelectItem,
 } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Download, Filter, X, Search, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Download, Filter, X, Search, ArrowUpDown, ArrowUp, ArrowDown, Maximize2, Minimize2 } from "lucide-react";
 import * as XLSX from "xlsx";
 
 interface AnaliticoItem {
@@ -295,6 +305,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
   const [loading, setLoading] = React.useState(false);
   const [globalFilter, setGlobalFilter] = React.useState("");
   const [open, setOpen] = React.useState(false);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [columnFilters, setColumnFilters] = React.useState<Record<string, string[]>>({});
   const [columnSorts, setColumnSorts] = React.useState<Record<string, 'asc' | 'desc' | null>>({});
   const [conditions, setConditions] = React.useState([
@@ -810,6 +821,324 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
     setGlobalFilter("");
   };
 
+  // Função para renderizar o conteúdo principal do componente (reutilizável)
+  const renderAnaliticoContent = (isMaximized: boolean = false) => {
+    return (
+      <>
+        {/* Filtros Externos Ativos */}
+        {(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
+          <div className="flex items-center gap-2 mb-4">
+            <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 className="flex flex-wrap gap-2 text-xs text-blue-800">
+              {filtrosExternos.dataInicio && filtrosExternos.dataFim && (
+                <span className="px-2 py-1 bg-blue-100 rounded">
+                  Período: {filtrosExternos.dataInicio} a {filtrosExternos.dataFim}
+                </span>
+              )}
+              {filtrosExternos.centroCusto && (
+                <span className="px-2 py-1 bg-blue-100 rounded">
+                  Centro: {filtrosExternos.centroCusto}
+                </span>
+              )}
+              {filtrosExternos.codigoGrupo && (
+                <span className="px-2 py-1 bg-blue-100 rounded">
+                  Grupo: {filtrosExternos.codigoGrupo}
+                </span>
+              )}
+              {filtrosExternos.codigoConta && (
+                <span className="px-2 py-1 bg-blue-100 rounded">
+                  Conta: {filtrosExternos.codigoConta}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Controls */}
+        <div className="flex gap-2 flex-wrap mb-4">
+          {data.length > 0 && (
+            <Button
+              onClick={clearAllFilters}
+              variant="outline"
+              size="sm"
+              className="flex items-center gap-2 bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
+            >
+              <X className="h-4 w-4" />
+              Limpar Filtros
+              {getFilterCount() > 0 && (
+                <span className="bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-semibold">
+                  {getFilterCount()}
+                </span>
+              )}
+            </Button>
+          )}
+          <Button
+            onClick={exportToExcel}
+            variant="outline"
+            size="sm"
+            disabled={sortedAndFilteredData.length === 0}
+            className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Download className="h-4 w-4" />
+            Exportar XLSX
+          </Button>
+        </div>
+
+        {/* DataGridPro */}
+        <Card className={`w-full shadow-lg rounded-2xl ${isMaximized ? 'h-[calc(96vh-280px)]' : 'h-[40vh]'}`} style={{ overflowAnchor: 'none' }}>
+          <CardContent className="p-4 h-full" style={{ overflowAnchor: 'none' }}>
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-4">
+                <h2 className="text-lg font-semibold">
+                  Total de Registros: <span className="text-blue-600">{sortedAndFilteredData.length}</span>
+                </h2>
+                <div className="text-sm text-gray-600">
+                  Valor Total: <span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-green-600'}`}>
+                    {new Intl.NumberFormat("pt-BR", {
+                      style: "currency",
+                      currency: "BRL",
+                    }).format(valorTotal)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
+              <DataGridPremium
+                key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
+                rows={sortedAndFilteredData}
+                columns={columns}
+                loading={loading}
+                disableRowSelectionOnClick
+                density="compact"
+                slots={{ toolbar: GridToolbar }}
+                disableColumnMenu={true}
+                disableColumnSorting={true}
+                pagination={false}
+                disableVirtualization={false}
+                getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`}
+                sx={{
+                  overflowAnchor: 'none',
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  "& .MuiDataGrid-root": {
+                    display: "flex",
+                    flexDirection: "column",
+                    height: "100%",
+                    flex: 1,
+                    overflow: "hidden",
+                  },
+                  "& .MuiDataGrid-main": {
+                    overflow: "hidden !important",
+                    position: "relative",
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                  },
+                  // Container dos headers - DEVE FICAR FIXO (não rola)
+                  "& .MuiDataGrid-container--top": {
+                    overflow: "hidden !important",
+                    position: "relative",
+                    zIndex: 100,
+                    backgroundColor: "#f9fafb",
+                    flexShrink: 0,
+                    flexGrow: 0,
+                  },
+                  "& .MuiDataGrid-columnHeaders": {
+                    position: "relative !important",
+                    backgroundColor: "#f9fafb !important",
+                    zIndex: 100,
+                    borderBottom: "1px solid #e5e7eb",
+                  },
+                  "& .MuiDataGrid-columnHeader": {
+                    backgroundColor: "#f9fafb !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderRow": {
+                    backgroundColor: "#f9fafb !important",
+                  },
+                  "& .MuiDataGrid-columnHeadersInner": {
+                    backgroundColor: "#f9fafb !important",
+                  },
+                  "& .MuiDataGrid-cell": { 
+                    borderBottom: "1px solid #f0f0f0",
+                    fontSize: "0.875rem",
+                  },
+                  // Container do virtualScroller - deve ter scroll e ocupar espaço restante
+                  "& .MuiDataGrid-container--bottom": {
+                    flex: 1,
+                    overflow: "hidden !important",
+                    position: "relative",
+                    minHeight: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                  },
+                  // Apenas o virtualScroller deve ter scroll
+                  "& .MuiDataGrid-virtualScroller": { 
+                    overflowY: "auto !important",
+                    overflowX: "auto !important",
+                    height: "100% !important",
+                    flex: 1,
+                    overflowAnchor: 'none',
+                    // Garantir que a barra de scroll seja visível
+                    scrollbarWidth: "thin",
+                    "&::-webkit-scrollbar": {
+                      height: "8px",
+                      width: "8px",
+                    },
+                    "&::-webkit-scrollbar-track": {
+                      background: "#f1f1f1",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                      background: "#888",
+                      borderRadius: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb:hover": {
+                      background: "#555",
+                    },
+                  },
+                  "& .MuiDataGrid-virtualScrollerContent": {
+                    minWidth: "max-content",
+                  },
+                  "& .MuiDataGrid-row": {
+                    minWidth: "max-content",
+                  },
+                  "& .MuiDataGrid-toolbarContainer": {
+                    backgroundColor: "#f8fafc",
+                    borderBottom: "1px solid #e5e7eb",
+                    padding: "8px 16px",
+                  },
+                  "& .MuiDataGrid-scrollbar": {
+                    display: "none",
+                  },
+                  // Ocultar todos os ícones nativos das colunas
+                  "& .MuiDataGrid-columnHeaderMenuContainer": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderMenuButton": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderSortIcon": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderSortIconContainer": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-iconButtonContainer": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderSeparator": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderSortButton": {
+                    display: "none !important",
+                  },
+                  // Ocultar qualquer ícone de menu adicional
+                  "& .MuiDataGrid-menuIcon": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-menuIconButton": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderMenuIcon": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-columnHeaderMenuIconButton": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-menuContainer": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-menu": {
+                    display: "none !important",
+                  },
+                  // Ocultar footer de paginação
+                  "& .MuiDataGrid-footerContainer": {
+                    display: "none !important",
+                  },
+                  "& .MuiDataGrid-pagination": {
+                    display: "none !important",
+                  },
+                  "& .MuiTablePagination-root": {
+                    display: "none !important",
+                  },
+                  // Garantir que nosso botão customizado apareça
+                  "& .MuiDataGrid-columnHeaderTitleContainer": {
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                  },
+                }}
+              />
+              
+              {/* Card de Agregação Customizado */}
+              {sortedAndFilteredData.length > 0 && (
+                <div
+                  ref={setAggregationCardRef}
+                  className="w-full bg-gray-50 border-t border-gray-200 sticky bottom-0 z-50 shadow-lg"
+                  style={{ overflowAnchor: 'none' }}
+                >
+                  <div className="px-4 py-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-6">
+                        <div className="text-sm font-medium text-gray-700">
+                          Vl.Realizado: 
+                          <span className={`ml-2 font-semibold ${columnTotals.valor < 0 ? 'text-red-600' : 'text-gray-900'}`}>
+                            {new Intl.NumberFormat("pt-BR", {
+                              style: "currency",
+                              currency: "BRL",
+                            }).format(columnTotals.valor)}
+                          </span>
+                        </div>
+                        
+                        <div className="text-sm font-medium text-gray-700">
+                          Vl.Previsto: 
+                          <span className={`ml-2 font-semibold ${columnTotals.valor_previsto < 0 ? 'text-red-600' : 'text-gray-900'}`}>
+                            {new Intl.NumberFormat("pt-BR", {
+                              style: "currency",
+                              currency: "BRL",
+                            }).format(columnTotals.valor_previsto)}
+                          </span>
+                        </div>
+                        
+                        <div className="text-sm font-medium text-gray-700">
+                          Vl.Confirmado: 
+                          <span className={`ml-2 font-semibold ${columnTotals.valor_confirmado < 0 ? 'text-red-600' : 'text-gray-900'}`}>
+                            {new Intl.NumberFormat("pt-BR", {
+                              style: "currency",
+                              currency: "BRL",
+                            }).format(columnTotals.valor_confirmado)}
+                          </span>
+                        </div>
+                        
+                        <div className="text-sm font-medium text-gray-700">
+                          Vl.Pago: 
+                          <span className={`ml-2 font-semibold ${columnTotals.valor_pago < 0 ? 'text-red-600' : 'text-gray-900'}`}>
+                            {new Intl.NumberFormat("pt-BR", {
+                              style: "currency",
+                              currency: "BRL",
+                            }).format(columnTotals.valor_pago)}
+                          </span>
+                        </div>
+                      </div>
+                      
+                      <div className="text-sm text-gray-500">
+                        Total de Registros: <span className="font-semibold text-blue-600">{sortedAndFilteredData.length}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </>
+    );
+  };
+
   return (
     <div className="w-full max-w-none mx-auto p-2" style={{ overflowAnchor: 'none' }}>
       {/* Header Section */}
@@ -914,263 +1243,53 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
             <Download className="h-4 w-4" />
             Exportar XLSX
           </Button>
-        </div>
-            </div>
-            </div>
-
-            </div>
-
-      {/* DataGridPro */}
-      <Card className="w-full h-[40vh] shadow-lg rounded-2xl" style={{ overflowAnchor: 'none' }}>
-        <CardContent className="p-4 h-full" style={{ overflowAnchor: 'none' }}>
-          <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center gap-4">
-              <h2 className="text-lg font-semibold">
-                Total de Registros: <span className="text-blue-600">{sortedAndFilteredData.length}</span>
-              </h2>
-              <div className="text-sm text-gray-600">
-                Valor Total: <span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-green-600'}`}>
-                  {new Intl.NumberFormat("pt-BR", {
-                    style: "currency",
-                    currency: "BRL",
-                  }).format(valorTotal)}
-                </span>
-            </div>
-          </div>
-        </div>
-
-          <div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
-            <DataGridPremium
-              key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
-              rows={sortedAndFilteredData}
-              columns={columns}
-              loading={loading}
-              disableRowSelectionOnClick
-              density="compact"
-              slots={{ toolbar: GridToolbar }}
-              disableColumnMenu={true}
-              disableColumnSorting={true}
-              pagination={false}
-              disableVirtualization={false}
-              getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`}
-              sx={{
-                overflowAnchor: 'none',
-                height: "100%",
-                display: "flex",
-                flexDirection: "column",
-                "& .MuiDataGrid-root": {
-                  display: "flex",
-                  flexDirection: "column",
-                  height: "100%",
-                  flex: 1,
-                  overflow: "hidden",
-                },
-                "& .MuiDataGrid-main": {
-                  overflow: "hidden !important",
-                  position: "relative",
-                  height: "100%",
-                  display: "flex",
-                  flexDirection: "column",
-                  flex: 1,
-                },
-                // Container dos headers - DEVE FICAR FIXO (não rola)
-                "& .MuiDataGrid-container--top": {
-                  overflow: "hidden !important",
-                  position: "relative",
-                  zIndex: 100,
-                  backgroundColor: "#f9fafb",
-                  flexShrink: 0,
-                  flexGrow: 0,
-                },
-                "& .MuiDataGrid-columnHeaders": {
-                  position: "relative !important",
-                  backgroundColor: "#f9fafb !important",
-                  zIndex: 100,
-                  borderBottom: "1px solid #e5e7eb",
-                },
-                "& .MuiDataGrid-columnHeader": {
-                  backgroundColor: "#f9fafb !important",
-                },
-                "& .MuiDataGrid-columnHeaderRow": {
-                  backgroundColor: "#f9fafb !important",
-                },
-                "& .MuiDataGrid-columnHeadersInner": {
-                  backgroundColor: "#f9fafb !important",
-                },
-                "& .MuiDataGrid-cell": { 
-                  borderBottom: "1px solid #f0f0f0",
-                  fontSize: "0.875rem",
-                },
-                // Container do virtualScroller - deve ter scroll e ocupar espaço restante
-                "& .MuiDataGrid-container--bottom": {
-                  flex: 1,
-                  overflow: "hidden !important",
-                  position: "relative",
-                  minHeight: 0,
-                  display: "flex",
-                  flexDirection: "column",
-                },
-                // Apenas o virtualScroller deve ter scroll
-                "& .MuiDataGrid-virtualScroller": { 
-                  overflowY: "auto !important",
-                  overflowX: "auto !important",
-                  height: "100% !important",
-                  flex: 1,
-                  overflowAnchor: 'none',
-                  // Garantir que a barra de scroll seja visível
-                  scrollbarWidth: "thin",
-                  "&::-webkit-scrollbar": {
-                    height: "8px",
-                    width: "8px",
-                  },
-                  "&::-webkit-scrollbar-track": {
-                    background: "#f1f1f1",
-                  },
-                  "&::-webkit-scrollbar-thumb": {
-                    background: "#888",
-                    borderRadius: "4px",
-                  },
-                  "&::-webkit-scrollbar-thumb:hover": {
-                    background: "#555",
-                  },
-                },
-                "& .MuiDataGrid-virtualScrollerContent": {
-                  minWidth: "max-content",
-                },
-                "& .MuiDataGrid-row": {
-                  minWidth: "max-content",
-                },
-                "& .MuiDataGrid-toolbarContainer": {
-                  backgroundColor: "#f8fafc",
-                  borderBottom: "1px solid #e5e7eb",
-                  padding: "8px 16px",
-                },
-                "& .MuiDataGrid-scrollbar": {
-                  display: "none",
-                },
-                // Ocultar todos os ícones nativos das colunas
-                "& .MuiDataGrid-columnHeaderMenuContainer": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-columnHeaderMenuButton": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-columnHeaderSortIcon": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-columnHeaderSortIconContainer": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-iconButtonContainer": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-columnHeaderSeparator": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-columnHeaderSortButton": {
-                  display: "none !important",
-                },
-                // Ocultar qualquer ícone de menu adicional
-                "& .MuiDataGrid-menuIcon": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-menuIconButton": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-columnHeaderMenuIcon": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-columnHeaderMenuIconButton": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-menuContainer": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-menu": {
-                  display: "none !important",
-                },
-                // Ocultar footer de paginação
-                "& .MuiDataGrid-footerContainer": {
-                  display: "none !important",
-                },
-                "& .MuiDataGrid-pagination": {
-                  display: "none !important",
-                },
-                "& .MuiTablePagination-root": {
-                  display: "none !important",
-                },
-                // Garantir que nosso botão customizado apareça
-                "& .MuiDataGrid-columnHeaderTitleContainer": {
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                },
-              }}
-            />
-            
-            {/* Card de Agregação Customizado - Usando position: sticky */}
-            {sortedAndFilteredData.length > 0 && (
-              <div
-                ref={setAggregationCardRef}
-                className="w-full bg-gray-50 border-t border-gray-200 sticky bottom-0 z-50 shadow-lg"
-                style={{ overflowAnchor: 'none' }}
+          <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
+            <DrawerTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="flex items-center gap-2 bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
               >
-                <div className="px-4 py-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-6">
-                      <div className="text-sm font-medium text-gray-700">
-                        Vl.Realizado: 
-                        <span className={`ml-2 font-semibold ${columnTotals.valor < 0 ? 'text-red-600' : 'text-gray-900'}`}>
-                          {new Intl.NumberFormat("pt-BR", {
-                            style: "currency",
-                            currency: "BRL",
-                          }).format(columnTotals.valor)}
-                        </span>
+                <Maximize2 className="h-4 w-4" />
+                Maximizar
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[96vh] h-[96vh]">
+              <DrawerHeader className="flex-shrink-0">
+                <div className="flex items-center justify-between">
+                  <div className="flex-1">
+                    <DrawerTitle className="text-2xl font-bold text-gray-900">
+                      Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""}
+                    </DrawerTitle>
+                    <DrawerDescription>
+                      Relatório detalhado de transações - Versão Maximizada
+                    </DrawerDescription>
+                  </div>
+                  <DrawerClose asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="flex items-center gap-2 bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
+                    >
+                      <Minimize2 className="h-4 w-4" />
+                      Minimizar
+                    </Button>
+                  </DrawerClose>
+                </div>
+              </DrawerHeader>
+              <div className="flex-1 overflow-y-auto px-4 pb-4">
+                {renderAnaliticoContent(true)}
+              </div>
+            </DrawerContent>
+          </Drawer>
+        </div>
             </div>
-                      
-                      <div className="text-sm font-medium text-gray-700">
-                        Vl.Previsto: 
-                        <span className={`ml-2 font-semibold ${columnTotals.valor_previsto < 0 ? 'text-red-600' : 'text-gray-900'}`}>
-                          {new Intl.NumberFormat("pt-BR", {
-                            style: "currency",
-                            currency: "BRL",
-                          }).format(columnTotals.valor_previsto)}
-                        </span>
             </div>
-                      
-                      <div className="text-sm font-medium text-gray-700">
-                        Vl.Confirmado: 
-                        <span className={`ml-2 font-semibold ${columnTotals.valor_confirmado < 0 ? 'text-red-600' : 'text-gray-900'}`}>
-                          {new Intl.NumberFormat("pt-BR", {
-                            style: "currency",
-                            currency: "BRL",
-                          }).format(columnTotals.valor_confirmado)}
-                        </span>
-                </div>
-                      
-                      <div className="text-sm font-medium text-gray-700">
-                        Vl.Pago: 
-                        <span className={`ml-2 font-semibold ${columnTotals.valor_pago < 0 ? 'text-red-600' : 'text-gray-900'}`}>
-                          {new Intl.NumberFormat("pt-BR", {
-                            style: "currency",
-                            currency: "BRL",
-                          }).format(columnTotals.valor_pago)}
-                        </span>
-                </div>
-                </div>
-                    
-                    <div className="text-sm text-gray-500">
-                      Total de Registros: <span className="font-semibold text-blue-600">{sortedAndFilteredData.length}</span>
-                </div>
-                </div>
-                </div>
-                </div>
-            )}
-            
-                </div>
-        </CardContent>
-      </Card>
+
+            </div>
+
+        {/* Conteúdo Principal - Versão Normal */}
+        {renderAnaliticoContent(false)}
 
       {/* Advanced Filters Dialog */}
       <Dialog open={open} onOpenChange={setOpen}>
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..e61f344
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = DrawerPrimitive.Root
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
+