fix: ajuste na estilização da tabela analitica
This commit is contained in:
Alessandro Gonçaalves
parent
7b0c5d2070
commit
4ec19b4f8f
|
|
@ -736,7 +736,37 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-sm text-gray-500">
|
||||||
Relatório detalhado de transações
|
Relatório detalhado de transações
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtros Externos Ativos - Centralizado */}
|
||||||
|
{(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<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>
|
||||||
|
<div className="flex flex-wrap gap-2 text-xs text-blue-800">
|
||||||
|
{filtrosExternos.dataInicio && filtrosExternos.dataFim && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Período: {filtrosExternos.dataInicio} a {filtrosExternos.dataFim}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{filtrosExternos.centroCusto && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Centro: {filtrosExternos.centroCusto}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{filtrosExternos.codigoGrupo && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Grupo: {filtrosExternos.codigoGrupo}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{filtrosExternos.codigoConta && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Conta: {filtrosExternos.codigoConta}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Controls */}
|
{/* Controls */}
|
||||||
<div className="flex gap-2 flex-wrap">
|
<div className="flex gap-2 flex-wrap">
|
||||||
|
|
@ -748,7 +778,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
}
|
}
|
||||||
className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||||
|
|
@ -768,7 +798,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
)}
|
)}
|
||||||
{data.length > 0 && (
|
{data.length > 0 && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
onClick={clearAllFilters}
|
onClick={clearAllFilters}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -776,8 +806,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
Limpar Filtros
|
Limpar Filtros
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={exportToExcel}
|
onClick={exportToExcel}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -785,44 +815,13 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
>
|
>
|
||||||
<Download className="h-4 w-4" />
|
<Download className="h-4 w-4" />
|
||||||
Exportar XLSX
|
Exportar XLSX
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filtros Externos Ativos */}
|
|
||||||
{(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
|
|
||||||
<div className="mb-2 p-2 bg-transparent border-transparent rounded-lg">
|
|
||||||
<div className="flex items-center gap-2 mb-1">
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap gap-2 text-xs text-blue-800">
|
|
||||||
{filtrosExternos.dataInicio && filtrosExternos.dataFim && (
|
|
||||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
|
||||||
Período: {filtrosExternos.dataInicio} a {filtrosExternos.dataFim}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{filtrosExternos.centroCusto && (
|
|
||||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
|
||||||
Centro: {filtrosExternos.centroCusto}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{filtrosExternos.codigoGrupo && (
|
|
||||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
|
||||||
Grupo: {filtrosExternos.codigoGrupo}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{filtrosExternos.codigoConta && (
|
|
||||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
|
||||||
Conta: {filtrosExternos.codigoConta}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* DataGridPro */}
|
{/* DataGridPro */}
|
||||||
<Card className="w-full h-[85vh] shadow-lg rounded-2xl">
|
<Card className="w-full h-[85vh] shadow-lg rounded-2xl">
|
||||||
|
|
@ -839,10 +838,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
currency: "BRL",
|
currency: "BRL",
|
||||||
}).format(columnTotals.valorRealizado)}
|
}).format(columnTotals.valorRealizado)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style={{ height: "calc(100% - 2rem)", width: "100%" }}>
|
<div style={{ height: "calc(100% - 2rem)", width: "100%" }}>
|
||||||
<DataGrid
|
<DataGrid
|
||||||
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
|
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
|
||||||
|
|
@ -930,7 +929,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|
@ -1006,7 +1005,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">
|
||||||
|
|
@ -1023,7 +1022,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 && (
|
||||||
|
|
@ -1039,9 +1038,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
>
|
>
|
||||||
✕
|
✕
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<div className="flex justify-center pt-2">
|
<div className="flex justify-center pt-2">
|
||||||
|
|
@ -1059,7 +1058,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
Adicionar condição
|
Adicionar condição
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DialogFooter className="flex gap-2 pt-3 border-t border-gray-200">
|
<DialogFooter className="flex gap-2 pt-3 border-t border-gray-200">
|
||||||
<Button
|
<Button
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue