diff --git a/src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx b/src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx index 2a329ad..5b0519f 100644 --- a/src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx +++ b/src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx @@ -56,8 +56,6 @@ const VARIANT_CONFIG = { increase: "text-success", decrease: "text-destructive", }, - listItemClassName: - "flex flex-col gap-1.5 py-2 border-b border-dashed last:border-0", includeBudgetAmount: true, }, expense: { @@ -70,8 +68,6 @@ const VARIANT_CONFIG = { increase: "text-destructive", decrease: "text-success", }, - listItemClassName: - "flex flex-col py-2 border-b border-dashed last:border-0", includeBudgetAmount: false, }, } as const; @@ -194,7 +190,7 @@ export function CategoryBreakdownWidgetView({ -
+
{data.categories.map((category, index) => { const hasIncrease = category.percentageChange !== null && @@ -218,11 +214,8 @@ export function CategoryBreakdownWidgetView({ : "text-muted-foreground"; return ( -
-
+
+
-
+
{formatPercentage( category.percentageOfTotal, @@ -253,6 +246,36 @@ export function CategoryBreakdownWidgetView({ )}{" "} da {config.shareLabel} + {hasBudget && category.budgetUsedPercentage !== null ? ( + <> + · + + + {budgetExceeded ? ( + <> + excedeu{" "} + + {formatCurrency(exceededAmount)} + + + ) : ( + <> + {formatPercentage( + category.budgetUsedPercentage, + config.percentageDigits, + )}{" "} + do limite + {config.includeBudgetAmount && + category.budgetAmount !== null + ? ` ${formatCurrency(category.budgetAmount)}` + : ""} + + )} + + + ) : null}
@@ -280,48 +303,6 @@ export function CategoryBreakdownWidgetView({ ) : null}
- - {hasBudget && category.budgetUsedPercentage !== null ? ( -
- - - {budgetExceeded ? ( - <> - {formatPercentage( - category.budgetUsedPercentage, - config.percentageDigits, - )}{" "} - do limite - {config.includeBudgetAmount && - category.budgetAmount !== null - ? ` ${formatCurrency(category.budgetAmount)}` - : ""}{" "} - - excedeu em {formatCurrency(exceededAmount)} - - ) : ( - <> - {formatPercentage( - category.budgetUsedPercentage, - config.percentageDigits, - )}{" "} - do limite - {config.includeBudgetAmount && - category.budgetAmount !== null - ? ` ${formatCurrency(category.budgetAmount)}` - : ""} - - )} - -
- ) : null}
); })} diff --git a/src/features/dashboard/components/dashboard-metrics-cards.tsx b/src/features/dashboard/components/dashboard-metrics-cards.tsx index 75a55b5..f26c490 100644 --- a/src/features/dashboard/components/dashboard-metrics-cards.tsx +++ b/src/features/dashboard/components/dashboard-metrics-cards.tsx @@ -3,15 +3,14 @@ import { RiArrowDownSFill, RiArrowUpLine, RiArrowUpSFill, - RiCashLine, - RiIncreaseDecreaseLine, + RiCalendarCheckLine, + RiScalesLine, RiSubtractLine, } from "@remixicon/react"; import type { DashboardCardMetrics } from "@/features/dashboard/dashboard-metrics-queries"; import MoneyValues from "@/shared/components/money-values"; import { Card, - CardAction, CardFooter, CardHeader, CardTitle, @@ -32,20 +31,33 @@ const CARDS = [ key: "receitas", icon: RiArrowUpLine, invertTrend: false, + cardClass: "", + iconClass: "text-success", }, { label: "Despesas", key: "despesas", icon: RiArrowDownLine, invertTrend: true, + cardClass: "", + iconClass: "text-destructive", }, { label: "Balanço", key: "balanco", - icon: RiIncreaseDecreaseLine, + icon: RiScalesLine, invertTrend: false, + cardClass: "", + iconClass: "text-amber-500", + }, + { + label: "Previsto", + key: "previsto", + icon: RiCalendarCheckLine, + invertTrend: false, + cardClass: "border border-dashed", + iconClass: "", }, - { label: "Previsto", key: "previsto", icon: RiCashLine, invertTrend: false }, ] as const; const TREND_ICONS = { @@ -62,7 +74,7 @@ const getTrend = (current: number, previous: number): Trend => { }; const getPercentChange = (current: number, previous: number): string => { - const EPSILON = 0.01; // Considera valores menores que 1 centavo como zero + const EPSILON = 0.01; if (Math.abs(previous) < EPSILON) { if (Math.abs(current) < EPSILON) return "0%"; @@ -80,48 +92,49 @@ const getPercentChange = (current: number, previous: number): string => { }; const getTrendColor = (trend: Trend, invertTrend: boolean): string => { - if (trend === "flat") return ""; + if (trend === "flat") return "text-muted-foreground"; const isPositive = invertTrend ? trend === "down" : trend === "up"; - return isPositive - ? "text-success border-success" - : "text-destructive border-destructive"; + return isPositive ? "text-success" : "text-destructive"; }; export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) { return ( -
- {CARDS.map(({ label, key, icon: Icon, invertTrend }) => { - const metric = metrics[key]; - const trend = getTrend(metric.current, metric.previous); - const TrendIcon = TREND_ICONS[trend]; - const trendColor = getTrendColor(trend, invertTrend); +
+ {CARDS.map( + ({ label, key, icon: Icon, invertTrend, cardClass, iconClass }) => { + const metric = metrics[key]; + const trend = getTrend(metric.current, metric.previous); + const TrendIcon = TREND_ICONS[trend]; + const trendColor = getTrendColor(trend, invertTrend); - return ( - - - - - {label} - - - -
- - {getPercentChange(metric.current, metric.previous)} + return ( + + + + + {label} + +
+ +
+ + {getPercentChange(metric.current, metric.previous)} +
- - - -
- mês anterior -
-
- -
- - - ); - })} + + +
+ vs. mês anterior + +
+ + + ); + }, + )}
); } diff --git a/src/features/dashboard/components/dashboard-welcome.tsx b/src/features/dashboard/components/dashboard-welcome.tsx index f2d680f..c26da28 100644 --- a/src/features/dashboard/components/dashboard-welcome.tsx +++ b/src/features/dashboard/components/dashboard-welcome.tsx @@ -9,9 +9,9 @@ export function DashboardWelcome({ name }: { name?: string | null }) {

- {greeting}, {displayName} + {greeting}, {displayName}

-

{formattedDate}

+

{formattedDate}

); diff --git a/src/features/dashboard/components/goals-progress/goal-progress-item.tsx b/src/features/dashboard/components/goals-progress/goal-progress-item.tsx index 6583f51..35a6640 100644 --- a/src/features/dashboard/components/goals-progress/goal-progress-item.tsx +++ b/src/features/dashboard/components/goals-progress/goal-progress-item.tsx @@ -26,7 +26,7 @@ export function GoalProgressItem({ const percentageDelta = item.usedPercentage - 100; return ( -
  • +
    • +
    ); } diff --git a/src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx b/src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx index 85b2b8d..5810b09 100644 --- a/src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx +++ b/src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx @@ -26,7 +26,7 @@ export function InstallmentExpenseListItem({ } = buildInstallmentExpenseDisplay(expense); return ( -
  • +
    @@ -71,6 +71,6 @@ export function InstallmentExpenseListItem({
    -
    • +
    ); } diff --git a/src/features/dashboard/components/installment-expenses/installment-expenses-list.tsx b/src/features/dashboard/components/installment-expenses/installment-expenses-list.tsx index cd4560f..9a62335 100644 --- a/src/features/dashboard/components/installment-expenses/installment-expenses-list.tsx +++ b/src/features/dashboard/components/installment-expenses/installment-expenses-list.tsx @@ -21,7 +21,7 @@ export function InstallmentExpensesList({ } return ( -
      +
        {expenses.map((expense) => ( ))} diff --git a/src/features/dashboard/components/installment-expenses/installment-expenses-widget-view.tsx b/src/features/dashboard/components/installment-expenses/installment-expenses-widget-view.tsx index 86e7c0c..970e1b5 100644 --- a/src/features/dashboard/components/installment-expenses/installment-expenses-widget-view.tsx +++ b/src/features/dashboard/components/installment-expenses/installment-expenses-widget-view.tsx @@ -9,7 +9,7 @@ export function InstallmentExpensesWidgetView({ data, }: InstallmentExpensesWidgetViewProps) { return ( -
        +
        ); diff --git a/src/features/dashboard/components/my-accounts-widget.tsx b/src/features/dashboard/components/my-accounts-widget.tsx index 1aef785..abc5c9b 100644 --- a/src/features/dashboard/components/my-accounts-widget.tsx +++ b/src/features/dashboard/components/my-accounts-widget.tsx @@ -27,12 +27,12 @@ export function MyAccountsWidget({ return ( <> -
        +
        Saldo Total
        -
        +
        {displayedAccounts.length === 0 ? (
        -
        -
        +
        +
        {logoSrc ? (
        - +
        ); })}
      diff --git a/src/features/dashboard/components/notes/note-list-item.tsx b/src/features/dashboard/components/notes/note-list-item.tsx index 06317f5..407769d 100644 --- a/src/features/dashboard/components/notes/note-list-item.tsx +++ b/src/features/dashboard/components/notes/note-list-item.tsx @@ -23,7 +23,7 @@ export function NoteListItem({ const createdAtLabel = formatNoteCreatedAt(note.createdAt); return ( -
    • +

      {displayTitle} @@ -40,9 +40,9 @@ export function NoteListItem({

      -
      +
      -
      • +
    ); } diff --git a/src/features/dashboard/components/payers-widget.tsx b/src/features/dashboard/components/payers-widget.tsx index d358a27..000422a 100644 --- a/src/features/dashboard/components/payers-widget.tsx +++ b/src/features/dashboard/components/payers-widget.tsx @@ -48,7 +48,7 @@ export function PayersWidget({ payers }: PayersWidgetProps) { description="Quando houver despesas associadas a pagadores, eles aparecerão aqui." /> ) : ( - +
    )} ); diff --git a/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx b/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx index 6bfca19..e2a63ab 100644 --- a/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx +++ b/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx @@ -26,7 +26,7 @@ export function PaymentBreakdownListItem({ item, }: PaymentBreakdownListItemProps) { return ( -
  • +
    {item.icon}
    @@ -46,6 +46,6 @@ export function PaymentBreakdownListItem({
    -
    • + ); } diff --git a/src/features/dashboard/components/payment-status/payment-status-widget-view.tsx b/src/features/dashboard/components/payment-status/payment-status-widget-view.tsx index 9278a7f..2bcb77b 100644 --- a/src/features/dashboard/components/payment-status/payment-status-widget-view.tsx +++ b/src/features/dashboard/components/payment-status/payment-status-widget-view.tsx @@ -34,7 +34,7 @@ export function PaymentStatusWidgetView({ pending={data.income.pending} /> -
    +
    ) : ( -
      +
      {currentTransactions.map((transaction) => { return ( -
    • @@ -193,10 +193,10 @@ export function PurchasesByCategoryWidget({
      -
      • +
      ); })} -
    +
    )}
    ); diff --git a/src/features/dashboard/components/recurring-expenses-widget.tsx b/src/features/dashboard/components/recurring-expenses-widget.tsx index a232e5e..df76d6c 100644 --- a/src/features/dashboard/components/recurring-expenses-widget.tsx +++ b/src/features/dashboard/components/recurring-expenses-widget.tsx @@ -30,36 +30,34 @@ export function RecurringExpensesWidget({ } return ( -
    - + +
    + + {expense.paymentMethod} + + {formatOccurrences(expense.recurrenceCount)} +
    +
    + + ); + })} ); } diff --git a/src/features/dashboard/components/top-establishments-widget.tsx b/src/features/dashboard/components/top-establishments-widget.tsx index dbb2182..911c6d6 100644 --- a/src/features/dashboard/components/top-establishments-widget.tsx +++ b/src/features/dashboard/components/top-establishments-widget.tsx @@ -27,12 +27,12 @@ export function TopEstablishmentsWidget({ description="Quando houver despesas registradas, elas aparecerão aqui." /> ) : ( - + )} ); diff --git a/src/features/dashboard/components/top-expenses-widget.tsx b/src/features/dashboard/components/top-expenses-widget.tsx index 4892265..9f10b48 100644 --- a/src/features/dashboard/components/top-expenses-widget.tsx +++ b/src/features/dashboard/components/top-expenses-widget.tsx @@ -85,9 +85,7 @@ export function TopExpensesWidget({ htmlFor="card-only-toggle" className="text-sm text-muted-foreground" > - {cardOnly - ? "Somente cartões de crédito ou débito." - : "Todas as despesas"} + Apenas cartões ) : ( - + )} ); diff --git a/src/features/payers/components/details/payer-card-usage-card.tsx b/src/features/payers/components/details/payer-card-usage-card.tsx index 9068f5a..3225ca7 100644 --- a/src/features/payers/components/details/payer-card-usage-card.tsx +++ b/src/features/payers/components/details/payer-card-usage-card.tsx @@ -42,10 +42,7 @@ export function PayerCardUsageCard({ items }: PagadorCardUsageCardProps) { const logoPath = resolveLogoSrc(item.logo); const initials = buildInitials(item.name); return ( -
  • +
    {logoPath ? ( @@ -72,7 +69,7 @@ export function PayerCardUsageCard({ items }: PagadorCardUsageCardProps) {
    -
    • + ); })} diff --git a/src/features/payers/components/details/payer-payment-method-cards.tsx b/src/features/payers/components/details/payer-payment-method-cards.tsx index 2987783..05b0347 100644 --- a/src/features/payers/components/details/payer-payment-method-cards.tsx +++ b/src/features/payers/components/details/payer-payment-method-cards.tsx @@ -9,6 +9,7 @@ import { EstabelecimentoLogo } from "@/features/transactions/components/shared/e import MoneyValues from "@/shared/components/money-values"; import { CardContent } from "@/shared/components/ui/card"; import { Progress } from "@/shared/components/ui/progress"; +import { Separator } from "@/shared/components/ui/separator"; import { WidgetEmptyState } from "@/shared/components/widget-empty-state"; import type { PayerBoletoItem, @@ -41,10 +42,7 @@ export function PayerBoletoCard({ items }: PagadorBoletoCardProps) { {items.map((item) => { const statusLabel = buildBillStatusLabel(item); return ( -
  • +
    @@ -64,7 +62,7 @@ export function PayerBoletoCard({ items }: PagadorBoletoCardProps) {
    -
    • + ); })} @@ -105,7 +103,9 @@ export function PayerPaymentStatusCard({ Pago + +
    @@ -117,7 +117,7 @@ export function PayerPaymentStatusCard({
    -
    +