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