Remove unused font file and update font index; initialize database extensions with improved error handling; add EstabelecimentoLogo component for dynamic logo generation.

2026-03-10 04:51:47 +00:00 · 2025-12-01 16:35:12 +00:00
parent c91edd0f31
commit 9cf89829f6
40 changed files with 6570 additions and 1114 deletions
--- a/components/dashboard/boletos-widget.tsx
+++ b/components/dashboard/boletos-widget.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { toggleLancamentoSettlementAction } from "@/app/(dashboard)/lancamentos/actions";
+import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
 import MoneyValues from "@/components/money-values";
 import { Button } from "@/components/ui/button";
 import { CardContent } from "@/components/ui/card";
@@ -171,9 +172,7 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
                  className="flex items-center justify-between border-b border-dashed last:border-b-0 last:pb-0"
                >
                  <div className="flex min-w-0 flex-1 items-center gap-3 py-2">
-                    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
-                      <RiBarcodeFill className="size-5" />
-                    </div>
+                    <EstabelecimentoLogo name={boleto.name} size={38} />

                    <div className="min-w-0">
                      <span className="block truncate text-sm font-medium text-foreground">
--- a/components/dashboard/category-history-widget.tsx
+++ b/components/dashboard/category-history-widget.tsx
@@ -22,8 +22,11 @@ import {
 import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { CategoryHistoryData } from "@/lib/dashboard/categories/category-history";
 import { getIconComponent } from "@/lib/utils/icons";
-import { RiBarChartBoxLine, RiCloseLine } from "@remixicon/react";
-import { ChevronDownIcon } from "lucide-react";
+import {
+  RiArrowDownSLine,
+  RiBarChartBoxLine,
+  RiCloseLine,
+} from "@remixicon/react";
 import { useEffect, useMemo, useState } from "react";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";

@@ -265,7 +268,7 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
                  className="w-full justify-between hover:scale-none"
                >
                  Selecionar categorias
-                  <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  <RiArrowDownSLine className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent
--- a/components/dashboard/installment-expenses-widget.tsx
+++ b/components/dashboard/installment-expenses-widget.tsx
@@ -134,9 +134,9 @@ export function InstallmentExpensesWidget({
          return (
            <li
              key={expense.id}
-              className="flex items-center gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0"
+              className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0"
            >
-              <div className="min-w-0 flex-1 ">
+              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-3">
                  <div className="flex min-w-0 items-center gap-2">
                    <p className="truncate text-sm font-medium text-foreground">
@@ -169,17 +169,17 @@ export function InstallmentExpensesWidget({
                  </div>
                  <MoneyValues amount={expense.amount} className="shrink-0" />
                </div>
-                <Progress value={progress} className="h-2" />

-                <p className="text-xs text-muted-foreground mt-1">
-                  Restantes {remainingInstallments}
-                  {endDate && ` - Termina em ${endDate}`}
-                  {" - Restante "}
+                <p className="text-xs text-muted-foreground ">
+                  {endDate && `Termina em ${endDate}`}
+                  {` - Restante (${remainingInstallments}) `}
                  <MoneyValues
                    amount={remainingAmount}
                    className="inline-block font-medium"
                  />
                </p>
+
+                <Progress value={progress} className="h-2 mt-1" />
              </div>
            </li>
          );
--- a/components/dashboard/invoices-widget.tsx
+++ b/components/dashboard/invoices-widget.tsx
@@ -369,7 +369,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
                  </div>

                  <div className="flex shrink-0 flex-col items-end">
-                    <MoneyValues amount={invoice.totalAmount} />
+                    <MoneyValues amount={Math.abs(invoice.totalAmount)} />
                    <div className="flex items-center gap-2">
                      <Button
                        type="button"
@@ -504,7 +504,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
                        Valor da fatura
                      </span>
                      <MoneyValues
-                        amount={selectedInvoice.totalAmount}
+                        amount={Math.abs(selectedInvoice.totalAmount)}
                        className="text-lg"
                      />
                    </div>
--- a/components/dashboard/purchases-by-category-widget.tsx
+++ b/components/dashboard/purchases-by-category-widget.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
 import MoneyValues from "@/components/money-values";
 import {
  Select,
@@ -11,7 +12,6 @@ import {
 import { CATEGORY_TYPE_LABEL } from "@/lib/categorias/constants";
 import type { PurchasesByCategoryData } from "@/lib/dashboard/purchases-by-category";
 import { RiArrowDownLine, RiStore3Line } from "@remixicon/react";
-import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { WidgetEmptyState } from "../widget-empty-state";

@@ -19,30 +19,6 @@ type PurchasesByCategoryWidgetProps = {
  data: PurchasesByCategoryData;
 };

-const resolveLogoPath = (logo: string | null) => {
-  if (!logo) {
-    return null;
-  }
-  if (/^(https?:\/\/|data:)/.test(logo)) {
-    return logo;
-  }
-  return logo.startsWith("/") ? logo : `/logos/${logo}`;
-};
-
-const buildInitials = (value: string) => {
-  const parts = value.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) {
-    return "LC";
-  }
-  if (parts.length === 1) {
-    const firstPart = parts[0];
-    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
-  }
-  const firstChar = parts[0]?.[0] ?? "";
-  const secondChar = parts[1]?.[0] ?? "";
-  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
-};
-
 const formatTransactionDate = (date: Date) => {
  const formatter = new Intl.DateTimeFormat("pt-BR", {
    weekday: "short",
@@ -180,30 +156,13 @@ export function PurchasesByCategoryWidget({
      ) : (
        <ul className="flex flex-col">
          {currentTransactions.map((transaction) => {
-            const logo = resolveLogoPath(transaction.logo);
-            const initials = buildInitials(transaction.name);
-
            return (
              <li
                key={transaction.id}
                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
              >
                <div className="flex min-w-0 flex-1 items-center gap-3">
-                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
-                    {logo ? (
-                      <Image
-                        src={logo}
-                        alt={`Logo de ${transaction.name}`}
-                        width={48}
-                        height={48}
-                        className="h-full w-full object-contain"
-                      />
-                    ) : (
-                      <span className="text-sm font-semibold uppercase text-muted-foreground">
-                        {initials}
-                      </span>
-                    )}
-                  </div>
+                  <EstabelecimentoLogo name={transaction.name} size={38} />

                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-foreground">
--- a/components/dashboard/recent-transactions-widget.tsx
+++ b/components/dashboard/recent-transactions-widget.tsx
@@ -1,37 +1,13 @@
+import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
 import MoneyValues from "@/components/money-values";
 import type { RecentTransactionsData } from "@/lib/dashboard/recent-transactions";
 import { RiExchangeLine } from "@remixicon/react";
-import Image from "next/image";
 import { WidgetEmptyState } from "../widget-empty-state";

 type RecentTransactionsWidgetProps = {
  data: RecentTransactionsData;
 };

-const resolveLogoPath = (logo: string | null) => {
-  if (!logo) {
-    return null;
-  }
-  if (/^(https?:\/\/|data:)/.test(logo)) {
-    return logo;
-  }
-  return logo.startsWith("/") ? logo : `/logos/${logo}`;
-};
-
-const buildInitials = (value: string) => {
-  const parts = value.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) {
-    return "LC";
-  }
-  if (parts.length === 1) {
-    const firstPart = parts[0];
-    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
-  }
-  const firstChar = parts[0]?.[0] ?? "";
-  const secondChar = parts[1]?.[0] ?? "";
-  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
-};
-
 const formatTransactionDate = (date: Date) => {
  const formatter = new Intl.DateTimeFormat("pt-BR", {
    weekday: "short",
@@ -59,32 +35,13 @@ export function RecentTransactionsWidget({
      ) : (
        <ul className="flex flex-col">
          {data.transactions.map((transaction) => {
-            const logo = resolveLogoPath(
-              transaction.cardLogo ?? transaction.accountLogo
-            );
-            const initials = buildInitials(transaction.name);
-
            return (
              <li
                key={transaction.id}
                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
              >
                <div className="flex min-w-0 flex-1 items-center gap-3">
-                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg">
-                    {logo ? (
-                      <Image
-                        src={logo}
-                        alt={`Logo de ${transaction.name}`}
-                        width={48}
-                        height={48}
-                        className="h-full w-full object-contain"
-                      />
-                    ) : (
-                      <span className="text-sm font-semibold uppercase text-muted-foreground">
-                        {initials}
-                      </span>
-                    )}
-                  </div>
+                  <EstabelecimentoLogo name={transaction.name} size={38} />

                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-foreground">
--- a/components/dashboard/recurring-expenses-widget.tsx
+++ b/components/dashboard/recurring-expenses-widget.tsx
@@ -1,3 +1,4 @@
+import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
 import MoneyValues from "@/components/money-values";
 import { CardContent } from "@/components/ui/card";
 import type { RecurringExpensesData } from "@/lib/dashboard/expenses/recurring-expenses";
@@ -38,9 +39,7 @@ export function RecurringExpensesWidget({
              key={expense.id}
              className="flex items-start gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0"
            >
-              <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
-                <RiRefreshLine className="size-5 text-foreground" />
-              </div>
+              <EstabelecimentoLogo name={expense.name} size={38} />

              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-2">
--- a/components/dashboard/top-establishments-widget.tsx
+++ b/components/dashboard/top-establishments-widget.tsx
@@ -1,37 +1,13 @@
+import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
 import MoneyValues from "@/components/money-values";
 import type { TopEstablishmentsData } from "@/lib/dashboard/top-establishments";
 import { RiStore2Line } from "@remixicon/react";
-import Image from "next/image";
 import { WidgetEmptyState } from "../widget-empty-state";

 type TopEstablishmentsWidgetProps = {
  data: TopEstablishmentsData;
 };

-const resolveLogoPath = (logo: string | null) => {
-  if (!logo) {
-    return null;
-  }
-  if (/^(https?:\/\/|data:)/.test(logo)) {
-    return logo;
-  }
-  return logo.startsWith("/") ? logo : `/logos/${logo}`;
-};
-
-const buildInitials = (value: string) => {
-  const parts = value.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) {
-    return "LC";
-  }
-  if (parts.length === 1) {
-    const firstPart = parts[0];
-    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
-  }
-  const firstChar = parts[0]?.[0] ?? "";
-  const secondChar = parts[1]?.[0] ?? "";
-  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
-};
-
 const formatOccurrencesLabel = (occurrences: number) => {
  if (occurrences === 1) {
    return "1 lançamento";
@@ -53,30 +29,13 @@ export function TopEstablishmentsWidget({
      ) : (
        <ul className="flex flex-col">
          {data.establishments.map((establishment) => {
-            const logo = resolveLogoPath(establishment.logo);
-            const initials = buildInitials(establishment.name);
-
            return (
              <li
                key={establishment.id}
                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
              >
                <div className="flex min-w-0 flex-1 items-center gap-3">
-                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
-                    {logo ? (
-                      <Image
-                        src={logo}
-                        alt={`Logo de ${establishment.name}`}
-                        width={48}
-                        height={48}
-                        className="h-full w-full object-contain"
-                      />
-                    ) : (
-                      <span className="text-sm font-semibold uppercase text-muted-foreground">
-                        {initials}
-                      </span>
-                    )}
-                  </div>
+                  <EstabelecimentoLogo name={establishment.name} size={38} />

                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-foreground">
--- a/components/dashboard/top-expenses-widget.tsx
+++ b/components/dashboard/top-expenses-widget.tsx
@@ -1,10 +1,13 @@
 "use client";

+import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
 import MoneyValues from "@/components/money-values";
 import { Switch } from "@/components/ui/switch";
-import type { TopExpense, TopExpensesData } from "@/lib/dashboard/expenses/top-expenses";
+import type {
+  TopExpense,
+  TopExpensesData,
+} from "@/lib/dashboard/expenses/top-expenses";
 import { RiArrowUpDoubleLine } from "@remixicon/react";
-import Image from "next/image";
 import { useMemo, useState } from "react";
 import { WidgetEmptyState } from "../widget-empty-state";

@@ -13,30 +16,6 @@ type TopExpensesWidgetProps = {
  cardOnlyExpenses: TopExpensesData;
 };

-const resolveLogoPath = (logo: string | null) => {
-  if (!logo) {
-    return null;
-  }
-  if (/^(https?:\/\/|data:)/.test(logo)) {
-    return logo;
-  }
-  return logo.startsWith("/") ? logo : `/logos/${logo}`;
-};
-
-const buildInitials = (value: string) => {
-  const parts = value.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) {
-    return "LC";
-  }
-  if (parts.length === 1) {
-    const firstPart = parts[0];
-    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
-  }
-  const firstChar = parts[0]?.[0] ?? "";
-  const secondChar = parts[1]?.[0] ?? "";
-  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
-};
-
 const formatTransactionDate = (date: Date) => {
  const formatter = new Intl.DateTimeFormat("pt-BR", {
    weekday: "short",
@@ -129,30 +108,13 @@ export function TopExpensesWidget({
      ) : (
        <ul className="flex flex-col">
          {data.expenses.map((expense) => {
-            const logo = resolveLogoPath(expense.logo);
-            const initials = buildInitials(expense.name);
-
            return (
              <li
                key={expense.id}
                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
              >
                <div className="flex min-w-0 flex-1 items-center gap-3">
-                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
-                    {logo ? (
-                      <Image
-                        src={logo}
-                        alt={`Logo de ${expense.name}`}
-                        width={48}
-                        height={48}
-                        className="h-full w-full object-contain"
-                      />
-                    ) : (
-                      <span className="text-sm font-semibold uppercase text-muted-foreground">
-                        {initials}
-                      </span>
-                    )}
-                  </div>
+                  <EstabelecimentoLogo name={expense.name} size={38} />

                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-foreground">