91:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0duxp4hhw2597.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/44l0scqt1xscd.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0ej1ysdxfoqj6.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/08xzv2lw_m383.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0duxp4hhw2597.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/44l0scqt1xscd.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/0ej1ysdxfoqj6.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK","/chat-static/_next/static/chunks/08xzv2lw_m383.js?dpl=dpl_8x1eZ1xESdy4MWDJhNkE3AjBuGhK"],"SWRDataProvider"] 93:T1bcc0,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette for digital banking style */ --background: oklch(0.98 0.01 220); --foreground: oklch(0.12 0.02 220); --card: oklch(1 0 0); --card-foreground: oklch(0.12 0.02 220); --popover: oklch(1 0 0); --popover-foreground: oklch(0.12 0.02 220); --primary: oklch(0.15 0.04 142); --primary-foreground: oklch(0.98 0.01 220); --secondary: oklch(0.95 0.01 220); --secondary-foreground: oklch(0.12 0.02 220); --muted: oklch(0.9 0.01 220); --muted-foreground: oklch(0.5 0.01 220); --accent: oklch(0.35 0.15 142); --accent-foreground: oklch(0.98 0.01 220); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.95 0.01 220); --input: oklch(0.95 0.01 220); --ring: oklch(0.35 0.15 142); --chart-1: oklch(0.35 0.15 142); --chart-2: oklch(0.5 0.1 142); --chart-3: oklch(0.65 0.08 142); --chart-4: oklch(0.45 0.12 142); --chart-5: oklch(0.55 0.1 142); --radius: 0.625rem; --sidebar: oklch(0.12 0.02 220); --sidebar-foreground: oklch(0.98 0.01 220); --sidebar-primary: oklch(0.35 0.15 142); --sidebar-primary-foreground: oklch(0.98 0.01 220); --sidebar-accent: oklch(0.5 0.1 142); --sidebar-accent-foreground: oklch(0.98 0.01 220); --sidebar-border: oklch(0.25 0.03 220); --sidebar-ring: oklch(0.35 0.15 142); } .dark { /* Dark mode palette for digital banking */ --background: oklch(0.12 0.02 220); --foreground: oklch(0.95 0.01 220); --card: oklch(0.18 0.02 220); --card-foreground: oklch(0.95 0.01 220); --popover: oklch(0.18 0.02 220); --popover-foreground: oklch(0.95 0.01 220); --primary: oklch(0.35 0.15 142); --primary-foreground: oklch(0.12 0.02 220); --secondary: oklch(0.22 0.02 220); --secondary-foreground: oklch(0.95 0.01 220); --muted: oklch(0.3 0.01 220); --muted-foreground: oklch(0.65 0.01 220); --accent: oklch(0.5 0.1 142); --accent-foreground: oklch(0.12 0.02 220); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.25 0.02 220); --input: oklch(0.22 0.02 220); --ring: oklch(0.5 0.1 142); --chart-1: oklch(0.35 0.15 142); --chart-2: oklch(0.5 0.1 142); --chart-3: oklch(0.65 0.08 142); --chart-4: oklch(0.45 0.12 142); --chart-5: oklch(0.55 0.1 142); --sidebar: oklch(0.12 0.02 220); --sidebar-foreground: oklch(0.95 0.01 220); --sidebar-primary: oklch(0.5 0.1 142); --sidebar-primary-foreground: oklch(0.12 0.02 220); --sidebar-accent: oklch(0.35 0.15 142); --sidebar-accent-foreground: oklch(0.95 0.01 220); --sidebar-border: oklch(0.25 0.03 220); --sidebar-ring: oklch(0.5 0.1 142); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/account-card.tsx" isEdit="true" isMerged="true" "use client" import type { Account } from "@/lib/types" interface AccountCardProps { account: Account isSelected?: boolean onSelect?: () => void } export function AccountCard({ account, isSelected, onSelect }: AccountCardProps) { const balance = account.transactions.reduce((sum, t) => sum + (t.type === "income" ? t.amount : -t.amount), 0) return ( ) } [V0_FILE]typescriptreact:file="components/transaction-list.tsx" isEdit="true" isMerged="true" // Este archivo se puede eliminar ya que la funcionalidad está integrada en dashboard.tsx [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "zustand": "5.0.9" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/accounts-manager.tsx" isMerged="true" "use client" import { useState } from "react" import { useFinanceStore } from "@/lib/store" import { Button } from "@/components/ui/button" import { Plus, Trash2, Edit2 } from "lucide-react" import { CreateAccountModal } from "./create-account-modal" import type { Account } from "@/lib/types" export function AccountsManager() { const { accounts, removeAccount } = useFinanceStore() const [showModal, setShowModal] = useState(false) const [editingAccount, setEditingAccount] = useState(null) return (

Gestionar Cuentas

{accounts.length === 0 ? (

No tienes cuentas. Crea una para comenzar.

) : ( accounts.map((account) => { const balance = account.transactions.reduce( (sum, t) => sum + (t.type === "income" ? t.amount : -t.amount), 0, ) return (

{account.name}

{account.currency}

${balance.toFixed(2)}

{account.transactions.length} transacciones

) }) )}

{showModal && setShowModal(false)} editingAccount={editingAccount} />}

) } [V0_FILE]typescriptreact:file="components/create-account-modal.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useFinanceStore } from "@/lib/store" import { Button } from "@/components/ui/button" import { X } from "lucide-react" import type { Currency } from "@/lib/types" interface CreateAccountModalProps { onClose: () => void } export function CreateAccountModal({ onClose }: CreateAccountModalProps) { const { addAccount, accounts } = useFinanceStore() const [name, setName] = useState("") const [currency, setCurrency] = useState("USD") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!name.trim()) return const newAccount = { id: crypto.randomUUID(), name: name.trim(), currency, isPrimary: accounts.length === 0, transactions: [], } addAccount(newAccount) onClose() } return (

Nueva Cuenta

Nombre de la Cuenta * setName(e.target.value)} placeholder="Ej: Mi Cuenta Secundaria" required className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary" />

Moneda *

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Moon, Sun } from "lucide-react" export function ThemeToggle() { const [theme, setTheme] = useState<"light" | "dark" | "system">("system") const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) // Obtener tema guardado o usar sistema const stored = (localStorage.getItem("theme") as "light" | "dark" | "system" | null) || "system" setTheme(stored) applyTheme(stored) }, []) const applyTheme = (newTheme: "light" | "dark" | "system") => { const html = document.documentElement if (newTheme === "system") { const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches html.classList.toggle("dark", isDark) } else { html.classList.toggle("dark", newTheme === "dark") } } const toggleTheme = () => { const themes: Array<"light" | "dark" | "system"> = ["light", "dark", "system"] const currentIndex = themes.indexOf(theme) const newTheme = themes[(currentIndex + 1) % themes.length] setTheme(newTheme) localStorage.setItem("theme", newTheme) applyTheme(newTheme) } if (!mounted) { return

} const isDark = document.documentElement.classList.contains("dark") return ( ) } [V0_FILE]typescriptreact:file="components/onboarding.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useFinanceStore } from "@/lib/store" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { Currency } from "@/lib/types" export function Onboarding() { const { addAccount } = useFinanceStore() const [accountName, setAccountName] = useState("Mi Cuenta Principal") const [currency, setCurrency] = useState("USD") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!accountName.trim()) return const newAccount = { id: crypto.randomUUID(), name: accountName.trim(), currency, isPrimary: true, transactions: [], } addAccount(newAccount) } return (

Chiklin

Finanzas Personales

Bienvenido

Crea tu cuenta principal para comenzar a gestionar tus finanzas

) } [V0_FILE]typescriptreact:file="components/icon-picker.tsx" isMerged="true" "use client" interface IconPickerProps { selectedIcon: string onSelect: (icon: string) => void } const ICONS = [ { id: "utensils", label: "🍴" }, { id: "car", label: "🚗" }, { id: "music", label: "🎵" }, { id: "zap", label: "⚡" }, { id: "heart", label: "❤️" }, { id: "book", label: "📚" }, { id: "shopping-bag", label: "🛍️" }, { id: "home", label: "🏠" }, { id: "plane", label: "✈️" }, { id: "coffee", label: "☕" }, { id: "gift", label: "🎁" }, { id: "phone", label: "📱" }, { id: "laptop", label: "💻" }, { id: "shirt", label: "👕" }, { id: "dumbbell", label: "💪" }, { id: "pill", label: "💊" }, { id: "briefcase", label: "💼" }, { id: "wallet", label: "💰" }, { id: "credit-card", label: "💳" }, { id: "piggy-bank", label: "🐷" }, { id: "chart", label: "📊" }, { id: "movie", label: "🎬" }, { id: "gamepad", label: "🎮" }, { id: "paint", label: "🎨" }, { id: "wrench", label: "🔧" }, { id: "scissors", label: "✂️" }, { id: "bell", label: "🔔" }, { id: "star", label: "⭐" }, { id: "fire", label: "🔥" }, { id: "circle", label: "⚪" }, ] export function IconPicker({ selectedIcon, onSelect }: IconPickerProps) { return (

{ICONS.map((icon) => ( ))}

) } [V0_FILE]typescript:file="lib/types.ts" isEdit="true" isQuickEdit="true" isMerged="true" export type TransactionType = "income" | "expense" export type Currency = "USD" | "EUR" | "VES" export interface Category { id: string name: string } export interface Transaction { id: string type: TransactionType amount: number description: string category: string date: string tags: string[] } export interface Account { id: string name: string currency: Currency isPrimary: boolean transactions: Transaction[] } export interface FinanceState { accounts: Account[] categories: Category[] frequentTags: string[] activeAccountId: string | null } [V0_FILE]typescriptreact:file="components/backup-reminder.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Download, X } from "lucide-react" import { Button } from "@/components/ui/button" const BACKUP_REMINDER_DAYS = 7 // Recordar cada 7 días const LAST_BACKUP_KEY = "chiklin-last-backup" export function BackupReminder() { const [showReminder, setShowReminder] = useState(false) useEffect(() => { // Verificar si necesitamos mostrar el recordatorio const lastBackup = localStorage.getItem(LAST_BACKUP_KEY) const now = Date.now() if (!lastBackup) { // Primera vez, esperar 1 día antes de recordar const oneDayFromNow = now + 24 * 60 * 60 * 1000 if (now > oneDayFromNow) { setShowReminder(true) } } else { const lastBackupTime = Number.parseInt(lastBackup, 10) const daysSinceBackup = (now - lastBackupTime) / (1000 * 60 * 60 * 24) if (daysSinceBackup >= BACKUP_REMINDER_DAYS) { setShowReminder(true) } } }, []) const handleBackup = () => { const data = localStorage.getItem("chiklin-storage") if (data) { const blob = new Blob([data], { type: "application/json" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `chiklin-backup-${new Date().toISOString().split("T")[0]}.json` a.click() URL.revokeObjectURL(url) // Actualizar fecha del último backup localStorage.setItem(LAST_BACKUP_KEY, Date.now().toString()) setShowReminder(false) } } const handleDismiss = () => { // Posponer por 1 día localStorage.setItem(LAST_BACKUP_KEY, Date.now().toString()) setShowReminder(false) } if (!showReminder) return null return (

Recordatorio de Respaldo

Han pasado {BACKUP_REMINDER_DAYS} días desde tu último respaldo. Te recomendamos exportar tus datos para mantenerlos seguros.

) } [V0_FILE]typescriptreact:file="components/category-manager.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useFinanceStore } from "@/lib/store" import { Button } from "@/components/ui/button" import { Plus, Trash2, Edit2 } from "lucide-react" import type { Category } from "@/lib/types" export function CategoryManager() { const { categories, addCategory, updateCategory, removeCategory } = useFinanceStore() const [showForm, setShowForm] = useState(false) const [editingCategory, setEditingCategory] = useState(null) const [name, setName] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!name.trim()) return if (editingCategory) { updateCategory(editingCategory.id, { name }) } else { addCategory({ id: crypto.randomUUID(), name, }) } setName("") setShowForm(false) setEditingCategory(null) } const handleEdit = (category: Category) => { setEditingCategory(category) setName(category.name) setShowForm(true) } const handleCancel = () => { setName("") setShowForm(false) setEditingCategory(null) } const sortedCategories = [...categories].sort((a, b) => a.name.localeCompare(b.name)) return (

Categorías

{!showForm && ( )}

{showForm && ( )}

{sortedCategories.length === 0 ? (

No hay categorías

) : ( sortedCategories.map((category) => (

{category.name}

)) )}

) } [V0_FILE]jpg:file="public/icon-dark-32x32.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-dark-32x32-Fbe1nKiW33cEnWDwojl4qyMzobnOOh.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/layout.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Menu, X, Wallet } from "lucide-react" import { Sidebar } from "./sidebar" import { Dashboard } from "./dashboard" import { AccountSelector } from "./account-selector" import { useFinanceStore } from "@/lib/store" import { BackupReminder } from "./backup-reminder" interface LayoutProps { activeTab?: "expense" | "income" } export function Layout({ activeTab }: LayoutProps = {}) { const [sidebarOpen, setSidebarOpen] = useState(false) const { setActiveAccount, activeAccountId } = useFinanceStore() const mainBgClass = activeTab === "income" ? "bg-accent/10" : "bg-background" return (

{/* Sidebar */} setSidebarOpen(false)} /> {/* Main Content */}

{/* Header */}

Chiklin

{/* Main Content */}

{/* Overlay para cerrar sidebar en móvil */} {sidebarOpen && (

setSidebarOpen(false)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Escape") setSidebarOpen(false) }} /> )}

) } [V0_FILE]typescriptreact:file="components/account-selector.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { useFinanceStore } from "@/lib/store" import { ChevronDown } from "lucide-react" interface AccountSelectorProps { onSelect: (accountId: string) => void selectedId?: string } export function AccountSelector({ onSelect, selectedId }: AccountSelectorProps) { const { accounts } = useFinanceStore() const [open, setOpen] = useState(false) const dropdownRef = useRef(null) const selected = accounts.find((a) => a.id === selectedId) || accounts[0] useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setOpen(false) } } if (open) { document.addEventListener("mousedown", handleClickOutside) } return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [open]) if (!selected) return null return (

{open && (

{accounts.map((account) => ( ))}

)}

) } [V0_FILE]typescript:file="lib/store.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { create } from "zustand" import { persist } from "zustand/middleware" import type { FinanceState, Account, Transaction, Category } from "./types" interface FinanceStore extends FinanceState { setActiveAccount: (accountId: string) => void addAccount: (account: Account) => void updateAccount: (accountId: string, updates: Partial) => void removeAccount: (accountId: string) => void setPrimaryAccount: (accountId: string) => void addTransaction: (accountId: string, transaction: Transaction) => void removeTransaction: (accountId: string, transactionId: string) => void updateTransaction: (accountId: string, transactionId: string, transaction: Partial) => void getAccountBalance: (accountId: string) => number addCategory: (category: Category) => void updateCategory: (categoryId: string, updates: Partial) => void removeCategory: (categoryId: string) => void addFrequentTag: (tag: string) => void removeFrequentTag: (tag: string) => void getTransactionsByMonth: (accountId: string, year: number, month: number) => Transaction[] } const DEFAULT_CATEGORIES: Category[] = [ { id: "1", name: "Alimentación", icon: "utensils", color: "#10b981" }, { id: "2", name: "Transporte", icon: "car", color: "#3b82f6" }, { id: "3", name: "Entretenimiento", icon: "music", color: "#8b5cf6" }, { id: "4", name: "Servicios", icon: "zap", color: "#f59e0b" }, { id: "5", name: "Salud", icon: "heart", color: "#ef4444" }, { id: "6", name: "Educación", icon: "book", color: "#06b6d4" }, { id: "7", name: "Compras", icon: "shopping-bag", color: "#ec4899" }, ] const initialState: FinanceState = { accounts: [], categories: DEFAULT_CATEGORIES, frequentTags: [], activeAccountId: null, } export const useFinanceStore = create()( persist( (set, get) => ({ ...initialState, setActiveAccount: (accountId) => set(() => ({ activeAccountId: accountId, })), addAccount: (account) => set((state) => { const newAccounts = [...state.accounts, account] return { accounts: newAccounts, activeAccountId: account.isPrimary ? account.id : state.activeAccountId, } }), updateAccount: (accountId, updates) => set((state) => ({ accounts: state.accounts.map((account) => (account.id === accountId ? { ...account, ...updates } : account)), })), removeAccount: (accountId) => set((state) => { const newAccounts = state.accounts.filter((a) => a.id !== accountId) let newActiveAccountId = state.activeAccountId if (state.activeAccountId === accountId) { newActiveAccountId = newAccounts.length > 0 ? newAccounts[0].id : null } return { accounts: newAccounts, activeAccountId: newActiveAccountId, } }), setPrimaryAccount: (accountId) => set((state) => ({ accounts: state.accounts.map((account) => ({ ...account, isPrimary: account.id === accountId, })), activeAccountId: accountId, })), addTransaction: (accountId, transaction) => set((state) => ({ accounts: state.accounts.map((account) => account.id === accountId ? { ...account, transactions: [...account.transactions, transaction] } : account, ), })), removeTransaction: (accountId, transactionId) => set((state) => ({ accounts: state.accounts.map((account) => account.id === accountId ? { ...account, transactions: account.transactions.filter((t) => t.id !== transactionId), } : account, ), })), updateTransaction: (accountId, transactionId, updates) => set((state) => ({ accounts: state.accounts.map((account) => account.id === accountId ? { ...account, transactions: account.transactions.map((t) => (t.id === transactionId ? { ...t, ...updates } : t)), } : account, ), })), getAccountBalance: (accountId) => { const { accounts } = get() const account = accounts.find((a) => a.id === accountId) if (!account) return 0 return account.transactions.reduce((sum, t) => sum + (t.type === "income" ? t.amount : -t.amount), 0) }, addCategory: (category) => set((state) => ({ categories: [...state.categories, category].sort((a, b) => a.name.localeCompare(b.name)), })), updateCategory: (categoryId, updates) => set((state) => ({ categories: state.categories .map((cat) => (cat.id === categoryId ? { ...cat, ...updates } : cat)) .sort((a, b) => a.name.localeCompare(b.name)), })), removeCategory: (categoryId) => set((state) => ({ categories: state.categories.filter((c) => c.id !== categoryId), })), addFrequentTag: (tag) => set((state) => ({ frequentTags: [...new Set([...state.frequentTags, tag])], })), removeFrequentTag: (tag) => set((state) => ({ frequentTags: state.frequentTags.filter((t) => t !== tag), })), getTransactionsByMonth: (accountId, year, month) => { const { accounts } = get() const account = accounts.find((a) => a.id === accountId) if (!account) return [] return account.transactions .filter((t) => { const [tYear, tMonth] = t.date.split("-").map(Number) return tYear === year && tMonth === month + 1 }) .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) }, }), { name: "chiklin-storage", version: 2, migrate: (persistedState: any, version: number) => { if (version < 2) { const oldState = persistedState as any const migratedCategories: Category[] = Array.isArray(oldState.categories) ? oldState.categories.map((name: string, index: number) => ({ id: crypto.randomUUID(), name, icon: "circle", color: "#6b7280", })) : DEFAULT_CATEGORIES const migratedAccounts: Account[] = Array.isArray(oldState.accounts) ? oldState.accounts.map((account: any, index: number) => ({ ...account, isPrimary: index === 0, })) : [] return { accounts: migratedAccounts, categories: migratedCategories.sort((a, b) => a.name.localeCompare(b.name)), frequentTags: oldState.frequentTags || [], activeAccountId: migratedAccounts.length > 0 ? migratedAccounts[0].id : null, } as FinanceState } return persistedState as FinanceState }, }, ), ) [V0_FILE]typescriptreact:file="components/transaction-item.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Trash2, Edit } from "lucide-react" import type { Transaction } from "@/lib/types" interface TransactionItemProps { transaction: Transaction currencySymbol: string onDelete: () => void onEdit: () => void } export function TransactionItem({ transaction, currencySymbol, onDelete, onEdit }: TransactionItemProps) { const isIncome = transaction.type === "income" const formatDate = (dateString: string) => { const [year, month, day] = dateString.split("-") return `${day}/${month}/${year}` } return (

{transaction.category}

{transaction.description &&

{transaction.description}

} {transaction.tags.length > 0 && (

{transaction.tags.map((tag) => ( {tag} ))}

)}

{isIncome ? "+" : "-"} {currencySymbol} {transaction.amount.toFixed(2)}

{formatDate(transaction.date)}

) } [V0_FILE]typescriptreact:file="components/transaction-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { useFinanceStore } from "@/lib/store" import { Button } from "@/components/ui/button" import { X, Plus, CalculatorIcon } from "lucide-react" import type { Transaction, TransactionType } from "@/lib/types" import { Calculator } from "./calculator" const getLocalDateString = (date: Date = new Date()): string => { const year = date.getFullYear() const month = String(date.getMonth() + 1).padStart(2, "0") const day = String(date.getDate()).padStart(2, "0") return `${year}-${month}-${day}` } interface TransactionFormProps { accountId: string transactionType: TransactionType onClose: () => void editingTransaction?: Transaction } export function TransactionForm({ accountId, transactionType, onClose, editingTransaction }: TransactionFormProps) { const { addTransaction, updateTransaction, categories, frequentTags, addFrequentTag, addCategory } = useFinanceStore() const [amount, setAmount] = useState(editingTransaction?.amount.toString() || "") const [description, setDescription] = useState(editingTransaction?.description || "") const [category, setCategory] = useState(editingTransaction?.category || "") const [date, setDate] = useState(editingTransaction?.date || getLocalDateString()) const [selectedTags, setSelectedTags] = useState(editingTransaction?.tags || []) const textareaRef = useRef(null) const amountRef = useRef(null) const [showCalculator, setShowCalculator] = useState(false) const categoryRef = useRef(null) const [showNewTagInput, setShowNewTagInput] = useState(false) const [newTag, setNewTag] = useState("") const [showNewCategoryInput, setShowNewCategoryInput] = useState(false) const [newCategory, setNewCategory] = useState("") useEffect(() => { if (amountRef.current) { amountRef.current.focus() } }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!amount.trim() || !category.trim()) return const transaction = { id: editingTransaction?.id || crypto.randomUUID(), type: transactionType, amount: Number.parseFloat(amount), description, category, date, tags: selectedTags, } if (editingTransaction) { updateTransaction(accountId, editingTransaction.id, transaction) } else { addTransaction(accountId, transaction) } onClose() } const toggleTag = (tag: string) => { setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag])) } const insertTagInDescription = (tag: string) => { const textarea = textareaRef.current if (!textarea) return const start = textarea.selectionStart const end = textarea.selectionEnd const text = description const before = text.substring(0, start) const after = text.substring(end) const prefix = before.length > 0 && !before.endsWith(" ") ? " " : "" const suffix = after.length > 0 && !after.startsWith(" ") ? " " : "" const newText = before + prefix + `#${tag}` + suffix + after setDescription(newText) textarea.blur() setTimeout(() => { const newPosition = start + prefix.length + tag.length + 1 + suffix.length textarea.focus() textarea.setSelectionRange(newPosition, newPosition) }, 100) } const handleAddNewTag = () => { if (newTag.trim() && !frequentTags.includes(newTag.trim())) { addFrequentTag(newTag.trim()) insertTagInDescription(newTag.trim()) setNewTag("") setShowNewTagInput(false) } } const handleAddNewCategory = () => { if (newCategory.trim() && !categories.some((cat) => cat.name === newCategory.trim())) { const newCat = { id: crypto.randomUUID(), name: newCategory.trim(), icon: "circle", color: "#6b7280", } addCategory(newCat) setCategory(newCat.name) setNewCategory("") setShowNewCategoryInput(false) } } const sortedCategories = [...categories].sort((a, b) => a.name.localeCompare(b.name)) const handleCalculatorInsert = (value: string) => { setAmount(value) setShowCalculator(false) setTimeout(() => { if (categoryRef.current) { categoryRef.current.focus() } }, 100) } return (

{editingTransaction ? "Editar" : "Nuevo"} {transactionType === "expense" ? "Gasto" : "Ingreso"}

Monto * setAmount(e.target.value)} placeholder="0.00" required inputMode="decimal" className="w-full text-center text-4xl font-bold border-none bg-transparent text-foreground focus:outline-none focus:ring-0 placeholder:text-muted-foreground/40" />

{showCalculator && ( setShowCalculator(false)} /> )}

Fecha * setDate(e.target.value)} required className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary" />

Categoría * {!showNewCategoryInput ? ( <> ) : (

setNewCategory(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault() handleAddNewCategory() } if (e.key === "Escape") { setShowNewCategoryInput(false) setNewCategory("") } }} placeholder="Nombre de la categoría" className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary" autoFocus />

)}

Descripción *

setDescription(e.target.value)}
              placeholder="Describe la transacción..."
              rows={3}
              required
              className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary resize-none"
            />
          </div>

{frequentTags.length > 0 && (
            <div>
              <label className="block text-sm font-medium text-foreground mb-2">Etiquetas (Opcional)</label>
              <p className="text-xs text-muted-foreground mb-2">
                Haz clic en una etiqueta para insertarla en la descripción
              </p>
              <div className="flex flex-wrap gap-2">
                {frequentTags.map((tag) => (
                  <button
                    key={tag}
                    type="button"
                    onClick={() => insertTagInDescription(tag)}
                    className="px-3 py-1 rounded-full text-sm font-medium transition-colors bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground"
                  >
                    {tag}
                  </button>
                ))}
                {!showNewTagInput ? (
                  <button
                    type="button"
                    onClick={() => setShowNewTagInput(true)}
                    className="px-3 py-1 rounded-full text-sm font-medium transition-colors border-2 border-dashed border-muted-foreground/30 text-muted-foreground hover:border-primary hover:text-primary"
                  >
                    <Plus className="w-4 h-4 inline-block mr-1" />
                    Nueva
                  </button>
                ) : (
                  <div className="flex gap-2 w-full">
                    <input
                      type="text"
                      value={newTag}
                      onChange={(e) => setNewTag(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          e.preventDefault()
                          handleAddNewTag()
                        }
                        if (e.key === "Escape") {
                          setShowNewTagInput(false)
                          setNewTag("")
                        }
                      }}
                      placeholder="Nombre de la etiqueta"
                      className="flex-1 px-3 py-1 text-sm border border-border rounded-full bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                      autoFocus
                    />
                    <button
                      type="button"
                      onClick={handleAddNewTag}
                      className="px-3 py-1 rounded-full text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90"
                    >
                      Agregar
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        setShowNewTagInput(false)
                        setNewTag("")
                      }}
                      className="px-3 py-1 rounded-full text-sm font-medium bg-muted text-muted-foreground hover:bg-muted/80"
                    >
                      Cancelar
                    </button>
                  </div>
                )}
              </div>
            </div>
          )}

{frequentTags.length === 0 && (
            <div>
              <label className="block text-sm font-medium text-foreground mb-2">Etiquetas (Opcional)</label>
              {!showNewTagInput ? (
                <button
                  type="button"
                  onClick={() => setShowNewTagInput(true)}
                  className="w-full px-4 py-3 rounded-lg text-sm font-medium transition-colors border-2 border-dashed border-muted-foreground/30 text-muted-foreground hover:border-primary hover:text-primary"
                >
                  <Plus className="w-4 h-4 inline-block mr-1" />
                  Crear primera etiqueta
                </button>
              ) : (
                <div className="flex gap-2">
                  <input
                    type="text"
                    value={newTag}
                    onChange={(e) => setNewTag(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault()
                        handleAddNewTag()
                      }
                      if (e.key === "Escape") {
                        setShowNewTagInput(false)
                        setNewTag("")
                      }
                    }}
                    placeholder="Nombre de la etiqueta"
                    className="flex-1 px-3 py-2 text-sm border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                    autoFocus
                  />
                  <button
                    type="button"
                    onClick={handleAddNewTag}
                    className="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90"
                  >
                    Crear
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      setShowNewTagInput(false)
                      setNewTag("")
                    }}
                    className="px-4 py-2 rounded-lg text-sm font-medium bg-muted text-muted-foreground hover:bg-muted/80"
                  >
                    Cancelar
                  </button>
                </div>
              )}
            </div>
          )}

<div className="flex gap-3 pt-4">
            <Button type="button" variant="outline" onClick={onClose} className="flex-1 bg-transparent">
              Cancelar
            </Button>
            <Button type="submit" className="flex-1">
              Guardar
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/calculator.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { X } from "lucide-react"

interface CalculatorProps {
  onInsert: (value: string) => void
  onClose: () => void
}

export function Calculator({ onInsert, onClose }: CalculatorProps) {
  const [display, setDisplay] = useState("0")
  const [expressionHistory, setExpressionHistory] = useState("")
  const [previousValue, setPreviousValue] = useState<string | null>(null)
  const [operation, setOperation] = useState<string | null>(null)
  const [resetDisplay, setResetDisplay] = useState(false)

const handleNumber = (num: string) => {
    if (resetDisplay) {
      setDisplay(num)
      setResetDisplay(false)
    } else {
      setDisplay(display === "0" ? num : display + num)
    }
  }

const handleDecimal = () => {
    if (resetDisplay) {
      setDisplay("0.")
      setResetDisplay(false)
    } else if (!display.includes(".")) {
      setDisplay(display + ".")
    }
  }

const handleOperation = (op: string) => {
    if (previousValue !== null && operation !== null && !resetDisplay) {
      const prev = Number.parseFloat(previousValue)
      const current = Number.parseFloat(display)
      let result = 0

switch (operation) {
        case "+":
          result = prev + current
          break
        case "-":
          result = prev - current
          break
        case "×":
          result = prev * current
          break
        case "÷":
          result = current !== 0 ? prev / current : 0
          break
      }

setExpressionHistory(expressionHistory + display + " " + op + " ")
      setDisplay(result.toString())
      setPreviousValue(result.toString())
    } else {
      setExpressionHistory(expressionHistory + display + " " + op + " ")
      setPreviousValue(display)
    }
    setOperation(op)
    setResetDisplay(true)
  }

const handleEquals = () => {
    if (previousValue === null || operation === null) return

const prev = Number.parseFloat(previousValue)
    const current = Number.parseFloat(display)
    let result = 0

switch (operation) {
      case "+":
        result = prev + current
        break
      case "-":
        result = prev - current
        break
      case "×":
        result = prev * current
        break
      case "÷":
        result = current !== 0 ? prev / current : 0
        break
    }

setExpressionHistory(expressionHistory + display + " =")
    setDisplay(result.toString())
    setPreviousValue(null)
    setOperation(null)
    setResetDisplay(true)
  }

const handleClear = () => {
    setDisplay("0")
    setExpressionHistory("")
    setPreviousValue(null)
    setOperation(null)
    setResetDisplay(false)
  }

const handleInsert = () => {
    onInsert(display)
  }

return (
    <div className="absolute top-full left-0 right-0 mt-2 bg-background border border-border rounded-lg shadow-2xl p-4 z-10">
      <div className="flex justify-between items-center mb-4">
        <span className="text-sm font-medium text-muted-foreground">Calculadora</span>
        <button onClick={onClose} className="p-1 hover:bg-muted rounded transition-colors">
          <X className="w-4 h-4 text-muted-foreground" />
        </button>
      </div>

<div className="bg-muted/30 rounded-lg p-4 mb-4 text-right min-h-[80px] flex flex-col justify-end">
        <div className="text-sm text-muted-foreground mb-1 min-h-[20px] break-all">{expressionHistory || " "}</div>
        <div className="text-3xl font-bold text-foreground truncate">{display}</div>
      </div>

<div className="grid grid-cols-4 gap-2">
        <Button
          type="button"
          onClick={handleClear}
          className="col-span-2 bg-muted hover:bg-muted/80 text-foreground font-semibold text-lg h-14"
        >
          C
        </Button>
        <Button
          type="button"
          onClick={() => handleOperation("÷")}
          className="bg-blue-500/20 hover:bg-blue-500/30 text-foreground font-semibold text-lg h-14"
        >
          ÷
        </Button>
        <Button
          type="button"
          onClick={() => handleOperation("×")}
          className="bg-blue-500/20 hover:bg-blue-500/30 text-foreground font-semibold text-lg h-14"
        >
          ×
        </Button>

{[7, 8, 9].map((num) => (
          <Button
            key={num}
            type="button"
            onClick={() => handleNumber(num.toString())}
            className="bg-card hover:bg-muted text-foreground font-semibold text-lg h-14 border border-border"
          >
            {num}
          </Button>
        ))}
        <Button
          type="button"
          onClick={() => handleOperation("-")}
          className="bg-blue-500/20 hover:bg-blue-500/30 text-foreground font-semibold text-lg h-14"
        >
          -
        </Button>

{[4, 5, 6].map((num) => (
          <Button
            key={num}
            type="button"
            onClick={() => handleNumber(num.toString())}
            className="bg-card hover:bg-muted text-foreground font-semibold text-lg h-14 border border-border"
          >
            {num}
          </Button>
        ))}
        <Button
          type="button"
          onClick={() => handleOperation("+")}
          className="bg-blue-500/20 hover:bg-blue-500/30 text-foreground font-semibold text-lg h-14"
        >
          +
        </Button>

{[1, 2, 3].map((num) => (
          <Button
            key={num}
            type="button"
            onClick={() => handleNumber(num.toString())}
            className="bg-card hover:bg-muted text-foreground font-semibold text-lg h-14 border border-border"
          >
            {num}
          </Button>
        ))}
        <Button
          type="button"
          onClick={handleEquals}
          className="row-span-2 bg-blue-500 hover:bg-blue-600 text-white font-bold text-2xl h-auto"
        >
          =
        </Button>

<Button
          type="button"
          onClick={() => handleNumber("0")}
          className="col-span-2 bg-card hover:bg-muted text-foreground font-semibold text-lg h-14 border border-border"
        >
          0
        </Button>
        <Button
          type="button"
          onClick={handleDecimal}
          className="bg-card hover:bg-muted text-foreground font-semibold text-lg h-14 border border-border"
        >
          .
        </Button>
      </div>

<Button
        type="button"
        onClick={handleInsert}
        className="w-full mt-4 bg-blue-500 hover:bg-blue-600 text-white font-bold text-lg h-14"
      >
        Insertar
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Home, Wallet, Settings } from "lucide-react"
import { SettingsModal } from "./settings-modal"
import { CreateAccountModal } from "./create-account-modal"

interface SidebarProps {
  open: boolean
  onClose: () => void
}

export function Sidebar({ open, onClose }: SidebarProps) {
  const [showSettings, setShowSettings] = useState(false)
  const [showCreateAccount, setShowCreateAccount] = useState(false)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) return null

return (
    <>
      {/* Sidebar Desktop */}
      <aside className="hidden md:flex md:w-64 bg-sidebar border-r border-sidebar-border flex-col">
        <div className="p-6 border-b border-sidebar-border">
          <h2 className="text-2xl font-bold text-sidebar-foreground">Chiklin</h2>
          <p className="text-xs text-sidebar-foreground/60 mt-2">Finanzas Personales</p>
        </div>

<nav className="flex-1 p-4 space-y-2">
          <SidebarLink
            icon={Home}
            label="Dashboard"
            href="#dashboard"
            onClick={() => {
              document.getElementById("dashboard")?.scrollIntoView({ behavior: "smooth" })
            }}
          />
          <SidebarLink
            icon={Wallet}
            label="Nueva Cuenta"
            href="#new-account"
            onClick={() => setShowCreateAccount(true)}
          />
          <SidebarLink icon={Settings} label="Configuración" href="#settings" onClick={() => setShowSettings(true)} />
        </nav>
      </aside>

{/* Sidebar Mobile */}
      <aside
        className={`fixed left-0 top-0 h-full w-64 bg-sidebar border-r border-sidebar-border z-50 transform transition-transform duration-300 ${
          open ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="p-6 border-b border-sidebar-border">
          <h2 className="text-2xl font-bold text-sidebar-foreground">Chiklin</h2>
          <p className="text-xs text-sidebar-foreground/60 mt-2">Finanzas Personales</p>
        </div>

<nav className="p-4 space-y-2">
          <SidebarLink
            icon={Home}
            label="Dashboard"
            href="#dashboard"
            onClick={() => {
              onClose()
              document.getElementById("dashboard")?.scrollIntoView({ behavior: "smooth" })
            }}
          />
          <SidebarLink
            icon={Wallet}
            label="Nueva Cuenta"
            href="#new-account"
            onClick={() => {
              setShowCreateAccount(true)
              onClose()
            }}
          />
          <SidebarLink
            icon={Settings}
            label="Configuración"
            href="#settings"
            onClick={() => {
              setShowSettings(true)
              onClose()
            }}
          />
        </nav>
      </aside>

{/* Modals */}
      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
      {showCreateAccount && <CreateAccountModal onClose={() => setShowCreateAccount(false)} />}
    </>
  )
}

interface SidebarLinkProps {
  icon: React.ComponentType<{ className?: string }>
  label: string
  href: string
  onClick?: () => void
}

function SidebarLink({ icon: Icon, label, href, onClick }: SidebarLinkProps) {
  return (
    <a
      href={href}
      onClick={(e) => {
        e.preventDefault()
        onClick?.()
      }}
      className="flex items-center gap-3 px-4 py-3 rounded-lg text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors cursor-pointer"
    >
      <Icon className="w-5 h-5" />
      <span className="font-medium">{label}</span>
    </a>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata, Viewport } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import "./globals.css"
import type React from "react"
import ClientLayout from "./client-layout"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Chiklin - Finanzas Personales",
  description: "App PWA de gestión de finanzas personales con múltiples cuentas y seguimiento de transacciones",
  generator: "v0.app",
  applicationName: "Chiklin",
  authors: [{ name: "Chiklin" }],
  manifest: "/manifest.json",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#f7f7f7" },
    { media: "(prefers-color-scheme: dark)", color: "#1f1f1f" },
  ],
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        <ClientLayout>{children}</ClientLayout>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/client-layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { Analytics } from "@vercel/analytics/next"
import React from "react"

export default function ClientLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  React.useEffect(() => {
    const handleError = (event: ErrorEvent) => {
      if (event.message.includes("ResizeObserver")) {
        event.stopImmediatePropagation()
        event.preventDefault()
        return true
      }
    }

window.addEventListener("error", handleError)
    return () => window.removeEventListener("error", handleError)
  }, [])

return (
    <>
      {children}
      <Analytics />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useFinanceStore } from "@/lib/store"
import { TransactionItem } from "./transaction-item"
import { TransactionForm } from "./transaction-form"
import { Button } from "@/components/ui/button"
import { Plus, ChevronLeft, ChevronRight, Calendar, X, ChevronDown, ChevronUp } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { Transaction, TransactionType } from "@/lib/types"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar as CalendarComponent } from "@/components/ui/calendar"

const CURRENCY_SYMBOLS = {
  USD: "$",
  EUR: "€",
  VES: "Bs.",
}

const CATEGORY_COLORS = [
  "bg-blue-500",
  "bg-purple-500",
  "bg-pink-500",
  "bg-orange-500",
  "bg-teal-500",
  "bg-indigo-500",
  "bg-cyan-500",
  "bg-amber-500",
  "bg-lime-500",
  "bg-emerald-500",
  "bg-violet-500",
  "bg-fuchsia-500",
  "bg-rose-500",
  "bg-sky-500",
  "bg-yellow-500",
]

const getCategoryColor = (category: string, index: number): string => {
  return CATEGORY_COLORS[index % CATEGORY_COLORS.length]
}

export function Dashboard() {
  const { accounts, activeAccountId, getAccountBalance, removeTransaction, getTransactionsByMonth } = useFinanceStore()
  const [mounted, setMounted] = useState(false)
  const [selectedMonth, setSelectedMonth] = useState(new Date())
  const [showTransactionForm, setShowTransactionForm] = useState(false)
  const [activeTab, setActiveTab] = useState<TransactionType>("expense")
  const [editingTransaction, setEditingTransaction] = useState<Transaction | undefined>(undefined)
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())

const [dateRange, setDateRange] = useState<{ from: Date | undefined; to: Date | undefined }>({
    from: undefined,
    to: undefined,
  })
  const [isCustomRange, setIsCustomRange] = useState(false)
  const [showDatePicker, setShowDatePicker] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

useEffect(() => {
    const mainElement = document.querySelector("main")
    if (mainElement) {
      if (activeTab === "income") {
        mainElement.classList.add("bg-accent/10")
        mainElement.classList.remove("bg-background")
      } else {
        mainElement.classList.add("bg-background")
        mainElement.classList.remove("bg-accent/10")
      }
    }
  }, [activeTab])

if (!mounted || !activeAccountId) {
    return null
  }

const activeAccount = accounts.find((a) => a.id === activeAccountId)
  if (!activeAccount) return null

const getFilteredTransactions = (): Transaction[] => {
    if (isCustomRange && dateRange.from && dateRange.to) {
      const fromStr = dateRange.from.toISOString().split("T")[0]
      const toStr = dateRange.to.toISOString().split("T")[0]

return activeAccount.transactions
        .filter((t) => {
          return t.date >= fromStr && t.date <= toStr
        })
        .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    }
    return getTransactionsByMonth(activeAccountId, selectedMonth.getFullYear(), selectedMonth.getMonth())
  }

const filteredTransactions = getFilteredTransactions()
  const balance = filteredTransactions.reduce((sum, t) => sum + (t.type === "income" ? t.amount : -t.amount), 0)

const currencySymbol = CURRENCY_SYMBOLS[activeAccount.currency]

const isPositive = balance >= 0
  const balanceColor = isPositive ? "text-green-500" : "text-destructive"

const expenseTransactions = filteredTransactions.filter((t) => t.type === "expense")
  const incomeTransactions = filteredTransactions.filter((t) => t.type === "income")

const totalExpenses = expenseTransactions.reduce((sum, t) => sum + t.amount, 0)
  const totalIncome = incomeTransactions.reduce((sum, t) => sum + t.amount, 0)

const previousMonth = () => {
    setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() - 1))
  }

const nextMonth = () => {
    setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() + 1))
  }

const monthString = selectedMonth.toLocaleDateString("es-ES", {
    month: "long",
    year: "numeric",
  })

const handleApplyDateRange = () => {
    if (dateRange.from && dateRange.to) {
      setIsCustomRange(true)
      setShowDatePicker(false)
    }
  }

const handleClearFilter = () => {
    setIsCustomRange(false)
    setDateRange({ from: undefined, to: undefined })
    setSelectedMonth(new Date())
  }

const customRangeString =
    dateRange.from && dateRange.to
      ? `${dateRange.from.toLocaleDateString("es-ES", { day: "2-digit", month: "short" })} - ${dateRange.to.toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" })}`
      : "Seleccionar rango"

const handleEditTransaction = (transaction: Transaction) => {
    setEditingTransaction(transaction)
    setActiveTab(transaction.type)
    setShowTransactionForm(true)
  }

const handleCloseForm = () => {
    setShowTransactionForm(false)
    setEditingTransaction(undefined)
  }

const groupTransactionsByCategory = (transactions: Transaction[]) => {
    const grouped = new Map<string, { transactions: Transaction[]; total: number }>()

transactions.forEach((transaction) => {
      const category = transaction.category
      if (!grouped.has(category)) {
        grouped.set(category, { transactions: [], total: 0 })
      }
      const group = grouped.get(category)!
      group.transactions.push(transaction)
      group.total += transaction.amount
    })

return Array.from(grouped.entries())
      .sort(([, a], [, b]) => b.total - a.total)
      .map(([category, data]) => ({
        category,
        transactions: data.transactions.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
        total: data.total,
      }))
  }

const toggleCategory = (category: string) => {
    const newExpanded = new Set(expandedCategories)
    if (newExpanded.has(category)) {
      newExpanded.delete(category)
    } else {
      newExpanded.add(category)
    }
    setExpandedCategories(newExpanded)
  }

return (
    <div className="space-y-6 p-4 md:p-6 pb-20">
      <div className="text-center space-y-2">
        <p className="text-sm text-muted-foreground font-medium">Saldo Global</p>
        <h1 className={`text-5xl md:text-6xl font-bold ${balanceColor}`}>
          {!isPositive && "-"}
          {currencySymbol}
          {Math.abs(balance).toFixed(2)}
        </h1>
        <p className="text-sm text-muted-foreground">{activeAccount.name}</p>
      </div>

<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TransactionType)} className="w-full">
        <TabsList className="grid w-full grid-cols-2 h-12">
          <TabsTrigger value="expense" className="text-base font-semibold">
            Gastos
          </TabsTrigger>
          <TabsTrigger value="income" className="text-base font-semibold">
            Ingresos
          </TabsTrigger>
        </TabsList>

<TabsContent value="expense" className="space-y-4 mt-6">
          <div className="flex justify-center">
            <div className="bg-card border border-border rounded-lg p-4 text-center min-w-[280px]">
              <p className="text-sm text-muted-foreground mb-1">Total de Gastos</p>
              <p className="text-3xl font-bold text-destructive">
                {currencySymbol}
                {totalExpenses.toFixed(2)}
              </p>
            </div>
          </div>

<div className="flex justify-between items-center gap-2">
            {!isCustomRange ? (
              <>
                <button
                  onClick={previousMonth}
                  className="p-2 hover:bg-muted rounded transition-colors"
                  aria-label="Mes anterior"
                >
                  <ChevronLeft className="w-5 h-5" />
                </button>
                <Popover open={showDatePicker} onOpenChange={setShowDatePicker}>
                  <PopoverTrigger asChild>
                    <button className="flex items-center gap-2 text-sm font-medium text-muted-foreground capitalize hover:text-foreground transition-colors">
                      <Calendar className="w-4 h-4" />
                      <span>{monthString}</span>
                    </button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-4" align="center">
                    <div className="space-y-4">
                      <p className="text-sm font-medium">Selecciona un rango de fechas:</p>
                      <CalendarComponent
                        mode="range"
                        selected={dateRange}
                        onSelect={(range) => setDateRange(range || { from: undefined, to: undefined })}
                        numberOfMonths={1}
                      />
                      <Button
                        onClick={handleApplyDateRange}
                        disabled={!dateRange.from || !dateRange.to}
                        className="w-full"
                      >
                        Aplicar Filtro
                      </Button>
                    </div>
                  </PopoverContent>
                </Popover>
                <button
                  onClick={nextMonth}
                  className="p-2 hover:bg-muted rounded transition-colors"
                  aria-label="Mes siguiente"
                >
                  <ChevronRight className="w-5 h-5" />
                </button>
              </>
            ) : (
              <div className="flex items-center justify-center gap-2 w-full">
                <span className="text-sm font-medium text-muted-foreground">{customRangeString}</span>
                <Button onClick={handleClearFilter} variant="ghost" size="sm" className="h-8">
                  <X className="w-4 h-4 mr-1" />
                  Limpiar
                </Button>
              </div>
            )}
          </div>

<div className="space-y-2">
            {expenseTransactions.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-muted-foreground">
                  {isCustomRange ? "No hay gastos en el rango seleccionado" : `No hay gastos en ${monthString}`}
                </p>
              </div>
            ) : (
              groupTransactionsByCategory(expenseTransactions).map((group, index) => {
                const percentage = totalExpenses > 0 ? ((group.total / totalExpenses) * 100).toFixed(1) : "0.0"
                const categoryColor = getCategoryColor(group.category, index)

return (
                  <div key={group.category} className="border border-border rounded-lg overflow-hidden">
                    <button
                      onClick={() => toggleCategory(group.category)}
                      className="w-full flex items-center justify-between p-4 bg-card hover:bg-muted/50 transition-colors"
                    >
                      <div className="flex items-center gap-3">
                        <div className={`w-3 h-3 rounded-full ${categoryColor}`} />
                        <div className="text-left">
                          <div className="flex items-center gap-2">
                            <p className="font-semibold text-foreground">{group.category}</p>
                            <span className="text-sm font-medium text-muted-foreground">{percentage}%</span>
                          </div>
                          <p className="text-xs text-muted-foreground">
                            {group.transactions.length} {group.transactions.length === 1 ? "registro" : "registros"}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <p className="font-bold text-lg text-destructive">
                          {currencySymbol}
                          {group.total.toFixed(2)}
                        </p>
                        {expandedCategories.has(group.category) ? (
                          <ChevronUp className="w-5 h-5 text-muted-foreground" />
                        ) : (
                          <ChevronDown className="w-5 h-5 text-muted-foreground" />
                        )}
                      </div>
                    </button>

{expandedCategories.has(group.category) && (
                      <div className="border-t border-border bg-muted/20">
                        {group.transactions.map((transaction) => (
                          <div key={transaction.id} className="border-b border-border last:border-b-0">
                            <TransactionItem
                              transaction={transaction}
                              currencySymbol={currencySymbol}
                              onDelete={() => removeTransaction(activeAccountId, transaction.id)}
                              onEdit={() => handleEditTransaction(transaction)}
                            />
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                )
              })
            )}
          </div>
        </TabsContent>

<TabsContent value="income" className="space-y-4 mt-6">
          <div className="flex justify-center">
            <div className="bg-card border border-border rounded-lg p-4 text-center min-w-[280px]">
              <p className="text-sm text-muted-foreground mb-1">Total de Ingresos</p>
              <p className="text-3xl font-bold text-green-500">
                {currencySymbol}
                {totalIncome.toFixed(2)}
              </p>
            </div>
          </div>

<div className="space-y-2">
            {incomeTransactions.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-muted-foreground">
                  {isCustomRange ? "No hay ingresos en el rango seleccionado" : `No hay ingresos en ${monthString}`}
                </p>
              </div>
            ) : (
              groupTransactionsByCategory(incomeTransactions).map((group, index) => {
                const percentage = totalIncome > 0 ? ((group.total / totalIncome) * 100).toFixed(1) : "0.0"
                const categoryColor = getCategoryColor(group.category, index)

return (
                  <div key={group.category} className="border border-border rounded-lg overflow-hidden">
                    <button
                      onClick={() => toggleCategory(group.category)}
                      className="w-full flex items-center justify-between p-4 bg-card hover:bg-muted/50 transition-colors"
                    >
                      <div className="flex items-center gap-3">
                        <div className={`w-3 h-3 rounded-full ${categoryColor}`} />
                        <div className="text-left">
                          <div className="flex items-center gap-2">
                            <p className="font-semibold text-foreground">{group.category}</p>
                            <span className="text-sm font-medium text-muted-foreground">{percentage}%</span>
                          </div>
                          <p className="text-xs text-muted-foreground">
                            {group.transactions.length} {group.transactions.length === 1 ? "registro" : "registros"}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <p className="font-bold text-lg text-green-500">
                          {currencySymbol}
                          {group.total.toFixed(2)}
                        </p>
                        {expandedCategories.has(group.category) ? (
                          <ChevronUp className="w-5 h-5 text-muted-foreground" />
                        ) : (
                          <ChevronDown className="w-5 h-5 text-muted-foreground" />
                        )}
                      </div>
                    </button>

<Button
        onClick={() => setShowTransactionForm(true)}
        className="fixed bottom-20 md:bottom-6 right-6 h-14 w-14 rounded-full shadow-lg"
        size="icon"
      >
        <Plus className="w-6 h-6" />
      </Button>

{showTransactionForm && (
        <TransactionForm
          accountId={activeAccountId}
          transactionType={activeTab}
          onClose={handleCloseForm}
          editingTransaction={editingTransaction}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/settings-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useFinanceStore } from "@/lib/store"
import { Button } from "@/components/ui/button"
import { X, Plus, Trash2, Star } from "lucide-react"
import { CategoryManager } from "./category-manager"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const LAST_BACKUP_KEY = "chiklin-last-backup"

interface SettingsModalProps {
  onClose: () => void
}

export function SettingsModal({ onClose }: SettingsModalProps) {
  const { accounts, frequentTags, addFrequentTag, removeFrequentTag, removeAccount, setPrimaryAccount, updateAccount } =
    useFinanceStore()
  const [newTag, setNewTag] = useState("")
  const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null)
  const [editingAccountId, setEditingAccountId] = useState<string | null>(null)
  const [editingAccountName, setEditingAccountName] = useState("")
  const primaryAccount = accounts.find((a) => a.isPrimary)

const handleAddTag = (e: React.FormEvent) => {
    e.preventDefault()
    if (newTag.trim()) {
      addFrequentTag(newTag)
      setNewTag("")
    }
  }

const handleDeleteAccount = (accountId: string) => {
    removeAccount(accountId)
    setShowDeleteConfirm(null)
  }

const handleStartEditAccount = (accountId: string, currentName: string) => {
    setEditingAccountId(accountId)
    setEditingAccountName(currentName)
  }

const handleSaveAccountName = (accountId: string) => {
    if (editingAccountName.trim()) {
      updateAccount(accountId, { name: editingAccountName.trim() })
      setEditingAccountId(null)
      setEditingAccountName("")
    }
  }

const handleCancelEditAccount = () => {
    setEditingAccountId(null)
    setEditingAccountName("")
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card border border-border rounded-lg shadow-lg max-w-md w-full max-h-[80vh] overflow-y-auto">
        {/* Header */}
        <div className="flex justify-between items-center p-6 border-b border-border sticky top-0 bg-card z-10">
          <h2 className="text-xl font-semibold text-foreground">Configuración</h2>
          <button onClick={onClose} className="p-1 hover:bg-muted rounded transition-colors">
            <X className="w-5 h-5" />
          </button>
        </div>

{/* Content */}
        <div className="p-6 space-y-8">
          {/* Cuenta Principal */}
          <div>
            <h3 className="font-semibold text-foreground mb-3">Cuenta Principal</h3>
            <p className="text-sm text-muted-foreground mb-3">
              La cuenta principal se activará automáticamente al iniciar la aplicación
            </p>
            <Select value={primaryAccount?.id} onValueChange={(value) => setPrimaryAccount(value)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {accounts.map((account) => (
                  <SelectItem key={account.id} value={account.id}>
                    {account.name} ({account.currency})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="border-t border-border pt-6">
            <h3 className="font-semibold text-foreground mb-3">Gestión de Cuentas</h3>
            <p className="text-sm text-muted-foreground mb-3">
              Edita el nombre o elimina cuentas (se perderán todas las transacciones asociadas)
            </p>
            <div className="space-y-2">
              {accounts.map((account) => (
                <div
                  key={account.id}
                  className="flex items-center justify-between p-3 bg-muted rounded hover:bg-muted/80 transition-colors"
                >
                  {editingAccountId === account.id ? (
                    <div className="flex items-center gap-2 flex-1">
                      <input
                        type="text"
                        value={editingAccountName}
                        onChange={(e) => setEditingAccountName(e.target.value)}
                        className="flex-1 px-2 py-1 border border-border rounded bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                        autoFocus
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            handleSaveAccountName(account.id)
                          } else if (e.key === "Escape") {
                            handleCancelEditAccount()
                          }
                        }}
                      />
                      <Button size="sm" onClick={() => handleSaveAccountName(account.id)}>
                        Guardar
                      </Button>
                      <Button size="sm" variant="outline" onClick={handleCancelEditAccount}>
                        Cancelar
                      </Button>
                    </div>
                  ) : (
                    <>
                      <div className="flex items-center gap-2">
                        <span className="text-sm font-medium text-foreground">{account.name}</span>
                        {account.isPrimary && <Star className="w-3 h-3 text-accent fill-accent" />}
                        <span className="text-xs text-muted-foreground">({account.currency})</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => handleStartEditAccount(account.id, account.name)}
                        >
                          Editar
                        </Button>
                        {accounts.length > 1 && (
                          <button
                            onClick={() => setShowDeleteConfirm(account.id)}
                            className="p-1 hover:bg-destructive/10 rounded transition-colors"
                            title="Eliminar cuenta"
                          >
                            <Trash2 className="w-4 h-4 text-destructive" />
                          </button>
                        )}
                      </div>
                    </>
                  )}
                </div>
              ))}
            </div>
          </div>

{/* Categories Section */}
          <div className="border-t border-border pt-6">
            <CategoryManager />
          </div>

{/* Etiquetas Frecuentes */}
          <div className="border-t border-border pt-6">
            <h3 className="font-semibold text-foreground mb-3">Etiquetas Frecuentes</h3>
            <form onSubmit={handleAddTag} className="flex gap-2 mb-4">
              <input
                type="text"
                value={newTag}
                onChange={(e) => setNewTag(e.target.value)}
                placeholder="Nueva etiqueta"
                className="flex-1 px-3 py-2 border border-border rounded-lg bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
              />
              <Button type="submit" size="sm" className="gap-1">
                <Plus className="w-4 h-4" />
              </Button>
            </form>

<div className="space-y-2">
              {frequentTags.length === 0 ? (
                <p className="text-sm text-muted-foreground">No hay etiquetas</p>
              ) : (
                frequentTags.map((tag) => (
                  <div
                    key={tag}
                    className="flex items-center justify-between p-3 bg-muted rounded hover:bg-muted/80 transition-colors"
                  >
                    <span className="text-sm font-medium text-foreground">{tag}</span>
                    <button
                      onClick={() => removeFrequentTag(tag)}
                      className="p-1 hover:bg-destructive/10 rounded transition-colors"
                      title="Eliminar etiqueta"
                    >
                      <Trash2 className="w-4 h-4 text-destructive" />
                    </button>
                  </div>
                ))
              )}
            </div>
          </div>

{/* Import/Export Data Section */}
          <div className="border-t border-border pt-6">
            <h3 className="font-semibold text-foreground mb-3">Respaldo de Datos</h3>
            <p className="text-sm text-muted-foreground mb-4">
              Exporta tus datos para guardarlos en un lugar seguro. Podrás importarlos después de reinstalar la
              aplicación.
            </p>
            <div className="space-y-3">
              <Button
                onClick={() => {
                  const data = localStorage.getItem("chiklin-storage")
                  if (data) {
                    const blob = new Blob([data], { type: "application/json" })
                    const url = URL.createObjectURL(blob)
                    const a = document.createElement("a")
                    a.href = url
                    a.download = `chiklin-backup-${new Date().toISOString().split("T")[0]}.json`
                    a.click()
                    URL.revokeObjectURL(url)
                    localStorage.setItem(LAST_BACKUP_KEY, Date.now().toString())
                  }
                }}
                variant="outline"
                className="w-full"
              >
                Exportar Datos
              </Button>

<Button
                onClick={() => {
                  const input = document.createElement("input")
                  input.type = "file"
                  input.accept = ".json"
                  input.onchange = (e) => {
                    const file = (e.target as HTMLInputElement).files?.[0]
                    if (file) {
                      const reader = new FileReader()
                      reader.onload = (event) => {
                        try {
                          const data = event.target?.result as string
                          localStorage.setItem("chiklin-storage", data)
                          window.location.reload()
                        } catch (error) {
                          alert("Error al importar los datos. Verifica que el archivo sea válido.")
                        }
                      }
                      reader.readAsText(file)
                    }
                  }
                  input.click()
                }}
                variant="default"
                className="w-full"
              >
                Importar Datos
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Delete Confirmation Dialog */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60] p-4">
          <div className="bg-card border border-border rounded-lg shadow-lg max-w-sm w-full p-6 space-y-4">
            <h3 className="text-lg font-semibold text-foreground">Confirmar Eliminación</h3>
            <p className="text-sm text-muted-foreground">
              ¿Estás seguro de que deseas eliminar esta cuenta? Se perderán todas las transacciones asociadas. Esta
              acción no se puede deshacer.
            </p>
            <div className="flex gap-3">
              <Button variant="outline" onClick={() => setShowDeleteConfirm(null)} className="flex-1">
                Cancelar
              </Button>
              <Button variant="destructive" onClick={() => handleDeleteAccount(showDeleteConfirm)} className="flex-1">
                Eliminar
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useFinanceStore } from "@/lib/store"
import { Layout } from "@/components/layout"
import { Onboarding } from "@/components/onboarding"
import { Wallet } from "lucide-react"

export default function Home() {
  const { accounts, activeAccountId, setActiveAccount } = useFinanceStore()
  const [mounted, setMounted] = useState(false)
  const [showSplash, setShowSplash] = useState(true)

useEffect(() => {
    setMounted(true)
    const timer = setTimeout(() => {
      setShowSplash(false)
    }, 2500)
    return () => clearTimeout(timer)
  }, [])

useEffect(() => {
    if (mounted && accounts.length > 0) {
      const primaryAccount = accounts.find((a) => a.isPrimary)
      const accountToActivate = primaryAccount || accounts[0]

if (!activeAccountId || !accounts.find((a) => a.id === activeAccountId)) {
        setActiveAccount(accountToActivate.id)
      }
    }
  }, [mounted, accounts, activeAccountId, setActiveAccount])

if (!mounted || showSplash) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-green-600 via-green-500 to-emerald-500 animate-in fade-in duration-700">
        <div className="flex flex-col items-center gap-6 animate-in zoom-in duration-1000">
          <div className="relative">
            <div className="absolute inset-0 bg-white/20 blur-3xl rounded-full animate-pulse" />
            <div className="relative bg-white rounded-full p-8 shadow-2xl">
              <Wallet className="h-24 w-24 text-green-500" />
            </div>
          </div>
          <h1 className="text-4xl font-bold text-white tracking-tight">Chiklin</h1>
          <p className="text-green-100 text-lg">Tu app de finanzas personales</p>
        </div>
      </div>
    )
  }

if (accounts.length === 0) {
    return <Onboarding />
  }

return <Layout />
}
[V0_FILE]xml:file="public/icon-192.svg" isEdit="true" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
  
  <rect width="192" height="192" fill="#22c55e"/>
  
  <g transform="translate(48, 48)">
    
    <rect x="12" y="24" width="72" height="48" rx="6" ry="6" stroke="white" stroke-width="4" fill="none"/>
    
    <line x1="12" y1="42" x2="84" y2="42" stroke="white" stroke-width="4" stroke-linecap="round"/>
  </g>
</svg>
[V0_FILE]xml:file="public/icon.svg" isMerged="true"
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    @media (prefers-color-scheme: light) {
      .background { fill: black; }
      .foreground { fill: white; }
    }
    @media (prefers-color-scheme: dark) {
      .background { fill: white; }
      .foreground { fill: black; }
    }
  </style>
  <g clip-path="url(#clip0_7960_43945)">
    <rect class="background" width="180" height="180" rx="37" />
    <g style="transform: scale(95%); transform-origin: center">
      <path class="foreground"
        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
      <path class="foreground"
        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
    </g>
  </g>
  <defs>
    <clipPath id="clip0_7960_43945">
      <rect width="180" height="180" fill="white" />
    </clipPath>
  </defs>
</svg>
[V0_FILE]xml:file="public/icon-light-32x32.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
  
  <circle cx="16" cy="16" r="16" fill="#22c55e"/>
  <g transform="translate(8, 8)">
    
    <rect x="0" y="2.5" width="16" height="10.5" rx="1" ry="1" stroke="white" stroke-width="1.2" fill="none"/>
    <path d="M 0 6 L 16 6" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
  </g>
</svg>
[V0_FILE]json:file="public/manifest.json" isEdit="true" isMerged="true"
{
  "name": "Chiklin - Finanzas Personales",
  "short_name": "Chiklin",
  "description": "App PWA de gestión de finanzas personales con múltiples cuentas",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1f1f1f",
  "theme_color": "#22c55e",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icon-192.svg",
      "sizes": "192x192",
      "type": "image/svg+xml",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.svg",
      "sizes": "512x512",
      "type": "image/svg+xml",
      "purpose": "any maskable"
    },
    {
      "src": "/apple-icon.svg",
      "sizes": "180x180",
      "type": "image/svg+xml"
    }
  ]
}
[V0_FILE]jpg:file="public/icon-192.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-192-KsQbB7PwxzQNKWdN6VYrbPqZjSxigC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/icon-512.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-512-lh3cMJATRXFTfvZcQtKWEfqtLfAVj0.jpg" isMerged="true"
[V0_FILE]jpg:file="public/apple-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-icon-nMO9KlSv4BQ53SnQPPtNK86DaFM3gW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/icon-light-32x32.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-light-32x32-aPM0rlX4sJ2I5qHm1FYzzvGhqgDIK8.jpg" isMerged="true"
[V0_FILE]xml:file="public/icon-512.svg" isEdit="true"
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none">
  
  <rect width="512" height="512" fill="#22c55e"/>
  
  <g transform="translate(128, 128)">
    <rect x="32" y="64" width="192" height="128" rx="16" ry="16" stroke="white" stroke-width="12" fill="none"/>
    <line x1="32" y1="112" x2="224" y2="112" stroke="white" stroke-width="12" stroke-linecap="round"/>
  </g>
</svg>
[V0_FILE]xml:file="public/apple-icon.svg" isEdit="true"
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
  
  <rect width="180" height="180" fill="#22c55e"/>
  
  <g transform="translate(45, 45)">
    <rect x="11.25" y="22.5" width="67.5" height="45" rx="5.625" ry="5.625" stroke="white" stroke-width="4.2" fill="none"/>
    <line x1="11.25" y1="39.375" x2="78.75" y2="39.375" stroke="white" stroke-width="4.2" stroke-linecap="round"/>
  </g>
</svg>8a:["$","$L91",null,{"chatId":"vZKpjrMmsbo","children":["$","$L92",null,{"data":{"@\"active-block\",\"vZKpjrMmsbo\",":{"id":"b_t7A2AAL1qe0","messageId":"0MGYn2qUCtSuVHnYAGV9h9MUHU0OoYlu","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Ajustando iconos SVG al 50%","taskNameComplete":"Adjusted SVG icons to 50%"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"vZKpjrMmsbo\",":false,"":null},"children":"$L94"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This