feat(calendar): agrupar parcelas da mesma série em evento único

Lançamentos parcelados com o mesmo seriesId agora são consolidados em
um único evento do tipo 'installment' no calendário, exibindo 'Nx de
R$ X' em vez de repetir o mesmo item N vezes. Legenda e modal de
detalhes atualizados para refletir o novo tipo.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/features/calendar/components/calendar-legend.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/shared/utils/ui";
 
 const LEGEND_ITEMS = [
 	{ label: "Lançamentos", ...EVENT_TYPE_STYLES.transaction },
+	{ label: "Parcelas", ...EVENT_TYPE_STYLES.installment },
 	{ label: "Boletos", ...EVENT_TYPE_STYLES.boleto },
 	{ label: "Fatura de Cartão", ...EVENT_TYPE_STYLES.card },
 ];

src/features/calendar/components/day-cell.tsx

@@ -20,6 +20,11 @@ export const EVENT_TYPE_STYLES: Record<
 		wrapper: "bg-primary/10 text-primary dark:bg-primary/5 dark:text-primary",
 		dot: "bg-primary",
 	},
+	installment: {
+		wrapper:
+			"bg-amber-100 text-amber-600 dark:bg-amber-900/10 dark:text-amber-500",
+		dot: "bg-amber-500",
+	},
 	boleto: {
 		wrapper: "bg-info/10 text-info dark:bg-info/5 dark:text-info",
 		dot: "bg-info",
@@ -39,6 +44,8 @@ const buildEventLabel = (event: CalendarEvent) => {
 		case "transaction":
 		case "boleto":
 			return event.transaction.name;
+		case "installment":
+			return event.transaction.name;
 		case "card":
 			return event.card.name;
 		default:
@@ -51,6 +58,8 @@ const buildEventComplement = (event: CalendarEvent) => {
 		case "transaction":
 		case "boleto":
 			return formatCurrencyValue(event.transaction.amount);
+		case "installment":
+			return `${event.installmentCount}x de ${formatCurrencyValue(event.installmentValue)}`;
 		case "card":
 			return event.card.totalDue !== null
 				? formatCurrencyValue(event.card.totalDue)

src/features/calendar/components/event-modal.tsx

@@ -150,8 +150,39 @@ const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => {
 	);
 };
 
+const renderInstallment = (
+	event: Extract<CalendarEvent, { type: "installment" }>,
+) => {
+	const isReceita = event.transaction.transactionType === "Receita";
+
+	return (
+		<EventCard type="installment">
+			<div className="flex items-start justify-between gap-3">
+				<div className="flex flex-col gap-1">
+					<span className="text-sm font-medium leading-tight">
+						{event.transaction.name}
+					</span>
+					<Badge variant="outline">{event.installmentCount}x parcelas</Badge>
+				</div>
+				<div className="flex flex-col items-end gap-0.5">
+					<MoneyValues
+						showPositiveSign
+						className={cn(
+							"text-base whitespace-nowrap font-medium",
+							isReceita ? "text-success" : "text-foreground",
+						)}
+						amount={event.installmentValue}
+					/>
+					<span className="text-xs text-muted-foreground">por parcela</span>
+				</div>
+			</div>
+		</EventCard>
+	);
+};
+
 const SECTION_LABELS: Record<CalendarEvent["type"], string> = {
 	transaction: "Lançamentos",
+	installment: "Parcelas",
 	boleto: "Boletos",
 	card: "Faturas",
 };
@@ -160,6 +191,8 @@ const renderEvent = (event: CalendarEvent) => {
 	switch (event.type) {
 		case "transaction":
 			return renderLancamento(event);
+		case "installment":
+			return renderInstallment(event);
 		case "boleto":
 			return renderBoleto(event);
 		case "card":
@@ -185,6 +218,7 @@ export function EventModal({ open, day, onClose, onCreate }: EventModalProps) {
 	const grouped = day
 		? {
 				transaction: day.events.filter((e) => e.type === "transaction"),
+				installment: day.events.filter((e) => e.type === "installment"),
 				boleto: day.events.filter((e) => e.type === "boleto"),
 				card: day.events.filter((e) => e.type === "card"),
 			}
@@ -204,7 +238,7 @@ export function EventModal({ open, day, onClose, onCreate }: EventModalProps) {
 
 				<div className="max-h-[380px] space-y-3 overflow-y-auto pr-2">
 					{hasEvents && grouped ? (
-						(["transaction", "boleto", "card"] as const)
+						(["transaction", "installment", "boleto", "card"] as const)
 							.filter((type) => grouped[type].length > 0)
 							.map((type) => (
 								<div key={type} className="space-y-1.5">