{FONTS_LINKS}
);
}
if (phase === "onboarding") {
const isInvitedMode = onboardingMode === "invite";
const isJoinCodeMode = onboardingMode === "join_code";
const isCreateMode = onboardingMode === "create";
return (
Cargando cuenta…
{FONTS_LINKS}
);
}
return (
Cuenta compartida
{/* Pestañas selectoras si no viene con enlace de invitación directo */} {!isInvitedMode ? (
👋 Te invitaron al espacio:
{settings.accountName || "Cuenta compartida"}
#{activeAccountCode || "DEFAULT"}
setOnboardingSpaceName(e.target.value)}
placeholder="Ej. Mis Gastos, Familia, Casa..."
maxLength={32}
style={{
fontFamily: "'Inter', sans-serif",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.75rem",
color: C.ink,
padding: "0.65rem 0.85rem",
fontSize: "0.85rem",
width: "100%",
boxSizing: "border-box",
}}
className="outline-none"
/>
)}
{/* Si está en modo ingresar código de invitación */}
{isJoinCodeMode && (
setJoinCodeDraft(e.target.value.toUpperCase())}
placeholder="Ej. FAM-892"
maxLength={16}
style={{
fontFamily: "monospace",
background: C.field,
border: `1.5px solid ${C.line}`,
borderRadius: "0.75rem",
color: C.ink,
padding: "0.65rem 0.85rem",
fontSize: "0.95rem",
fontWeight: 800,
letterSpacing: "0.05em",
flex: 1,
minWidth: 0,
}}
className="outline-none"
/>
setNameDraft(e.target.value)}
placeholder="¿Cómo te llamas?"
maxLength={24}
style={{
fontFamily: "'Inter', sans-serif",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.75rem",
color: C.ink,
padding: "0.65rem 0.85rem",
fontSize: "0.85rem",
width: "100%",
boxSizing: "border-box",
}}
className="outline-none"
/>
setPassDraft(e.target.value)}
placeholder="Mínimo 8 caracteres"
maxLength={64}
autoComplete={userExists ? "current-password" : "new-password"}
style={{
fontFamily: "'Inter', sans-serif",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.75rem",
color: C.ink,
padding: "0.65rem 2.4rem 0.65rem 0.85rem",
fontSize: "0.85rem",
width: "100%",
boxSizing: "border-box",
}}
className="outline-none"
onKeyDown={(e) => e.key === "Enter" && joinAccount()}
/>
Ese nombre ya tiene cuenta en este espacio: escribe su contraseña para entrar.
)} {error && ({error}
)} {forgotOpen && (
{forgotDone ? (
)}
)}
)}
{forgotDone}
) : ( <>Restablecer contraseña de otra persona
Esta cuenta no tiene email: cualquier persona con acceso puede restablecer la contraseña.
{ setForgotName(e.target.value); setForgotConfirm(null); setError(""); }} placeholder="Nombre exacto" list="olvido-personas" maxLength={24} style={{ fontFamily: "'Inter', sans-serif", background: C.paper, border: `1px solid ${C.line}`, borderRadius: "0.6rem", color: C.ink, padding: "0.55rem 0.7rem", width: "100%", boxSizing: "border-box", }} className="text-sm outline-none mb-3" /> {!forgotConfirm ? ( <>
setForgotPass(e.target.value)}
placeholder="Mínimo 8 caracteres"
maxLength={64}
autoComplete="new-password"
style={{
fontFamily: "'Inter', sans-serif",
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.6rem",
color: C.ink,
padding: "0.55rem 2.2rem 0.55rem 0.7rem",
width: "100%",
boxSizing: "border-box",
}}
className="text-sm outline-none"
onKeyDown={(e) => e.key === "Enter" && resetPassword()}
/>
) : (
<>
¿Restablecer la contraseña de {forgotConfirm.name}?
{FONTS_LINKS}
{/* Header */}
)}
{/* Toast flotante de novedades: siempre visible aunque hagas scroll en móvil o PC */}
{notice && (
{/* Fila 1: Título completo de la cuenta + Acciones principales */}
{error && (
{
setSpaceModalTab("switch");
setSpaceFeedback(null);
setShowSpaceModal(true);
}}
role="button"
tabIndex={0}
title="Toca para cambiar de espacio o crear uno nuevo"
style={{ minWidth: 0, flex: 1, cursor: "pointer" }}
className="group"
>
{(settings.accountName || "Cuenta compartida").toUpperCase()}
#{activeAccountCode || "DEFAULT"} · {people.length > 0 ? people.join(" · ") : myName} {getActiveAccountId() !== "default" && ( )}
{/* Chip de usuario activo */}
{HAS_SUPABASE && syncSource === "local" && (
{(myName || person || "?").trim().charAt(0).toUpperCase()}
{myName || person}
{/* Chip de Invitar personas */}
{/* Chips de la derecha: Ajustes, Novedades, Modo, Estado en vivo */}
{rtStatus === "connected" ? "En vivo" : rtStatus === "connecting" ? "Conectando…" : rtStatus === "reconnecting" ? "Reconectando…" : "Sondeo"}
La base de datos no está actualizada.{" "}
Vuelve a ejecutar el schema.sql en Supabase (SQL Editor → New query → pega todo → Run, no borra datos). Eso también cambia la moneda a S/ automáticamente. Hasta entonces, los movimientos solo se guardan en este dispositivo.
)}
{installEvt && (
Instala la app para abrirla como una aplicación de verdad (el modo sin conexión solo funciona cuando estás tú solo; en cuentas compartidas con otras personas se requiere internet para sincronizar en tiempo real).
)}
{showInstallTip && (
En Safari: toca Compartir → Añadir a pantalla de inicio para instalar la app.
)}
{error}
🔔 Cambio en la cuenta
Ahora mismo
{notice.lines.map((l, i) => (
{l}
))} {notice.txId && ( )}¿Migro tus movimientos (los que están a nombre de {pendingRename.oldName}) a {pendingRename.newName}?
{history.map((e, i) => {
// Separador de día: cambia la etiqueta cuando la acción pasa
// a otro día (el historial ya viene ordenado de más reciente
// a más antiguo). Las acciones sin fecha válida van juntas.
const showDay = i === 0 || dayKey(e.at) !== dayKey(history[i - 1].at);
// Reacción del personaje a esta acción: cara de la miniatura
// + texto del tooltip que la explica.
const reacc = historyReaction(e, transactions, settings.currency);
return (
)}
{showDay && (
);
})}
0 ? `1px solid ${C.lineSoft}` : "none",
display: "flex",
alignItems: "center",
gap: "0.4rem",
}}
>
)}
0 && !showDay ? `1px solid ${C.lineSoft}` : "none",
backgroundColor: "transparent",
transition: "background 0.15s ease",
}}
className="hover:bg-black/[0.02] dark:hover:bg-white/[0.02]"
>
{/* El personaje en miniatura con su reacción */}
{e.by && (
{e.by}
)}
{e.label}
Quién
{historyDetail.by || "Alguien"}
Qué
{historyDetail.label}
Cuándo
{dayLabel(historyDetail.at)} {fmtClock(historyDetail.at)}
setViewPhoto(null)}
className="cc-fade-in"
style={{
position: "fixed",
inset: 0,
background: "rgba(15, 23, 42, 0.92)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 70,
padding: "1rem",
cursor: "zoom-out",
}}
>
{/* Cabecera del lightbox: PanelHeader en tono claro sobre el fondo oscuro */}
)}
{/* Modal de Ajustes: centrado y flotante a pantalla completa */}
{/* ===== MODAL FLOTANTE DE TRANSFERENCIA DE DATOS PROPIOS (position: fixed) ===== */}
{showTransferDataModal && (() => {
const myTx = (transactions || []).filter(t => t.person === person || t.recipient === person);
const myCards = (settings.cards || []).filter(c => c.person === person);
const myInstallments = (settings.installments || []).filter(i => i.person === person);
const knownTargetSpaces = getKnownAccounts().filter(a => a && (a.id !== getActiveAccountId() && a.code !== activeAccountCode));
const handleExecuteTransfer = async () => {
if (!transferTargetSpace || !transferTargetSpace.trim()) {
alert("Por favor selecciona o ingresa el código del espacio destino.");
return;
}
const currentAcc = getActiveAccountId();
const cleanTarget = transferTargetSpace.trim();
if (cleanTarget === currentAcc || (currentAcc === "default" && cleanTarget.toUpperCase() === "DEFAULT")) {
alert("⚠️ El espacio de destino debe ser diferente a la cuenta actual donde te encuentras.");
return;
}
suppressNoticesUntil = Date.now() + 25000;
setTransferLoading(true);
setTransferProgressText("Preparando datos...");
try {
const cleanTarget = transferTargetSpace.trim();
let targetAcc = getKnownAccounts().find(a => a && (a.id === cleanTarget || a.code === cleanTarget));
if (!targetAcc) {
targetAcc = await storage.findAccount(cleanTarget);
}
const targetAccId = targetAcc ? targetAcc.id : cleanTarget;
const targetAccName = targetAcc ? targetAcc.name : cleanTarget;
let copiedTxCount = 0;
let copiedCardsCount = 0;
let copiedInstCount = 0;
// 1. Transferir Movimientos en Batch Ultra Rápido (1 solo request)
if (transferIncludeTx && myTx.length > 0) {
setTransferProgressText(`Transfiriendo ${myTx.length} movimientos a ${targetAccName}...`);
const batchRows = myTx.map(t => {
const newId = transferMode === "move" ? t.id : "tx_" + uid();
suppressedTxIdSet.add(String(t.id));
suppressedTxIdSet.add(String(newId));
const clonedTx = {
...t,
id: newId,
accountId: targetAccId,
};
return txToSupabaseRow(clonedTx, targetAccId);
});
// Limpieza automática del Set después de 60 segundos
setTimeout(() => {
myTx.forEach(t => suppressedTxIdSet.delete(String(t.id)));
batchRows.forEach(r => suppressedTxIdSet.delete(String(r.id)));
}, 60000);
if (supabaseOk()) {
try {
await supabaseFetch("transactions?on_conflict=id", {
method: "POST",
headers: { Prefer: "resolution=merge-duplicates" },
body: JSON.stringify(batchRows),
});
} catch (e) {}
}
if (transferMode === "move") {
for (const t of myTx) {
await storage.deleteTransaction(t.id).catch(() => {});
}
}
copiedTxCount = myTx.length;
}
// 1.5. Asegurar que la persona esté registrada en el espacio de destino
if (person && String(person).trim()) {
const pClean = String(person).trim();
if (supabaseOk()) {
try {
await supabaseFetch("people?on_conflict=name,account_id", {
method: "POST",
headers: { Prefer: "resolution=merge-duplicates" },
body: JSON.stringify({ name: pClean, account_id: targetAccId }),
}).catch(async () => {
await supabaseFetch("people?on_conflict=name", {
method: "POST",
headers: { Prefer: "resolution=merge-duplicates" },
body: JSON.stringify({ name: pClean }),
}).catch(() => {});
});
} catch (e) {}
}
}
// 2. Transferir Tarjetas y Cuotas
if (transferIncludeCards || transferIncludeInstallments) {
setTransferProgressText("Sincronizando tarjetas y cuotas...");
let targetSettings = null;
if (supabaseOk()) {
try {
const sRows = await supabaseFetch(`settings?account_id=eq.${encodeURIComponent(targetAccId)}&select=*`);
if (Array.isArray(sRows) && sRows.length > 0) targetSettings = sRows[0];
} catch (e) {}
}
if (!targetSettings && targetAccId === "default") {
try {
const sRows = await supabaseFetch("settings?select=*");
if (Array.isArray(sRows) && sRows.length > 0) targetSettings = sRows[0];
} catch (e) {}
}
const baseCards = targetSettings && Array.isArray(targetSettings.cards) ? targetSettings.cards : [];
const baseInst = targetSettings && Array.isArray(targetSettings.installments) ? targetSettings.installments : [];
const newCards = transferIncludeCards
? [...baseCards.filter(c => !myCards.some(mc => mc.name.toLowerCase() === c.name.toLowerCase())), ...myCards]
: baseCards;
const newInst = transferIncludeInstallments
? [...baseInst.filter(i => !myInstallments.some(mi => mi.name.toLowerCase() === i.name.toLowerCase())), ...myInstallments]
: baseInst;
copiedCardsCount = transferIncludeCards ? myCards.length : 0;
copiedInstCount = transferIncludeInstallments ? myInstallments.length : 0;
if (supabaseOk()) {
try {
await supabaseFetch("settings?on_conflict=account_id", {
method: "POST",
headers: { Prefer: "resolution=merge-duplicates" },
body: JSON.stringify({
id: 1,
account_id: targetAccId,
cards: newCards,
installments: newInst,
account_name: targetAccName || "Cuenta compartida",
}),
});
} catch (e) {}
}
}
setTransferLoading(false);
setTransferProgressText("");
setTransferStatus({
type: "success",
text: `¡Listo! Se ${transferMode === "move" ? "movieron" : "copiaron"} ${copiedTxCount} movimientos, ${copiedCardsCount} tarjetas y ${copiedInstCount} cuotas a "${targetAccName}".`,
targetCode: targetAcc ? (targetAcc.code || targetAcc.id) : cleanTarget,
});
refreshShared(true);
} catch (err) {
setTransferLoading(false);
setTransferProgressText("");
alert("Ocurrió un error al transferir los datos: " + (err.message || err));
}
};
return (
ev.stopPropagation()}
className="cc-panel-in"
style={{ position: "fixed", top: "1rem", left: 0, right: 0, maxWidth: "480px", margin: "0 auto", padding: "0 1rem" }}
>
setShowTransferDataModal(false)}
style={{
position: "fixed",
inset: 0,
zIndex: 9999,
backgroundColor: "rgba(0, 0, 0, 0.65)",
backdropFilter: "blur(6px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
}}
>
);
})()}
{/* ===== MODAL FLOTANTE DE TRANSFERENCIAS MÍNIMAS (position: fixed) ===== */}
{showMinimalTransfersModal && (() => {
const netBalancesMap = {};
(people || []).forEach(p => { netBalancesMap[p] = 0; });
(peerDebts.list || []).forEach(b => {
if (b && b.from && b.to && b.amount > 0) {
netBalancesMap[b.from] = (netBalancesMap[b.from] || 0) - Number(b.amount);
netBalancesMap[b.to] = (netBalancesMap[b.to] || 0) + Number(b.amount);
}
});
const optimalTransfers = calculateMinimalTransfers(netBalancesMap, settings.currency);
return (
e.stopPropagation()}
className="cc-panel-in"
style={{
backgroundColor: C.paper,
borderRadius: "1.4rem",
padding: "1.4rem",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
border: `1px solid ${C.line}`,
maxWidth: "460px",
width: "100%",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: "0.85rem",
maxHeight: "90vh",
overflowY: "auto",
}}
>
{transferStatus ? (
) : (
<>
{/* Selector de Destino */}
{transferLoading ? (
📦
Pasar mis datos a otro espacio
Usuario actual: {person}
🎉 {transferStatus.text}
{knownTargetSpaces.length > 0 ? (
) : (
setTransferTargetSpace(e.target.value)}
placeholder="Ingresa el código del espacio (Ej. DEFAULT o CC-XXXX)"
style={{
width: "100%",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
boxSizing: "border-box",
}}
/>
)}
{/* Qué elementos incluir */}
Datos detectados de {person}:
{/* Acción Copiar vs Mover */}
setShowMinimalTransfersModal(false)}
style={{
position: "fixed",
inset: 0,
zIndex: 9999,
backgroundColor: "rgba(0, 0, 0, 0.65)",
backdropFilter: "blur(6px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
}}
>
);
})()}
{/* ===== MODAL FLOTANTE DE NUEVA META DE AHORRO (position: fixed) ===== */}
{showSavingsModal && (
e.stopPropagation()}
className="cc-panel-in"
style={{
backgroundColor: C.paper,
borderRadius: "1.4rem",
padding: "1.4rem",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
border: `1px solid ${C.line}`,
maxWidth: "460px",
width: "100%",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: "0.85rem",
maxHeight: "90vh",
overflowY: "auto",
}}
>
{optimalTransfers.length === 0 ? (
) : (
))}
)}
⚡
Transferencias Mínimas Óptimas
Saldar todas las deudas con la menor cantidad de pasos✨
¡Todos están al día!
No se requiere ninguna transferencia.
Con solo {optimalTransfers.length} {optimalTransfers.length === 1 ? "transferencia directa" : "transferencias directas"} se saldan todas las cuentas del grupo:
{optimalTransfers.map((t, idx) => (
{t.from}
→ le paga a →
{t.to}
{fmtMoney(t.amount, t.currency)}
setShowSavingsModal(false)}
style={{
position: "fixed",
inset: 0,
zIndex: 9999,
backgroundColor: "rgba(0, 0, 0, 0.65)",
backdropFilter: "blur(6px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
}}
>
)}
{/* ===== MODAL FLOTANTE DE INVITACIÓN (position: fixed) ===== */}
{showInviteModal && (() => {
const isAccountAdmin = !settings.admin || (myName && String(myName).toLowerCase() === String(settings.admin).toLowerCase()) || (people && people.length <= 1);
const canInvite = isAccountAdmin || settings.allowMemberInvites === true;
const effectiveCode = (currentInviteToken && currentInviteToken.code) ? currentInviteToken.code : (activeAccountCode || "DEFAULT");
const effectiveLink = `${typeof window !== "undefined" ? window.location.origin : ""}/?cuenta=${encodeURIComponent(activeAccountCode || "DEFAULT")}${currentInviteToken ? `&inv=${encodeURIComponent(currentInviteToken.id)}` : ""}`;
return (
e.stopPropagation()}
className="cc-panel-in"
style={{
backgroundColor: C.paper,
borderRadius: "1.4rem",
padding: "1.4rem",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
border: `1px solid ${C.line}`,
maxWidth: "420px",
width: "100%",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: "0.85rem",
}}
>
🎯
Nueva Meta de Ahorro
setSavingsDraft({ ...savingsDraft, name: e.target.value })}
placeholder="Ej. Vacaciones, Fondo de emergencia, Mueble"
style={{
width: "100%",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
boxSizing: "border-box",
}}
/>
setSavingsDraft({ ...savingsDraft, targetAmount: e.target.value })}
placeholder="0.00"
style={{
width: "100%",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
boxSizing: "border-box",
}}
/>
setSavingsDraft({ ...savingsDraft, currentAmount: e.target.value })}
placeholder="0.00"
style={{
width: "100%",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
boxSizing: "border-box",
}}
/>
setSavingsDraft({ ...savingsDraft, targetDate: e.target.value })}
style={{
width: "100%",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
boxSizing: "border-box",
}}
/>
setShowInviteModal(false)}
style={{
position: "fixed",
inset: 0,
zIndex: 9999,
backgroundColor: "rgba(0, 0, 0, 0.65)",
backdropFilter: "blur(6px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
}}
>
);
})()}
{/* ===== MODAL FLOTANTE DE GESTIÓN DE ESPACIOS (Crear / Unirse) ===== */}
{showSpaceModal && (
e.stopPropagation()}
className="cc-panel-in"
style={{
backgroundColor: C.paper,
borderRadius: "1.4rem",
padding: "1.4rem",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
border: `1px solid ${C.line}`,
maxWidth: "490px",
width: "100%",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: "0.85rem",
maxHeight: "90vh",
overflowY: "auto",
}}
>
{
const updated = { ...settings, allowMemberInvites: Boolean(val) };
setSettings(updated);
try {
await storage.set("settings", JSON.stringify(updated), true);
} catch (e) {}
}}
label="Permitir invitar a otros miembros"
/>
)}
)}
Invitar a {settings.accountName || "este espacio"}
Administrador: {settings.admin || (people[0] || "Tú")}🔒
Permisos de Administrador Requeridos
Solo el administrador ({settings.admin || "el creador"}) puede generar enlaces de invitación para este espacio.
1. Restricciones de la invitación:
{/* Parámetro adicional según tipo */}
{inviteLimitType === "count" && (
{/* Tarjeta de Código Generado */}
Máximo de personas:
)}
{inviteLimitType === "time" && (
Tiempo de validez:
)}
Código de invitación:
{currentInviteToken && (
✓ {currentInviteToken.type === "single" ? "1 solo uso" : currentInviteToken.type === "count" ? `Hasta ${currentInviteToken.maxUses} personas` : `Válido ${inviteExpireHours}h`}
)}
{effectiveCode}
Permitir a otros miembros invitar
Si está desactivado, solo tú como administrador puedes generar enlaces.
setShowSpaceModal(false)}
style={{
position: "fixed",
inset: 0,
zIndex: 9999,
backgroundColor: "rgba(0, 0, 0, 0.65)",
backdropFilter: "blur(6px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
}}
>
)}
{showSettings && (
e.stopPropagation()}
className="cc-panel-in"
style={{
backgroundColor: C.paper,
borderRadius: "1.4rem",
padding: "1.5rem",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
border: `1px solid ${C.line}`,
maxWidth: "460px",
width: "100%",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: "0.9rem",
}}
>
{/* Pestañas de selector Crear / Unirse */}
{spaceFeedback && (
) : (
)}
{spaceModalTab === "create" ? "🌱 Crear nuevo espacio" : "🔑 Unirme con código"}
{spaceFeedback.text}
)}
{spaceModalTab === "switch" ? (
Espacios guardados en este dispositivo:
) : spaceModalTab === "create" ? (
{getKnownAccounts().map((acc) => {
const isActive = (acc.id === getActiveAccountId() || (acc.code && acc.code === activeAccountCode));
return (
!isActive && handleSwitchSpace(acc.code || acc.id)}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
background: isActive ? (darkMode ? "#064E3B" : "#ECFDF5") : C.field,
border: `1.5px solid ${isActive ? C.green : C.line}`,
borderRadius: "0.75rem",
padding: "0.65rem 0.85rem",
cursor: isActive ? "default" : "pointer",
}}
className={isActive ? "" : "cc-btn-press hover:border-emerald-500"}
>
);
})}
{acc.name || "Espacio"}
Código: {acc.code || acc.id}
{isActive ? (
✓ Activo
) : (
)}
setNewSpaceName(e.target.value)}
placeholder="Ej. Mis Gastos Personales, Casa Roomies, Viaje..."
maxLength={32}
style={{
width: "100%",
boxSizing: "border-box",
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.75rem",
padding: "0.65rem 0.85rem",
fontSize: "0.85rem",
color: C.ink,
}}
onKeyDown={(e) => e.key === "Enter" && handleCreateSpace()}
/>
Se creará un espacio totalmente limpio e independiente en el mismo servidor con su propio código de invitación.
setJoinCodeDraft(e.target.value.toUpperCase())}
placeholder="Ej. FAM-892 o DEFAULT"
maxLength={16}
style={{
width: "100%",
boxSizing: "border-box",
background: C.field,
border: `1.5px solid ${C.line}`,
borderRadius: "0.75rem",
padding: "0.65rem 0.85rem",
fontSize: "1rem",
fontWeight: 800,
color: C.ink,
letterSpacing: "0.08em",
fontFamily: "monospace",
}}
onKeyDown={(e) => e.key === "Enter" && handleJoinSpace()}
/>
Pídele el código o enlace de invitación al creador de la cuenta compartida.
setShowSettings(false)}
role="dialog"
aria-modal="true"
aria-label="Ajustes de la cuenta"
className="cc-fade-in"
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
width: "100%",
height: "100%",
background: "rgba(15, 23, 42, 0.72)",
backdropFilter: "blur(5px)",
WebkitBackdropFilter: "blur(5px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 90,
padding: "0.75rem",
boxSizing: "border-box",
}}
>
)}
{/* Modal de Novedades y Actualizaciones */}
{showChangelog && (
e.stopPropagation()}
className="cc-panel-in"
style={{
backgroundColor: C.paper,
borderRadius: isDesktop ? "1.4rem" : "1.15rem",
padding: isDesktop ? (minimalMode ? "1.2rem 1.15rem" : "1.4rem 1.25rem") : "1rem 0.85rem",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
border: `1px solid ${C.line}`,
maxWidth: "680px",
width: "100%",
maxHeight: isDesktop ? "90vh" : "94vh",
overflowY: "auto",
overflowX: "hidden",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
}}
>
{/* Cabecera del panel (nunca se comprime) */}
{
setSoundEnabled(on);
storage.set("sound", on ? "1" : "0", false).catch(() => {});
if (on) {
(async () => {
try {
if (typeof Notification !== "undefined") {
let perm = Notification.permission;
if (perm === "default") perm = await Notification.requestPermission();
if (perm === "granted") {
setNotifyEnabled(true);
storage.set("notify", "1", false).catch(() => {});
if (HAS_PUSH) setPushPref(true);
} else {
setNotifyEnabled(false);
}
} else {
setNotifyEnabled(false);
}
} catch (e) {
setNotifyEnabled(false);
}
})();
playNoticeSound();
vibrateNotice();
} else {
setNotifyEnabled(false);
storage.set("notify", "0", false).catch(() => {});
if (HAS_PUSH) setPushPref(false);
}
}}
label="Notificaciones y alertas"
/>
{/* 3.1. Notificaciones multi-cuenta globales */}
{
setGlobalNotifsEnabled(on);
try {
localStorage.setItem("cc:global_notifications", on ? "1" : "0");
} catch (e) {}
}}
label="Avisos de todas mis cuentas guardadas"
/>
{/* 4. Repartir gastos a partes iguales */}
Sección:
)}
{/* Barra de pestañas táctil: nunca se comprime en móvil */}
{
if (!isDesktop && e.deltaY !== 0) {
e.currentTarget.scrollLeft += e.deltaY;
}
}}
style={{
display: "flex",
flexWrap: isDesktop ? "wrap" : "nowrap",
overflowX: isDesktop ? "visible" : "auto",
gap: "0.35rem",
background: C.field,
padding: "0.35rem 0.45rem",
borderRadius: "0.95rem",
marginBottom: "1.25rem",
border: `1px solid ${C.lineSoft}`,
scrollbarWidth: "none",
WebkitOverflowScrolling: "touch",
flexShrink: 0,
minHeight: isDesktop ? "auto" : "48px",
alignItems: "center",
}}
className="no-scrollbar"
>
{(minimalMode ? [
{ id: "cuenta", label: "Cuenta y Perfil", icon:
{/* Tarjeta 1: Espacio Actual & Invitaciones */}
)}
{/* ===== PESTAÑA CATEGORÍAS ===== */}
{settingsTab === "categorias" && (
Comparte los gastos con tu pareja, familia o amigos, o cambia a un espacio propio para tus finanzas personales.
setEditAccountName(e.target.value)}
placeholder="Cuenta compartida"
maxLength={40}
style={{ fontFamily: "'Inter', sans-serif", background: C.field, border: `1px solid ${C.line}`, borderRadius: "0.65rem", color: C.ink, padding: "0.48rem 0.75rem", fontSize: "0.82rem", outline: "none", width: "100%" }}
/>
{editPeople.map((p, i) => (
{
const next = [...editPeople];
next[i] = e.target.value;
setEditPeople(next);
}}
placeholder={`Persona ${i + 1}`}
maxLength={24}
style={{ fontFamily: "'Inter', sans-serif", background: C.field, border: `1px solid ${C.line}`, borderRadius: "0.55rem", color: C.ink, padding: "0.38rem 0.65rem", outline: "none", fontSize: "0.8rem", flex: 1, minWidth: 0 }}
/>
{editPeople.length > 1 && (
)}
))}
{MASCOT_KINDS.map((k) => {
const selected = editMascot === k.id;
const selSize = selected ? 32 : 26;
const popping = previewPop && previewPop.kind === k.id;
return (
);
})}
{(myName || "?").trim().charAt(0).toUpperCase()}
{myName}
Tus registros y gastos se anotarán con este nombre.
setNewPass(e.target.value)}
placeholder="Contraseña nueva (mín. 8)"
maxLength={64}
autoComplete="new-password"
style={{ fontFamily: "'Inter', sans-serif", background: C.paper, border: `1px solid ${C.line}`, borderRadius: "0.65rem", color: C.ink, padding: "0.5rem 2.2rem 0.5rem 0.75rem", outline: "none", fontSize: "0.78rem", width: "100%", boxSizing: "border-box" }}
/>
setNewPass2(e.target.value)}
placeholder="Repite la contraseña nueva"
maxLength={64}
autoComplete="new-password"
style={{ fontFamily: "'Inter', sans-serif", background: C.paper, border: `1px solid ${C.line}`, borderRadius: "0.65rem", color: C.ink, padding: "0.5rem 2.2rem 0.5rem 0.75rem", outline: "none", fontSize: "0.78rem", width: "100%", boxSizing: "border-box" }}
/>
Crea, elimina o personaliza las categorías para clasificar tus gastos. Se actualizan en la nube para todos.
{/* Input para agregar nueva categoría */}
setNewCategoryDraft(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && newCategoryDraft.trim()) {
e.preventDefault();
const clean = cleanCategoryName(newCategoryDraft.trim());
if (clean && !editCategoryList.some((c) => c.toLowerCase() === clean.toLowerCase())) {
setEditCategoryList([...editCategoryList, clean]);
setNewCategoryDraft("");
}
}
}}
placeholder="Nueva categoría (ej. Mascotas)..."
maxLength={35}
style={{
fontFamily: "'Inter', sans-serif",
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
color: C.ink,
padding: "0.48rem 0.65rem",
fontSize: "0.8rem",
outline: "none",
flex: 1,
minWidth: 0,
width: "100%",
}}
/>
{/* Lista visual de categorías con icono y botón eliminar */}
{editCategoryList.map((cat) => {
const icon = getCategoryIcon(cat);
return (
);
})}
{/* Botón para restablecer categorías por defecto */}
{icon}
{cat}
Tarjetas de crédito registradas
Asigna tarjetas a cada persona con fecha de corte y pago para separar la deuda del dinero en efectivo.
{cardDraft.cardType === "debito" ?
{/* Selector de Tipo: Crédito vs Débito */}
{cardDraft.cardType === "debito" && (
{/* Solo si es TARJETA DE CRÉDITO: Duración / Frecuencia / Corte / Pago / Límite */}
{cardDraft.cardType !== "debito" && (
<>
{/* Duración / Frecuencia del ciclo (Mensual 30d vs Quincenal 15d) */}
{/* Fechas de corte y pago con selectores de mes independientes */}
)}
)}
{/* Si es TARJETA DE DÉBITO: selector de moneda */}
{cardDraft.cardType === "debito" && (
)}
{/* Sección de Programa de Cashback */}
{cardDraft.hasCashback && (
{/* Regla de Cobertura de Cashback */}
)}
💡 Tarjeta de Débito: Descuenta directamente de tu cuenta bancaria. No genera ciclo de deuda mensual ni requiere fechas de corte o pago.
)}
setCardDraft({ ...cardDraft, name: e.target.value })}
placeholder={cardDraft.cardType === "debito" ? "Ej. BCP Débito, Interbank Débito..." : "Ej. BBVA Visa Signature, IO Tarjeta..."}
maxLength={30}
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
{/* Bloque Corte */}
{/* Bloque Pago */}
{/* Previsualización en vivo de las fechas calculadas */}
{previewCycle && (
✂️ Corte (facturación)
setCardDraft({ ...cardDraft, cutoffDay: Number(e.target.value) || 1 })}
style={{
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.55rem",
padding: "0.45rem 0.65rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
⏰ Pago (vencimiento)
setCardDraft({ ...cardDraft, dueDay: Number(e.target.value) || 1 })}
style={{
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.55rem",
padding: "0.45rem 0.65rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
✂️ Próximo corte: {previewCycle.cutoffFullLabel || previewCycle.cutoffLabel} ({previewCycle.cutoffRelative})
⏰ Próximo pago: {previewCycle.dueFullLabel || previewCycle.dueLabel} ({previewCycle.dueRelative})
setCardDraft({ ...cardDraft, creditLimit: e.target.value })}
placeholder="Ej. 3500"
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
🎁
Programa de Cashback / Puntos
Dinero de vuelta en compras con esta tarjeta
{["1", "1.5", "2", "3", "5"].map((pct) => {
const isSel = String(cardDraft.cashbackPercent) === pct;
return (
);
})}
setCardDraft({ ...cardDraft, cashbackPercent: e.target.value })}
placeholder="Otro %"
style={{
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.55rem",
padding: "0.35rem 0.6rem",
fontSize: "0.8rem",
color: C.ink,
width: "5.5rem",
outline: "none",
fontWeight: 700,
}}
/>
% de cashback por compra
{CARD_COLORS.map((col) => (
No hay tarjetas registradas
Pulsa en "Nueva tarjeta" para registrar tu primera tarjeta de crédito.
{/* Filtro rápido por titular si hay más de 1 persona */}
{editPeopleList.length > 1 && (
);
})()}
{editPeopleList.map((p) => {
const isSel = settingsCardFilter === p;
const count = editCards.filter((c) => (c.person || "").trim() === p).length;
const isTu = p === myName;
return (
);
})}
)}
{/* Secciones separadas por persona */}
{filteredPeopleList.map((personName) => {
const personCards = editCards.filter((c) => (c.person || "").trim() === personName);
const isTu = personName === myName;
return (
{/* Cabecera del titular */}
);
})}
0 ? "0.75rem" : 0, paddingBottom: personCards.length > 0 ? "0.5rem" : 0, borderBottom: personCards.length > 0 ? `1px solid ${C.lineSoft}` : "none" }}>
{/* Cuadrícula de tarjetas de esta persona */}
{personCards.length === 0 ? (
{(personName || "?").trim().charAt(0).toUpperCase()}
{personName}
{isTu && (tú)}
{personCards.length} {personCards.length === 1 ? "tarjeta registrada" : "tarjetas registradas"}
{personName} no tiene tarjetas registradas todavía.
) : (
{personCards.map((c) => {
const pal = CARD_COLORS.find((p) => p.id === c.color) || CARD_COLORS[0];
const cardCurr = c.currency || editCurrency || "S/";
const isDeb = c.cardType === "debito";
return (
);
})}
)}
{c.name}
{isDeb ? "🏧 Débito" : "💳 Crédito"}
{c.currency && c.currency !== (editCurrency || "S/") && (
{c.currency}
)}
{isDeb ? (
Débito directo · Sin ciclo de deuda
) : (
<>
{c.billingCycle === "quincenal" && (
⚡ Quincenal (15d)
)}
{c.targetCutoffMonth && c.targetCutoffMonth !== "auto" && (
✂️ {c.targetCutoffMonth}
)}
{(c.targetDueMonth || c.targetMonth) && (c.targetDueMonth || c.targetMonth) !== "auto" && (
⏰ {c.targetDueMonth || c.targetMonth}
)}
Corte: día {c.cutoffDay} · Pago: día {c.dueDay}
)}
{c.hasCashback && (
🎁 Cashback {c.cashbackPercent || 1}% {c.excludeServices === false ? "(En todo)" : "(Menos servicios)"}
)}
{pal.label}
{isDeb ? (
🏧 Cuenta Débito
) : c.creditLimit ? (
Límite: {fmtMoney(c.creditLimit, cardCurr)}
) : (
Sin límite fijado
)}
Cuotas y compromisos mensuales
Registra cuotas fijas o préstamos que pagas cada mes a una persona o entidad con fecha límite y seguimiento de cuotas.
setInstallmentDraft({ ...installmentDraft, name: e.target.value })}
placeholder="Ej. Préstamo moto, Deuda con Carlos, Alquiler..."
maxLength={35}
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
{
const val = e.target.value;
const totalDebtNum = parseFloat(val);
const cuotasNum = parseInt(installmentDraft.totalInstallments, 10);
let newAmount = installmentDraft.amount;
if (isFinite(totalDebtNum) && totalDebtNum > 0 && isFinite(cuotasNum) && cuotasNum > 0) {
newAmount = String(Math.round((totalDebtNum / cuotasNum) * 100) / 100);
}
setInstallmentDraft({ ...installmentDraft, totalAmount: val, amount: newAmount });
}}
placeholder="Ej. 5000 (monto total de deuda)"
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
fontWeight: 600,
}}
/>
{
const val = e.target.value;
const cuotaNum = parseFloat(val);
const cuotasNum = parseInt(installmentDraft.totalInstallments, 10);
let newTotal = installmentDraft.totalAmount;
if (isFinite(cuotaNum) && cuotaNum > 0 && isFinite(cuotasNum) && cuotasNum > 0) {
newTotal = String(Math.round(cuotaNum * cuotasNum * 100) / 100);
}
setInstallmentDraft({ ...installmentDraft, amount: val, totalAmount: newTotal });
}}
placeholder="Ej. 500"
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
fontWeight: 600,
}}
/>
setInstallmentDraft({ ...installmentDraft, dueDay: Number(e.target.value) || 15 })}
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
Elige el mes que corresponda a tu cronograma de pago actual.
{/* Previsualización en vivo de la fecha de cuota */}
{(() => {
const preview = getInstallmentCycleInfo(installmentDraft);
if (!preview) return null;
return (
⏰ Próximo vencimiento: {preview.dueFullLabel || preview.dueLabel} ({preview.daysToDue === 0 ? "¡Hoy!" : `en ${preview.daysToDue}d`})
{installmentDraft.targetMonth && installmentDraft.targetMonth !== "auto" && (
📌 Coordinado con {preview.dueFullLabel} (avanzará solo tras pasar la fecha).
)}
Cada pago de cuota se anota como consumo en esa tarjeta y se liquida al abonarla. Al terminar la cuota deja de cobrarse.
{
const val = e.target.value;
const cuotasNum = parseInt(val, 10);
const totalDebtNum = parseFloat(installmentDraft.totalAmount);
let newAmount = installmentDraft.amount;
if (isFinite(totalDebtNum) && totalDebtNum > 0 && isFinite(cuotasNum) && cuotasNum > 0) {
newAmount = String(Math.round((totalDebtNum / cuotasNum) * 100) / 100);
}
setInstallmentDraft({ ...installmentDraft, totalInstallments: val, amount: newAmount });
}}
placeholder="Ej. 10 (vacío si indefinido)"
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
setInstallmentDraft({ ...installmentDraft, paidInstallments: Math.max(0, Number(e.target.value) || 0) })}
placeholder="Ej. 0"
style={{
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
padding: "0.55rem 0.75rem",
fontSize: "0.85rem",
color: C.ink,
width: "100%",
outline: "none",
}}
/>
Deuda total:
{fmtMoney(totDebt, cur)}
{paid > 0 && (
Pagado ({paid}):
{fmtMoney(paidAmt, cur)}
)}
Saldo restante:
{fmtMoney(remaining, cur)}
{CARD_COLORS.map((col) => (
No hay cuotas registradas
Pulsa en "Nueva cuota" para registrar préstamos o pagos recurrentes.
{/* Filtro rápido por titular si hay más de 1 persona */}
{editPeopleList.length > 1 && (
);
})()}
{editPeopleList.map((p) => {
const isSel = settingsInstallmentFilter === p;
const count = editInstallments.filter((i) => (i.person || "").trim() === p).length;
const isTu = p === myName;
return (
);
})}
)}
{/* Secciones separadas por persona */}
{filteredPeopleList.map((personName) => {
const personItems = editInstallments.filter((i) => (i.person || "").trim() === personName);
const isTu = personName === myName;
return (
{/* Cabecera del titular */}
);
})}
0 ? "0.75rem" : 0, paddingBottom: personItems.length > 0 ? "0.5rem" : 0, borderBottom: personItems.length > 0 ? `1px solid ${C.lineSoft}` : "none" }}>
{/* Cuadrícula de cuotas de esta persona */}
{personItems.length === 0 ? (
{(personName || "?").trim().charAt(0).toUpperCase()}
{personName}
{isTu && (tú)}
{personItems.length} {personItems.length === 1 ? "compromiso registrado" : "compromisos registrados"}
{personName} no tiene cuotas o préstamos registrados.
) : (
{personItems.map((inst) => {
const pal = CARD_COLORS.find((p) => p.id === inst.color) || CARD_COLORS[1];
const instCurr = inst.currency || editCurrency || "S/";
const total = inst.totalInstallments || 0;
const paid = inst.paidInstallments || 0;
return (
);
})}
)}
{inst.name}
{inst.currency && inst.currency !== (editCurrency || "S/") && (
{inst.currency}
)}
{inst.targetMonth && inst.targetMonth !== "auto" && (
🗓️ {inst.targetMonth}
)}
{inst.recipient ? A: {inst.recipient} · : ""}
Vence: día {inst.dueDay}
{inst.totalAmount ? Deuda: {fmtMoney(inst.totalAmount, instCurr)} · : ""}
Cuota: {fmtMoney(inst.amount, instCurr)}
{/* Contador interactivo de cuotas pagadas */}
{total > 0 ? `${paid}/${total}` : `${paid} pagadas`}
Interfaz limpia y sin distracciones para registrar rápido.
{dark ?
Tema oscuro para este dispositivo.
Avisos push, en segundo plano y sonidos al registrar.
Recibe notificaciones de cualquier espacio guardado, incluso si estás en otra cuenta o fuera de ella.
handleToggleSplit(!editSplitEnabled)}
className="flex items-center justify-between gap-3 mb-2.5 cc-btn-press"
style={{
background: editSplitEnabled ? (darkMode ? "rgba(16, 185, 129, 0.12)" : "#ECFDF5") : C.field,
border: `1.5px solid ${editSplitEnabled ? C.green : C.lineSoft}`,
borderRadius: "0.85rem",
padding: "0.75rem 0.95rem",
cursor: "pointer",
}}
>
{/* 5. Novedades y versión */}
{editSplitEnabled ? "Calculando balances y quién le debe a quién en la cuenta." : "Cada quien paga lo suyo por separado (sin balances de deudas)."}
e.stopPropagation()}>
{rtDiagError}
)}
{/* Tarjeta 1: Asistente de Voz y Gemini */}
)}
{/* Footer del panel de Ajustes */}
Permite dictar o escribir tus gastos con lenguaje natural (ej. "Hans pagó 35 soles en taxi con tarjeta"). Basta con que tú configures la clave aquí; todos los miembros del grupo podrán usarla sin suscripción.
{editGeminiApiKey.trim() && !showEditGeminiKeyField && (
{editGeminiIsPrivate ? "🔒 Solo en tu dispositivo" : "👥 Compartida"}
)}
{/* Vista 1: Clave ya configurada y enmascarada para máxima privacidad */}
{editGeminiApiKey.trim() && !showEditGeminiKeyField ? (
setEditGeminiApiKey(e.target.value)}
placeholder="Pega tu clave (AIzaSy... o AQ.Ab8...)"
style={{
fontFamily: "'Inter', sans-serif",
background: C.paper,
border: `1px solid ${C.line}`,
borderRadius: "0.65rem",
color: C.ink,
padding: "0.48rem 2.2rem 0.48rem 0.75rem",
fontSize: "0.8rem",
outline: "none",
width: "100%",
boxSizing: "border-box",
}}
/>
setEditGeminiIsPrivate(!editGeminiIsPrivate)}
style={{
display: "flex",
alignItems: "flex-start",
gap: "0.5rem",
background: editGeminiIsPrivate ? (darkMode ? "rgba(16,185,129,0.12)" : "#ECFDF5") : C.paper,
border: `1px solid ${editGeminiIsPrivate ? C.green : C.line}`,
borderRadius: "0.65rem",
padding: "0.5rem 0.65rem",
cursor: "pointer",
}}
>
setEditGeminiIsPrivate(e.target.checked)}
style={{ marginTop: "0.15rem", cursor: "pointer", accentColor: C.green }}
/>
{showEditGeminiKeyField && (
)}
🔒 Guardar solo en este dispositivo (Privada)
Tu clave no se subirá a la base de datos de la cuenta. Nadie más podrá verla ni usarla desde otros teléfonos.
{geminiTestStatus}
)}
Obtén una clave gratuita en aistudio.google.com.
Puedes enviar mensajes de texto o notas de audio a tu propio bot de Telegram para que registre gastos automáticamente en la cuenta compartida.
1. Crea tu Bot en Telegram
Abre Telegram, busca
@BotFather, escribe /newbot y copia el Token API.2. Conecta la Edge Function de Supabase
URL del Webhook de tu cuenta:
https://[TU-SUPABASE-ID].supabase.co/functions/v1/webhook-ai
3. ¡Listo para usar!
Cualquier integrante del grupo le envía un mensaje al bot y el movimiento se guardará y sincronizará en vivo.
setShowChangelog(false)}
className="cc-fade-in"
style={{
position: "fixed",
inset: 0,
background: "rgba(15, 23, 42, 0.72)",
backdropFilter: "blur(5px)",
WebkitBackdropFilter: "blur(5px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 80,
padding: "1rem",
}}
>
)}
{/* Contenido: una sola columna de tarjetas centradas (máx. 480px) */}
e.stopPropagation()}
className="cc-panel-in"
style={{
background: C.paper,
borderRadius: "1.4rem",
padding: isDesktop ? "1.5rem" : "1.25rem",
border: `1px solid ${C.line}`,
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.35)",
maxWidth: "520px",
width: "100%",
maxHeight: "88vh",
display: "flex",
flexDirection: "column",
gap: "0.9rem",
}}
>
{APP_CHANGELOG.map((ver, vIdx) => (
{ver.description && (
))}
{ver.version}
{ver.title}
{ver.date}
{ver.description}
)}
{ver.items.map((it, itIdx) => {
const tagBg =
it.tag === "Nuevo" ? (darkMode ? "rgba(16, 185, 129, 0.2)" : "#D1FAE5")
: it.tag === "Mejora" ? (darkMode ? "rgba(59, 130, 246, 0.2)" : "#DBEAFE")
: (darkMode ? "rgba(168, 85, 247, 0.2)" : "#F3E8FF");
const tagColor =
it.tag === "Nuevo" ? (darkMode ? "#6EE7B7" : "#065F46")
: it.tag === "Mejora" ? (darkMode ? "#93C5FD" : "#1E40AF")
: (darkMode ? "#D8B4FE" : "#6B21A8");
return (
{it.tag}
{it.text}
);
})}
{/* Tarjeta de saldo: en escritorio entra con una animación al abrir la app */}
{/* El personaje de la cuenta: reacciona a cada ingreso y gasto. */}
{/* ============================================================
MÓDULO DESTACADO: PRÉSTAMOS Y DEUDAS ENTRE NOSOTROS
Módulo independiente y resaltado en el dashboard para ver y saldar
las deudas directas entre los miembros del equipo.
============================================================ */}
{!minimalMode && (
{/* Cabecera del módulo */}
)}
{/* Modal de confirmación para saldar deuda entre nosotros */}
{pendingSettleDebt && (
) : (() => {
const activeCardGroups = cardStats.byPerson.filter((g) => g.cards.length > 0);
const myNameNorm = String(myName || "").trim().toLowerCase();
// Determinar la persona seleccionada en el filtro
const selectedPerson = cardTabPerson === "auto"
? (activeCardGroups.some((g) => String(g.person || "").trim().toLowerCase() === myNameNorm)
? (activeCardGroups.find((g) => String(g.person || "").trim().toLowerCase() === myNameNorm)?.person || activeCardGroups[0]?.person || "all")
: (activeCardGroups[0]?.person || "all"))
: cardTabPerson;
const filteredGroups = selectedPerson === "all"
? activeCardGroups
: activeCardGroups.filter((g) => String(g.person || "").trim().toLowerCase() === String(selectedPerson || "").trim().toLowerCase());
return (
{minimalMode ? "Saldo disponible" : "Dinero disponible (Efectivo / Cuentas)"}
{fmtMoney(totals.saldoEfectivo, settings.currency)}
{totals.deudaTotal > 0 ? ( 💳 Deuda general: {fmtMoney(totals.deudaTotal, settings.currency)} {totals.deudaTarjetas > 0 && totals.deudaCuotas > 0 && !minimalMode ? ( ({fmtMoney(totals.deudaTarjetas, settings.currency)} tarj. + {fmtMoney(totals.deudaCuotas, settings.currency)} cuotas) ) : totals.deudaCuotas > 0 && totals.deudaTarjetas === 0 && !minimalMode ? ( (cuotas y préstamos) ) : !minimalMode ? ( (tarjetas) ) : null} {" · Balance neto: "} = 0 ? "#D1FAE5" : "#FECACA" }}> {fmtMoney(totals.balanceNeto, settings.currency)} ) : ( "Dinero en mano y bancos · Sin deudas pendientes" )}
{fmtMoney(totals.totalIngresos, settings.currency)}
{fmtMoney(totals.totalGastos, settings.currency)}
{!minimalMode && (totals.gastosTarjeta > 0 || totals.gastosEfectivo > 0) && (
Efec: {fmtMoney(totals.gastosEfectivo, settings.currency)} · Tarj: {fmtMoney(totals.gastosTarjeta, settings.currency)}
)}
Por moneda (sin convertir)
{byCurrency.map((c) => (
{c.currency}
))}
)}
{
setPeerLoansCollapsed((prev) => {
const next = !prev;
try { localStorage.setItem("cc:collapse:peerloans", next ? "1" : "0"); } catch (e) {}
return next;
});
}}
role="button"
tabIndex={0}
aria-expanded={!peerLoansCollapsed}
aria-label={peerLoansCollapsed ? "Desplegar préstamos entre nosotros" : "Minimizar préstamos entre nosotros"}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: peerLoansCollapsed ? 0 : "1rem",
cursor: "pointer",
userSelect: "none",
gap: "0.5rem",
}}
>
{/* Contenido desplegado */}
{!peerLoansCollapsed && (
🤝
Préstamos entre nosotros {peerDebts.hasDebts ? ( {peerDebts.list.length} {peerDebts.list.length === 1 ? "activo" : "activos"} ) : ( Sin deudas )}
Deudas directas y préstamos entre los miembros del equipo
{peerDebts.hasDebts && (
)}
{peerDebts.hasDebts ? (
Total: {fmtMoney(peerDebts.totalPeerDebt, settings.currency)}
) : (
Al día ✓
)}
{peerLoansCollapsed ?
{peerDebts.list.length === 0 ? (
) : (
)}
🤝
No hay préstamos ni deudas pendientes entre ustedes
Si alguien le prestó dinero a otro integrante, regístralo para llevar el control y saldarlo en cualquier momento.
{/* Lista de deudas entre personas */}
)}
{peerDebts.list.map((debt) => {
const isMyDebt = debt.borrower === myName;
const isMyCredit = debt.lender === myName;
return (
{/* Botón de acción para saldar / pagar */}
);
})}
{/* Botón para añadir otro préstamo rápido */}
{debt.borrower} {isMyDebt ? "(Tú)" : ""}
➔ debe a
{debt.lender} {isMyCredit ? "(Tú)" : ""}
Concepto: {debt.name}
{debt.sourceType === "cuota" && debt.totalInstallments > 0 && (
📅 Cuota {debt.paidInstallments + 1}/{debt.totalInstallments}
)}
Deuda pendiente
{fmtMoney(debt.remainingAmount, debt.currency)}
{debt.sourceType === "cuota" ? "Compromiso mensual" : "Préstamo único"}
setPendingSettleDebt(null)}
className="cc-fade-in"
style={{
position: "fixed",
inset: 0,
background: "rgba(15, 23, 42, 0.72)",
backdropFilter: "blur(5px)",
WebkitBackdropFilter: "blur(5px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 85,
padding: "1rem",
}}
>
)}
{/* Módulo de Tarjetas de Crédito por Individuo */}
{!minimalMode && (
e.stopPropagation()}
className="cc-panel-in"
style={{
background: C.paper,
borderRadius: "1.4rem",
padding: "1.5rem",
border: `1.5px solid ${darkMode ? "#F59E0B" : "#FCD34D"}`,
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
maxWidth: "440px",
width: "100%",
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
Concepto:
{pendingSettleDebt.name}
Importe a devolver:
{fmtMoney(pendingSettleDebt.remainingAmount, pendingSettleDebt.currency)}
Al saldar, la deuda se retirará de los préstamos pendientes y se registrará la constancia de pago en el historial.
{
setCardsCollapsed((prev) => {
const next = !prev;
try { localStorage.setItem("cc:collapse:cards", next ? "1" : "0"); } catch (e) {}
return next;
});
}}
role="button"
tabIndex={0}
aria-expanded={!cardsCollapsed}
aria-label={cardsCollapsed ? "Desplegar tarjetas y cuotas" : "Minimizar tarjetas y cuotas"}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: cardsCollapsed ? 0 : "1rem",
cursor: "pointer",
userSelect: "none",
gap: "0.5rem",
}}
>
{/* Contenido de tarjetas */}
{!cardsCollapsed && (
cardStats.list.length === 0 ? (
Tarjetas y cuotas ({cardStats.list.length} · {(settings.installments || []).length})
Deuda, corte, pago y cuotas separados por persona
{cardStats.totalCashbackAvailableAll > 0 && (
🎁 Cashback:
{fmtMoney(cardStats.totalCashbackAvailableAll, settings.currency)}
)}
{totals.deudaTotal > 0 ? (
Deuda: {fmtMoney(totals.deudaTotal, settings.currency)}
) : (
Al día ✓
)}
{cardsCollapsed ?
¿Pagas compras con tarjeta de crédito? Registra tus tarjetas para separar gastos en efectivo vs tarjeta y controlar tu deuda sin duplicar gastos al pagar tu estado de cuenta.
{/* Selector de personas / pestañas rápidas si hay más de 1 grupo o personas en la cuenta */}
{(activeCardGroups.length > 1 || people.length > 1) && (
) : (
{/* Feedback de Smart Prompt */}
{smartFeedback && (
) : (
)}
{/* Ventana modal del formulario: hoja anclada abajo y centrada en
horizontal (si se centrara en vertical, la tarjeta taparía al
personaje). El fondo translúcido + el scroll bloqueado mantienen la
tarjeta de saldo quieta y al personaje siempre visible arriba. Se
cierra con el fondo, Cancelar o Escape. */}
{showForm && (
{!summaryCollapsed && (
<>
{/* Desglose por persona: cada uno con sus ingresos y gastos resumidos. */}
{!minimalMode && (porPersona.length > 0 || porPersonaHuérfanos.total > 0) && (
)}
{/* Sellos de balance (N personas) */}
{settleUp && (
)}
{/* Pie de página permanente con enlaces rápidos a Ajustes y Novedades */}
{/* Aviso: hay cambios guardados solo en este dispositivo (nube caída).
Se suben automáticamente al recuperar la conexión. */}
{pendingWrites > 0 && (
{/* Pestaña "Todas" */}
{/* Pestañas individuales por persona */}
{cardStats.byPerson.map((g) => {
const isMe = String(g.person || "").trim().toLowerCase() === myNameNorm;
const isSelected = String(selectedPerson || "").trim().toLowerCase() === String(g.person || "").trim().toLowerCase();
const pColor = String(g.person || "").trim() ? personColor(String(g.person).trim()) : C.line;
const instGroup = installmentStats.byPerson.find((ib) => String(ib.person || "").trim().toLowerCase() === String(g.person || "").trim().toLowerCase());
const personCuotasDebt = instGroup ? instGroup.totalRemainingDebt : 0;
const personTotalDebt = g.totalDebt + personCuotasDebt;
return (
);
})}
)}
{/* Renderizado de las tarjetas filtradas */}
{filteredGroups.length === 0 ? (
{selectedPerson} no tiene tarjetas de crédito registradas todavía.
{filteredGroups.map((group) => (
);
})()
)}
{/* Modal de Canje de Cashback */}
{pendingCashbackRedeem && (
{/* Cabecera del individuo (siempre visible para contexto) */}
{/* Tarjetas de esta persona en cuadrícula de 2 columnas en desktop */}
)}
{group.person}
({group.cards.length} {group.cards.length === 1 ? "tarjeta" : "tarjetas"})
{(() => {
const instGroup = installmentStats.byPerson.find((ib) => String(ib.person || "").trim().toLowerCase() === String(group.person || "").trim().toLowerCase());
const personCuotasDebt = instGroup ? instGroup.totalRemainingDebt : 0;
const personTotalDebt = group.totalDebt + personCuotasDebt;
return (
0 ? C.red : C.green }}>
{personTotalDebt > 0 ? `Debe ${fmtMoney(personTotalDebt, settings.currency)}` : "Al día ✓"}
{group.totalDebt > 0 && personCuotasDebt > 0 && (
);
})()}
Tarj: {fmtMoney(group.totalDebt, settings.currency)} · Cuotas: {fmtMoney(personCuotasDebt, settings.currency)}
)}
{group.cards.map(({ card, isDebit, currentDebt, currentMonthSpent, cycleInfo, available, currency: cardCurr, hasCashback, totalCashbackAccumulated, currentMonthCashback, availableCashback }) => {
const pal = CARD_COLORS.find((c) => c.id === card.color) || CARD_COLORS[0];
const curr = cardCurr || card.currency || settings.currency || "S/";
return (
{/* Límite disponible si está configurado */}
{!isDebit && card.creditLimit && (
)}
{/* Bloque de Cashback acumulado en la tarjeta */}
{(hasCashback || totalCashbackAccumulated > 0) ? (
) : (
/* Si la tarjeta NO tiene cashback, mostrar botón directo para activarlo */
);
})}
))}
{card.name}
{isDebit && (
🏧 Débito
)}
{!isDebit && card.billingCycle === "quincenal" && (
⚡ 15d
)}
{curr !== (settings.currency || "S/") && (
{curr === "$" ? "$ USD" : curr}
)}
Titular: {card.person || "Sin titular"}
{(() => {
// Cuotas activas cobradas en esta tarjeta: compromiso mensual visible.
const linked = installmentStats.list.filter((s) => s.inst.cardId === card.id && !s.isCompleted);
if (linked.length === 0) return null;
const monthly = linked.reduce((s, i) => (i.currency === cardCurr ? s + (i.inst.amount || 0) : s + txToBase({ amount: i.inst.amount, currency: i.currency }, cardCurr)), 0);
return (
📅 {linked.length === 1 ? "Cuota" : "Cuotas"}: {linked.map((i) => i.inst.name).join(", ")} · {fmtMoney(monthly, cardCurr)} al mes
);
})()}
{isDebit ? "Gasto este mes" : "Deuda actual"}
{isDebit ? fmtMoney(currentMonthSpent, curr) : fmtMoney(currentDebt, curr)}
Límite: {fmtMoney(card.creditLimit, curr)}
Disp: {fmtMoney(available, curr)}
card.creditLimit * 0.85 ? "#F87171" : "#FDE047",
borderRadius: "999px",
}}
/>
{availableCashback > 0 && (
)}
Sin cashback
)}
{/* Fechas de corte y pago + Botón Abonar */}
{isDebit || !cycleInfo ? (
{isDebit ? "🏧 Débito directo · Sin ciclo de corte" : "Sin ciclo configurado"}
) : (<>
{/* Corte con su propio avance de mes */}
✂️ Corte: {cycleInfo.cutoffLabel} ({cycleInfo.cutoffRelative})
{card.targetCutoffMonth && card.targetCutoffMonth !== "auto" && (
)}
{/* Pago con su propio avance de mes */}
⏰ Pago: {cycleInfo.dueLabel} ({cycleInfo.dueRelative})
{(card.targetDueMonth || card.targetMonth) && (card.targetDueMonth || card.targetMonth) !== "auto" && (
)}
)}
setPendingCashbackRedeem(null)}
className="cc-fade-in"
style={{
position: "fixed",
inset: 0,
background: "rgba(15, 23, 42, 0.72)",
backdropFilter: "blur(5px)",
WebkitBackdropFilter: "blur(5px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 85,
padding: "1rem",
}}
>
)}
{/* Modal de Configuración Rápida de Cashback */}
{quickCashbackCard && (
e.stopPropagation()}
className="cc-panel-in"
style={{
background: C.paper,
borderRadius: "1.4rem",
padding: "1.5rem",
border: `1.5px solid ${darkMode ? "#059669" : "#10B981"}`,
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
maxWidth: "440px",
width: "100%",
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
Cashback acumulado:
{fmtMoney(pendingCashbackRedeem.availableCashback, pendingCashbackRedeem.currency)}
Elige cómo deseas canjear o disponer de tu cashback acumulado:
setQuickCashbackCard(null)}
className="cc-fade-in"
style={{
position: "fixed",
inset: 0,
background: "rgba(15, 23, 42, 0.72)",
backdropFilter: "blur(5px)",
WebkitBackdropFilter: "blur(5px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 85,
padding: "1rem",
}}
>
)}
{/* Cuotas y préstamos: mismo módulo que las tarjetas (un solo bloque,
separadas por un divisor; se pliegan junto con la sección). */}
{!cardsCollapsed && (settings.installments || []).length > 0 && (
e.stopPropagation()}
className="cc-panel-in"
style={{
background: C.paper,
borderRadius: "1.4rem",
padding: "1.5rem",
border: `1.5px solid ${darkMode ? "#059669" : "#10B981"}`,
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.4)",
maxWidth: "440px",
width: "100%",
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
{["1", "1.5", "2", "3", "5"].map((pct) => {
const isSel = String(quickCashbackCard.cashbackPercent) === pct;
return (
);
})}
setQuickCashbackCard({ ...quickCashbackCard, cashbackPercent: e.target.value })}
placeholder="Otro %"
style={{
background: C.field,
border: `1px solid ${C.line}`,
borderRadius: "0.55rem",
padding: "0.45rem 0.65rem",
fontSize: "0.82rem",
color: C.ink,
width: "5.5rem",
outline: "none",
fontWeight: 700,
}}
/>
% en compras con esta tarjeta
{/* Cabecera de Cuotas */}
)}
)}
{/* Barra Inteligente de Entrada por Voz y Texto (Smart Input / Gemini Spark) */}
{
setInstallmentsCollapsed((prev) => {
const next = !prev;
try { localStorage.setItem("cc:collapse:installments", next ? "1" : "0"); } catch (e) {}
return next;
});
}}
role="button"
tabIndex={0}
aria-expanded={!installmentsCollapsed}
aria-label={installmentsCollapsed ? "Desplegar cuotas y préstamos" : "Minimizar cuotas y préstamos"}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
marginBottom: installmentsCollapsed ? 0 : "1rem",
gap: "0.5rem",
}}
>
{!installmentsCollapsed && (
{installmentStats.totalMonthlyAll > 0 && (
Mensual: {fmtMoney(installmentStats.totalMonthlyAll, settings.currency)}
)}
{installmentStats.totalRemainingDebtAll > 0 && (
Deuda: {fmtMoney(installmentStats.totalRemainingDebtAll, settings.currency)}
)}
{installmentsCollapsed ?
{/* Selector / Filtro por persona si hay varios integrantes */}
{installmentStats.byPerson.filter((g) => g.items.length > 0).length > 1 && (
)}
{installmentStats.byPerson.filter((g) => g.items.length > 0).map((g) => {
const isSel = selectedInstallmentPerson === g.person;
const isTu = g.person === myName;
return (
);
})}
)}
{/* Renderizado de cuotas */}
{installmentStats.byPerson
.filter((g) => selectedInstallmentPerson === "todas" ? g.items.length > 0 : g.person === selectedInstallmentPerson)
.map((group) => (
{/* Cabecera del individuo */}
{/* Cuadrícula de tarjetas de cuotas */}
))}
{group.person}
({group.items.length} {group.items.length === 1 ? "compromiso" : "compromisos"})
{group.totalMonthly > 0 && (
Mensual: {fmtMoney(group.totalMonthly, settings.currency)}
)}
{group.items.map(({ inst, currency: instCurr, cycleInfo, total, paid, totalDebt, paidAmount, remainingInstallments, progressPercent, remainingAmount, isCompleted }) => {
const pal = CARD_COLORS.find((c) => c.id === inst.color) || CARD_COLORS[1]; // gold by default
const linkedCard = inst.cardId ? (settings.cards || []).find((c) => c.id === inst.cardId) : null;
return (
{/* Progreso de cuotas si tiene total o deuda */}
{(total > 0 || totalDebt > 0) && (
)}
{/* Fecha de vencimiento + Botón Pagar */}
);
})}
{inst.name}
{instCurr !== (settings.currency || "S/") && (
{instCurr}
)}
Paga: {inst.person} {inst.recipient ? `➔ A: ${inst.recipient}` : ""}
{linkedCard && (
💳 Cobrada en: {linkedCard.name}
)}
{totalDebt > 0 && (
Deuda total: {fmtMoney(totalDebt, instCurr)}
)}
Cuota mensual
{fmtMoney(inst.amount, instCurr)}
{isCompleted
? "🎉 ¡Deuda cancelada!"
: total > 0
? `Cuota ${paid} de ${total} (${progressPercent}%)`
: `Pagado: ${fmtMoney(paidAmount, instCurr)} (${progressPercent}%)`}
{remainingAmount != null && !isCompleted && (
Resta: {fmtMoney(remainingAmount, instCurr)}
)}
{cycleInfo ? (
⏰ Vence: {cycleInfo.dueLabel} ({cycleInfo.daysToDue === 0 ? "¡Vence hoy!" : `en ${cycleInfo.daysToDue}d`})
) : (
⏰ Sin fecha fijada
)}
{!isCompleted && cycleInfo && (
)}
{inst.targetMonth && inst.targetMonth !== "auto" && (
)}
{!isCompleted ? (
) : (
Pagado ✓
)}
{isListening ? (
setSmartPromptText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
processSmartExpense();
}
}}
placeholder={
isListening
? "🎙️ Escuchando... habla ahora..."
: '✨ Dicta o escribe: "Ingreso 500 sueldo" o "Hans gastó 40 en Uber"'
}
style={{
flex: 1,
background: "transparent",
border: "none",
outline: "none",
color: C.ink,
fontSize: "0.82rem",
fontWeight: 500,
minWidth: 0,
}}
/>
{/* Botón de micrófono */}
{voiceSupported && (
)}
{/* Botón de procesar */}
{smartPromptText.trim().length > 0 && (
)}
{smartFeedback.text}
)}
{/* Formulario y botones de acción principales */}
{minimalMode ? (
{ setEditingTx(null); setShowForm(false); }}
role="dialog"
aria-modal="true"
aria-label={editingTx ? "Editar movimiento" : "Anotar movimiento"}
className="cc-fade-in"
style={{
position: "fixed",
inset: 0,
background: "rgba(15, 23, 42, 0.5)",
display: "flex",
alignItems: "flex-end",
justifyContent: "center",
zIndex: 60,
padding: "1rem",
}}
>
)}
{/* Modal del Consejero Financiero & Resumen Inteligente con IA */}
{showAdvisorModal && (
e.stopPropagation()}
className="cc-sheet-in"
style={{
backgroundColor: C.paper,
borderRadius: "1.4rem",
padding: "1.5rem 1.5rem 0",
width: "100%",
maxWidth: "28rem",
maxHeight: "min(52vh, 40rem)",
overflowY: "auto",
boxShadow: "0 24px 60px -12px rgb(2 6 23 / 0.4)",
border: `1px solid ${C.line}`,
}}
>
{/* Cabecera del modal */}
setSmartPromptText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
processSmartExpense();
}
}}
placeholder={isListening ? "🎙️ Escuchando... habla..." : '✨ Dictar: Ej. "Ingreso 500 sueldo" o "45 almuerzo"'}
style={{
flex: 1,
background: "transparent",
border: "none",
outline: "none",
color: C.ink,
fontSize: "0.78rem",
fontWeight: 500,
minWidth: 0,
padding: "0 0.35rem",
}}
/>
{voiceSupported && (
)}
{smartPromptText.trim().length > 0 && (
)}
)}
setShowAdvisorModal(false)}
role="dialog"
aria-modal="true"
aria-label="Consejero Financiero con IA"
className="cc-fade-in"
style={{
position: "fixed",
inset: 0,
background: "rgba(15, 23, 42, 0.55)",
display: "flex",
alignItems: isDesktop ? "center" : "flex-end",
justifyContent: "center",
zIndex: 60,
padding: "1rem",
}}
>
)}
{/* Resumen mensual: navega por meses para ver cómo fue cada uno */}
e.stopPropagation()}
className="cc-sheet-in"
style={{
backgroundColor: C.paper,
borderRadius: "1.4rem",
padding: "1.4rem",
width: "100%",
maxWidth: "30rem",
maxHeight: "min(85vh, 44rem)",
overflowY: "auto",
boxShadow: "0 24px 60px -12px rgb(2 6 23 / 0.4)",
border: `1px solid ${C.line}`,
}}
>
{/* Cabecera */}
Analizando tus finanzas con IA...
Evaluando gastos, tendencias y detectando oportunidades de ahorro.
{/* Tarjeta de Salud Financiera y Resumen */}
{/* Métricas clave en 2 columnas */}
) : null}
Diagnóstico del Mes
{advisorData.healthScore}
{advisorData.summaryText}
{/* Top Categoría */}
{/* Promedio Diario / Proyección */}
{/* Fugas y Gastos Hormiga si existen */}
{advisorData.microCount > 0 && (
Mayor Gasto
{advisorData.topCategory ? advisorData.topCategory.name : "—"}
{advisorData.topCategory ? fmtMoney(advisorData.topCategory.amount, settings.currency) : "S/ 0.00"}
Ritmo Diario
{fmtMoney(advisorData.dailyAvg, settings.currency)}/día
Cierre est.: {fmtMoney(advisorData.projectedGastos, settings.currency)}
{advisorData.microCount} compras pequeñas menores a 30 soles que suman {fmtMoney(advisorData.totalMicro, settings.currency)} este mes.
Consejos de Ahorro
{(advisorData.tips || []).map((tip, idx) => (
{tip.desc}
Resumen mensual
{monthLabel(summaryMonth)}
= 0 ? C.green : C.red }}>
Saldo: {fmtMoney(monthSummary.neto, settings.currency)}
{fmtMoney(monthSummary.ingresos, settings.currency)}
{fmtMoney(monthSummary.gastos, settings.currency)}
{monthSummary.gastosTarjeta > 0 && (
Efec: {fmtMoney(monthSummary.gastosEfectivo, settings.currency)} · Tarj: {fmtMoney(monthSummary.gastosTarjeta, settings.currency)}
)}
Saldo del mes (Efectivo)
{monthSummary.gastosTarjeta > 0 && (
= 0 ? C.green : C.red }}>
{fmtMoney(monthSummary.neto, settings.currency)}
Balance neto: {fmtMoney(monthSummary.ingresos - monthSummary.gastos, settings.currency)}
)}
Por persona (este mes)
{monthSummary.porPersona.map(([n, v]) => (
{n}
))}
)}
)}
+{fmtMoney(v.ingresos, settings.currency)}
−{fmtMoney(v.gastos, settings.currency)}
= 0 ? C.green : C.red }}>
Saldo: {v.saldoEfectivo >= 0 ? "+" : ""}{fmtMoney(v.saldoEfectivo, settings.currency)}
{
setPeopleCollapsed((prev) => {
const next = !prev;
try { localStorage.setItem("cc:collapse:people", next ? "1" : "0"); } catch (e) {}
return next;
});
}}
role="button"
tabIndex={0}
aria-expanded={!peopleCollapsed}
aria-label={peopleCollapsed ? "Desplegar desglose por persona" : "Minimizar desglose por persona"}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
marginBottom: peopleCollapsed ? 0 : "0.9rem",
gap: "0.5rem",
}}
>
{!peopleCollapsed && (
Saldo y aportes
{peopleCollapsed ?
{porPersona.map((p) => {
const esTu = p.nombre === person;
return (
{/* Saldo de la persona a la derecha */}
);
})}
{/* Movimientos sin persona asignada (huérfanos) si existen */}
{porPersonaHuérfanos.total > 0 && (
)}
)}
{(p.nombre || "?").trim().charAt(0).toUpperCase()}
{p.nombre}
{esTu && (
Tú
)}
{/* Subtítulo simple y resumido */}
Aportó: {fmtMoney(p.ingresos, settings.currency)}
·
Gastó: {fmtMoney(p.gastos, settings.currency)}
{p.deudaTotal > 0 && (
💳 Debe: {fmtMoney(p.deudaTotal, settings.currency)}
)}
Saldo
= 0 ? C.green : C.red,
whiteSpace: "nowrap",
}}
>
{p.saldo >= 0 ? "+" : ""}{fmtMoney(p.saldo, settings.currency)}
?
Sin persona asignada
{porPersonaHuérfanos.count} mov{porPersonaHuérfanos.count === 1 ? "" : "s"} antiguos · Aportó {fmtMoney(porPersonaHuérfanos.ingresos, settings.currency)} · Gastó {fmtMoney(porPersonaHuérfanos.gastos, settings.currency)}
Saldo
= 0 ? C.green : C.red,
whiteSpace: "nowrap",
}}
>
{porPersonaHuérfanos.saldo >= 0 ? "+" : ""}{fmtMoney(porPersonaHuérfanos.saldo, settings.currency)}
{settleUp.map((s, idx) => (
)}
{/* ============================================================
METAS DE AHORRO Y ALCANCÍAS COMPARTIDAS
============================================================ */}
{!minimalMode && (
{s.text}
))}
{
setSavingsCollapsed((prev) => {
const next = !prev;
try { localStorage.setItem("cc:collapse:savings", next ? "1" : "0"); } catch (e) {}
return next;
});
}}
role="button"
tabIndex={0}
aria-expanded={!savingsCollapsed}
aria-label={savingsCollapsed ? "Desplegar metas de ahorro" : "Minimizar metas de ahorro"}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
marginBottom: savingsCollapsed ? 0 : "0.9rem",
gap: "0.5rem",
}}
>
{!savingsCollapsed && (
🎯
Metas de Ahorro y Alcancías ({(settings.savingsGoals || []).length})
Fondos comunes y proyectos compartidos
{savingsCollapsed ?
{(settings.savingsGoals || []).length === 0 ? (
) : (
(settings.savingsGoals || []).map((goal) => {
const target = Number(goal.targetAmount) || 0;
const current = Number(goal.currentAmount) || 0;
const pct = target > 0 ? Math.min(100, Math.round((current / target) * 100)) : 100;
const isDone = pct >= 100;
return (
{/* Barra de progreso */}
{/* Acciones de la meta */}
);
})
)}
)}
🏖️
No hay metas de ahorro activas
Crea una alcancía compartida (ej. Vacaciones, Fondo de emergencia, Compras).
{goal.name}
{isDone && ¡Completada! 🎉}
{goal.targetDate && (
Meta: {goal.targetDate}
)}
{fmtMoney(current, settings.currency)} / {fmtMoney(target, settings.currency)}
{pct}% acumulado
{grouped.length === 0 && (
Todavía no hay movimientos
Anota el primero y se verá aquí al instante.
{/* Cabecera del día con balance resumido */}
);
})}
{dayNet !== 0 && (
0 ? C.green : C.red,
}}
>
{dayNet > 0 ? `+${fmtMoney(dayNet, settings.currency || "S/")}` : fmtMoney(dayNet, settings.currency || "S/")}
)}
{items.length} {items.length === 1 ? "mov." : "movs."}
{items.map((t, tIdx) => {
const tCard = (settings.cards || []).find((c) => c && c.id === t.cardId);
const tInst = (settings.installments || []).find((i) => i && i.id === (t.installmentId || t.installment_id))
|| (settings.installments || []).find((i) => i && t.description && ((i.name && String(t.description).toLowerCase().includes(String(i.name).toLowerCase())) || (i.recipient && String(t.description).toLowerCase().includes(String(i.recipient).toLowerCase()))));
const isCardPayment = t.type === "pago_tarjeta";
const isPrestamo = t.type === "prestamo";
const isGasto = t.type === "gasto";
const isIngreso = t.type === "ingreso";
const badgeBg = isIngreso
? (darkMode ? "rgba(16,185,129,0.15)" : "#ECFDF5")
: isPrestamo
? (darkMode ? "rgba(245,158,11,0.15)" : "#FEF3C7")
: isCardPayment
? (darkMode ? "rgba(99,102,241,0.15)" : "#EEF2FF")
: (darkMode ? "rgba(239,68,68,0.12)" : "#FEE2E2");
const badgeColor = isIngreso
? (darkMode ? "#6EE7B7" : "#047857")
: isPrestamo
? (darkMode ? "#FDE047" : "#B45309")
: isCardPayment
? (darkMode ? "#A5B4FC" : "#4338CA")
: (darkMode ? "#FCA5A5" : "#B91C1C");
return (
{/* Icono de tipo */}
{/* Importe y Acciones */}
{/* Botones de acción compactos */}
);
})}
{isIngreso ? (
{/* Descripción y Metadata */}
{t.description || "Sin descripción"}
{(t.hasPhoto || t.photo) && (
)}
{/* Fila secundaria: persona, etiquetas y métodos */}
{t.person}
{t.category && (
{getCategoryIcon(t.category)}
{t.category}
)}
{isPrestamo ? (
➔ {t.recipient || "otro"}
) : isCardPayment ? (
💳 {tCard ? tCard.name : "Tarjeta"}
) : t.paymentMethod === "tarjeta" || t.cardId ? (
💳 {tCard ? tCard.name : "Tarjeta"}
) : t.paymentMethod === "transferencia" ? (
🏦 Transfer
) : null}
{tInst ? (
📅 {tInst.name}
) : (t.description && /cuota\s*\d+/i.test(t.description)) ? (
📅 Cuota
) : null}
{/* Nota / Comentario */}
{t.note && (() => {
const cleanNote = t.note.replace(/\[canje_cashback\]/g, "").replace(/\[saldado\]/g, "").trim();
if (!cleanNote) return null;
return (
💬
{cleanNote}
);
})()}
{isPrestamo ? "🤝 " : isCardPayment ? "💳 " : isGasto ? "−" : "+"}
{(Number(t.amount) || 0).toFixed(2).replace(".", ",")} {txCurrency(t, settings.currency)}
{txCurrency(t, settings.currency) !== (settings.currency || "S/") && (
≈ {fmtMoney(txToBase(t, settings.currency), settings.currency)}
)}
Ocurrió un error inesperado
{this.state.error && this.state.error.message ? this.state.error.message : String(this.state.error || "Error desconocido")}
// (demo del backend, Netlify, etc.). Se omite en Claude Artifacts: además de
// no haber #root, la existencia de window.storage (HAS_LOCAL_BRIDGE) indica que
// Claude ya se encarga de renderizar el componente, evitando doble renderizado.
if (typeof document !== "undefined" && !HAS_LOCAL_BRIDGE && document.getElementById("root")) {
import("react-dom/client").then(({ createRoot }) => {
createRoot(document.getElementById("root")).render(
);
});
}