joelson
/
vendaweb-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

hotfix: Correção da vizualização dos botões de ação

This commit is contained in:
Alessandro Gonçaalves 2025-11-10 16:23:25 -03:00
parent 79773d0c18
commit 568faff395
1 changed files with 230 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

458
src/app/DRE/analitico.tsx
View File

@ -481,12 +481,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
// Definir colunas do DataGridPro na ordem solicitada // Definir colunas do DataGridPro na ordem solicitada
const columns = React.useMemo(() => { const columns = React.useMemo(() => {
const dateCellRenderer = (params: any) => { const dateCellRenderer = (params: any) => {
if (!params.value) return "-"; if (!params.value) return "-";
try { try {
return new Date(params.value).toLocaleDateString("pt-BR"); return new Date(params.value).toLocaleDateString("pt-BR");
} catch (error) { } catch (error) {
return params.value; return params.value;
} }
}; };
const currencyCellRenderer = (params: any, showZero: boolean = false) => { const currencyCellRenderer = (params: any, showZero: boolean = false) => {
@ -609,40 +609,40 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
sortable: true, sortable: true,
resizable: true, resizable: true,
}, },
{ {
field: "valor", field: "valor",
headerName: "Vl.Realizado", headerName: "Vl.Realizado",
type: "number" as const, type: "number" as const,
width: 140, width: 140,
sortable: true, sortable: true,
resizable: true, resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, true), renderCell: (params: any) => currencyCellRenderer(params, true),
}, },
{ {
field: "valor_previsto", field: "valor_previsto",
headerName: "Vl.Previsto", headerName: "Vl.Previsto",
type: "number" as const, type: "number" as const,
width: 130, width: 130,
sortable: true, sortable: true,
resizable: true, resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, false), renderCell: (params: any) => currencyCellRenderer(params, false),
}, },
{ {
field: "valor_confirmado", field: "valor_confirmado",
headerName: "Vl.Confirmado", headerName: "Vl.Confirmado",
type: "number" as const, type: "number" as const,
width: 140, width: 140,
sortable: true, sortable: true,
resizable: true, resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, false), renderCell: (params: any) => currencyCellRenderer(params, false),
}, },
{ {
field: "valor_pago", field: "valor_pago",
headerName: "Vl.Pago", headerName: "Vl.Pago",
type: "number" as const, type: "number" as const,
width: 120, width: 120,
sortable: true, sortable: true,
resizable: true, resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, false), renderCell: (params: any) => currencyCellRenderer(params, false),
}, },
{ {
@ -823,10 +823,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
// Função para renderizar o conteúdo principal do componente (reutilizável) // Função para renderizar o conteúdo principal do componente (reutilizável)
const renderAnaliticoContent = (isMaximized: boolean = false) => { const renderAnaliticoContent = (isMaximized: boolean = false) => {
return ( return (
<> <>
{/* Filtros Externos Ativos */} {/* Filtros Externos Ativos - Apenas quando maximizado */}
{(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && ( {isMaximized && (filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<div className="w-2 h-2 bg-blue-500 rounded-full"></div> <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> <span className="text-sm font-medium text-blue-900">Filtros aplicados pela tabela DRE Gerencial:</span>
@ -854,72 +854,74 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
</div> </div>
)} )}
{/* Controls */} {/* Controls - Apenas quando maximizado */}
<div className="flex gap-2 flex-wrap mb-4"> {isMaximized && (
{data.length > 0 && ( <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 <Button
onClick={clearAllFilters} onClick={exportToExcel}
variant="outline" variant="outline"
size="sm" size="sm"
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700" 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"
> >
<X className="h-4 w-4" /> <Download className="h-4 w-4" />
Limpar Filtros Exportar XLSX
{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>
)} </div>
<Button )}
onClick={exportToExcel}
variant="outline" {/* DataGridPro */}
size="sm" <Card className={`w-full shadow-lg rounded-2xl ${isMaximized ? 'h-[calc(96vh-280px)]' : 'h-[40vh]'}`} style={{ overflowAnchor: 'none' }}>
disabled={sortedAndFilteredData.length === 0} <CardContent className="p-4 h-full" style={{ overflowAnchor: 'none' }}>
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" <div className="flex items-center justify-between mb-3">
> <div className="flex items-center gap-4">
<Download className="h-4 w-4" /> <h2 className="text-lg font-semibold">
Exportar XLSX Total de Registros: <span className="text-blue-600">{sortedAndFilteredData.length}</span>
</Button> </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>
{/* 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" }}> <div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
<DataGridPremium <DataGridPremium
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`} key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
rows={sortedAndFilteredData} rows={sortedAndFilteredData}
columns={columns} columns={columns}
loading={loading} loading={loading}
disableRowSelectionOnClick disableRowSelectionOnClick
density="compact" density="compact"
slots={{ toolbar: GridToolbar }} slots={{ toolbar: GridToolbar }}
disableColumnMenu={true} disableColumnMenu={true}
disableColumnSorting={true} disableColumnSorting={true}
pagination={false} pagination={false}
disableVirtualization={false} disableVirtualization={false}
getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`} getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`}
sx={{ sx={{
overflowAnchor: 'none', overflowAnchor: 'none',
height: "100%", height: "100%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -943,7 +945,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
overflow: "hidden !important", overflow: "hidden !important",
position: "relative", position: "relative",
zIndex: 100, zIndex: 100,
backgroundColor: "#f9fafb", backgroundColor: "#f9fafb",
flexShrink: 0, flexShrink: 0,
flexGrow: 0, flexGrow: 0,
}, },
@ -951,8 +953,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
position: "relative !important", position: "relative !important",
backgroundColor: "#f9fafb !important", backgroundColor: "#f9fafb !important",
zIndex: 100, zIndex: 100,
borderBottom: "1px solid #e5e7eb", borderBottom: "1px solid #e5e7eb",
}, },
"& .MuiDataGrid-columnHeader": { "& .MuiDataGrid-columnHeader": {
backgroundColor: "#f9fafb !important", backgroundColor: "#f9fafb !important",
}, },
@ -962,10 +964,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
"& .MuiDataGrid-columnHeadersInner": { "& .MuiDataGrid-columnHeadersInner": {
backgroundColor: "#f9fafb !important", backgroundColor: "#f9fafb !important",
}, },
"& .MuiDataGrid-cell": { "& .MuiDataGrid-cell": {
borderBottom: "1px solid #f0f0f0", borderBottom: "1px solid #f0f0f0",
fontSize: "0.875rem", fontSize: "0.875rem",
}, },
// Container do virtualScroller - deve ter scroll e ocupar espaço restante // Container do virtualScroller - deve ter scroll e ocupar espaço restante
"& .MuiDataGrid-container--bottom": { "& .MuiDataGrid-container--bottom": {
flex: 1, flex: 1,
@ -976,7 +978,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
flexDirection: "column", flexDirection: "column",
}, },
// Apenas o virtualScroller deve ter scroll // Apenas o virtualScroller deve ter scroll
"& .MuiDataGrid-virtualScroller": { "& .MuiDataGrid-virtualScroller": {
overflowY: "auto !important", overflowY: "auto !important",
overflowX: "auto !important", overflowX: "auto !important",
height: "100% !important", height: "100% !important",
@ -1004,137 +1006,137 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
}, },
"& .MuiDataGrid-row": { "& .MuiDataGrid-row": {
minWidth: "max-content", minWidth: "max-content",
}, },
"& .MuiDataGrid-toolbarContainer": { "& .MuiDataGrid-toolbarContainer": {
backgroundColor: "#f8fafc", backgroundColor: "#f8fafc",
borderBottom: "1px solid #e5e7eb", borderBottom: "1px solid #e5e7eb",
padding: "8px 16px", padding: "8px 16px",
}, },
"& .MuiDataGrid-scrollbar": { "& .MuiDataGrid-scrollbar": {
display: "none", display: "none",
}, },
// Ocultar todos os ícones nativos das colunas // Ocultar todos os ícones nativos das colunas
"& .MuiDataGrid-columnHeaderMenuContainer": { "& .MuiDataGrid-columnHeaderMenuContainer": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-columnHeaderMenuButton": { "& .MuiDataGrid-columnHeaderMenuButton": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-columnHeaderSortIcon": { "& .MuiDataGrid-columnHeaderSortIcon": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-columnHeaderSortIconContainer": { "& .MuiDataGrid-columnHeaderSortIconContainer": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-iconButtonContainer": { "& .MuiDataGrid-iconButtonContainer": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-columnHeaderSeparator": { "& .MuiDataGrid-columnHeaderSeparator": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-columnHeaderSortButton": { "& .MuiDataGrid-columnHeaderSortButton": {
display: "none !important", display: "none !important",
}, },
// Ocultar qualquer ícone de menu adicional // Ocultar qualquer ícone de menu adicional
"& .MuiDataGrid-menuIcon": { "& .MuiDataGrid-menuIcon": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-menuIconButton": { "& .MuiDataGrid-menuIconButton": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-columnHeaderMenuIcon": { "& .MuiDataGrid-columnHeaderMenuIcon": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-columnHeaderMenuIconButton": { "& .MuiDataGrid-columnHeaderMenuIconButton": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-menuContainer": { "& .MuiDataGrid-menuContainer": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-menu": { "& .MuiDataGrid-menu": {
display: "none !important", display: "none !important",
}, },
// Ocultar footer de paginação // Ocultar footer de paginação
"& .MuiDataGrid-footerContainer": { "& .MuiDataGrid-footerContainer": {
display: "none !important", display: "none !important",
}, },
"& .MuiDataGrid-pagination": { "& .MuiDataGrid-pagination": {
display: "none !important", display: "none !important",
}, },
"& .MuiTablePagination-root": { "& .MuiTablePagination-root": {
display: "none !important", display: "none !important",
}, },
// Garantir que nosso botão customizado apareça // Garantir que nosso botão customizado apareça
"& .MuiDataGrid-columnHeaderTitleContainer": { "& .MuiDataGrid-columnHeaderTitleContainer": {
width: "100%", width: "100%",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
}, },
}} }}
/> />
{/* Card de Agregação Customizado */} {/* Card de Agregação Customizado */}
{sortedAndFilteredData.length > 0 && ( {sortedAndFilteredData.length > 0 && (
<div <div
ref={setAggregationCardRef} ref={setAggregationCardRef}
className="w-full bg-gray-50 border-t border-gray-200 sticky bottom-0 z-50 shadow-lg" className="w-full bg-gray-50 border-t border-gray-200 sticky bottom-0 z-50 shadow-lg"
style={{ overflowAnchor: 'none' }} style={{ overflowAnchor: 'none' }}
> >
<div className="px-4 py-3"> <div className="px-4 py-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<div className="text-sm font-medium text-gray-700"> <div className="text-sm font-medium text-gray-700">
Vl.Realizado: Vl.Realizado:
<span className={`ml-2 font-semibold ${columnTotals.valor < 0 ? 'text-red-600' : 'text-gray-900'}`}> <span className={`ml-2 font-semibold ${columnTotals.valor < 0 ? 'text-red-600' : 'text-gray-900'}`}>
{new Intl.NumberFormat("pt-BR", { {new Intl.NumberFormat("pt-BR", {
style: "currency", style: "currency",
currency: "BRL", currency: "BRL",
}).format(columnTotals.valor)} }).format(columnTotals.valor)}
</span> </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> </div>
</CardContent>
</Card> <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>
</> </>
); );
}; };