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

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

@ -842,7 +842,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
</div> </div>
<div style={{ height: "calc(100% - 2rem)", width: "100%" }}> <div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative" }}>
<DataGrid <DataGrid
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`} key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
rows={sortedAndFilteredData} rows={sortedAndFilteredData}
@ -853,6 +853,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
slots={{ toolbar: GridToolbar }} slots={{ toolbar: GridToolbar }}
disableColumnMenu={true} disableColumnMenu={true}
disableColumnSorting={true} disableColumnSorting={true}
hideFooter={true}
getRowId={(row) => row.id || `row-${row.recnum || Math.random()}`} getRowId={(row) => row.id || `row-${row.recnum || Math.random()}`}
initialState={{ initialState={{
sorting: { sortModel: [{ field: "data_vencimento", sort: "desc" }] }, sorting: { sortModel: [{ field: "data_vencimento", sort: "desc" }] },
@ -916,6 +917,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
"& .MuiDataGrid-menu": { "& .MuiDataGrid-menu": {
display: "none !important", 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 // Garantir que nosso botão customizado apareça
"& .MuiDataGrid-columnHeaderTitleContainer": { "& .MuiDataGrid-columnHeaderTitleContainer": {
width: "100%", width: "100%",
@ -923,13 +934,66 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
}, },
"& .MuiDataGrid-footerContainer": {
backgroundColor: "#f8fafc",
borderTop: "1px solid #e5e7eb",
},
}} }}
/> />
</div>
{/* 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> </CardContent>
</Card> </Card>
@ -977,7 +1041,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700 mb-1">
@ -1005,7 +1069,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<SelectItem value="notEmpty">não está vazio</SelectItem> <SelectItem value="notEmpty">não está vazio</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{!(cond.operator === "empty" || cond.operator === "notEmpty") && ( {!(cond.operator === "empty" || cond.operator === "notEmpty") && (
<div className="flex-1"> <div className="flex-1">
@ -1022,7 +1086,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
placeholder="Digite o valor" placeholder="Digite o valor"
className="w-full bg-white border-gray-300" className="w-full bg-white border-gray-300"
/> />
</div> </div>
)} )}
{conditions.length > 1 && ( {conditions.length > 1 && (
@ -1038,8 +1102,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
> >
✕ ✕
</Button> </Button>
</div> </div>
)} )}
</div> </div>
))} ))}