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

Merge pull request #46 from JurunenseDevInterno/dev 

Dev
This commit is contained in:
Alessandro Gonçalves 2025-11-10 16:51:39 -03:00 committed by GitHub
parent 5c74defcd4 b8e0b75ce8
commit 863448cae8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 396 additions and 435 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>
</> </>
); );
}; };

373
src/app/DRE/teste.tsx
View File

@ -251,19 +251,6 @@ export default function Teste() {
}); });
const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null); const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
const [isAllExpanded, setIsAllExpanded] = useState(false); 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(() => { useEffect(() => {
// Carregar períodos disponíveis da API // Carregar períodos disponíveis da API
@ -2191,7 +2178,7 @@ export default function Teste() {
if (isSelected) { if (isSelected) {
style += 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) { 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) => { const getIndentStyle = (level: number) => {
return { paddingLeft: `${level * 20}px` }; return { paddingLeft: `${level * 20}px` };
}; };
@ -2802,206 +2818,149 @@ export default function Teste() {
{/* Table Container */} {/* Table Container */}
{filtrosAplicados && !loading && !error && ( {filtrosAplicados && !loading && !error && (
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"> <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
{/* Container com coluna fixa e scroll horizontal */} {/* Scroll Container - Apenas um container com scroll */}
<div className="flex max-h-[500px] overflow-hidden"> <div
{/* Coluna fixa - Descrição */} className="overflow-x-auto overflow-y-auto max-h-[500px]"
<div className="flex-shrink-0 border-r border-gray-200" style={{ minWidth: '300px', width: 'auto' }}> style={{ scrollbarWidth: 'thin' }}
{/* 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"> {/* Table */}
<div className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap"> <table
Descrição className="w-full border-collapse"
</div> style={{ minWidth: 'max-content' }}
</div> >
{/* Corpo da descrição com scroll vertical */} {/* Table Header */}
<div <thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
ref={descricaoScrollRef} <tr className="border-b border-gray-200">
className="overflow-y-auto max-h-[500px] [&::-webkit-scrollbar]:hidden" <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)]">
style={{ Descrição
scrollbarWidth: 'none', </th>
msOverflowStyle: 'none', {mesesDisponiveis.map((mes) => (
}} <React.Fragment key={mes}>
onScroll={() => syncScroll('descricao')} <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}
{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
</th> </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 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> </th>
</tr> </React.Fragment>
</thead> ))}
<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">
{/* Table Body */} Total
<tbody> </th>
{hierarchicalData.map((row, index) => { <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">
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`; %
const isSelected = linhaSelecionada === linhaId; </th>
return ( </tr>
<tr </thead>
key={index}
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`} {/* Table Body */}
style={{ <tbody>
height: '40px', {hierarchicalData.map((row, index) => {
minHeight: '40px', const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
maxHeight: '40px', const isSelected = linhaSelecionada === linhaId;
boxSizing: 'border-box', return (
}} <tr
> key={index}
{/* Colunas de valores por mês */} className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
{mesesDisponiveis.map((mes) => ( >
<React.Fragment key={mes}> <td
<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`}
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)}
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }} >
onClick={() => handleRowClick(row, mes)} <div style={getIndentStyle(row.level)}>
title={ {renderCellContent(row)}
row.valoresPorMes && row.valoresPorMes[mes] </div>
? formatCurrency(row.valoresPorMes[mes]) </td>
: "-"
} {/* Colunas de valores por mês */}
> {mesesDisponiveis.map((mes) => (
{row.valoresPorMes && row.valoresPorMes[mes] <React.Fragment key={mes}>
? (() => { <td
const { formatted, isNegative } = 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]"
formatCurrencyWithColor(row.valoresPorMes[mes]); onClick={() => handleRowClick(row, mes)}
return ( title={
<span row.valoresPorMes && row.valoresPorMes[mes]
className={ ? formatCurrency(row.valoresPorMes[mes])
isNegative : "-"
? "text-red-600 font-bold" }
: "text-gray-900" >
} {row.valoresPorMes && row.valoresPorMes[mes]
> ? (() => {
{formatted} const { formatted, isNegative } =
</span> formatCurrencyWithColor(row.valoresPorMes[mes]);
); return (
})() <span
: "-"} className={
</td> isNegative
<td ? "text-red-600 font-bold"
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]" : "text-gray-900"
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }} }
onClick={() => handleRowClick(row, mes)} >
title={ {formatted}
row.percentuaisPorMes && </span>
row.percentuaisPorMes[mes] !== undefined );
? `${row.percentuaisPorMes[mes].toFixed(1)}%` })()
: "-" : "-"}
} </td>
> <td
{row.percentuaisPorMes && 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] !== undefined
? `${row.percentuaisPorMes[mes].toFixed(1)}%` ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
: "-"} : "-"
</td> }
</React.Fragment> >
))} {row.percentuaisPorMes &&
row.percentuaisPorMes[mes] !== undefined
{/* Coluna Total */} ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
<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]" </td>
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }} </React.Fragment>
onClick={() => handleRowClick(row)} ))}
title={row.total ? formatCurrency(row.total) : "-"}
> {/* Coluna Total */}
{(() => { <td
const { formatted, isNegative } = formatCurrencyWithColor( 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]"
row.total! onClick={() => handleRowClick(row)}
); title={row.total ? formatCurrency(row.total) : "-"}
return ( >
<span {(() => {
className={ const { formatted, isNegative } = formatCurrencyWithColor(
isNegative ? "text-red-600 font-bold" : "text-gray-900" row.total!
} );
> return (
{formatted} <span
</span> className={
); isNegative ? "text-red-600 font-bold" : "text-gray-900"
})()} }
</td> >
{formatted}
{/* Coluna Percentual Total */} </span>
<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' }} </td>
onClick={() => handleRowClick(row)}
title={ {/* Coluna Percentual Total */}
row.percentualTotal !== undefined <td
? `${row.percentualTotal.toFixed(1)}%` 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 !== undefined
? `${row.percentualTotal.toFixed(1)}%` ? `${row.percentualTotal.toFixed(1)}%`
: "-"} : "-"
</td> }
</tr> >
); {row.percentualTotal !== undefined
})} ? `${row.percentualTotal.toFixed(1)}%`
</tbody> : "-"}
</table> </td>
</div> </tr>
</div> );
})}
</tbody>
</table>
</div> </div>
</div> </div>
)} )}