fix: correções do analitico
This commit is contained in:
Alessandro Gonçaalves
parent
461f8966ab
commit
1375a471a2
|
|
@ -543,25 +543,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-none mx-auto p-6">
|
||||
<div className="w-full max-w-none mx-auto p-2">
|
||||
{/* Header Section */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg
|
||||
className="w-7 h-7 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</div> */}
|
||||
<div className="mb-2">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""}
|
||||
|
|
@ -570,12 +555,58 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
Relatório detalhado de transações
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Input
|
||||
placeholder="Filtrar tudo..."
|
||||
value={globalFilter ?? ""}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setGlobalFilter(e.target.value)
|
||||
}
|
||||
className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||
>
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtros Avançados
|
||||
{columnFilters.length > 0 && (
|
||||
<span className="ml-2 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
|
||||
{columnFilters.length}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
{(columnFilters.length > 0 || globalFilter) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearFilters}
|
||||
className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Limpar Filtros Avançados
|
||||
</Button>
|
||||
)}
|
||||
{data.length > 0 && (
|
||||
<Button
|
||||
onClick={exportToExcel}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Exportar XLSX
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtros Externos Ativos */}
|
||||
{(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
|
||||
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<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>
|
||||
|
|
@ -583,72 +614,27 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{filtrosExternos.dataInicio && filtrosExternos.dataFim && (
|
||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||
Período: {filtrosExternos.dataInicio} a {filtrosExternos.dataFim}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{filtrosExternos.centroCusto && (
|
||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||
Centro: {filtrosExternos.centroCusto}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{filtrosExternos.codigoGrupo && (
|
||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||
Grupo: {filtrosExternos.codigoGrupo}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{filtrosExternos.codigoConta && (
|
||||
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||
Conta: {filtrosExternos.codigoConta}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<Input
|
||||
placeholder="Filtrar tudo..."
|
||||
value={globalFilter ?? ""}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setGlobalFilter(e.target.value)
|
||||
}
|
||||
className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||
>
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtros Avançados
|
||||
{columnFilters.length > 0 && (
|
||||
<span className="ml-2 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
|
||||
{columnFilters.length}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
{(columnFilters.length > 0 || globalFilter) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearFilters}
|
||||
className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Limpar Filtros Avançados
|
||||
</Button>
|
||||
)}
|
||||
{data.length > 0 && (
|
||||
<Button
|
||||
onClick={exportToExcel}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Exportar XLSX
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Table Container */}
|
||||
|
|
@ -659,36 +645,36 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<div className="flex items-center px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
<div className="w-[140px] whitespace-nowrap">
|
||||
Data de Vencimento
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[120px] whitespace-nowrap">Data de Caixa</div>
|
||||
<div className="w-[120px] whitespace-nowrap">Entidade</div>
|
||||
<div className="w-[120px] whitespace-nowrap">
|
||||
Cód. Fornec
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[220px] whitespace-nowrap">
|
||||
Nome do Fornecedor
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[140px] whitespace-nowrap">Centro de Custo</div>
|
||||
<div className="w-[130px] whitespace-nowrap">Código da Conta</div>
|
||||
<div className="w-[160px] whitespace-nowrap">Nome da Conta</div>
|
||||
<div className="w-[130px] whitespace-nowrap text-right">
|
||||
Valor Realizado
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[120px] whitespace-nowrap text-right">
|
||||
Valor Previsto
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[130px] whitespace-nowrap text-right">
|
||||
Valor Confirmado
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[140px] whitespace-nowrap text-right">
|
||||
Valor Pago
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[20px] whitespace-nowrap"></div>
|
||||
<div className="w-[320px] whitespace-nowrap">Histórico</div>
|
||||
<div className="w-[500px] whitespace-nowrap">Histórico 2</div>
|
||||
<div className="w-[30px] whitespace-nowrap">
|
||||
Número do Lançamento
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -701,7 +687,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
scrollbarColor: "#cbd5e0 #f7fafc",
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
|
||||
|
|
@ -727,9 +713,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500">Nenhum dado encontrado</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="relative"
|
||||
style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
|
||||
|
|
@ -746,36 +732,36 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{new Date(
|
||||
row.original.data_vencimento
|
||||
).toLocaleDateString("pt-BR")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[120px] text-gray-600 whitespace-nowrap">
|
||||
{new Date(row.original.data_caixa).toLocaleDateString(
|
||||
"pt-BR"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[120px] text-gray-500 whitespace-nowrap">
|
||||
{row.original.entidade || "-"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[120px] font-medium text-gray-900 whitespace-nowrap">
|
||||
{row.original.codigo_fornecedor}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-[220px] text-gray-700 truncate"
|
||||
title={row.original.nome_fornecedor}
|
||||
>
|
||||
{row.original.nome_fornecedor}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[140px] text-gray-600 whitespace-nowrap">
|
||||
{row.original.codigo_centrocusto}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[130px] text-gray-600 whitespace-nowrap">
|
||||
{row.original.codigo_conta}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-[160px] text-gray-700 truncate"
|
||||
title={row.original.conta}
|
||||
>
|
||||
{row.original.conta}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`w-[130px] text-right font-semibold whitespace-nowrap ${
|
||||
row.original.valor < 0
|
||||
|
|
@ -825,7 +811,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
style: "currency",
|
||||
currency: "BRL",
|
||||
}).format(row.original.valor_pago)}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-gray-500">-</span>
|
||||
)}
|
||||
|
|
@ -846,20 +832,20 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<div className="w-[30px] text-gray-500 whitespace-nowrap">
|
||||
{row.original.numero_lancamento || "-"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer com Totalizador das Colunas */}
|
||||
{data.length > 0 && (
|
||||
{data.length > 0 && (
|
||||
<div className="bg-gradient-to-r from-gray-50 to-gray-100 border-t border-gray-200 sticky bottom-0 z-10">
|
||||
<div className="flex items-center px-4 py-3 text-sm font-semibold text-gray-900">
|
||||
<div className="w-[140px] whitespace-nowrap text-gray-600">
|
||||
TOTAL: {table.getRowModel().rows.length} registros
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[120px] whitespace-nowrap"></div>
|
||||
<div className="w-[120px] whitespace-nowrap"></div>
|
||||
<div className="w-[120px] whitespace-nowrap"></div>
|
||||
|
|
@ -920,14 +906,14 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
) : (
|
||||
<span className="text-gray-500">-</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[20px] whitespace-nowrap"></div>
|
||||
<div className="w-[320px] whitespace-nowrap"></div>
|
||||
<div className="w-[500px] whitespace-nowrap"></div>
|
||||
<div className="w-[30px] whitespace-nowrap"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary Footer - Integrado */}
|
||||
{
|
||||
|
|
@ -988,7 +974,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{conditions.map((cond, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex gap-3 items-start p-4 bg-gray-50 rounded-lg border border-gray-200"
|
||||
className="flex gap-2 items-start p-2 bg-gray-50 rounded-lg border border-gray-200"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
|
|
@ -1101,7 +1087,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex gap-3 pt-6 border-t border-gray-200">
|
||||
<DialogFooter className="flex gap-2 pt-3 border-t border-gray-200">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearFilters}
|
||||
|
|
|
|||
|
|
@ -781,7 +781,7 @@ export default function Teste() {
|
|||
switch (row.type) {
|
||||
case "grupo":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 whitespace-nowrap">
|
||||
<button
|
||||
onClick={() => toggleGroup(row.grupo!)}
|
||||
className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
|
||||
|
|
@ -810,7 +810,7 @@ export default function Teste() {
|
|||
);
|
||||
case "subgrupo":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 whitespace-nowrap">
|
||||
<button
|
||||
onClick={() => toggleSubgrupo(`${row.grupo}-${row.subgrupo}`)}
|
||||
className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
|
||||
|
|
@ -833,7 +833,7 @@ export default function Teste() {
|
|||
);
|
||||
case "centro_custo":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 whitespace-nowrap">
|
||||
<button
|
||||
onClick={() =>
|
||||
toggleCentro(`${row.grupo}-${row.subgrupo}-${row.centro_custo}`)
|
||||
|
|
@ -858,7 +858,7 @@ export default function Teste() {
|
|||
);
|
||||
case "conta":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 whitespace-nowrap">
|
||||
<div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-gray-400 font-bold text-lg">•</span>
|
||||
</div>
|
||||
|
|
@ -882,11 +882,11 @@ export default function Teste() {
|
|||
const hierarchicalData = buildHierarchicalData();
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-none mx-auto p-6">
|
||||
<div className="w-full max-w-none mx-auto p-2">
|
||||
{/* Header Section */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="mb-2">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
|
|
@ -911,11 +911,11 @@ export default function Teste() {
|
|||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="grid flex-1 auto-rows-min gap-6 py-4">
|
||||
<div className="grid flex-1 auto-rows-min gap-3 py-2">
|
||||
{/* Período */}
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<Label>Período</Label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label htmlFor="periodo-de" className="text-xs text-gray-500">DE</Label>
|
||||
<Select value={filtros.periodoDe} onValueChange={(value) => handleFiltroChange('periodoDe', value)}>
|
||||
|
|
@ -946,7 +946,7 @@ export default function Teste() {
|
|||
</div>
|
||||
|
||||
{/* Grupo
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="grupo">GRUPO</Label>
|
||||
<Select value={filtros.grupo} onValueChange={(value) => handleFiltroChange('grupo', value)}>
|
||||
<SelectTrigger>
|
||||
|
|
@ -962,7 +962,7 @@ export default function Teste() {
|
|||
</div>*/}
|
||||
|
||||
{/* Subgrupo
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="subgrupo">SUBGRUPO</Label>
|
||||
<Select value={filtros.subgrupo} onValueChange={(value) => handleFiltroChange('subgrupo', value)}>
|
||||
<SelectTrigger>
|
||||
|
|
@ -978,16 +978,16 @@ export default function Teste() {
|
|||
</div>*/}
|
||||
|
||||
{/* Centro de Custo */}
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="centro-custo">CENTRO DE CUSTO</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={selecionarTodosCentros}
|
||||
className="text-xs h-6 px-2"
|
||||
className="text-xs h-5 px-2"
|
||||
>
|
||||
Todos
|
||||
</Button>
|
||||
|
|
@ -996,15 +996,15 @@ export default function Teste() {
|
|||
variant="outline"
|
||||
size="sm"
|
||||
onClick={limparCentros}
|
||||
className="text-xs h-6 px-2"
|
||||
className="text-xs h-5 px-2"
|
||||
>
|
||||
Limpar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-h-32 overflow-y-auto border rounded-md p-2 space-y-2">
|
||||
<div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
|
||||
{opcoesCentrosCusto.map(centro => (
|
||||
<div key={centro} className="flex items-center space-x-2">
|
||||
<div key={centro} className="flex items-center space-x-1">
|
||||
<Checkbox
|
||||
id={`centro-${centro}`}
|
||||
checked={centrosCustoSelecionados.includes(centro)}
|
||||
|
|
@ -1027,16 +1027,16 @@ export default function Teste() {
|
|||
</div>
|
||||
|
||||
{/* Conta */}
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="conta">CONTA</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={selecionarTodasContas}
|
||||
className="text-xs h-6 px-2"
|
||||
className="text-xs h-5 px-2"
|
||||
>
|
||||
Todas
|
||||
</Button>
|
||||
|
|
@ -1045,15 +1045,15 @@ export default function Teste() {
|
|||
variant="outline"
|
||||
size="sm"
|
||||
onClick={limparContas}
|
||||
className="text-xs h-6 px-2"
|
||||
className="text-xs h-5 px-2"
|
||||
>
|
||||
Limpar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-h-32 overflow-y-auto border rounded-md p-2 space-y-2">
|
||||
<div className="max-h-32 overflow-y-auto border rounded-md p-1 space-y-1">
|
||||
{opcoesContas.map(conta => (
|
||||
<div key={conta} className="flex items-center space-x-2">
|
||||
<div key={conta} className="flex items-center space-x-1">
|
||||
<Checkbox
|
||||
id={`conta-${conta}`}
|
||||
checked={contasSelecionadas.includes(conta)}
|
||||
|
|
@ -1076,9 +1076,9 @@ export default function Teste() {
|
|||
</div>
|
||||
|
||||
{/* Valor
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<Label>Valor</Label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label htmlFor="valor-min" className="text-xs text-gray-500">VALOR MÍN.</Label>
|
||||
<div className="relative">
|
||||
|
|
@ -1109,7 +1109,7 @@ export default function Teste() {
|
|||
</div>*/}
|
||||
|
||||
{/* Busca Textual
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="busca-textual">BUSCA TEXTUAL</Label>
|
||||
<Input
|
||||
id="busca-textual"
|
||||
|
|
@ -1120,7 +1120,7 @@ export default function Teste() {
|
|||
</div>*/}
|
||||
</div>
|
||||
|
||||
<SheetFooter className="flex gap-3">
|
||||
<SheetFooter className="flex gap-2">
|
||||
{/* <Button variant="outline" onClick={limparFiltros} className="flex-1">
|
||||
Limpar filtros
|
||||
</Button> */}
|
||||
|
|
@ -1138,13 +1138,13 @@ export default function Teste() {
|
|||
|
||||
{/* Loading quando aplicando filtros */}
|
||||
{loading && (
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 text-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-4 text-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<LoaderPinwheel className="w-8 h-8 text-blue-600 animate-spin" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">
|
||||
Aplicando filtros...
|
||||
</h3>
|
||||
<p className="text-gray-500">
|
||||
|
|
@ -1157,9 +1157,9 @@ export default function Teste() {
|
|||
|
||||
{/* Erro */}
|
||||
{error && !loading && (
|
||||
<div className="bg-white rounded-xl shadow-lg border border-red-200 p-8 text-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-red-200 p-4 text-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
|
||||
<svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
|
|
@ -1169,7 +1169,7 @@ export default function Teste() {
|
|||
Erro ao carregar dados
|
||||
</h3>
|
||||
<p className="text-red-600 mb-4">{error}</p>
|
||||
<Button onClick={() => aplicarFiltros()} className="flex items-center gap-2">
|
||||
<Button onClick={() => aplicarFiltros()} className="flex items-center gap-1">
|
||||
Tentar novamente
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -1179,16 +1179,16 @@ export default function Teste() {
|
|||
|
||||
{/* Mensagem quando não há dados */}
|
||||
{!filtrosAplicados && !loading && !error && (
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 text-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-4 text-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<Filter className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">
|
||||
Nenhum dado exibido
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-4">
|
||||
<p className="text-gray-500 mb-2">
|
||||
Clique no botão "Filtros" para definir os critérios de busca e visualizar os dados do DRE.
|
||||
</p>
|
||||
|
||||
|
|
@ -1202,8 +1202,8 @@ export default function Teste() {
|
|||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
|
||||
{/* Table Header */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
|
||||
<div className="flex items-center justify-between px-4 py-2">
|
||||
<div className="flex items-center gap-4 text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
<div className="flex items-center justify-between px-4 py-1">
|
||||
<div className="flex items-center gap-2 text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
<div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
|
||||
|
|
@ -1217,7 +1217,7 @@ export default function Teste() {
|
|||
</div>
|
||||
|
||||
{/* Botões de controle */}
|
||||
<div className="flex gap-2 ml-4">
|
||||
<div className="flex gap-1 ml-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
|
|
@ -1240,7 +1240,7 @@ export default function Teste() {
|
|||
.map(row => `${row.grupo}-${row.subgrupo}-${row.centro_custo}`);
|
||||
setExpandedCentros(new Set(todosCentros));
|
||||
}}
|
||||
className="text-xs h-6 px-2"
|
||||
className="text-xs h-5 px-2"
|
||||
>
|
||||
Expandir Tudo
|
||||
</Button>
|
||||
|
|
@ -1253,7 +1253,7 @@ export default function Teste() {
|
|||
setExpandedSubgrupos(new Set());
|
||||
setExpandedCentros(new Set());
|
||||
}}
|
||||
className="text-xs h-6 px-2"
|
||||
className="text-xs h-5 px-2"
|
||||
>
|
||||
Recolher Tudo
|
||||
</Button>
|
||||
|
|
@ -1266,7 +1266,7 @@ export default function Teste() {
|
|||
{hierarchicalData.map((row, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-4 px-4 py-2 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors ${getRowStyle(
|
||||
className={`flex items-center gap-2 px-4 py-1 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors ${getRowStyle(
|
||||
row
|
||||
)}`}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue