rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual edit in Lovable

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot] 2025-11-29 00:03:04 +00:00
parent 32f9571d3a
commit 05a4197e86
1 changed files with 23 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/dashboard/table/TransactionTableBody.tsx
View File

@ -1,11 +1,9 @@
import { format } from 'date-fns'; import { format } from 'date-fns';
import { Edit, Trash2 } from 'lucide-react'; import { Edit, Trash2 } from 'lucide-react';
import { Transaction } from '@/types/financialTypes'; import { Transaction } from '@/types/financialTypes';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { TableBody, TableCell, TableRow } from '@/components/ui/table'; import { TableBody, TableCell, TableRow } from '@/components/ui/table';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
interface TransactionTableBodyProps { interface TransactionTableBodyProps {
transactions: Transaction[]; transactions: Transaction[];
isLoading: boolean; isLoading: boolean;
@ -13,88 +11,57 @@ interface TransactionTableBodyProps {
onDelete: (transaction: Transaction) => void; onDelete: (transaction: Transaction) => void;
formatCurrency: (value: number) => string; formatCurrency: (value: number) => string;
} }
const TransactionTableBody = ({
const TransactionTableBody = ({ transactions,
transactions, isLoading,
isLoading, onEdit,
onEdit, onDelete,
onDelete, formatCurrency
formatCurrency
}: TransactionTableBodyProps) => { }: TransactionTableBodyProps) => {
if (isLoading) { if (isLoading) {
return ( return <TableBody>
<TableBody> {Array(5).fill(0).map((_, i) => <TableRow key={`skeleton-${i}`}>
{Array(5).fill(0).map((_, i) => ( {Array(6).fill(0).map((_, j) => <TableCell key={`cell-${i}-${j}`} className="p-2">
<TableRow key={`skeleton-${i}`}>
{Array(6).fill(0).map((_, j) => (
<TableCell key={`cell-${i}-${j}`} className="p-2">
<div className="h-4 bg-muted rounded animate-pulse-gentle" /> <div className="h-4 bg-muted rounded animate-pulse-gentle" />
</TableCell> </TableCell>)}
))} </TableRow>)}
</TableRow> </TableBody>;
))}
</TableBody>
);
} }
if (transactions.length === 0) { if (transactions.length === 0) {
return ( return <TableBody>
<TableBody>
<TableRow> <TableRow>
<TableCell colSpan={6} className="text-center py-8 text-muted-foreground"> <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
Nenhuma transação encontrada Nenhuma transação encontrada
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>;
);
} }
return <TableBody>
return ( {transactions.map(transaction => <TableRow key={transaction.id}>
<TableBody>
{transactions.map((transaction) => (
<TableRow key={transaction.id}>
<TableCell className="font-medium"> <TableCell className="font-medium">
{format(new Date(transaction.quando), 'dd/MM/yyyy')} {format(new Date(transaction.quando), 'dd/MM/yyyy')}
</TableCell> </TableCell>
<TableCell>{transaction.estabelecimento}</TableCell> <TableCell>{transaction.estabelecimento}</TableCell>
<TableCell>{transaction.detalhes}</TableCell> <TableCell>{transaction.detalhes}</TableCell>
<TableCell> <TableCell>
<span className="inline-block px-2 py-1 text-xs font-medium rounded-md bg-secondary"> <span className="inline-block px-2 py-1 text-xs font-medium rounded-md bg-orange-500">
{transaction.categoria} {transaction.categoria}
</span> </span>
</TableCell> </TableCell>
<TableCell className={cn( <TableCell className={cn("text-right font-medium", transaction.tipo === 'receita' ? "text-green-600" : "text-red-600")}>
"text-right font-medium",
transaction.tipo === 'receita' ? "text-green-600" : "text-red-600"
)}>
{formatCurrency(Math.abs(transaction.valor))} {formatCurrency(Math.abs(transaction.valor))}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
<div className="flex justify-end space-x-1"> <div className="flex justify-end space-x-1">
<Button <Button variant="ghost" size="icon" onClick={() => onEdit(transaction)} title="Editar" className="hover:bg-blue-50 hover:text-blue-600">
variant="ghost"
size="icon"
onClick={() => onEdit(transaction)}
title="Editar"
className="hover:bg-blue-50 hover:text-blue-600"
>
<Edit className="h-4 w-4 text-blue-600" /> <Edit className="h-4 w-4 text-blue-600" />
</Button> </Button>
<Button <Button variant="ghost" size="icon" onClick={() => onDelete(transaction)} title="Excluir" className="hover:bg-red-50 hover:text-red-600">
variant="ghost"
size="icon"
onClick={() => onDelete(transaction)}
title="Excluir"
className="hover:bg-red-50 hover:text-red-600"
>
<Trash2 className="h-4 w-4 text-red-600" /> <Trash2 className="h-4 w-4 text-red-600" />
</Button> </Button>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>)}
))} </TableBody>;
</TableBody>
);
}; };
export default TransactionTableBody;
export default TransactionTableBody;