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

ajuste na tabela

This commit is contained in:
Felipe Batista 2025-10-08 01:45:26 -03:00
parent 03f860dc30
commit eb2398702a
2 changed files with 36 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/DRE/page.tsx
View File

@ -2,9 +2,7 @@ import Teste from './teste';
export default function DrePage() {
return (
<div className="flex flex-col items-center justify-center gap-2 max-w-10/12 mx-auto">
<h1>DRE-GERENCIAL</h1>
<div className="w-full min-h-screen p-4">
<Teste />
</div>
);

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

@ -1,14 +1,7 @@
'use client';
import { Button } from '@/components/ui/button';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
// Removed unused table imports
import { ArrowDown, ArrowUp, ArrowUpDown, BarChart3 } from 'lucide-react';
import { useEffect, useState } from 'react';
@ -479,33 +472,24 @@ export default function Teste() {
}
const hierarchicalData = buildHierarchicalData();
const totalGeral = data.reduce(
(sum, item) => sum + parseFloat(item.valor),
0
);
return (
<div className="p-6">
<div className="mb-6">
<h1 className="text-2xl font-bold mb-2">DRE Gerencial - Hierárquica</h1>
<div className="p-4 bg-muted rounded-lg">
<h3 className="text-lg font-semibold">
Total Geral: {formatCurrency(totalGeral)}
</h3>
</div>
<div className="w-full flex flex-col items-center">
<div className="mb-2">
<h1 className="text-lg font-bold mb-2">DRE Gerencial</h1>
</div>
<div className="max-h-[400px] overflow-y-auto border rounded-md relative">
<div className="w-[95%] max-h-[400px] overflow-y-auto border rounded-md relative">
{/* Header fixo separado */}
<div
className="sticky top-0 z-30 border-b shadow-sm"
style={{ backgroundColor: 'white', opacity: 1 }}
>
<div
className="flex items-center p-4 font-semibold"
className="flex p-3 font-semibold text-xs"
style={{ backgroundColor: 'white', opacity: 1 }}
>
<div className="flex-1 min-w-[200px]">
<div className="flex-1 min-w-[200px] max-w-[300px]">
<Button
variant="ghost"
onClick={() => handleSort('descricao')}
@ -516,11 +500,14 @@ export default function Teste() {
</Button>
</div>
{mesesDisponiveis.map((mes) => (
<div key={mes} className="w-24 text-right px-2">
<div
key={mes}
className="flex-1 min-w-[120px] max-w-[150px] text-right px-2"
>
{mes}
</div>
))}
<div className="w-24 text-right px-2">
<div className="flex-1 min-w-[120px] max-w-[150px] text-right px-2">
<Button
variant="ghost"
onClick={() => handleSort('valor')}
@ -533,42 +520,31 @@ export default function Teste() {
</div>
</div>
<Table>
<TableHeader className="hidden">
<TableRow>
<TableHead></TableHead>
<div className="flex flex-col">
{hierarchicalData.map((row, index) => (
<div key={index} className={`flex ${getRowStyle(row)}`}>
<div
className="flex-1 min-w-[200px] max-w-[300px] p-1 border-b text-xs"
style={getIndentStyle(row.level)}
>
{renderCellContent(row)}
</div>
{mesesDisponiveis.map((mes) => (
<TableHead key={mes}></TableHead>
))}
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{hierarchicalData.map((row, index) => (
<TableRow key={index} className={getRowStyle(row)}>
<TableCell
className="flex-1 min-w-[200px]"
style={getIndentStyle(row.level)}
<div
key={mes}
className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs"
>
{renderCellContent(row)}
</TableCell>
{mesesDisponiveis.map((mes) => (
<TableCell
key={mes}
className="w-24 text-right font-medium px-2"
>
{row.valoresPorMes && row.valoresPorMes[mes]
? formatCurrency(row.valoresPorMes[mes])
: '-'}
</TableCell>
))}
<TableCell className="w-24 text-right font-medium px-2">
{formatCurrency(row.total!)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
{row.valoresPorMes && row.valoresPorMes[mes]
? formatCurrency(row.valoresPorMes[mes])
: '-'}
</div>
))}
<div className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs">
{formatCurrency(row.total!)}
</div>
</div>
))}
</div>
</div>
</div>
);