JUEGO
import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, BarChart, Bar } from 'recharts';
import { motion } from 'framer-motion';
import { DollarSign, PieChart, Settings, BookOpen, PlusCircle, Download } from 'lucide-react';
// LFNA - Single-file React app (Tailwind CSS styles expected)
// Usage: paste into a React + Tailwind project (Vite, Create React App, Next.js).
// Dependencies: recharts, framer-motion, lucide-react
export default function LFNAApp() {
// Sample data and state
const [incomeStreams, setIncomeStreams] = useState([
{ id: 1, name: 'Ventas digitales', amount: 350, frequency: 'mensual' },
{ id: 2, name: 'Afiliados', amount: 150, frequency: 'mensual' },
{ id: 3, name: 'Inversión (dividendos)', amount: 80, frequency: 'trimestral' },
]);
const [transactions, setTransactions] = useState([
{ id: 1, date: '2025-09-01', desc: 'Venta curso', type: 'ingreso', amount: 120 },
{ id: 2, date: '2025-09-03', desc: 'Pago hosting', type: 'gasto', amount: -20 },
{ id: 3, date: '2025-09-05', desc: 'Cobro afiliado', type: 'ingreso', amount: 50 },
]);
const [goals, setGoals] = useState([
{ id: 1, title: 'Fondo emergencia', target: 2000, saved: 450 },
{ id: 2, title: 'Comprar equipo', target: 1200, saved: 200 },
]);
const [activeTab, setActiveTab] = useState('dashboard');
const [newStream, setNewStream] = useState({ name: '', amount: '' });
useEffect(() => {
// Example: sync to localStorage (simple persistence)
localStorage.setItem('lfna_income', JSON.stringify(incomeStreams));
}, [incomeStreams]);
// Helpers
const addIncomeStream = () => {
if (!newStream.name || !newStream.amount) return;
const next = { id: Date.now(), name: newStream.name, amount: Number(newStream.amount), frequency: 'mensual' };
setIncomeStreams(prev => [next, ...prev]);
setNewStream({ name: '', amount: '' });
};
const addTransaction = (tx) => {
setTransactions(prev => [tx, ...prev]);
};
const exportCSV = () => {
const rows = [['Fecha','Descripción','Tipo','Monto'], ...transactions.map(t => [t.date, t.desc, t.type, t.amount])];
const csv = rows.map(r => r.map(v => `"${v}"`).join(',')).join('\n');
const blob = new Blob([csv], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = 'lfna_transactions.csv'; a.click(); URL.revokeObjectURL(url);
};
// Simple chart data: monthly income summary (derived)
const chartData = (() => {
// aggregate last 6 months with demo values
return [
{ month: 'Abr', income: 300 },
{ month: 'May', income: 420 },
{ month: 'Jun', income: 380 },
{ month: 'Jul', income: 510 },
{ month: 'Ago', income: 460 },
{ month: 'Sep', income: incomeStreams.reduce((s,i)=>s+i.amount,0) },
];
})();
const totalMonthlyIncome = incomeStreams.reduce((s, i) => s + i.amount, 0);
const totalSaved = goals.reduce((s,g)=>s+g.saved,0);
return (
{/* Sidebar */}
{/* Main content */}
{activeTab === 'dashboard' && (
)}
{activeTab === 'streams' && (
)}
{activeTab === 'goals' && (
))}
)}
{activeTab === 'learn' && (
)}
{activeTab === 'settings' && (
)}
);
}
LFNA — Libertad Financiera
Panel para gestionar ingresos pasivos, objetivos y educación financiera
Ingreso mensual estimado
${totalMonthlyIncome.toFixed(2)}
Meta más próxima
{goals[0]?.title || 'Sin metas'}
Guardado ${goals[0]?.saved || 0} / ${goals[0]?.target || 0}
Transacciones
{transactions.length}
Evolución de ingresos (últimos meses)
Fuentes de ingreso
-
{incomeStreams.map(s => (
-
{s.name}{s.frequency}${s.amount}
))}
Metas y progreso
{goals.map(g => (
))}
{g.title}
${g.saved} / ${g.target}
Añadir nueva fuente
setNewStream({...newStream, name: e.target.value})} className="flex-1 p-2 border rounded" placeholder="Nombre (ej. Canal YouTube)" />
setNewStream({...newStream, amount: e.target.value})} className="w-36 p-2 border rounded" placeholder="Monto estimado" />
Lista completa
| Fuente | Frecuencia | Monto |
|---|---|---|
| {s.name} | {s.frequency} | ${s.amount} |
Gestión de metas
{goals.map(g=> ({g.title}
Meta ${g.target}
${g.saved}
{Math.round((g.saved/g.target)*100)}%
Añadir ahorro a meta (demo)
Módulos de aprendizaje
- Fundamentos: presupuesto y flujo de caja
- Crear fuentes de ingreso digital
- Inversión pasiva y diversificación
- Automatización y escalado
- Protección y fiscalidad
Cada módulo puede enlazar a cursos, PDFs o videos. Usa este espacio para centralizar lo que estudias.
Recursos rápidos
- - Checklist para lanzar un producto digital
- - Plantilla de presupuesto mensual
- - Calendario de pagos y vencimientos
Ajustes
Configura moneda, sincronización con Google Sheets o Stripe (pendiente de integrar).