gsintegrations 0.0.494 → 0.0.496

package/dist/bundle.cjs.js

@@ -59729,7 +59729,7 @@ var ReceiptIcon = createSvgIcon( /*#__PURE__*/require$$2$1.jsx("path", {
   d: "M18 17H6v-2h12zm0-4H6v-2h12zm0-4H6V7h12zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2z"
 }), 'Receipt');
 
-var ReceiptLongIcon = createSvgIcon([/*#__PURE__*/require$$2$1.jsx("path", {
+var ReceiptLong = createSvgIcon([/*#__PURE__*/require$$2$1.jsx("path", {
   d: "M19.5 3.5 18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2v14H3v3c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V2zM19 19c0 .55-.45 1-1 1s-1-.45-1-1v-3H8V5h11z"
 }, "0"), /*#__PURE__*/require$$2$1.jsx("path", {
   d: "M9 7h6v2H9zm7 0h2v2h-2zm-7 3h6v2H9zm7 0h2v2h-2z"
@@ -59747,10 +59747,6 @@ var Save$1 = createSvgIcon( /*#__PURE__*/require$$2$1.jsx("path", {
   d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z"
 }), 'Save');
 
-var SavingsIcon = createSvgIcon( /*#__PURE__*/require$$2$1.jsx("path", {
-  d: "m19.83 7.5-2.27-2.27c.07-.42.18-.81.32-1.15.08-.18.12-.37.12-.58 0-.83-.67-1.5-1.5-1.5-1.64 0-3.09.79-4 2h-5C4.46 4 2 6.46 2 9.5S4.5 21 4.5 21H10v-2h2v2h5.5l1.68-5.59 2.82-.94V7.5zM13 9H8V7h5zm3 2c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"
-}), 'Savings');
-
 var Schedule = createSvgIcon([/*#__PURE__*/require$$2$1.jsx("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
 }, "0"), /*#__PURE__*/require$$2$1.jsx("path", {
@@ -144524,8 +144520,53 @@ const parseMonthValue = (value) => {
     return new Date(year, month - 1, 1);
 };
 const toMonthValue = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
-const FinancialSummaryHeader = ({ embedded = false, variant = "balance", balanceLabel, isLoading = false, periodLabel, periodInputValue, periodInputMin, periodInputMax, onPeriodInputChange, detailLines = [], onEdit, onAdd, addLabel = "Adicionar", addQuotaFeature, canExport = false, isExporting = false, onExport, }) => {
-    var _a, _b;
+const MovementTotalButton = ({ kind, label, amount, selected, color, compact, onSelect, }) => (React$1.createElement(Box$1, { component: "button", type: "button", "aria-pressed": selected, "aria-label": label, "data-testid": kind === "income" ? "financial-movement-income" : "financial-movement-outcome", onClick: () => onSelect(kind), sx: {
+        flex: 1,
+        minWidth: 0,
+        minHeight: 44,
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.25,
+        py: compact ? 0.5 : 1,
+        border: 0,
+        borderRadius: 1.5,
+        cursor: "pointer",
+        textAlign: "left",
+        color: "secondary.contrastText",
+        bgcolor: selected ? color : alpha(color, 0.45),
+        "&:hover": {
+            bgcolor: selected ? color : alpha(color, 0.62),
+        },
+        "&:focus-visible": {
+            outline: "2px solid",
+            outlineColor: "secondary.contrastText",
+            outlineOffset: 2,
+        },
+    } },
+    React$1.createElement(Box$1, { "aria-hidden": true, sx: {
+            width: 28,
+            height: 28,
+            borderRadius: "50%",
+            bgcolor: "rgba(255,255,255,0.2)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+        } }, kind === "income" ? (React$1.createElement(ArrowUpward, { fontSize: "small" })) : (React$1.createElement(ArrowDownward, { fontSize: "small" }))),
+    React$1.createElement(Box$1, { sx: { minWidth: 0 } },
+        compact ? null : (React$1.createElement(Typography$1, { variant: "caption", sx: { display: "block", lineHeight: 1.2, opacity: 0.92 } }, label)),
+        React$1.createElement(Typography$1, { component: "span", "data-testid": kind === "income" ? "financial-income-total" : "financial-outcome-total", sx: {
+                display: "block",
+                fontWeight: 700,
+                fontSize: compact ? "0.875rem" : "1rem",
+                lineHeight: 1.2,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+            } }, amount))));
+const FinancialSummaryHeader = ({ embedded = false, variant = "balance", balanceLabel, movementKind = "income", incomeTotalLabel, outcomeTotalLabel, onMovementKindChange, isLoading = false, periodLabel, periodInputValue, periodInputMin, periodInputMax, onPeriodInputChange, detailLines = [], onEdit, onAdd, addLabel = "Adicionar", addQuotaFeature, canExport = false, isExporting = false, onExport, }) => {
+    var _a, _b, _c, _d;
     const theme = useTheme$1();
     const periodButtonRef = React$1.useRef(null);
     const heroRef = React$1.useRef(null);
@@ -144576,7 +144617,14 @@ const FinancialSummaryHeader = ({ embedded = false, variant = "balance", balance
         const node = heroRef.current;
         if (!node)
             return;
-        const measure = () => setSpacerHeight(node.offsetHeight);
+        const measure = () => {
+            const spacer = node.nextElementSibling;
+            const spacerDocTop = spacer
+                ? spacer.getBoundingClientRect().top + window.scrollY
+                : 0;
+            const nextHeight = Math.max(0, Math.round(node.offsetHeight - spacerDocTop));
+            setSpacerHeight(nextHeight);
+        };
         const observer = new ResizeObserver(measure);
         observer.observe(node);
         measure();
@@ -144587,11 +144635,16 @@ const FinancialSummaryHeader = ({ embedded = false, variant = "balance", balance
     const showAdd = Boolean(onAdd);
     const showPeriod = Boolean(onPeriodInputChange);
     const isMonthlyFee = variant === "monthlyFee";
+    const showMovementSwitch = variant === "movements" && Boolean(onMovementKindChange);
+    const incomeAmount = incomeTotalLabel !== null && incomeTotalLabel !== void 0 ? incomeTotalLabel : (movementKind === "income" ? balanceLabel : "R$ 0,00");
+    const outcomeAmount = outcomeTotalLabel !== null && outcomeTotalLabel !== void 0 ? outcomeTotalLabel : (movementKind === "outcome" ? balanceLabel : "R$ 0,00");
     const overline = variant === "monthlyFee"
         ? "Mensalidade"
         : variant === "movements"
             ? "Lançamentos"
-            : "Resumo Financeiro";
+            : variant === "accounts"
+                ? "Contas"
+                : "Resumo Financeiro";
     const periodDate = parseMonthValue(periodInputValue);
     return (React$1.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: ptBR$1, localeText: ptBR.components.MuiLocalizationProvider.defaultProps.localeText },
         React$1.createElement(Box$1, { ref: heroRef, "data-testid": "financial-dashboard-hero", "data-collapsed": isExpanded ? "false" : "true", sx: {
@@ -144620,9 +144673,8 @@ const FinancialSummaryHeader = ({ embedded = false, variant = "balance", balance
             } },
             React$1.createElement(Box$1, { "data-testid": "financial-dashboard-hero-content", sx: {
                     display: "flex",
-                    justifyContent: "space-between",
-                    gap: 2,
-                    alignItems: isExpanded ? "flex-start" : "center",
+                    flexDirection: "column",
+                    gap: showMovementSwitch ? 1.5 : 0,
                     width: "100%",
                     maxWidth: theme.breakpoints.values.md,
                     mx: "auto",
@@ -144630,69 +144682,79 @@ const FinancialSummaryHeader = ({ embedded = false, variant = "balance", balance
                     px: PAGE_LIST_CONTAINER_SPACING.px,
                     pl: embedded ? { xs: 7, md: 2 } : undefined,
                 } },
-                React$1.createElement(Box$1, { sx: { flex: 1, minWidth: 0 } },
-                    React$1.createElement(Collapse$1, { in: isExpanded, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard },
-                        React$1.createElement(Typography$1, { variant: "overline", sx: { opacity: 0.8, letterSpacing: "0.08em" } }, overline),
-                        variant === "balance" ? (React$1.createElement(Typography$1, { variant: "body2", sx: { opacity: 0.9, mt: 1 } }, "Saldo da casa")) : null),
-                    isLoading ? (React$1.createElement(Skeleton$1, { width: isExpanded ? 180 : 120, height: isExpanded ? 48 : 28, sx: { bgcolor: "rgba(255,255,255,0.16)", my: 0.5 } })) : (React$1.createElement(Typography$1, { component: "p", "data-testid": "financial-dashboard-balance", sx: {
-                            fontSize: isExpanded ? { xs: "2rem", sm: "2.5rem" } : "1.125rem",
-                            fontWeight: 700,
-                            lineHeight: 1.15,
-                            letterSpacing: "-0.03em",
-                            my: isExpanded ? 0.5 : 0,
-                            transition: `font-size ${ANIMATION_DURATION.normal}ms ${ANIMATION_EASING.standard}`,
-                        } }, balanceLabel)),
-                    isMonthlyFee && detailLines.length > 0 ? (React$1.createElement(Collapse$1, { in: isExpanded, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard },
-                        React$1.createElement(Stack$1, { spacing: 1, sx: { mt: 1.5 } }, detailLines.map((line) => (React$1.createElement(Box$1, { key: line.label },
-                            React$1.createElement(Typography$1, { variant: "caption", sx: { opacity: 0.75 } }, line.label),
-                            React$1.createElement(Typography$1, { variant: "body2", sx: { fontWeight: 600 } }, line.value))))))) : null,
-                    periodLabel ? (React$1.createElement(Typography$1, { variant: "body2", "data-testid": "financial-period-label", sx: { opacity: isExpanded ? 1 : 0.85 } }, periodLabel)) : null),
-                showPeriod || showExport || showEdit || showAdd ? (React$1.createElement(Stack$1, { spacing: 2, alignItems: "center", sx: { flexShrink: 0, ml: "auto" } },
-                    showPeriod ? (React$1.createElement(React$1.Fragment, null,
-                        React$1.createElement(IconButton$1, { ref: periodButtonRef, type: "button", "aria-label": "Selecionar per\u00EDodo", "data-testid": "financial-period-button", onClick: openPeriodPicker, sx: {
-                                width: 44,
-                                height: 44,
-                                color: "secondary.contrastText",
-                                bgcolor: "rgba(255,255,255,0.12)",
-                                "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
-                            } },
-                            React$1.createElement(CalendarMonth$1, null)),
-                        React$1.createElement(Popover$1, { open: periodPickerOpen, anchorEl: periodButtonRef.current, onClose: () => setPeriodPickerOpen(false), anchorOrigin: { vertical: "bottom", horizontal: "right" }, transformOrigin: { vertical: "top", horizontal: "right" } },
-                            React$1.createElement(DateCalendar, { views: ["year", "month"], openTo: "month", value: periodDate, minDate: (_a = parseMonthValue(periodInputMin || "2000-01")) !== null && _a !== void 0 ? _a : undefined, maxDate: (_b = parseMonthValue(periodInputMax || "2100-12")) !== null && _b !== void 0 ? _b : undefined, onChange: selectPeriod, "data-testid": "financial-period-calendar" })))) : null,
-                    React$1.createElement(Collapse$1, { in: isExpanded && showAdd, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard, unmountOnExit: true }, addQuotaFeature ? (React$1.createElement(QuotaGuard, { feature: addQuotaFeature, behavior: "hide" },
-                        React$1.createElement(IconButton$1, { type: "button", "aria-label": addLabel, onClick: onAdd, "data-testid": "financial-summary-add", sx: {
-                                width: 44,
-                                height: 44,
-                                color: "secondary.contrastText",
-                                bgcolor: "rgba(255,255,255,0.12)",
-                                "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
-                            } },
-                            React$1.createElement(Add$1, null)))) : (React$1.createElement(IconButton$1, { type: "button", "aria-label": addLabel, onClick: onAdd, "data-testid": "financial-summary-add", sx: {
-                            width: 44,
-                            height: 44,
-                            color: "secondary.contrastText",
-                            bgcolor: "rgba(255,255,255,0.12)",
-                            "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
-                        } },
-                        React$1.createElement(Add$1, null)))),
-                    React$1.createElement(Collapse$1, { in: isExpanded && showEdit, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard, unmountOnExit: true },
-                        React$1.createElement(IconButton$1, { type: "button", "aria-label": "Editar mensalidade", onClick: onEdit, "data-testid": "financial-monthly-fee-edit", sx: {
-                                width: 44,
-                                height: 44,
-                                color: "secondary.contrastText",
-                                bgcolor: "rgba(255,255,255,0.12)",
-                                "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
-                            } },
-                            React$1.createElement(EditIcon, null))),
-                    React$1.createElement(Collapse$1, { in: isExpanded && showExport, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard, unmountOnExit: true },
-                        React$1.createElement(IconButton$1, { "aria-label": isExporting ? "Exportando relatório" : "Exportar relatório", onClick: onExport, disabled: isExporting, "data-testid": "financial-report-export-button", sx: {
+                React$1.createElement(Box$1, { sx: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gap: 2,
+                        alignItems: isExpanded ? "flex-start" : "center",
+                        width: "100%",
+                    } },
+                    React$1.createElement(Box$1, { sx: { flex: 1, minWidth: 0 } },
+                        React$1.createElement(Collapse$1, { in: isExpanded, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard },
+                            React$1.createElement(Typography$1, { variant: "overline", sx: { opacity: 0.8, letterSpacing: "0.08em" } }, overline),
+                            variant === "balance" || variant === "accounts" ? (React$1.createElement(Typography$1, { variant: "body2", sx: { opacity: 0.9, mt: 1 } }, variant === "accounts" ? "Saldo das contas" : "Saldo da casa")) : null),
+                        showMovementSwitch ? null : isLoading ? (React$1.createElement(Skeleton$1, { width: isExpanded ? 180 : 120, height: isExpanded ? 48 : 28, sx: { bgcolor: "rgba(255,255,255,0.16)", my: 0.5 } })) : (React$1.createElement(Typography$1, { component: "p", "data-testid": "financial-dashboard-balance", sx: {
+                                fontSize: isExpanded ? { xs: "2rem", sm: "2.5rem" } : "1.125rem",
+                                fontWeight: 700,
+                                lineHeight: 1.15,
+                                letterSpacing: "-0.03em",
+                                my: isExpanded ? 0.5 : 0,
+                                transition: `font-size ${ANIMATION_DURATION.normal}ms ${ANIMATION_EASING.standard}`,
+                            } }, balanceLabel)),
+                        isMonthlyFee && detailLines.length > 0 ? (React$1.createElement(Collapse$1, { in: isExpanded, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard },
+                            React$1.createElement(Stack$1, { spacing: 1, sx: { mt: 1.5 } }, detailLines.map((line) => (React$1.createElement(Box$1, { key: line.label },
+                                React$1.createElement(Typography$1, { variant: "caption", sx: { opacity: 0.75 } }, line.label),
+                                React$1.createElement(Typography$1, { variant: "body2", sx: { fontWeight: 600 } }, line.value))))))) : null,
+                        periodLabel ? (React$1.createElement(Typography$1, { variant: "body2", "data-testid": "financial-period-label", sx: { opacity: isExpanded ? 1 : 0.85 } }, periodLabel)) : null),
+                    showPeriod || showExport || showEdit || showAdd ? (React$1.createElement(Stack$1, { spacing: 2, alignItems: "center", sx: { flexShrink: 0, ml: "auto" } },
+                        showPeriod ? (React$1.createElement(React$1.Fragment, null,
+                            React$1.createElement(IconButton$1, { ref: periodButtonRef, type: "button", "aria-label": "Selecionar per\u00EDodo", "data-testid": "financial-period-button", onClick: openPeriodPicker, sx: {
+                                    width: 44,
+                                    height: 44,
+                                    color: "secondary.contrastText",
+                                    bgcolor: "rgba(255,255,255,0.12)",
+                                    "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
+                                } },
+                                React$1.createElement(CalendarMonth$1, null)),
+                            React$1.createElement(Popover$1, { open: periodPickerOpen, anchorEl: periodButtonRef.current, onClose: () => setPeriodPickerOpen(false), anchorOrigin: { vertical: "bottom", horizontal: "right" }, transformOrigin: { vertical: "top", horizontal: "right" } },
+                                React$1.createElement(DateCalendar, { views: ["year", "month"], openTo: "month", value: periodDate, minDate: (_a = parseMonthValue(periodInputMin || "2000-01")) !== null && _a !== void 0 ? _a : undefined, maxDate: (_b = parseMonthValue(periodInputMax || "2100-12")) !== null && _b !== void 0 ? _b : undefined, onChange: selectPeriod, "data-testid": "financial-period-calendar" })))) : null,
+                        React$1.createElement(Collapse$1, { in: isExpanded && showAdd, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard, unmountOnExit: true }, addQuotaFeature ? (React$1.createElement(QuotaGuard, { feature: addQuotaFeature, behavior: "hide" },
+                            React$1.createElement(IconButton$1, { type: "button", "aria-label": addLabel, onClick: onAdd, "data-testid": "financial-summary-add", sx: {
+                                    width: 44,
+                                    height: 44,
+                                    color: "secondary.contrastText",
+                                    bgcolor: "rgba(255,255,255,0.12)",
+                                    "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
+                                } },
+                                React$1.createElement(Add$1, null)))) : (React$1.createElement(IconButton$1, { type: "button", "aria-label": addLabel, onClick: onAdd, "data-testid": "financial-summary-add", sx: {
                                 width: 44,
                                 height: 44,
                                 color: "secondary.contrastText",
                                 bgcolor: "rgba(255,255,255,0.12)",
                                 "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
                             } },
-                            React$1.createElement(FileDownloadIcon, null))))) : null)),
+                            React$1.createElement(Add$1, null)))),
+                        React$1.createElement(Collapse$1, { in: isExpanded && showEdit, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard, unmountOnExit: true },
+                            React$1.createElement(IconButton$1, { type: "button", "aria-label": "Editar mensalidade", onClick: onEdit, "data-testid": "financial-monthly-fee-edit", sx: {
+                                    width: 44,
+                                    height: 44,
+                                    color: "secondary.contrastText",
+                                    bgcolor: "rgba(255,255,255,0.12)",
+                                    "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
+                                } },
+                                React$1.createElement(EditIcon, null))),
+                        React$1.createElement(Collapse$1, { in: isExpanded && showExport, timeout: ANIMATION_DURATION.normal, easing: ANIMATION_EASING.standard, unmountOnExit: true },
+                            React$1.createElement(IconButton$1, { "aria-label": isExporting ? "Exportando relatório" : "Exportar relatório", onClick: onExport, disabled: isExporting, "data-testid": "financial-report-export-button", sx: {
+                                    width: 44,
+                                    height: 44,
+                                    color: "secondary.contrastText",
+                                    bgcolor: "rgba(255,255,255,0.12)",
+                                    "&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
+                                } },
+                                React$1.createElement(FileDownloadIcon, null))))) : null),
+                showMovementSwitch && onMovementKindChange ? (React$1.createElement(Box$1, { sx: { display: "flex", gap: 1, width: "100%" } },
+                    React$1.createElement(MovementTotalButton, { kind: "income", label: "Contribui\u00E7\u00F5es", amount: incomeAmount, selected: movementKind === "income", color: (_d = (_c = theme.brand) === null || _c === void 0 ? void 0 : _c.green) !== null && _d !== void 0 ? _d : "#6F8C3A", compact: !isExpanded, onSelect: onMovementKindChange }),
+                    React$1.createElement(MovementTotalButton, { kind: "outcome", label: "Gastos", amount: outcomeAmount, selected: movementKind === "outcome", color: theme.palette.error.main, compact: !isExpanded, onSelect: onMovementKindChange }))) : null)),
         React$1.createElement(Box$1, { sx: { height: spacerHeight } })));
 };
 
@@ -145928,7 +145990,7 @@ const FinancialBottomNav = ({ audience, activeTab, showMensalidade = false, onNa
                 id: "movements",
                 label: "Lançamentos",
                 testId: "financial-nav-movements",
-                icon: React$1.createElement(ReceiptLongIcon, null),
+                icon: React$1.createElement(ReceiptLong, null),
                 onClick: onNavigateMovements,
             },
             {
@@ -146030,65 +146092,97 @@ const FinancialAppShell = ({ audience, activeTab, showBottomNav = true, showMens
             showBottomNav ? (React$1.createElement(FinancialBottomNav, { audience: audience, activeTab: activeTab, showMensalidade: showMensalidade, onNavigateHome: onNavigateHome, onNavigateMovements: onNavigateMovements, onNavigateAccounts: onNavigateAccounts, onNavigateMonthlyFee: onNavigateMonthlyFee })) : null)));
 };
 
+const SEARCH_DEBOUNCE_MS$3 = 1000;
+const SEARCH_MIN_CHARS$3 = 2;
 const formatCurrency$3 = (value) => new Intl.NumberFormat("pt-BR", {
     style: "currency",
     currency: "BRL",
-}).format(Number(value));
+}).format(Number(value) || 0);
+const accountDetail = (account) => {
+    const place = account.accountType === "CASH"
+        ? "Caixa"
+        : [
+            account.agency ? `Agência ${account.agency}` : "",
+            account.account ? `Conta ${account.account}` : "",
+        ]
+            .filter(Boolean)
+            .join(" · ");
+    return [place, account.pixKey].filter(Boolean).join(" · ");
+};
+function EmptyState$2({ message }) {
+    return (React$1.createElement(Box$1, { role: "status", sx: { py: 4, textAlign: "center" } },
+        React$1.createElement(Typography$1, { variant: "body1", color: "text.secondary" }, message)));
+}
 const AccountListItem = React$1.memo(({ account, isLastItem, onSelect, }) => {
-    var _a, _b;
-    const theme = useTheme$1();
-    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-    const currentBalance = parseFloat(account.currentBalance);
-    return (React$1.createElement(ListItem$1, { "data-testid": `financial-account-list-item-${account.id}`, sx: {
-            width: "100%",
-            borderBottom: isLastItem ? "none" : `1px solid ${theme.palette.divider}`,
-            cursor: "pointer",
-            "&:hover": { backgroundColor: theme.palette.action.hover },
-        }, onClick: () => onSelect(account.id) },
-        React$1.createElement(ListItemAvatar$1, null,
-            React$1.createElement(Avatar$1, { alt: account.name, src: (_a = account.image) !== null && _a !== void 0 ? _a : undefined, sx: {
-                    bgcolor: theme.palette.primary.main,
-                    color: theme.palette.primary.contrastText,
-                } }, account.accountType === "CASH" ? (React$1.createElement(SavingsIcon, { fontSize: isMobile ? "medium" : "large" })) : (React$1.createElement(AccountBalanceIcon, { fontSize: isMobile ? "medium" : "large" })))),
-        React$1.createElement(ListItemText$1, { primary: account.name, secondary: React$1.createElement(Box$1, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } },
-                account.accountType === "BANK" ? (React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary" },
-                    "Ag\u00EAncia: ",
-                    account.agency,
-                    " | Conta: ",
-                    account.account)) : null,
-                React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary" },
-                    "Saldo atual: ",
-                    formatCurrency$3(currentBalance)),
-                account.pixKey ? (React$1.createElement(Chip$1, { label: `PIX: ${(_b = account.pixKeyType) !== null && _b !== void 0 ? _b : "Chave"}`, size: "small", color: "primary", variant: "outlined" })) : null) }),
-        React$1.createElement(ListItemSecondaryAction$1, null,
-            React$1.createElement(ChevronRight$2, { color: "action" }))));
+    const detail = accountDetail(account);
+    return (React$1.createElement(React$1.Fragment, null,
+        React$1.createElement(ListItem$1, { "data-testid": `financial-account-list-item-${account.id}`, onClick: () => onSelect(account.id), onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    onSelect(account.id);
+                }
+            }, tabIndex: 0, "aria-label": `Selecionar conta: ${account.name}`, sx: {
+                display: "flex",
+                px: 0,
+                minHeight: 44,
+                cursor: "pointer",
+                "&:hover, &:focus": { backgroundColor: "action.hover" },
+            } },
+            React$1.createElement(Box$1, { sx: { flex: 1, minWidth: 0 } },
+                React$1.createElement(Box$1, { sx: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gap: 2,
+                        alignItems: "baseline",
+                    } },
+                    React$1.createElement(Typography$1, { variant: "subtitle1", noWrap: true }, account.name),
+                    React$1.createElement(Typography$1, { variant: "subtitle1", sx: { fontWeight: 600, flexShrink: 0 } }, formatCurrency$3(account.currentBalance))),
+                detail ? (React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, detail)) : null)),
+        !isLastItem ? React$1.createElement(Divider$1, { component: "li" }) : null));
 });
 AccountListItem.displayName = "AccountListItem";
 const FinancialAccountsPage = ({ accounts, onBack, onSelectAccount, onAddAccount, }) => {
-    useTheme$1();
     const { embedded } = useFinancialChrome();
-    const isEmpty = accounts.length === 0;
-    const rows = React$1.useMemo(() => accounts.map((account, index) => (React$1.createElement(AccountListItem, { key: account.id, account: account, isLastItem: index === accounts.length - 1, onSelect: onSelectAccount }))), [accounts, onSelectAccount]);
-    const handleAdd = React$1.useCallback(() => {
-        onAddAccount();
-    }, [onAddAccount]);
+    const [searchInput, setSearchInput] = React$1.useState("");
+    const [searchTerm, setSearchTerm] = React$1.useState("");
+    React$1.useEffect(() => {
+        const normalized = searchInput.trim().toLowerCase();
+        if (normalized.length < SEARCH_MIN_CHARS$3) {
+            setSearchTerm("");
+            return;
+        }
+        const timeout = window.setTimeout(() => setSearchTerm(normalized), SEARCH_DEBOUNCE_MS$3);
+        return () => window.clearTimeout(timeout);
+    }, [searchInput]);
+    const balanceLabel = React$1.useMemo(() => {
+        const total = accounts.reduce((sum, account) => {
+            const value = Number(account.currentBalance);
+            return sum + (Number.isFinite(value) ? value : 0);
+        }, 0);
+        return formatCurrency$3(total);
+    }, [accounts]);
+    const visibleAccounts = React$1.useMemo(() => {
+        if (!searchTerm)
+            return accounts;
+        return accounts.filter((account) => account.name.toLowerCase().includes(searchTerm));
+    }, [accounts, searchTerm]);
     return (React$1.createElement(Box$1, { sx: { minHeight: embedded ? "auto" : "100vh", bgcolor: "background.default" } },
-        embedded ? null : (React$1.createElement(PageHeader$2, { title: "Contas", onBack: onBack, onAdd: handleAdd, addLabel: "Adicionar", showAddButton: true, hideAddButtonOnMobile: true })),
-        React$1.createElement(Container$1, { maxWidth: "md", sx: PAGE_LIST_CONTAINER_SPACING },
-            embedded ? (React$1.createElement(Box$1, { sx: { display: "flex", justifyContent: "flex-end", mb: 1 } },
-                React$1.createElement(Button$1, { variant: "outlined", startIcon: React$1.createElement(Add$1, null), onClick: handleAdd, "data-testid": "financial-account-add-button" }, "Adicionar conta"))) : null,
-            isEmpty ? (React$1.createElement(Box$1, { sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    textAlign: "center",
-                    py: EMPTY_STATE_VERTICAL_PADDING,
-                    px: EMPTY_STATE_PADDING,
-                } },
-                React$1.createElement(AccountBalanceIcon, { sx: { fontSize: 64, color: "text.disabled", mb: 1 } }),
-                React$1.createElement(Typography$1, { variant: "h6", sx: { fontWeight: 600, mb: 1 } }, "Nenhuma conta cadastrada"),
-                React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary", sx: { mb: 3, maxWidth: 320 } }, "Cadastre a caixinha ou uma conta para acompanhar o saldo da casa."),
-                React$1.createElement(Button$1, { "data-testid": "financial-account-empty-add-button", variant: "contained", startIcon: React$1.createElement(Add$1, null), onClick: handleAdd, sx: { borderRadius: RADIUS.default, px: CARD_PADDING } }, "Adicionar Conta"))) : (React$1.createElement(List$1, { "data-testid": "financial-accounts-list", sx: { pb: LIST_CONTENT_BOTTOM_PADDING } }, rows)))));
+        embedded ? null : (React$1.createElement(PageHeader$2, { title: "Contas", onBack: onBack, showAddButton: false })),
+        React$1.createElement(FinancialSummaryHeader, { embedded: embedded, variant: "accounts", balanceLabel: balanceLabel, onAdd: onAddAccount, addLabel: "Adicionar conta" }),
+        React$1.createElement(Container$1, { maxWidth: "md", sx: Object.assign(Object.assign({}, PAGE_LIST_CONTAINER_SPACING), { pb: LIST_CONTENT_BOTTOM_PADDING }) },
+            React$1.createElement(TextField$1, { fullWidth: true, placeholder: "Buscar conta", value: searchInput, onChange: (event) => setSearchInput(event.target.value), inputProps: { "aria-label": "Buscar conta" }, InputProps: {
+                    startAdornment: (React$1.createElement(InputAdornment$1, { position: "start" },
+                        React$1.createElement(Search$1, { sx: { color: "text.secondary" } }))),
+                }, sx: {
+                    mb: 2,
+                    width: "100%",
+                    "& .MuiOutlinedInput-root": {
+                        borderRadius: RADIUS.default,
+                        minHeight: 44,
+                        backgroundColor: "background.paper",
+                    },
+                } }),
+            visibleAccounts.length === 0 ? (React$1.createElement(EmptyState$2, { message: searchTerm ? "Nenhuma conta encontrada" : "Nenhuma conta cadastrada" })) : (React$1.createElement(List$1, { "data-testid": "financial-accounts-list", sx: { py: 0 } }, visibleAccounts.map((account, index) => (React$1.createElement(AccountListItem, { key: account.id, account: account, isLastItem: index === visibleAccounts.length - 1, onSelect: onSelectAccount }))))))));
 };
 
 const FinancialMonthlyFeePage = ({ formatCurrency, monthlyFee, dueDay, paymentMethod, receivingAccount, onBack, onEdit, summary, receiptForm, children, }) => {
@@ -147230,22 +147324,11 @@ const useIncomeListPage = (props) => {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
-/**
- * Accessible, actionable empty state for incomes
- */
-function EmptyState$1({ onAdd, isMobile, }) {
-    return (React$1.createElement(Box$1, { role: "region", "aria-labelledby": "income-empty-title", sx: {
-            py: EMPTY_STATE_VERTICAL_PADDING,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 2,
-            textAlign: "center",
-        } },
-        React$1.createElement(ReceiptLongIcon, { sx: { fontSize: 56, color: "text.secondary" }, "aria-hidden": true }),
-        React$1.createElement(Typography$1, { id: "income-empty-title", variant: "h6" }, "Nenhuma contribui\u00E7\u00E3o registrada"),
-        React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary", sx: { maxWidth: 440 } }, "Registre sua primeira contribui\u00E7\u00E3o para acompanhar o saldo e controlar as doa\u00E7\u00F5es e receitas do m\u00EAs. Voc\u00EA pode adicionar uma contribui\u00E7\u00E3o agora mesmo."),
-        React$1.createElement(Button$1, { variant: "contained", color: "primary", startIcon: React$1.createElement(Add$1, null), onClick: onAdd !== null && onAdd !== void 0 ? onAdd : (() => { }), "aria-label": "Adicionar nova contribui\u00E7\u00E3o", sx: { mt: 1, px: 3 }, size: isMobile ? "medium" : "large" }, "Adicionar Contribui\u00E7\u00E3o")));
+const SEARCH_DEBOUNCE_MS$2 = 1000;
+const SEARCH_MIN_CHARS$2 = 2;
+function EmptyState$1({ message }) {
+    return (React$1.createElement(Box$1, { role: "status", sx: { py: 4, textAlign: "center" } },
+        React$1.createElement(Typography$1, { variant: "body1", color: "text.secondary" }, message)));
 }
 /**
  * Presentation-only list item component (memoized)
@@ -147255,10 +147338,8 @@ const IncomeListItem = React$1.memo(function IncomeListItem({ item, idx, isLastI
     const dateLabel = formatDate(item.date);
     const formattedAmount = formatCurrency(item.amount);
     const accountName = getAccountName(item);
-    const { category, subcategory } = item;
     const settlementStatus = (_a = item.settlementStatus) !== null && _a !== void 0 ? _a : "CONSOLIDATED";
-    const settlementLabel = settlementStatus === "PROJECTED" ? "Aguardando Pagamento" : "Pago";
-    const settlementColor = settlementStatus === "PROJECTED" ? "warning" : "success";
+    const settlementLabel = settlementStatus === "PROJECTED" ? "Aguardando pagamento" : "Pago";
     const nextSettlementStatus = settlementStatus === "PROJECTED" ? "CONSOLIDATED" : "PROJECTED";
     const settlementActionLabel = settlementStatus === "PROJECTED"
         ? "Marcar como Pago"
@@ -147269,48 +147350,39 @@ const IncomeListItem = React$1.memo(function IncomeListItem({ item, idx, isLastI
             onSelect(item.id);
     };
     return (React$1.createElement(React$1.Fragment, { key: (_d = item.id) !== null && _d !== void 0 ? _d : keyFallback },
-        React$1.createElement(ListItem$1, { alignItems: "flex-start", onClick: handleSelect, onKeyDown: (e) => {
+        React$1.createElement(ListItem$1, { alignItems: "center", onClick: handleSelect, onKeyDown: (e) => {
                 if ((e.key === "Enter" || e.key === " ") && onSelect && item.id) {
                     e.preventDefault();
                     onSelect(item.id);
                 }
             }, tabIndex: onSelect ? 0 : -1, "aria-label": onSelect ? `Selecionar contribuição: ${item.description}` : undefined, sx: {
+                display: "flex",
+                gap: 1,
+                px: 0,
                 cursor: onSelect ? "pointer" : undefined,
                 "&:hover, &:focus": onSelect
                     ? { backgroundColor: "action.hover" }
                     : undefined,
             } },
-            React$1.createElement(ListItemText$1, { primary: React$1.createElement(Box$1, { sx: {
-                        display: "flex",
-                        alignItems: "flex-start",
-                        flexDirection: "column",
-                        gap: 1,
-                    } },
-                    React$1.createElement(Typography$1, { variant: "subtitle1" }, item.description),
-                    category && subcategory && (React$1.createElement(Typography$1, { variant: "caption", color: "text.secondary" },
-                        "\u2022 ",
-                        category,
-                        " / ",
-                        subcategory)),
-                    React$1.createElement(Chip$1, { size: "small", label: settlementLabel, color: settlementColor, variant: settlementStatus === "PROJECTED" ? "outlined" : "filled" })), secondary: React$1.createElement(Box$1, { sx: {
+            React$1.createElement(Box$1, { sx: { flex: 1, minWidth: 0 } },
+                React$1.createElement(Box$1, { sx: {
                         display: "flex",
-                        flexDirection: "column",
-                        gap: 0.25,
+                        justifyContent: "space-between",
+                        gap: 2,
+                        alignItems: "baseline",
                     } },
-                    React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, accountName),
-                    React$1.createElement(Typography$1, { variant: "caption", color: "text.secondary" }, dateLabel)) }),
-            React$1.createElement(ListItemSecondaryAction$1, null,
-                React$1.createElement(Stack$1, { spacing: 1, alignItems: "flex-end" },
-                    React$1.createElement(Typography$1, { variant: "subtitle1", sx: { fontWeight: 600 } }, formattedAmount),
-                    canConfirmTransactions && item.id && onToggleSettlementStatus ? (React$1.createElement(IconButton$1, { "aria-label": settlementActionLabel, disabled: Boolean(isUpdatingSettlementStatus), onClick: (event) => {
-                            event.stopPropagation();
-                            item.id &&
-                                onToggleSettlementStatus(item.id, nextSettlementStatus);
-                        }, sx: { width: 44, height: 44 } }, settlementStatus === "PROJECTED" ? React$1.createElement(Check$1, null) : React$1.createElement(UndoIcon, null))) : null))),
-        !isLastItem && React$1.createElement(Divider$1, { component: "li", variant: "inset" })));
+                    React$1.createElement(Typography$1, { variant: "subtitle1", noWrap: true }, item.description),
+                    React$1.createElement(Typography$1, { variant: "subtitle1", sx: { fontWeight: 600, flexShrink: 0 } }, formattedAmount)),
+                React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, [accountName, dateLabel, settlementLabel].filter(Boolean).join(" · "))),
+            canConfirmTransactions && item.id && onToggleSettlementStatus ? (React$1.createElement(IconButton$1, { "aria-label": settlementActionLabel, disabled: Boolean(isUpdatingSettlementStatus), onClick: (event) => {
+                    event.stopPropagation();
+                    item.id &&
+                        onToggleSettlementStatus(item.id, nextSettlementStatus);
+                }, sx: { width: 44, height: 44, flexShrink: 0 } }, settlementStatus === "PROJECTED" ? React$1.createElement(Check$1, null) : React$1.createElement(UndoIcon, null))) : null),
+        !isLastItem && React$1.createElement(Divider$1, { component: "li" })));
 });
-const IncomeListPage = ({ onBack, onAdd, onSelect, periodLabel, periodInputValue, periodInputMin, periodInputMax, showPeriodFilter, onPeriodInputChange, canConfirmTransactions, isUpdatingSettlementStatus, onToggleSettlementStatus, movementKind, onMovementKindChange, data, }) => {
-    const { data: { dataSource, isMobile, theme }, fns: { formatCurrency, formatDate, getAccountName }, } = useIncomeListPage({ data });
+const IncomeListPage = ({ onBack, onAdd, onSelect, periodLabel, periodInputValue, periodInputMin, periodInputMax, showPeriodFilter, onPeriodInputChange, canConfirmTransactions, isUpdatingSettlementStatus, onToggleSettlementStatus, movementKind, onMovementKindChange, incomeTotalLabel, outcomeTotalLabel, data, }) => {
+    const { data: { dataSource, theme }, fns: { formatCurrency, formatDate, getAccountName }, } = useIncomeListPage({ data });
     const { embedded } = useFinancialChrome();
     const totalAmountNumber = React$1.useMemo(() => {
         const val = typeof dataSource.totalAmount === "string"
@@ -147336,48 +147408,64 @@ const IncomeListPage = ({ onBack, onAdd, onSelect, periodLabel, periodInputValue
         currency: "BRL",
     });
     const incomes = React$1.useMemo(() => (Array.isArray(dataSource.incomes) ? dataSource.incomes : []), [dataSource.incomes]);
+    const [searchInput, setSearchInput] = React$1.useState("");
+    const [searchTerm, setSearchTerm] = React$1.useState("");
+    React$1.useEffect(() => {
+        const trimmed = searchInput.trim();
+        if (trimmed.length < SEARCH_MIN_CHARS$2) {
+            setSearchTerm("");
+            return;
+        }
+        const timeoutId = window.setTimeout(() => {
+            setSearchTerm(trimmed.toLowerCase());
+        }, SEARCH_DEBOUNCE_MS$2);
+        return () => window.clearTimeout(timeoutId);
+    }, [searchInput]);
+    const visibleIncomes = React$1.useMemo(() => {
+        if (!searchTerm)
+            return incomes;
+        return incomes.filter((item) => item.description.toLowerCase().includes(searchTerm));
+    }, [incomes, searchTerm]);
     return (React$1.createElement(Box$1, { sx: {
             display: "flex",
             flexDirection: "column",
             minHeight: embedded ? "auto" : "100vh",
             backgroundColor: theme.palette.background.default,
             position: "relative",
-            //pb: isMobile ? 2 : 0,
         } },
         embedded ? null : (React$1.createElement(PageHeader$2, { title: "Contribui\u00E7\u00F5es", onBack: onBack, showAddButton: false })),
-        React$1.createElement(FinancialSummaryHeader, { embedded: embedded, variant: "movements", balanceLabel: amountLabel, periodLabel: periodLabel || metricPeriodLabel, periodInputValue: periodInputValue, periodInputMin: periodInputMin, periodInputMax: periodInputMax, onPeriodInputChange: showPeriodFilter === false ? undefined : onPeriodInputChange, onAdd: onAdd, addLabel: "Adicionar contribui\u00E7\u00E3o", addQuotaFeature: "incomes" }),
+        React$1.createElement(FinancialSummaryHeader, { embedded: embedded, variant: "movements", balanceLabel: amountLabel, periodLabel: periodLabel || metricPeriodLabel, periodInputValue: periodInputValue, periodInputMin: periodInputMin, periodInputMax: periodInputMax, onPeriodInputChange: showPeriodFilter === false ? undefined : onPeriodInputChange, onAdd: onAdd, addLabel: "Adicionar contribui\u00E7\u00E3o", addQuotaFeature: "incomes", movementKind: movementKind !== null && movementKind !== void 0 ? movementKind : "income", incomeTotalLabel: incomeTotalLabel !== null && incomeTotalLabel !== void 0 ? incomeTotalLabel : amountLabel, outcomeTotalLabel: outcomeTotalLabel, onMovementKindChange: onMovementKindChange }),
         React$1.createElement(Container$1, { maxWidth: "md", sx: Object.assign(Object.assign({}, PAGE_LIST_CONTAINER_SPACING), { pb: LIST_CONTENT_BOTTOM_PADDING }) },
-            onMovementKindChange ? (React$1.createElement(Box$1, { sx: { mb: 2 } },
-                React$1.createElement(FinancialMovementSegment, { value: movementKind !== null && movementKind !== void 0 ? movementKind : "income", onChange: onMovementKindChange }))) : null,
-            incomes.length === 0 ? (React$1.createElement(Box$1, { sx: {
+            React$1.createElement(TextField$1, { fullWidth: true, placeholder: "Buscar lan\u00E7amento", value: searchInput, onChange: (event) => setSearchInput(event.target.value), inputProps: { "aria-label": "Buscar lançamento" }, InputProps: {
+                    startAdornment: (React$1.createElement(InputAdornment$1, { position: "start" },
+                        React$1.createElement(Search$1, { sx: { color: "text.secondary" } }))),
+                }, sx: {
+                    mb: 2,
                     width: "100%",
-                    bgcolor: "background.paper",
-                    borderRadius: RADIUS.default,
-                    boxShadow: "none",
-                    border: 1,
-                    borderColor: "divider",
-                    overflow: "hidden",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    p: EMPTY_STATE_PADDING,
-                } },
-                React$1.createElement(EmptyState$1, { onAdd: onAdd, isMobile: isMobile }))) : (React$1.createElement(List$1, { sx: {
+                    "& .MuiOutlinedInput-root": {
+                        borderRadius: RADIUS.default,
+                        minHeight: 44,
+                        backgroundColor: "background.paper",
+                    },
+                } }),
+            visibleIncomes.length === 0 ? (React$1.createElement(EmptyState$1, { message: searchTerm
+                    ? "Nenhum lançamento encontrado"
+                    : "Nenhuma contribuição registrada" })) : (React$1.createElement(List$1, { sx: {
                     width: "100%",
                     bgcolor: "transparent",
                     borderRadius: 0,
                     boxShadow: "none",
                     border: "none",
                     overflow: "hidden",
-                } }, incomes.map((inc, idx) => {
+                } }, visibleIncomes.map((inc, idx) => {
                 var _a, _b;
-                return (React$1.createElement(IncomeListItem, { key: `${(_a = inc.date) !== null && _a !== void 0 ? _a : ""}-${idx}-${(_b = inc.amount) !== null && _b !== void 0 ? _b : ""}`, item: inc, idx: idx, isLastItem: idx === incomes.length - 1, formatCurrency: formatCurrency, formatDate: formatDate, getAccountName: getAccountName, onSelect: onSelect, canConfirmTransactions: canConfirmTransactions, isUpdatingSettlementStatus: isUpdatingSettlementStatus, onToggleSettlementStatus: onToggleSettlementStatus }));
+                return (React$1.createElement(IncomeListItem, { key: `${(_a = inc.date) !== null && _a !== void 0 ? _a : ""}-${idx}-${(_b = inc.amount) !== null && _b !== void 0 ? _b : ""}`, item: inc, idx: idx, isLastItem: idx === visibleIncomes.length - 1, formatCurrency: formatCurrency, formatDate: formatDate, getAccountName: getAccountName, onSelect: onSelect, canConfirmTransactions: canConfirmTransactions, isUpdatingSettlementStatus: isUpdatingSettlementStatus, onToggleSettlementStatus: onToggleSettlementStatus }));
             }))))));
 };
 var IncomeListPage$1 = React$1.memo(IncomeListPage);
 
-const SEARCH_DEBOUNCE_MS = 1000;
-const SEARCH_MIN_CHARS = 2;
+const SEARCH_DEBOUNCE_MS$1 = 1000;
+const SEARCH_MIN_CHARS$1 = 2;
 const useMonthlyFeePaymentsManagementPage = (props) => {
     const { terreiroId, competenceMonth, requests = [], reminderStatus = null, canDispatchReminders = false, isLoading = false, isReviewing = false, isDispatchingReminders = false, error, onBack, onCompetenceMonthChange, onApprove, onReject, onDispatchReminders, } = props;
     const [statusFilter, setStatusFilter] = React$1.useState("ALL");
@@ -147424,13 +147512,13 @@ const useMonthlyFeePaymentsManagementPage = (props) => {
     }, []);
     React$1.useEffect(() => {
         const trimmed = searchInput.trim();
-        if (trimmed.length < SEARCH_MIN_CHARS) {
+        if (trimmed.length < SEARCH_MIN_CHARS$1) {
             setSearchTerm("");
             return;
         }
         const timeoutId = window.setTimeout(() => {
             setSearchTerm(trimmed);
-        }, SEARCH_DEBOUNCE_MS);
+        }, SEARCH_DEBOUNCE_MS$1);
         return () => {
             window.clearTimeout(timeoutId);
         };
@@ -147816,24 +147904,11 @@ const useOutcomeListPage = (props) => {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
-/**
- * Simple, focused empty state UI
- * - encourages the user to add a new outcome
- * - accessible labels + localized Portuguese copy consistent with page
- */
-function EmptyState({ onAdd, isMobile, }) {
-    return (React$1.createElement(Box$1, { role: "region", "aria-labelledby": "outcome-empty-title", sx: {
-            py: EMPTY_STATE_VERTICAL_PADDING,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 2,
-            textAlign: "center",
-        } },
-        React$1.createElement(ReceiptLongIcon, { sx: { fontSize: 56, color: "text.secondary" }, "aria-hidden": true }),
-        React$1.createElement(Typography$1, { id: "outcome-empty-title", variant: "h6" }, "Nenhum gasto registrado"),
-        React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary", sx: { maxWidth: 440 } }, "Registre seu primeiro gasto para acompanhar as despesas do m\u00EAs e organizar seu caixa. Voc\u00EA pode adicionar um gasto agora mesmo."),
-        React$1.createElement(Button$1, { variant: "contained", color: "primary", startIcon: React$1.createElement(Add$1, null), onClick: onAdd !== null && onAdd !== void 0 ? onAdd : (() => { }), "aria-label": "Adicionar novo gasto", sx: { mt: 1, px: 3 }, size: isMobile ? "medium" : "large" }, "Adicionar Gastos")));
+const SEARCH_DEBOUNCE_MS = 1000;
+const SEARCH_MIN_CHARS = 2;
+function EmptyState({ message }) {
+    return (React$1.createElement(Box$1, { role: "status", sx: { py: 4, textAlign: "center" } },
+        React$1.createElement(Typography$1, { variant: "body1", color: "text.secondary" }, message)));
 }
 /**
  * Presentation-only list item component
@@ -147846,11 +147921,9 @@ const OutcomeListItem = React$1.memo(function OutcomeListItem({ item, idx, isLas
     const dueDateLabel = item.dueDate ? formatDate(item.dueDate) : "";
     const formattedAmount = formatCurrency(item.amount);
     const accountName = getAccountName(item);
-    const { category, subcategory } = item;
-    const categoryLabel = category && subcategory ? `${category} / ${subcategory}` : category;
     const settlementStatus = (_a = item.settlementStatus) !== null && _a !== void 0 ? _a : "CONSOLIDATED";
-    const settlementLabel = settlementStatus === "PROJECTED" ? "Aguardando Pagamento" : "Pago";
-    const settlementColor = settlementStatus === "PROJECTED" ? "warning" : "success";
+    const settlementLabel = settlementStatus === "PROJECTED" ? "Aguardando pagamento" : "Pago";
+    const whenLabel = dueDateLabel ? `vencimento em ${dueDateLabel}` : dateLabel;
     const nextSettlementStatus = settlementStatus === "PROJECTED" ? "CONSOLIDATED" : "PROJECTED";
     const settlementActionLabel = settlementStatus === "PROJECTED"
         ? "Marcar como Pago"
@@ -147861,52 +147934,42 @@ const OutcomeListItem = React$1.memo(function OutcomeListItem({ item, idx, isLas
             onSelect(item.id);
     };
     return (React$1.createElement(React$1.Fragment, { key: (_d = item.id) !== null && _d !== void 0 ? _d : keyFallback },
-        React$1.createElement(ListItem$1, { alignItems: "flex-start", onClick: handleSelect, onKeyDown: (e) => {
+        React$1.createElement(ListItem$1, { alignItems: "center", onClick: handleSelect, onKeyDown: (e) => {
                 if ((e.key === "Enter" || e.key === " ") && onSelect && item.id) {
                     e.preventDefault();
                     onSelect(item.id);
                 }
             }, tabIndex: onSelect ? 0 : -1, "aria-label": onSelect ? `Selecionar gasto: ${item.description}` : undefined, sx: {
+                display: "flex",
+                gap: 1,
+                px: 0,
                 cursor: onSelect ? "pointer" : undefined,
                 "&:hover, &:focus": onSelect
                     ? { backgroundColor: "action.hover" }
                     : undefined,
             } },
-            React$1.createElement(ListItemText$1, { primary: React$1.createElement(Box$1, { sx: {
-                        display: "flex",
-                        alignItems: "flex-start",
-                        flexDirection: "column",
-                        gap: 1,
-                    } },
-                    React$1.createElement(Typography$1, { variant: "subtitle1" }, item.description),
-                    item.category && (React$1.createElement(Typography$1, { variant: "caption", color: "text.secondary" },
-                        "\u2022 ",
-                        categoryLabel)),
-                    React$1.createElement(Chip$1, { size: "small", label: settlementLabel, color: settlementColor, variant: settlementStatus === "PROJECTED" ? "outlined" : "filled" })), secondary: React$1.createElement(Box$1, { sx: {
+            React$1.createElement(Box$1, { sx: { flex: 1, minWidth: 0 } },
+                React$1.createElement(Box$1, { sx: {
                         display: "flex",
-                        flexDirection: "column",
-                        gap: 0.25,
+                        justifyContent: "space-between",
+                        gap: 2,
+                        alignItems: "baseline",
                     } },
-                    React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, accountName),
-                    lodashExports.isEmpty(dueDateLabel) ? (React$1.createElement(Typography$1, { variant: "caption", color: "text.secondary" }, dateLabel)) : null,
-                    dueDateLabel ? (React$1.createElement(Typography$1, { variant: "caption", color: "text.secondary" },
-                        "vencimento em ",
-                        dueDateLabel)) : null) }),
-            React$1.createElement(ListItemSecondaryAction$1, null,
-                React$1.createElement(Stack$1, { spacing: 1, alignItems: "flex-end" },
-                    React$1.createElement(Typography$1, { variant: "subtitle1", sx: { fontWeight: 600 } }, formattedAmount),
-                    canConfirmTransactions && item.id && onToggleSettlementStatus ? (React$1.createElement(IconButton$1, { "aria-label": settlementActionLabel, disabled: Boolean(isUpdatingSettlementStatus), onClick: (event) => {
-                            event.stopPropagation();
-                            if (!item.id)
-                                return;
-                            onToggleSettlementStatus(item.id, nextSettlementStatus);
-                        }, sx: { width: 44, height: 44 } }, settlementStatus === "PROJECTED" ? React$1.createElement(Check$1, null) : React$1.createElement(UndoIcon, null))) : null))),
+                    React$1.createElement(Typography$1, { variant: "subtitle1", noWrap: true }, item.description),
+                    React$1.createElement(Typography$1, { variant: "subtitle1", sx: { fontWeight: 600, flexShrink: 0 } }, formattedAmount)),
+                React$1.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, [accountName, whenLabel, settlementLabel].filter(Boolean).join(" · "))),
+            canConfirmTransactions && item.id && onToggleSettlementStatus ? (React$1.createElement(IconButton$1, { "aria-label": settlementActionLabel, disabled: Boolean(isUpdatingSettlementStatus), onClick: (event) => {
+                    event.stopPropagation();
+                    if (!item.id)
+                        return;
+                    onToggleSettlementStatus(item.id, nextSettlementStatus);
+                }, sx: { width: 44, height: 44, flexShrink: 0 } }, settlementStatus === "PROJECTED" ? React$1.createElement(Check$1, null) : React$1.createElement(UndoIcon, null))) : null),
         !isLastItem && React$1.createElement(Divider$1, { component: "li" })));
 });
-const OutcomeListPage = ({ onSelect, onBack, onAdd, periodLabel, periodInputValue, periodInputMin, periodInputMax, showPeriodFilter, onPeriodInputChange, canConfirmTransactions, isUpdatingSettlementStatus, onToggleSettlementStatus, movementKind, onMovementKindChange, data, }) => {
-    const theme = useTheme$1(); // still used for card color & shadows
+const OutcomeListPage = ({ onSelect, onBack, onAdd, periodLabel, periodInputValue, periodInputMin, periodInputMax, showPeriodFilter, onPeriodInputChange, canConfirmTransactions, isUpdatingSettlementStatus, onToggleSettlementStatus, movementKind, onMovementKindChange, incomeTotalLabel, outcomeTotalLabel, data, }) => {
+    const theme = useTheme$1();
     const { embedded } = useFinancialChrome();
-    const { data: { dataSource, isMobile }, fns: { formatCurrency, formatDate, getAccountName }, } = useOutcomeListPage({ data });
+    const { data: { dataSource }, fns: { formatCurrency, formatDate, getAccountName }, } = useOutcomeListPage({ data });
     const totalAmountNumber = typeof dataSource.totalAmount === "string"
         ? parseFloat(dataSource.totalAmount)
         : dataSource.totalAmount;
@@ -147916,6 +147979,24 @@ const OutcomeListPage = ({ onSelect, onBack, onAdd, periodLabel, periodInputValu
         currency: "BRL",
     });
     const outcomes = React$1.useMemo(() => (Array.isArray(dataSource.outcomes) ? dataSource.outcomes : []), [dataSource.outcomes]);
+    const [searchInput, setSearchInput] = React$1.useState("");
+    const [searchTerm, setSearchTerm] = React$1.useState("");
+    React$1.useEffect(() => {
+        const trimmed = searchInput.trim();
+        if (trimmed.length < SEARCH_MIN_CHARS) {
+            setSearchTerm("");
+            return;
+        }
+        const timeoutId = window.setTimeout(() => {
+            setSearchTerm(trimmed.toLowerCase());
+        }, SEARCH_DEBOUNCE_MS);
+        return () => window.clearTimeout(timeoutId);
+    }, [searchInput]);
+    const visibleOutcomes = React$1.useMemo(() => {
+        if (!searchTerm)
+            return outcomes;
+        return outcomes.filter((item) => item.description.toLowerCase().includes(searchTerm));
+    }, [outcomes, searchTerm]);
     return (React$1.createElement(Box$1, { sx: {
             display: "flex",
             flexDirection: "column",
@@ -147925,33 +148006,30 @@ const OutcomeListPage = ({ onSelect, onBack, onAdd, periodLabel, periodInputValu
             pb: 0,
         } },
         embedded ? null : (React$1.createElement(PageHeader$2, { title: "Gastos", onBack: onBack, showAddButton: false })),
-        React$1.createElement(FinancialSummaryHeader, { embedded: embedded, variant: "movements", balanceLabel: amountLabel, periodLabel: periodLabel, periodInputValue: periodInputValue, periodInputMin: periodInputMin, periodInputMax: periodInputMax, onPeriodInputChange: showPeriodFilter === false ? undefined : onPeriodInputChange, onAdd: onAdd, addLabel: "Adicionar gasto", addQuotaFeature: "outcomes" }),
+        React$1.createElement(FinancialSummaryHeader, { embedded: embedded, variant: "movements", balanceLabel: amountLabel, periodLabel: periodLabel, periodInputValue: periodInputValue, periodInputMin: periodInputMin, periodInputMax: periodInputMax, onPeriodInputChange: showPeriodFilter === false ? undefined : onPeriodInputChange, onAdd: onAdd, addLabel: "Adicionar gasto", addQuotaFeature: "outcomes", movementKind: movementKind !== null && movementKind !== void 0 ? movementKind : "outcome", incomeTotalLabel: incomeTotalLabel, outcomeTotalLabel: outcomeTotalLabel !== null && outcomeTotalLabel !== void 0 ? outcomeTotalLabel : amountLabel, onMovementKindChange: onMovementKindChange }),
         React$1.createElement(Container$1, { maxWidth: "md", sx: Object.assign(Object.assign({}, PAGE_LIST_CONTAINER_SPACING), { pb: LIST_CONTENT_BOTTOM_PADDING }) },
-            onMovementKindChange ? (React$1.createElement(Box$1, { sx: { mb: 2 } },
-                React$1.createElement(FinancialMovementSegment, { value: movementKind !== null && movementKind !== void 0 ? movementKind : "outcome", onChange: onMovementKindChange }))) : null,
-            outcomes.length === 0 ? (React$1.createElement(Box$1, { sx: {
+            React$1.createElement(TextField$1, { fullWidth: true, placeholder: "Buscar lan\u00E7amento", value: searchInput, onChange: (event) => setSearchInput(event.target.value), inputProps: { "aria-label": "Buscar lançamento" }, InputProps: {
+                    startAdornment: (React$1.createElement(InputAdornment$1, { position: "start" },
+                        React$1.createElement(Search$1, { sx: { color: "text.secondary" } }))),
+                }, sx: {
+                    mb: 2,
                     width: "100%",
-                    bgcolor: "background.paper",
-                    borderRadius: RADIUS.default,
-                    boxShadow: "none",
-                    border: 1,
-                    borderColor: "divider",
-                    overflow: "hidden",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    p: EMPTY_STATE_PADDING,
-                } },
-                React$1.createElement(EmptyState, { onAdd: onAdd, isMobile: isMobile }))) : (React$1.createElement(List$1, { "aria-label": "Lista de gastos", sx: {
+                    "& .MuiOutlinedInput-root": {
+                        borderRadius: RADIUS.default,
+                        minHeight: 44,
+                        backgroundColor: "background.paper",
+                    },
+                } }),
+            visibleOutcomes.length === 0 ? (React$1.createElement(EmptyState, { message: searchTerm ? "Nenhum lançamento encontrado" : "Nenhum gasto registrado" })) : (React$1.createElement(List$1, { "aria-label": "Lista de gastos", sx: {
                     width: "100%",
                     bgcolor: "transparent",
                     borderRadius: 0,
                     boxShadow: "none",
                     border: "none",
                     overflow: "hidden",
-                } }, outcomes.map((out, idx) => {
+                } }, visibleOutcomes.map((out, idx) => {
                 var _a, _b;
-                return (React$1.createElement(OutcomeListItem, { key: `${(_a = out.date) !== null && _a !== void 0 ? _a : ""}-${idx}-${(_b = out.amount) !== null && _b !== void 0 ? _b : ""}`, item: out, idx: idx, isLastItem: idx === outcomes.length - 1, formatCurrency: formatCurrency, formatDate: formatDate, getAccountName: getAccountName, onSelect: onSelect, canConfirmTransactions: canConfirmTransactions, isUpdatingSettlementStatus: isUpdatingSettlementStatus, onToggleSettlementStatus: onToggleSettlementStatus }));
+                return (React$1.createElement(OutcomeListItem, { key: `${(_a = out.date) !== null && _a !== void 0 ? _a : ""}-${idx}-${(_b = out.amount) !== null && _b !== void 0 ? _b : ""}`, item: out, idx: idx, isLastItem: idx === visibleOutcomes.length - 1, formatCurrency: formatCurrency, formatDate: formatDate, getAccountName: getAccountName, onSelect: onSelect, canConfirmTransactions: canConfirmTransactions, isUpdatingSettlementStatus: isUpdatingSettlementStatus, onToggleSettlementStatus: onToggleSettlementStatus }));
             }))))));
 };
 var OutcomeListPage$1 = React$1.memo(OutcomeListPage);