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.

app/(landing-page)/page.tsx

@@ -171,7 +171,7 @@ export default async function Page() {
             </div>
 
             <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card className="border-[1.5px] hover:border-primary/50 transition-colors">
+              <Card className="border hover:border-primary/50 transition-colors">
                 <CardContent className="pt-6">
                   <div className="flex flex-col gap-4">
                     <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
@@ -191,7 +191,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px] hover:border-primary/50 transition-colors">
+              <Card className="border hover:border-primary/50 transition-colors">
                 <CardContent className="pt-6">
                   <div className="flex flex-col gap-4">
                     <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
@@ -210,7 +210,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px] hover:border-primary/50 transition-colors">
+              <Card className="border hover:border-primary/50 transition-colors">
                 <CardContent className="pt-6">
                   <div className="flex flex-col gap-4">
                     <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
@@ -229,7 +229,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px] hover:border-primary/50 transition-colors">
+              <Card className="border hover:border-primary/50 transition-colors">
                 <CardContent className="pt-6">
                   <div className="flex flex-col gap-4">
                     <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
@@ -249,7 +249,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px] hover:border-primary/50 transition-colors">
+              <Card className="border hover:border-primary/50 transition-colors">
                 <CardContent className="pt-6">
                   <div className="flex flex-col gap-4">
                     <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
@@ -269,7 +269,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px] hover:border-primary/50 transition-colors">
+              <Card className="border hover:border-primary/50 transition-colors">
                 <CardContent className="pt-6">
                   <div className="flex flex-col gap-4">
                     <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
@@ -309,7 +309,7 @@ export default async function Page() {
             </div>
 
             <div className="grid gap-6 md:grid-cols-2">
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex items-start gap-4">
                     <RiCodeSSlashLine
@@ -329,7 +329,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex items-start gap-4">
                     <RiDatabase2Line
@@ -349,7 +349,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex items-start gap-4">
                     <RiShieldCheckLine
@@ -369,7 +369,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex items-start gap-4">
                     <RiDeviceLine size={32} className="text-primary shrink-0" />
@@ -415,7 +415,7 @@ export default async function Page() {
             </div>
 
             <div className="space-y-6">
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex gap-4">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
@@ -434,7 +434,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex gap-4">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
@@ -457,7 +457,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex gap-4">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
@@ -475,7 +475,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex gap-4">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
@@ -529,7 +529,7 @@ export default async function Page() {
             </div>
 
             <div className="space-y-4">
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex gap-4">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
@@ -548,7 +548,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex gap-4">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
@@ -567,7 +567,7 @@ export default async function Page() {
                 </CardContent>
               </Card>
 
-              <Card className="border-[1.5px]">
+              <Card className="border">
                 <CardContent>
                   <div className="flex gap-4">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">

app/globals.css

@@ -10,7 +10,7 @@
   /* Base surfaces - warm cream with subtle orange undertone */
   --background: oklch(97.512% 0.00674 67.377);
   --foreground: oklch(18% 0.02 45);
-  --card: oklch(99% 0.006 80);
+  --card: oklch(100% 0.00011 271.152);
   --card-foreground: oklch(18% 0.02 45);
   --popover: oklch(99.5% 0.004 80);
   --popover-foreground: oklch(18% 0.02 45);

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">

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}

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)}
                     </>
                   ) : (
                     <>

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)}
                       </>
                     ) : (

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>
                           </>
                         )}

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}`}
+                  {endDate && ` - Termina em ${endDate}`}
-                  {" • Restante "}
+                  {" - Restante "}
                   <MoneyValues
                     amount={remainingAmount}
                     className="inline-block font-medium"

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>

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:{" "}

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)} •
+                  Cartões: {formatCurrency(summary.paymentSplits.card)} -
-                  Boletos: {formatCurrency(summary.paymentSplits.boleto)} •
+                  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>

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>
 

components/ui/chart.tsx

@@ -1,37 +1,37 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as RechartsPrimitive from "recharts"
+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
+    label?: React.ReactNode;
-    icon?: React.ComponentType
+    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 uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  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
+      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null
+    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
+    hideLabel?: boolean;
-    hideIndicator?: boolean
+    hideIndicator?: boolean;
-    indicator?: "line" | "dot" | "dashed"
+    indicator?: "line" | "dot" | "dashed";
-    nameKey?: string
+    nameKey?: string;
-    labelKey?: 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 [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    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 key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color
+            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
+    hideIcon?: boolean;
-    nameKey?: string
+    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 key = `${nameKey || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          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,
-}
+};

lib/pagadores/notifications.ts

@@ -165,7 +165,7 @@ export async function sendPagadorAutoEmails({
       await resend.emails.send({
         from: resendFrom,
         to: pagador.email,
-        subject: `${subjectPrefix} • ${pagador.name}`,
+        subject: `${subjectPrefix} - ${pagador.name}`,
         html,
       });
     })