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

fix: adicionado o footer table

This commit is contained in:
Alessandro Gonçaalves 2025-10-22 19:33:39 -03:00
parent 4ec19b4f8f
commit 31c7c1f3ca
1 changed files with 75 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -842,7 +842,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div>
</div>
<div style={{ height: "calc(100% - 2rem)", width: "100%" }}>
<div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative" }}>
<DataGrid
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
rows={sortedAndFilteredData}
@ -853,6 +853,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
slots={{ toolbar: GridToolbar }}
disableColumnMenu={true}
disableColumnSorting={true}
hideFooter={true}
getRowId={(row) => row.id || `row-${row.recnum || Math.random()}`}
initialState={{
sorting: { sortModel: [{ field: "data_vencimento", sort: "desc" }] },
@ -916,6 +917,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
"& .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%",
@ -923,12 +934,65 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
alignItems: "center",
justifyContent: "space-between",
},
"& .MuiDataGrid-footerContainer": {
backgroundColor: "#f8fafc",
borderTop: "1px solid #e5e7eb",
},
}}
/>
{/* Footer com Totalizadores - Posicionado no lugar do footer nativo */}
{sortedAndFilteredData.length > 0 && (
<div
className="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2"
style={{
height: "48px",
display: "flex",
alignItems: "center",
fontSize: "0.75rem",
zIndex: 1
}}
>
<div className="flex items-center w-full">
{/* Espaçamento para alinhar com as colunas da tabela */}
<div className="w-[150px]"></div> {/* Dt Venc */}
<div className="w-[130px]"></div> {/* Dt Caixa */}
<div className="w-[100px]"></div> {/* Entidade */}
<div className="w-[140px]"></div> {/* Cod.Fornec */}
<div className="flex-1"></div> {/* Fornecedor */}
<div className="w-[130px]"></div> {/* C Custo */}
<div className="w-[150px]"></div> {/* Cod.Conta */}
<div className="flex-1"></div> {/* Conta */}
{/* Totalizadores das colunas de valor */}
<div className={`w-[140px] text-right font-semibold ${columnTotals.valorRealizado < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
{new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(columnTotals.valorRealizado)}
</div>
<div className={`w-[130px] text-right font-semibold ${columnTotals.valorPrevisto < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
{new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(columnTotals.valorPrevisto)}
</div>
<div className={`w-[140px] text-right font-semibold ${columnTotals.valorConfirmado < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
{new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(columnTotals.valorConfirmado)}
</div>
<div className={`w-[130px] text-right font-semibold ${columnTotals.valorPago < 0 ? 'text-red-600 font-semibold' : 'text-gray-800'}`}>
{new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(columnTotals.valorPago)}
</div>
{/* Espaçamento para o resto */}
<div className="flex-1"></div> {/* Historico */}
<div className="flex-1"></div> {/* Historico 2 */}
<div className="w-[80px]"></div> {/* Num.Lanc */}
</div>
</div>
)}
</div>
</CardContent>
</Card>