git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-06-14 00:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): refina experiencia dos widgets

Browse Source
This commit is contained in:
Felipe Coutinho
2026-05-31 15:18:43 -03:00
parent 402f0072af
commit 35abe1b0bf
39 changed files with 887 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/features/dashboard/components/widgets/recurring-expenses-widget.tsx
View File

@@ -3,6 +3,7 @@ import type { RecurringExpensesData } from "@/features/dashboard/expenses/recurr
import { EstablishmentLogo } from "@/shared/components/entity-avatar";
import MoneyValues from "@/shared/components/money-values";
import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
import { getPaymentMethodIcon } from "@/shared/utils/icons";
type RecurringExpensesWidgetProps = {
data: RecurringExpensesData;
@@ -10,10 +11,10 @@ type RecurringExpensesWidgetProps = {
const formatOccurrences = (value: number | null) => {
if (!value) {
return "Recorrência contínua";
return "Repete mensalmente";
}
return `${value} recorrências mensais`;
return `Repete por ${value} ${value === 1 ? "mês" : "meses"}`;
};
export function RecurringExpensesWidget({
@@ -23,7 +24,7 @@ export function RecurringExpensesWidget({
return (
<WidgetEmptyState
icon={<RiRefreshLine className="size-6 text-muted-foreground" />}
title="Nenhuma despesa recorrente"
title="Nenhuma despesa recorrente encontrada"
description="Lançamentos recorrentes aparecerão aqui conforme forem registrados."
/>
);
@@ -31,33 +32,39 @@ export function RecurringExpensesWidget({
return (
<div className="flex flex-col">
{data.expenses.map((expense) => {
return (
<div
key={expense.id}
className="flex items-center gap-2 transition-all duration-300 py-1.5"
>
<EstablishmentLogo name={expense.name} size={37} />
{[...data.expenses]
.sort((a, b) => b.amount - a.amount)
.map((expense) => {
return (
<div
key={expense.id}
className="flex items-center gap-2 transition-all duration-300 py-1.5"
>
<EstablishmentLogo name={expense.name} size={37} />
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between">
<p className="truncate text-foreground text-sm font-medium">
{expense.name}
</p>
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between">
<p className="truncate text-foreground text-sm font-medium">
{expense.name}
</p>
<MoneyValues className="font-medium" amount={expense.amount} />
</div>
<MoneyValues
className="font-medium"
amount={expense.amount}
/>
</div>
<div className="flex items-center justify-between text-xs text-muted-foreground">
<span className="inline-flex items-center gap-1">
{expense.paymentMethod}
</span>
<span>{formatOccurrences(expense.recurrenceCount)}</span>
<div className="flex items-center justify-between text-xs text-muted-foreground">
<span className="inline-flex items-center gap-1 [&_svg]:size-3.5">
{getPaymentMethodIcon(expense.paymentMethod)}
{expense.paymentMethod}
</span>
<span>{formatOccurrences(expense.recurrenceCount)}</span>
</div>
</div>
</div>
</div>
);
})}
);
})}
</div>
);
}