feat: melhora responsividade e dialogos da interface

components/dashboard/boletos-widget.tsx

@@ -245,7 +245,7 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
 				}}
 			>
 				<DialogContent
-					className="max-w-md"
+					className="max-w-[calc(100%-2rem)] sm:max-w-md"
 					onEscapeKeyDown={(event) => {
 						if (isProcessing) {
 							event.preventDefault();

components/dashboard/dashboard-grid-editable.tsx

@@ -16,8 +16,7 @@ import {
 	sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
 import {
-	RiArrowDownLine,
-	RiArrowUpLine,
+	RiAddCircleLine,
 	RiCheckLine,
 	RiCloseLine,
 	RiDragMove2Line,
@@ -201,11 +200,11 @@ export function DashboardGridEditable({
 			{/* Toolbar */}
 			<div className="flex flex-wrap items-center justify-between gap-2">
 				{!isEditing ? (
-					<div className="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-2 px-1">
+					<div className="flex w-full min-w-0 flex-col gap-1 px-1 sm:w-auto sm:flex-row sm:items-center sm:gap-2">
 						<span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
 							Ações rápidas
 						</span>
-						<div className="-mb-1 flex items-center gap-2 overflow-x-auto pb-1 sm:mb-0 sm:overflow-visible sm:pb-0">
+						<div className="-mb-1 grid w-full grid-cols-3 gap-1 pb-1 sm:mb-0 sm:flex sm:w-auto sm:items-center sm:gap-2 sm:overflow-visible sm:pb-0">
 							<LancamentoDialog
 								mode="create"
 								pagadorOptions={quickActionOptions.pagadorOptions}
@@ -218,9 +217,16 @@ export function DashboardGridEditable({
 								defaultPeriod={period}
 								defaultTransactionType="Receita"
 								trigger={
-									<Button size="sm" variant="outline" className="gap-2">
-										<RiArrowUpLine className="size-4 text-success/80" />
-										Nova receita
+									<Button
+										size="sm"
+										variant="outline"
+										className="h-12 w-full min-w-0 flex-col justify-center gap-0.5 px-1.5 text-sm whitespace-normal sm:h-8 sm:w-auto sm:flex-row sm:gap-2 sm:px-3 sm:whitespace-nowrap"
+									>
+										<span className="flex items-center gap-0.5">
+											<RiAddCircleLine className="size-3.5 shrink-0 text-success/80" />
+										</span>
+										<span className="sm:hidden">Receita</span>
+										<span className="hidden sm:inline">Nova receita</span>
 									</Button>
 								}
 							/>
@@ -236,18 +242,30 @@ export function DashboardGridEditable({
 								defaultPeriod={period}
 								defaultTransactionType="Despesa"
 								trigger={
-									<Button size="sm" variant="outline" className="gap-2">
-										<RiArrowDownLine className="size-4 text-destructive/80" />
-										Nova despesa
+									<Button
+										size="sm"
+										variant="outline"
+										className="h-12 w-full min-w-0 flex-col justify-center gap-0.5 px-1.5 text-sm whitespace-normal sm:h-8 sm:w-auto sm:flex-row sm:gap-2 sm:px-3 sm:whitespace-nowrap"
+									>
+										<span className="flex items-center gap-0.5">
+											<RiAddCircleLine className="size-3.5 shrink-0 text-destructive/80" />
+										</span>
+										<span className="sm:hidden">Despesa</span>
+										<span className="hidden sm:inline">Nova despesa</span>
 									</Button>
 								}
 							/>
 							<NoteDialog
 								mode="create"
 								trigger={
-									<Button size="sm" variant="outline" className="gap-2">
-										<RiTodoLine className="size-4 text-info/80" />
-										Nova anotação
+									<Button
+										size="sm"
+										variant="outline"
+										className="h-12 w-full min-w-0 flex-col justify-center gap-0.5 px-1.5 text-sm whitespace-normal sm:h-8 sm:w-auto sm:flex-row sm:gap-2 sm:px-3 sm:whitespace-nowrap"
+									>
+										<RiTodoLine className="size-3.5 shrink-0 text-info/80" />
+										<span className="sm:hidden">Anotação</span>
+										<span className="hidden sm:inline">Nova anotação</span>
 									</Button>
 								}
 							/>
@@ -257,7 +275,7 @@ export function DashboardGridEditable({
 					<div />
 				)}
 
-				<div className="flex items-center gap-2">
+				<div className="flex w-full items-center justify-end gap-2 sm:w-auto">
 					{isEditing ? (
 						<>
 							<Button
@@ -281,22 +299,23 @@ export function DashboardGridEditable({
 							</Button>
 						</>
 					) : (
-						<>
+						<div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto">
 							<WidgetSettingsDialog
 								hiddenWidgets={hiddenWidgets}
 								onToggleWidget={handleToggleWidget}
 								onReset={handleReset}
+								triggerClassName="w-full sm:w-auto"
 							/>
 							<Button
 								variant="outline"
 								size="sm"
 								onClick={handleStartEditing}
-								className="gap-2"
+								className="w-full gap-2 sm:w-auto"
 							>
 								<RiDragMove2Line className="size-4" />
 								Reordenar
 							</Button>
-						</>
+						</div>
 					)}
 				</div>
 			</div>

components/dashboard/installment-analysis/installment-group-card.tsx

@@ -80,7 +80,7 @@ export function InstallmentGroupCard({
 								{group.cartaoLogo && (
 									<img
 										src={`/logos/${group.cartaoLogo}`}
-										alt={group.cartaoName}
+										alt={group.cartaoName ?? "Cartão"}
 										className="h-6 w-auto object-contain rounded"
 									/>
 								)}

components/dashboard/installment-analysis/types.ts

@@ -1,7 +1,6 @@
 import type {
 	InstallmentAnalysisData,
 	InstallmentGroup,
-	PendingInvoice,
 } from "@/lib/dashboard/expenses/installment-analysis";
 
-export type { InstallmentAnalysisData, InstallmentGroup, PendingInvoice };
+export type { InstallmentAnalysisData, InstallmentGroup };

components/dashboard/invoices-widget.tsx

@@ -419,7 +419,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
 				}}
 			>
 				<DialogContent
-					className="max-w-md"
+					className="max-w-[calc(100%-2rem)] sm:max-w-md"
 					onEscapeKeyDown={(event) => {
 						if (modalState === "processing") {
 							event.preventDefault();

components/dashboard/notes-widget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { RiEyeLine, RiPencilLine, RiTodoLine } from "@remixicon/react";
+import { RiFileList2Line, RiPencilLine, RiTodoLine } from "@remixicon/react";
 import { useCallback, useMemo, useState } from "react";
 import { NoteDetailsDialog } from "@/components/anotacoes/note-details-dialog";
 import { NoteDialog } from "@/components/anotacoes/note-dialog";
@@ -100,13 +100,10 @@ export function NotesWidget({ notes }: NotesWidgetProps) {
 										{buildDisplayTitle(note.title)}
 									</p>
 									<div className="mt-1 flex items-center gap-2">
-										<Badge
-											variant="secondary"
-											className="h-5 px-1.5 text-[10px]"
-										>
+										<Badge variant="outline" className="h-5 px-1.5 text-[10px]">
 											{getTasksSummary(note)}
 										</Badge>
-										<p className="truncate text-xs text-muted-foreground">
+										<p className="truncate text-[11px] text-muted-foreground">
 											{DATE_FORMATTER.format(new Date(note.createdAt))}
 										</p>
 									</div>
@@ -131,7 +128,7 @@ export function NotesWidget({ notes }: NotesWidgetProps) {
 											note.title,
 										)}`}
 									>
-										<RiEyeLine className="size-4" />
+										<RiFileList2Line className="size-4" />
 									</Button>
 								</div>
 							</li>

components/dashboard/widget-settings-dialog.tsx

@@ -14,24 +14,31 @@ import {
 } from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import { widgetsConfig } from "@/lib/dashboard/widgets/widgets-config";
+import { cn } from "@/lib/utils";
 
 type WidgetSettingsDialogProps = {
 	hiddenWidgets: string[];
 	onToggleWidget: (widgetId: string) => void;
 	onReset: () => void;
+	triggerClassName?: string;
 };
 
 export function WidgetSettingsDialog({
 	hiddenWidgets,
 	onToggleWidget,
 	onReset,
+	triggerClassName,
 }: WidgetSettingsDialogProps) {
 	const [open, setOpen] = useState(false);
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
-				<Button variant="outline" size="sm" className="gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					className={cn("gap-2", triggerClassName)}
+				>
 					<RiSettings4Line className="size-4" />
 					Widgets
 				</Button>