refactor: substitui '•' por '-' em textos de exibição

As alterações consistem na substituição do caractere '•' por '-' em várias partes do código, visando padronizar a formatação dos textos exibidos. Essa mudança foi aplicada em componentes como `event-modal`, `accounts-page`, `expenses-by-category-widget`, `income-by-category-widget`, `pending-invoice-card`, entre outros, para melhorar a consistência visual da interface.
2025-11-22 12:58:57 -03:00
parent 8c5313119d
commit ac24961e4b
14 changed files with 105 additions and 101 deletions
--- a/components/calendario/event-modal.tsx
+++ b/components/calendario/event-modal.tsx
@@ -114,7 +114,7 @@ const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
        <div className="flex flex-col">
          <span className="text-sm font-semibold">{event.lancamento.name}</span>
          <span className="text-xs text-muted-foreground">
-            Boleto{formattedDueDate ? ` • Vence em ${formattedDueDate}` : ""}
+            Boleto{formattedDueDate ? ` - Vence em ${formattedDueDate}` : ""}
          </span>
        </div>
        <span className="text-sm font-semibold text-foreground">
--- a/components/contas/accounts-page.tsx
+++ b/components/contas/accounts-page.tsx
@@ -137,7 +137,7 @@ export function AccountsPage({ accounts, logoOptions }: AccountsPageProps) {
                <AccountCard
                  key={account.id}
                  accountName={account.name}
-                  accountType={`${account.accountType} • ${account.status}`}
+                  accountType={`${account.accountType} - ${account.status}`}
                  balance={account.balance ?? account.initialBalance ?? 0}
                  status={account.status}
                  excludeFromBalance={account.excludeFromBalance}
--- a/components/dashboard/expenses-by-category-widget.tsx
+++ b/components/dashboard/expenses-by-category-widget.tsx
@@ -160,7 +160,7 @@ export function ExpensesByCategoryWidget({
                  {budgetExceeded ? (
                    <>
                      {formatPercentage(category.budgetUsedPercentage)} do
-                      limite • excedeu em {formatCurrency(exceededAmount)}
+                      limite - excedeu em {formatCurrency(exceededAmount)}
                    </>
                  ) : (
                    <>
--- a/components/dashboard/income-by-category-widget.tsx
+++ b/components/dashboard/income-by-category-widget.tsx
@@ -162,7 +162,7 @@ export function IncomeByCategoryWidget({
                    {budgetExceeded ? (
                      <>
                        {formatPercentage(category.budgetUsedPercentage)} do
-                        limite {formatCurrency(category.budgetAmount)} • excedeu
+                        limite {formatCurrency(category.budgetAmount)} - excedeu
                        em {formatCurrency(exceededAmount)}
                      </>
                    ) : (
--- a/components/dashboard/installment-analysis/pending-invoice-card.tsx
+++ b/components/dashboard/installment-analysis/pending-invoice-card.tsx
@@ -5,7 +5,11 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils/ui";
-import { RiArrowDownSLine, RiArrowRightSLine, RiBillLine } from "@remixicon/react";
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiBillLine,
+} from "@remixicon/react";
 import { format, parse } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { useState } from "react";
@@ -68,7 +72,7 @@ export function PendingInvoiceCard({
                </div>
                <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                  <span className="capitalize">{periodText}</span>
-                  <span>•</span>
+                  <span>-</span>
                  <span>Vencimento: {dueDateText}</span>
                </div>
              </div>
@@ -144,13 +148,13 @@ export function PendingInvoiceCard({
                        <span>{purchaseDate}</span>
                        {installmentLabel && (
                          <>
-                            <span>•</span>
+                            <span>-</span>
                            <span>Parcela {installmentLabel}</span>
                          </>
                        )}
                        {lancamento.condition !== "Parcelado" && (
                          <>
-                            <span>•</span>
+                            <span>-</span>
                            <span>{lancamento.condition}</span>
                          </>
                        )}
--- a/components/dashboard/installment-expenses-widget.tsx
+++ b/components/dashboard/installment-expenses-widget.tsx
@@ -173,8 +173,8 @@ export function InstallmentExpensesWidget({

                <p className="text-xs text-muted-foreground mt-1">
                  Restantes {remainingInstallments}
-                  {endDate && ` • Termina em ${endDate}`}
-                  {" • Restante "}
+                  {endDate && ` - Termina em ${endDate}`}
+                  {" - Restante "}
                  <MoneyValues
                    amount={remainingAmount}
                    className="inline-block font-medium"
--- a/components/dashboard/recurring-expenses-widget.tsx
+++ b/components/dashboard/recurring-expenses-widget.tsx
@@ -55,7 +55,7 @@ export function RecurringExpensesWidget({
                  <span className="inline-flex items-center gap-1">
                    {expense.paymentMethod}
                  </span>
-                  •<span>{formatOccurrences(expense.recurrenceCount)}</span>
+                  -<span>{formatOccurrences(expense.recurrenceCount)}</span>
                </div>
              </div>
            </li>
--- a/components/lancamentos/table/lancamentos-table.tsx
+++ b/components/lancamentos/table/lancamentos-table.tsx
@@ -732,7 +732,7 @@ export function LancamentosTable({
              {selectedCount === 1 ? "item selecionado" : "itens selecionados"}
            </span>
            <span className="hidden sm:inline" aria-hidden>
-              •
+              -
            </span>
            <span>
              Total:{" "}
--- a/components/pagadores/details/pagador-info-card.tsx
+++ b/components/pagadores/details/pagador-info-card.tsx
@@ -297,8 +297,8 @@ export function PagadorInfoCard({
                  registradas
                </p>
                <p className="text-xs">
-                  Cartões: {formatCurrency(summary.paymentSplits.card)} •
-                  Boletos: {formatCurrency(summary.paymentSplits.boleto)} •
+                  Cartões: {formatCurrency(summary.paymentSplits.card)} -
+                  Boletos: {formatCurrency(summary.paymentSplits.boleto)} -
                  Pix/Débito/Dinheiro:{" "}
                  {formatCurrency(summary.paymentSplits.instant)}
                </p>
@@ -315,7 +315,7 @@ export function PagadorInfoCard({
                          (item) =>
                            `${item.name}: ${formatCurrency(item.amount)}`
                        )
-                        .join(" • ")
+                        .join(" - ")
                    : "Sem lançamentos com cartão no período."}
                </p>
              </div>
--- a/components/pagadores/details/pagador-monthly-summary-card.tsx
+++ b/components/pagadores/details/pagador-monthly-summary-card.tsx
@@ -48,7 +48,7 @@ export function PagadorMonthlySummaryCard({
      <CardHeader className="flex flex-col gap-1.5 pb-4">
        <CardTitle className="text-lg font-semibold">Totais do mês</CardTitle>
        <p className="text-xs text-muted-foreground">
-          {periodLabel} • despesas por forma de pagamento
+          {periodLabel} - despesas por forma de pagamento
        </p>
      </CardHeader>

--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -1,37 +1,37 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";

-import { cn } from "@/lib/utils/ui"
+import { cn } from "@/lib/utils/ui";

 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;

 export type ChartConfig = {
  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};

 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};

-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);

 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);

  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
  }

-  return context
+  return context;
 }

 function ChartContainer({
@@ -42,13 +42,13 @@ function ChartContainer({
  style,
  ...props
 }: React.ComponentProps<"div"> & {
-  config: ChartConfig
+  config: ChartConfig;
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  >["children"];
 }) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;

  return (
    <ChartContext.Provider value={{ config }}>
@@ -70,16 +70,16 @@ function ChartContainer({
        </div>
      </div>
    </ChartContext.Provider>
-  )
+  );
 }

 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
-  )
+  );

  if (!colorConfig.length) {
-    return null
+    return null;
  }

  return (
@@ -93,8 +93,8 @@ ${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
  })
  .join("\n")}
 }
@@ -103,10 +103,10 @@ ${colorConfig
          .join("\n"),
      }}
    />
-  )
-}
+  );
+};

-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;

 function ChartTooltipContent({
  active,
@@ -124,40 +124,40 @@ function ChartTooltipContent({
  labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
  }) {
-  const { config } = useChart()
+  const { config } = useChart();

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
-      return null
+      return null;
    }

-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
+        : itemConfig?.label;

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
-      )
+      );
    }

    if (!value) {
-      return null
+      return null;
    }

-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
  }, [
    label,
    labelFormatter,
@@ -166,13 +166,13 @@ function ChartTooltipContent({
    labelClassName,
    config,
    labelKey,
-  ])
+  ]);

  if (!active || !payload?.length) {
-    return null
+    return null;
  }

-  const nestLabel = payload.length === 1 && indicator !== "dot"
+  const nestLabel = payload.length === 1 && indicator !== "dot";

  return (
    <div
@@ -186,9 +186,9 @@ function ChartTooltipContent({
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;

            return (
              <div
@@ -212,7 +212,7 @@ function ChartTooltipContent({
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                              "w-0 border border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
@@ -247,14 +247,14 @@ function ChartTooltipContent({
                  </>
                )}
              </div>
-            )
+            );
          })}
      </div>
    </div>
-  )
+  );
 }

-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;

 function ChartLegendContent({
  className,
@@ -264,13 +264,13 @@ function ChartLegendContent({
  nameKey,
 }: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
+    hideIcon?: boolean;
+    nameKey?: string;
  }) {
-  const { config } = useChart()
+  const { config } = useChart();

  if (!payload?.length) {
-    return null
+    return null;
  }

  return (
@@ -284,8 +284,8 @@ function ChartLegendContent({
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);

          return (
            <div
@@ -306,10 +306,10 @@ function ChartLegendContent({
              )}
              {itemConfig?.label}
            </div>
-          )
+          );
        })}
    </div>
-  )
+  );
 }

 // Helper to extract item config from a payload.
@@ -319,7 +319,7 @@ function getPayloadConfigFromPayload(
  key: string
 ) {
  if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
  }

  const payloadPayload =
@@ -327,15 +327,15 @@ function getPayloadConfigFromPayload(
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
-      : undefined
+      : undefined;

-  let configLabelKey: string = key
+  let configLabelKey: string = key;

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+    configLabelKey = payload[key as keyof typeof payload] as string;
  } else if (
    payloadPayload &&
    key in payloadPayload &&
@@ -343,12 +343,12 @@ function getPayloadConfigFromPayload(
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
-    ] as string
+    ] as string;
  }

  return configLabelKey in config
    ? config[configLabelKey]
-    : config[key as keyof typeof config]
+    : config[key as keyof typeof config];
 }

 export {
@@ -358,4 +358,4 @@ export {
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
-}
+};