feat: initial commit - finanzas app

Complete personal finance management application with:
- Dashboard with financial metrics and alerts
- Credit card management and payments
- Fixed and variable debt tracking
- Monthly budget planning
- Intelligent alert system
- Responsive design with Tailwind CSS

Tech stack: Next.js 14, TypeScript, Zustand, Recharts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

components/dashboard/QuickActions.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { Plus, CreditCard, Wallet } from 'lucide-react'
+
+interface QuickActionsProps {
+  onAddDebt: () => void
+  onAddCard: () => void
+  onAddPayment: () => void
+}
+
+interface ActionButton {
+  label: string
+  icon: React.ElementType
+  onClick: () => void
+  color: string
+}
+
+export function QuickActions({
+  onAddDebt,
+  onAddCard,
+  onAddPayment,
+}: QuickActionsProps) {
+  const actions: ActionButton[] = [
+    {
+      label: 'Agregar Deuda',
+      icon: Plus,
+      onClick: onAddDebt,
+      color: 'bg-emerald-500 hover:bg-emerald-600',
+    },
+    {
+      label: 'Nueva Tarjeta',
+      icon: CreditCard,
+      onClick: onAddCard,
+      color: 'bg-blue-500 hover:bg-blue-600',
+    },
+    {
+      label: 'Registrar Pago',
+      icon: Wallet,
+      onClick: onAddPayment,
+      color: 'bg-violet-500 hover:bg-violet-600',
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+      {actions.map((action) => {
+        const Icon = action.icon
+        return (
+          <button
+            key={action.label}
+            onClick={action.onClick}
+            className={`
+              group flex flex-col items-center gap-3 rounded-xl p-6
+              transition-all duration-200 ease-out
+              ${action.color}
+              focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-slate-800
+            `}
+          >
+            <div className="rounded-full bg-white/20 p-4 transition-transform group-hover:scale-110">
+              <Icon className="h-8 w-8 text-white" />
+            </div>
+            <span className="font-medium text-white">{action.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}