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

fix: correções do analitico

This commit is contained in:
Alessandro Gonçaalves 2025-10-21 18:18:51 -03:00
parent 461f8966ab
commit 1375a471a2
2 changed files with 141 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -543,25 +543,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
}; };
return ( 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 */} {/* Header Section */}
<div className="mb-6"> <div className="mb-2">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center justify-between mb-1">
{/* <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> <div>
<h1 className="text-2xl font-bold text-gray-900"> <h1 className="text-2xl font-bold text-gray-900">
Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""} Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""}
@ -570,42 +555,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
Relatório detalhado de transações Relatório detalhado de transações
</p> </p>
</div> </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="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 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>
)}
{/* Controls */} {/* Controls */}
<div className="flex gap-3 flex-wrap"> <div className="flex gap-2 flex-wrap">
<Input <Input
placeholder="Filtrar tudo..." placeholder="Filtrar tudo..."
value={globalFilter ?? ""} value={globalFilter ?? ""}
@ -651,6 +603,40 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </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 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>
{/* Table Container */} {/* Table Container */}
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-x-auto"> <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-x-auto">
<div className="min-w-[2800px]"> <div className="min-w-[2800px]">
@ -988,7 +974,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{conditions.map((cond, idx) => ( {conditions.map((cond, idx) => (
<div <div
key={idx} 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"> <div className="flex-1">
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700 mb-1">
@ -1101,7 +1087,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
</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 <Button
variant="outline" variant="outline"
onClick={clearFilters} onClick={clearFilters}

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

@ -781,7 +781,7 @@ export default function Teste() {
switch (row.type) { switch (row.type) {
case "grupo": case "grupo":
return ( return (
<div className="flex items-center gap-3 whitespace-nowrap"> <div className="flex items-center gap-2 whitespace-nowrap">
<button <button
onClick={() => toggleGroup(row.grupo!)} 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" 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": case "subgrupo":
return ( return (
<div className="flex items-center gap-3 whitespace-nowrap"> <div className="flex items-center gap-2 whitespace-nowrap">
<button <button
onClick={() => toggleSubgrupo(`${row.grupo}-${row.subgrupo}`)} 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" 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": case "centro_custo":
return ( return (
<div className="flex items-center gap-3 whitespace-nowrap"> <div className="flex items-center gap-2 whitespace-nowrap">
<button <button
onClick={() => onClick={() =>
toggleCentro(`${row.grupo}-${row.subgrupo}-${row.centro_custo}`) toggleCentro(`${row.grupo}-${row.subgrupo}-${row.centro_custo}`)
@ -858,7 +858,7 @@ export default function Teste() {
); );
case "conta": case "conta":
return ( 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"> <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
<span className="text-gray-400 font-bold text-lg">•</span> <span className="text-gray-400 font-bold text-lg">•</span>
</div> </div>
@ -882,11 +882,11 @@ export default function Teste() {
const hierarchicalData = buildHierarchicalData(); const hierarchicalData = buildHierarchicalData();
return ( 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 */} {/* Header Section */}
<div className="mb-6"> <div className="mb-2">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1> <h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -911,11 +911,11 @@ export default function Teste() {
</SheetDescription> </SheetDescription>
</SheetHeader> </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 */} {/* Período */}
<div className="grid gap-3"> <div className="grid gap-2">
<Label>Período</Label> <Label>Período</Label>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-2">
<div> <div>
<Label htmlFor="periodo-de" className="text-xs text-gray-500">DE</Label> <Label htmlFor="periodo-de" className="text-xs text-gray-500">DE</Label>
<Select value={filtros.periodoDe} onValueChange={(value) => handleFiltroChange('periodoDe', value)}> <Select value={filtros.periodoDe} onValueChange={(value) => handleFiltroChange('periodoDe', value)}>
@ -946,7 +946,7 @@ export default function Teste() {
</div> </div>
{/* Grupo {/* Grupo
<div className="grid gap-3"> <div className="grid gap-2">
<Label htmlFor="grupo">GRUPO</Label> <Label htmlFor="grupo">GRUPO</Label>
<Select value={filtros.grupo} onValueChange={(value) => handleFiltroChange('grupo', value)}> <Select value={filtros.grupo} onValueChange={(value) => handleFiltroChange('grupo', value)}>
<SelectTrigger> <SelectTrigger>
@ -962,7 +962,7 @@ export default function Teste() {
</div>*/} </div>*/}
{/* Subgrupo {/* Subgrupo
<div className="grid gap-3"> <div className="grid gap-2">
<Label htmlFor="subgrupo">SUBGRUPO</Label> <Label htmlFor="subgrupo">SUBGRUPO</Label>
<Select value={filtros.subgrupo} onValueChange={(value) => handleFiltroChange('subgrupo', value)}> <Select value={filtros.subgrupo} onValueChange={(value) => handleFiltroChange('subgrupo', value)}>
<SelectTrigger> <SelectTrigger>
@ -978,16 +978,16 @@ export default function Teste() {
</div>*/} </div>*/}
{/* Centro de Custo */} {/* Centro de Custo */}
<div className="grid gap-3"> <div className="grid gap-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label htmlFor="centro-custo">CENTRO DE CUSTO</Label> <Label htmlFor="centro-custo">CENTRO DE CUSTO</Label>
<div className="flex gap-2"> <div className="flex gap-1">
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
onClick={selecionarTodosCentros} onClick={selecionarTodosCentros}
className="text-xs h-6 px-2" className="text-xs h-5 px-2"
> >
Todos Todos
</Button> </Button>
@ -996,15 +996,15 @@ export default function Teste() {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={limparCentros} onClick={limparCentros}
className="text-xs h-6 px-2" className="text-xs h-5 px-2"
> >
Limpar Limpar
</Button> </Button>
</div> </div>
</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 => ( {opcoesCentrosCusto.map(centro => (
<div key={centro} className="flex items-center space-x-2"> <div key={centro} className="flex items-center space-x-1">
<Checkbox <Checkbox
id={`centro-${centro}`} id={`centro-${centro}`}
checked={centrosCustoSelecionados.includes(centro)} checked={centrosCustoSelecionados.includes(centro)}
@ -1027,16 +1027,16 @@ export default function Teste() {
</div> </div>
{/* Conta */} {/* Conta */}
<div className="grid gap-3"> <div className="grid gap-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label htmlFor="conta">CONTA</Label> <Label htmlFor="conta">CONTA</Label>
<div className="flex gap-2"> <div className="flex gap-1">
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
onClick={selecionarTodasContas} onClick={selecionarTodasContas}
className="text-xs h-6 px-2" className="text-xs h-5 px-2"
> >
Todas Todas
</Button> </Button>
@ -1045,15 +1045,15 @@ export default function Teste() {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={limparContas} onClick={limparContas}
className="text-xs h-6 px-2" className="text-xs h-5 px-2"
> >
Limpar Limpar
</Button> </Button>
</div> </div>
</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 => ( {opcoesContas.map(conta => (
<div key={conta} className="flex items-center space-x-2"> <div key={conta} className="flex items-center space-x-1">
<Checkbox <Checkbox
id={`conta-${conta}`} id={`conta-${conta}`}
checked={contasSelecionadas.includes(conta)} checked={contasSelecionadas.includes(conta)}
@ -1076,9 +1076,9 @@ export default function Teste() {
</div> </div>
{/* Valor {/* Valor
<div className="grid gap-3"> <div className="grid gap-2">
<Label>Valor</Label> <Label>Valor</Label>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-2">
<div> <div>
<Label htmlFor="valor-min" className="text-xs text-gray-500">VALOR MÍN.</Label> <Label htmlFor="valor-min" className="text-xs text-gray-500">VALOR MÍN.</Label>
<div className="relative"> <div className="relative">
@ -1109,7 +1109,7 @@ export default function Teste() {
</div>*/} </div>*/}
{/* Busca Textual {/* Busca Textual
<div className="grid gap-3"> <div className="grid gap-2">
<Label htmlFor="busca-textual">BUSCA TEXTUAL</Label> <Label htmlFor="busca-textual">BUSCA TEXTUAL</Label>
<Input <Input
id="busca-textual" id="busca-textual"
@ -1120,7 +1120,7 @@ export default function Teste() {
</div>*/} </div>*/}
</div> </div>
<SheetFooter className="flex gap-3"> <SheetFooter className="flex gap-2">
{/* <Button variant="outline" onClick={limparFiltros} className="flex-1"> {/* <Button variant="outline" onClick={limparFiltros} className="flex-1">
Limpar filtros Limpar filtros
</Button> */} </Button> */}
@ -1138,13 +1138,13 @@ export default function Teste() {
{/* Loading quando aplicando filtros */} {/* Loading quando aplicando filtros */}
{loading && ( {loading && (
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 text-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-4"> <div className="flex flex-col items-center gap-2">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> <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" /> <LoaderPinwheel className="w-8 h-8 text-blue-600 animate-spin" />
</div> </div>
<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... Aplicando filtros...
</h3> </h3>
<p className="text-gray-500"> <p className="text-gray-500">
@ -1157,9 +1157,9 @@ export default function Teste() {
{/* Erro */} {/* Erro */}
{error && !loading && ( {error && !loading && (
<div className="bg-white rounded-xl shadow-lg border border-red-200 p-8 text-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-4"> <div className="flex flex-col items-center gap-2">
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center"> <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"> <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" /> <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> </svg>
@ -1169,7 +1169,7 @@ export default function Teste() {
Erro ao carregar dados Erro ao carregar dados
</h3> </h3>
<p className="text-red-600 mb-4">{error}</p> <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 Tentar novamente
</Button> </Button>
</div> </div>
@ -1179,16 +1179,16 @@ export default function Teste() {
{/* Mensagem quando não há dados */} {/* Mensagem quando não há dados */}
{!filtrosAplicados && !loading && !error && ( {!filtrosAplicados && !loading && !error && (
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 text-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-4"> <div className="flex flex-col items-center gap-2">
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center"> <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" /> <Filter className="w-8 h-8 text-gray-400" />
</div> </div>
<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 Nenhum dado exibido
</h3> </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. Clique no botão "Filtros" para definir os critérios de busca e visualizar os dados do DRE.
</p> </p>
@ -1202,8 +1202,8 @@ export default function Teste() {
<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">
{/* Table Header */} {/* 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="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 justify-between px-4 py-1">
<div className="flex items-center gap-4 text-xs font-semibold text-gray-700 uppercase tracking-wide"> <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> <div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
{mesesDisponiveis.map((mes) => ( {mesesDisponiveis.map((mes) => (
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2"> <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
@ -1217,7 +1217,7 @@ export default function Teste() {
</div> </div>
{/* Botões de controle */} {/* Botões de controle */}
<div className="flex gap-2 ml-4"> <div className="flex gap-1 ml-4">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@ -1240,7 +1240,7 @@ export default function Teste() {
.map(row => `${row.grupo}-${row.subgrupo}-${row.centro_custo}`); .map(row => `${row.grupo}-${row.subgrupo}-${row.centro_custo}`);
setExpandedCentros(new Set(todosCentros)); setExpandedCentros(new Set(todosCentros));
}} }}
className="text-xs h-6 px-2" className="text-xs h-5 px-2"
> >
Expandir Tudo Expandir Tudo
</Button> </Button>
@ -1253,7 +1253,7 @@ export default function Teste() {
setExpandedSubgrupos(new Set()); setExpandedSubgrupos(new Set());
setExpandedCentros(new Set()); setExpandedCentros(new Set());
}} }}
className="text-xs h-6 px-2" className="text-xs h-5 px-2"
> >
Recolher Tudo Recolher Tudo
</Button> </Button>
@ -1266,7 +1266,7 @@ export default function Teste() {
{hierarchicalData.map((row, index) => ( {hierarchicalData.map((row, index) => (
<div <div
key={index} 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 row
)}`} )}`}
> >