feat(dashboard): refina experiencia dos widgets

src/features/dashboard/components/widgets/my-accounts-widget.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import {
+	RiArrowRightLine,
 	RiBarChartBoxLine,
-	RiExternalLinkLine,
 	RiEyeLine,
 	RiEyeOffLine,
 } from "@remixicon/react";
@@ -24,7 +24,9 @@ import {
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { isAccountInactive } from "@/shared/lib/accounts/constants";
 import { resolveLogoSrc } from "@/shared/lib/logo";
+import { buildInitials } from "@/shared/utils/initials";
 import { formatPeriodForUrl } from "@/shared/utils/period";
+import { cn } from "@/shared/utils/ui";
 
 type MyAccountsWidgetProps = {
 	accounts: DashboardAccount[];
@@ -54,9 +56,6 @@ export function MyAccountsWidget({
 		: activeAccounts.filter((account) => !account.excludeFromBalance);
 	const displayedAccounts = visibleAccounts.slice(0, 5);
 	const remainingCount = visibleAccounts.length - displayedAccounts.length;
-	const hiddenExcludedAccountsCount = showExcludedAccounts
-		? 0
-		: excludedAccountsCount;
 	const toggleButtonLabel = showExcludedAccounts
 		? "Ocultar contas não consideradas"
 		: "Mostrar contas não consideradas";
@@ -81,7 +80,7 @@ export function MyAccountsWidget({
 		<>
 			<div className="flex items-start justify-between gap-3 py-1">
 				<div className="space-y-1">
-					<p className="text-sm text-muted-foreground">Saldo Total</p>
+					<p className="text-sm text-muted-foreground">Saldo total</p>
 					<MoneyValues className="text-2xl font-medium" amount={totalBalance} />
 				</div>
 
@@ -106,51 +105,46 @@ export function MyAccountsWidget({
 						</TooltipTrigger>
 						<TooltipContent side="left" className="max-w-xs">
 							<p className="text-xs">{toggleButtonLabel}</p>
+							{!showExcludedAccounts ? (
+								<p className="mt-1 text-xs text-background/70">
+									{excludedAccountsCount}{" "}
+									{excludedAccountsCount === 1
+										? "conta não considerada oculta"
+										: "contas não consideradas ocultas"}
+								</p>
+							) : null}
 						</TooltipContent>
 					</Tooltip>
 				) : null}
 			</div>
 
-			{hiddenExcludedAccountsCount > 0 ? (
-				<p className="pb-2 text-xs text-muted-foreground">
-					{hiddenExcludedAccountsCount}{" "}
-					{hiddenExcludedAccountsCount === 1
-						? "conta não considerada oculta"
-						: "contas não consideradas ocultas"}
-				</p>
-			) : null}
-
 			<div>
 				{activeAccounts.length === 0 ? (
-					<div className="-mt-10">
-						<WidgetEmptyState
-							icon={
-								<RiBarChartBoxLine className="size-6 text-muted-foreground" />
-							}
-							title="Você ainda não adicionou nenhuma conta"
-							description="Cadastre suas contas bancárias para acompanhar os saldos e movimentações."
-						/>
-					</div>
+					<WidgetEmptyState
+						icon={
+							<RiBarChartBoxLine className="size-6 text-muted-foreground" />
+						}
+						title="Você ainda não adicionou nenhuma conta"
+						description="Cadastre suas contas bancárias para acompanhar os saldos e movimentações."
+					/>
 				) : displayedAccounts.length === 0 ? (
-					<div className="-mt-10">
-						<WidgetEmptyState
-							icon={<RiEyeOffLine className="size-6 text-muted-foreground" />}
-							title="As contas não consideradas estão ocultas"
-							description="Use o botão no topo do widget para mostrá-las novamente."
-						/>
-					</div>
+					<WidgetEmptyState
+						icon={<RiEyeOffLine className="size-6 text-muted-foreground" />}
+						title="As contas não consideradas estão ocultas"
+						description="Use o botão no topo do widget para mostrá-las novamente."
+					/>
 				) : (
 					<ul className="flex flex-col">
 						{displayedAccounts.map((account, index) => {
 							const logoSrc = resolveLogoSrc(account.logo);
 
 							return (
-								<div
+								<li
 									key={account.id}
-									className="flex items-center justify-between transition-all duration-300 py-1.5 "
+									className="flex items-center justify-between py-1.5 transition-all duration-300"
 								>
 									<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
-										<div className="relative size-9.5 overflow-hidden">
+										<div className="relative flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
 											{logoSrc ? (
 												<Image
 													src={logoSrc}
@@ -160,7 +154,11 @@ export function MyAccountsWidget({
 													className="object-contain rounded-full"
 													priority={index === 0}
 												/>
-											) : null}
+											) : (
+												<span className="text-xs font-medium text-primary">
+													{buildInitials(account.name)}
+												</span>
+											)}
 										</div>
 
 										<div className="min-w-0">
@@ -172,44 +170,41 @@ export function MyAccountsWidget({
 												className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
 											>
 												<span className="truncate">{account.name}</span>
-												<RiExternalLinkLine
-													className="size-3 shrink-0 text-muted-foreground"
-													aria-hidden
-												/>
 											</Link>
 
-											{account.excludeFromBalance ? (
-												<Tooltip>
-													<TooltipTrigger asChild>
-														<span className="inline-flex cursor-help ml-2">
-															<Badge className="font-normal" variant="info">
-																Não considerada
-															</Badge>
-														</span>
-													</TooltipTrigger>
-													<TooltipContent side="top" className="max-w-xs">
-														<p className="text-xs">
-															Esta conta aparece na lista, mas não entra no
-															cálculo do saldo total porque está marcada para
-															desconsiderar do saldo total.
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											) : null}
-
 											<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
 												<span className="truncate">{account.accountType}</span>
+												{account.excludeFromBalance ? (
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<span className="inline-flex cursor-help">
+																<Badge className="font-normal" variant="info">
+																	Não considerada
+																</Badge>
+															</span>
+														</TooltipTrigger>
+														<TooltipContent side="top" className="max-w-xs">
+															<p className="text-xs">
+																Esta conta aparece na lista, mas não entra no
+																cálculo do saldo total.
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												) : null}
 											</div>
 										</div>
 									</div>
 
 									<div className="flex flex-col items-end gap-0.5 text-right">
 										<MoneyValues
-											className="font-medium"
+											className={cn(
+												"font-medium",
+												account.balance < 0 && "text-destructive",
+											)}
 											amount={account.balance}
 										/>
 									</div>
-								</div>
+								</li>
 							);
 						})}
 					</ul>
@@ -217,8 +212,14 @@ export function MyAccountsWidget({
 			</div>
 
 			{remainingCount > 0 ? (
-				<CardFooter className="border-border/60 border-t pt-4 text-sm text-muted-foreground">
-					+{remainingCount} contas não exibidas
+				<CardFooter className="border-border/60 border-t pt-4">
+					<Link
+						href="/accounts"
+						className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+					>
+						+{remainingCount} contas não exibidas
+						<RiArrowRightLine className="size-4" aria-hidden />
+					</Link>
 				</CardFooter>
 			) : null}
 		</>