Merge pull request #45 from JurunenseDevInterno/feat-expandir-analitico
Feat expandir analitico
This commit is contained in:
Alessandro Gonçalves
GitHub
commit
b8e0b75ce8
|
|
@ -481,12 +481,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
// Definir colunas do DataGridPro na ordem solicitada
|
||||
const columns = React.useMemo(() => {
|
||||
const dateCellRenderer = (params: any) => {
|
||||
if (!params.value) return "-";
|
||||
try {
|
||||
return new Date(params.value).toLocaleDateString("pt-BR");
|
||||
} catch (error) {
|
||||
return params.value;
|
||||
}
|
||||
if (!params.value) return "-";
|
||||
try {
|
||||
return new Date(params.value).toLocaleDateString("pt-BR");
|
||||
} catch (error) {
|
||||
return params.value;
|
||||
}
|
||||
};
|
||||
|
||||
const currencyCellRenderer = (params: any, showZero: boolean = false) => {
|
||||
|
|
@ -609,40 +609,40 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
sortable: true,
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
field: "valor",
|
||||
headerName: "Vl.Realizado",
|
||||
type: "number" as const,
|
||||
width: 140,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
{
|
||||
field: "valor",
|
||||
headerName: "Vl.Realizado",
|
||||
type: "number" as const,
|
||||
width: 140,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
renderCell: (params: any) => currencyCellRenderer(params, true),
|
||||
},
|
||||
{
|
||||
field: "valor_previsto",
|
||||
headerName: "Vl.Previsto",
|
||||
type: "number" as const,
|
||||
width: 130,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
{
|
||||
field: "valor_previsto",
|
||||
headerName: "Vl.Previsto",
|
||||
type: "number" as const,
|
||||
width: 130,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
renderCell: (params: any) => currencyCellRenderer(params, false),
|
||||
},
|
||||
{
|
||||
field: "valor_confirmado",
|
||||
headerName: "Vl.Confirmado",
|
||||
type: "number" as const,
|
||||
width: 140,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
{
|
||||
field: "valor_confirmado",
|
||||
headerName: "Vl.Confirmado",
|
||||
type: "number" as const,
|
||||
width: 140,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
renderCell: (params: any) => currencyCellRenderer(params, false),
|
||||
},
|
||||
{
|
||||
field: "valor_pago",
|
||||
headerName: "Vl.Pago",
|
||||
type: "number" as const,
|
||||
{
|
||||
field: "valor_pago",
|
||||
headerName: "Vl.Pago",
|
||||
type: "number" as const,
|
||||
width: 120,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
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)
|
||||
const renderAnaliticoContent = (isMaximized: boolean = false) => {
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
{/* Filtros Externos Ativos */}
|
||||
{(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
|
||||
{/* Filtros Externos Ativos - Apenas quando maximizado */}
|
||||
{isMaximized && (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>
|
||||
|
|
@ -854,72 +854,74 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-2 flex-wrap mb-4">
|
||||
{data.length > 0 && (
|
||||
|
||||
{/* Controls - Apenas quando maximizado */}
|
||||
{isMaximized && (
|
||||
<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={clearAllFilters}
|
||||
onClick={exportToExcel}
|
||||
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"
|
||||
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" />
|
||||
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>
|
||||
)}
|
||||
<Download className="h-4 w-4" />
|
||||
Exportar XLSX
|
||||
</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>
|
||||
|
||||
{/* 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',
|
||||
<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",
|
||||
|
|
@ -943,7 +945,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
overflow: "hidden !important",
|
||||
position: "relative",
|
||||
zIndex: 100,
|
||||
backgroundColor: "#f9fafb",
|
||||
backgroundColor: "#f9fafb",
|
||||
flexShrink: 0,
|
||||
flexGrow: 0,
|
||||
},
|
||||
|
|
@ -951,8 +953,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
position: "relative !important",
|
||||
backgroundColor: "#f9fafb !important",
|
||||
zIndex: 100,
|
||||
borderBottom: "1px solid #e5e7eb",
|
||||
},
|
||||
borderBottom: "1px solid #e5e7eb",
|
||||
},
|
||||
"& .MuiDataGrid-columnHeader": {
|
||||
backgroundColor: "#f9fafb !important",
|
||||
},
|
||||
|
|
@ -962,10 +964,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
"& .MuiDataGrid-columnHeadersInner": {
|
||||
backgroundColor: "#f9fafb !important",
|
||||
},
|
||||
"& .MuiDataGrid-cell": {
|
||||
borderBottom: "1px solid #f0f0f0",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
"& .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,
|
||||
|
|
@ -976,7 +978,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
flexDirection: "column",
|
||||
},
|
||||
// Apenas o virtualScroller deve ter scroll
|
||||
"& .MuiDataGrid-virtualScroller": {
|
||||
"& .MuiDataGrid-virtualScroller": {
|
||||
overflowY: "auto !important",
|
||||
overflowX: "auto !important",
|
||||
height: "100% !important",
|
||||
|
|
@ -1004,137 +1006,137 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
},
|
||||
"& .MuiDataGrid-row": {
|
||||
minWidth: "max-content",
|
||||
},
|
||||
"& .MuiDataGrid-toolbarContainer": {
|
||||
backgroundColor: "#f8fafc",
|
||||
borderBottom: "1px solid #e5e7eb",
|
||||
padding: "8px 16px",
|
||||
},
|
||||
},
|
||||
"& .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",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
// 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>
|
||||
)}
|
||||
{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>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -251,19 +251,6 @@ export default function Teste() {
|
|||
});
|
||||
const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
|
||||
const [isAllExpanded, setIsAllExpanded] = useState(false);
|
||||
|
||||
// Refs para sincronizar scroll vertical entre coluna fixa e valores
|
||||
const descricaoScrollRef = React.useRef<HTMLDivElement>(null);
|
||||
const valoresScrollRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
// Função para sincronizar scroll vertical
|
||||
const syncScroll = (source: 'descricao' | 'valores') => {
|
||||
if (source === 'descricao' && descricaoScrollRef.current && valoresScrollRef.current) {
|
||||
valoresScrollRef.current.scrollTop = descricaoScrollRef.current.scrollTop;
|
||||
} else if (source === 'valores' && descricaoScrollRef.current && valoresScrollRef.current) {
|
||||
descricaoScrollRef.current.scrollTop = valoresScrollRef.current.scrollTop;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Carregar períodos disponíveis da API
|
||||
|
|
@ -2191,7 +2178,7 @@ export default function Teste() {
|
|||
|
||||
if (isSelected) {
|
||||
style +=
|
||||
" bg-green-100 shadow-lg";
|
||||
" bg-gradient-to-r from-green-100 to-emerald-100 border-l-4 border-green-500 shadow-lg";
|
||||
}
|
||||
|
||||
switch (row.type) {
|
||||
|
|
@ -2212,6 +2199,35 @@ export default function Teste() {
|
|||
}
|
||||
};
|
||||
|
||||
// Função para obter o background da célula fixa baseado no tipo de linha
|
||||
const getFixedCellBackground = (row: HierarchicalRow): string => {
|
||||
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
|
||||
row.centro_custo || ""
|
||||
}-${row.codigo_conta || ""}`;
|
||||
const isSelected = linhaSelecionada === linhaId;
|
||||
const isCalculado = row.isCalculado === true;
|
||||
|
||||
if (isSelected) {
|
||||
return "bg-gradient-to-r from-green-100 to-emerald-100";
|
||||
}
|
||||
|
||||
switch (row.type) {
|
||||
case "grupo":
|
||||
if (isCalculado) {
|
||||
return "bg-gradient-to-r from-blue-100 to-indigo-100";
|
||||
}
|
||||
return "bg-gradient-to-r from-blue-50 to-indigo-50";
|
||||
case "subgrupo":
|
||||
return "bg-gradient-to-r from-gray-50 to-blue-50";
|
||||
case "centro_custo":
|
||||
return "bg-gradient-to-r from-gray-50 to-gray-100";
|
||||
case "conta":
|
||||
return "bg-white";
|
||||
default:
|
||||
return "bg-white";
|
||||
}
|
||||
};
|
||||
|
||||
const getIndentStyle = (level: number) => {
|
||||
return { paddingLeft: `${level * 20}px` };
|
||||
};
|
||||
|
|
@ -2802,206 +2818,149 @@ export default function Teste() {
|
|||
{/* Table Container */}
|
||||
{filtrosAplicados && !loading && !error && (
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
|
||||
{/* Container com coluna fixa e scroll horizontal */}
|
||||
<div className="flex max-h-[500px] overflow-hidden">
|
||||
{/* Coluna fixa - Descrição */}
|
||||
<div className="flex-shrink-0 border-r border-gray-200" style={{ minWidth: '300px', width: 'auto' }}>
|
||||
{/* Header fixo da descrição */}
|
||||
<div className="sticky top-0 z-20 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
|
||||
<div className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap">
|
||||
Descrição
|
||||
</div>
|
||||
</div>
|
||||
{/* Corpo da descrição com scroll vertical */}
|
||||
<div
|
||||
ref={descricaoScrollRef}
|
||||
className="overflow-y-auto max-h-[500px] [&::-webkit-scrollbar]:hidden"
|
||||
style={{
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
}}
|
||||
onScroll={() => syncScroll('descricao')}
|
||||
>
|
||||
{hierarchicalData.map((row, index) => {
|
||||
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
|
||||
const isSelected = linhaSelecionada === linhaId;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)} cursor-pointer`}
|
||||
style={{
|
||||
height: '40px',
|
||||
minHeight: '40px',
|
||||
maxHeight: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minWidth: 'max-content',
|
||||
boxSizing: 'border-box',
|
||||
borderLeft: isSelected ? '4px solid rgb(34 197 94)' : 'none',
|
||||
}}
|
||||
onClick={() => handleRowClick(row)}
|
||||
>
|
||||
<div
|
||||
className="py-1 whitespace-nowrap flex items-center h-full w-full"
|
||||
style={{
|
||||
minWidth: 'max-content',
|
||||
height: '100%',
|
||||
paddingLeft: isSelected ? 'calc(1rem - 4px)' : '1rem',
|
||||
paddingRight: '1rem',
|
||||
}}
|
||||
>
|
||||
<div style={getIndentStyle(row.level)} className="flex items-center h-full">
|
||||
{renderCellContent(row)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parte com scroll - Valores */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div
|
||||
ref={valoresScrollRef}
|
||||
className="overflow-x-auto overflow-y-auto max-h-[500px]"
|
||||
style={{ scrollbarWidth: 'thin' }}
|
||||
onScroll={() => syncScroll('valores')}
|
||||
>
|
||||
<table className="w-full border-collapse">
|
||||
{/* Table Header */}
|
||||
<thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
<tr className="border-b border-gray-200">
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
<React.Fragment key={mes}>
|
||||
<th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
{mes}
|
||||
</th>
|
||||
<th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
%
|
||||
</th>
|
||||
</React.Fragment>
|
||||
))}
|
||||
<th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
Total
|
||||
{/* Scroll Container - Apenas um container com scroll */}
|
||||
<div
|
||||
className="overflow-x-auto overflow-y-auto max-h-[500px]"
|
||||
style={{ scrollbarWidth: 'thin' }}
|
||||
>
|
||||
{/* Table */}
|
||||
<table
|
||||
className="w-full border-collapse"
|
||||
style={{ minWidth: 'max-content' }}
|
||||
>
|
||||
{/* Table Header */}
|
||||
<thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px] bg-gradient-to-r from-blue-50 to-indigo-50 sticky left-0 z-20 shadow-[2px_0_4px_rgba(0,0,0,0.1)]">
|
||||
Descrição
|
||||
</th>
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
<React.Fragment key={mes}>
|
||||
<th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
{mes}
|
||||
</th>
|
||||
<th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
%
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* Table Body */}
|
||||
<tbody>
|
||||
{hierarchicalData.map((row, index) => {
|
||||
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
|
||||
const isSelected = linhaSelecionada === linhaId;
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
|
||||
style={{
|
||||
height: '40px',
|
||||
minHeight: '40px',
|
||||
maxHeight: '40px',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
{/* Colunas de valores por mês */}
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
<React.Fragment key={mes}>
|
||||
<td
|
||||
className="px-2 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
|
||||
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
|
||||
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>
|
||||
);
|
||||
})()
|
||||
: "-"}
|
||||
</td>
|
||||
<td
|
||||
className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
|
||||
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
|
||||
onClick={() => handleRowClick(row, mes)}
|
||||
title={
|
||||
row.percentuaisPorMes &&
|
||||
row.percentuaisPorMes[mes] !== undefined
|
||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.percentuaisPorMes &&
|
||||
</React.Fragment>
|
||||
))}
|
||||
<th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
Total
|
||||
</th>
|
||||
<th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
%
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* Table Body */}
|
||||
<tbody>
|
||||
{hierarchicalData.map((row, index) => {
|
||||
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
|
||||
const isSelected = linhaSelecionada === linhaId;
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
|
||||
>
|
||||
<td
|
||||
className={`px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden sticky left-0 z-10 ${getFixedCellBackground(row)} shadow-[2px_0_4px_rgba(0,0,0,0.05)] cursor-pointer`}
|
||||
onClick={() => handleRowClick(row)}
|
||||
>
|
||||
<div style={getIndentStyle(row.level)}>
|
||||
{renderCellContent(row)}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Colunas de valores por mês */}
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
<React.Fragment key={mes}>
|
||||
<td
|
||||
className="px-2 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
|
||||
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>
|
||||
);
|
||||
})()
|
||||
: "-"}
|
||||
</td>
|
||||
<td
|
||||
className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
|
||||
onClick={() => handleRowClick(row, mes)}
|
||||
title={
|
||||
row.percentuaisPorMes &&
|
||||
row.percentuaisPorMes[mes] !== undefined
|
||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||
: "-"}
|
||||
</td>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Coluna Total */}
|
||||
<td
|
||||
className="px-4 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
|
||||
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
|
||||
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>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
|
||||
{/* Coluna Percentual Total */}
|
||||
<td
|
||||
className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
|
||||
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
|
||||
onClick={() => handleRowClick(row)}
|
||||
title={
|
||||
row.percentualTotal !== undefined
|
||||
? `${row.percentualTotal.toFixed(1)}%`
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.percentualTotal !== undefined
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.percentuaisPorMes &&
|
||||
row.percentuaisPorMes[mes] !== undefined
|
||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||
: "-"}
|
||||
</td>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Coluna Total */}
|
||||
<td
|
||||
className="px-4 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
|
||||
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>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
|
||||
{/* Coluna Percentual Total */}
|
||||
<td
|
||||
className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
|
||||
onClick={() => handleRowClick(row)}
|
||||
title={
|
||||
row.percentualTotal !== undefined
|
||||
? `${row.percentualTotal.toFixed(1)}%`
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.percentualTotal !== undefined
|
||||
? `${row.percentualTotal.toFixed(1)}%`
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue