Customization Guide

const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
  body: JSON.stringify({
    model: 'anthropic/claude-3.5-sonnet', // ← Change here
    messages: openRouterMessages,
    max_tokens: 2000,
    temperature: 0.7,
    stream: true,
  })
})

temperature: 0.7, // ← Change between 0.0 (precise) and 1.0 (creative)

content: `Eres un asistente financiero EXTREMADAMENTE detallista.

Siempre pides confirmación antes de registrar cualquier transacción.

Cuando el usuario diga "gasté X en Y":
1. Extrae el monto y categoría
2. Pregunta el método de pago
3. Pregunta si quiere agregar descripción
4. SOLO entonces registra

📋 CATEGORÍAS VÁLIDAS:
**Gastos:** Alimentación, Transporte, Vivienda, Salud, Entretenimiento, Educación, Otros Gastos
**Ingresos:** Salario, Ventas, Servicios, Inversiones, Otros Ingresos

💳 MÉTODOS: Efectivo, Tarjeta, Transferencia

Sé profesional y detallado.`

thinking_config: {
  max_thinking_tokens: 500, // Increase for deeper reasoning
}

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#10b981', // emerald-500 → Change to your brand color
        secondary: '#06b6d4', // cyan-500
        danger: '#ef4444', // red-500
        success: '#22c55e', // green-500
      }
    }
  }
}

// Before
className="bg-emerald-500 text-white"

// After
className="bg-primary text-white"

{new Date(tx.fecha).toLocaleString('es-MX', {
  day: '2-digit',
  month: 'short', // ← Change to 'long' or 'numeric'
  year: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
})}

${tx.monto.toLocaleString('es-MX', {
  minimumFractionDigits: 2,
  style: 'currency', // ← Add this
  currency: 'MXN' // ← Add this (MXN, USD, EUR, etc.)
})}

const [itemsPorPagina, setItemsPorPagina] = useState(50) // ← Change default

// Calculate average transaction amount
const avgTransaccion = transacciones.length > 0
  ? kpis.totalTransacciones > 0
    ? (kpis.totalIngresos + kpis.totalGastos) / kpis.totalTransacciones
    : 0
  : 0

// Add to JSX
<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 p-6 rounded-xl border-2 border-purple-200 dark:border-purple-800">
  <div className="text-sm text-purple-700 dark:text-purple-300 mb-1">
    Promedio por Transacción
  </div>
  <div className="text-2xl font-bold text-purple-900 dark:text-purple-100">
    ${avgTransaccion.toLocaleString('es-MX', { minimumFractionDigits: 2 })}
  </div>
</div>

if (vista === 'diaria') {
  // Change from 7 days to 30 days
  const thirtyDaysAgo = new Date(now)
  thirtyDaysAgo.setDate(now.getDate() - 30) // ← Changed
  query = query.gte('fecha', thirtyDaysAgo.toISOString())
} else if (vista === 'semanal') {
  // Change from 4 weeks to 8 weeks
  const eightWeeksAgo = new Date(now)
  eightWeeksAgo.setDate(now.getDate() - 56) // ← Changed
  query = query.gte('fecha', eightWeeksAgo.toISOString())
} else {
  // Change from 12 months to 24 months
  const twentyFourMonthsAgo = new Date(now)
  twentyFourMonthsAgo.setMonth(now.getMonth() - 24) // ← Changed
  query = query.gte('fecha', twentyFourMonthsAgo.toISOString())
}

text: `Analiza esta imagen y determina si es un ticket/factura válido.

**PASO 1: VALIDAR SI ES UN TICKET**
- ¿La imagen muestra un ticket, factura, recibo o comprobante de compra?
- ¿Tiene información de comercio, monto, items comprados?
- Si es screenshot de chat, foto aleatoria, o documento que NO sea ticket → marca "es_ticket": false

**INSTRUCCIONES ADICIONALES:**
- Si el ticket está en inglés, traduce las categorías al español
- Si no puedes leer el monto claramente, marca "monto": null
- Si el ticket tiene múltiples totales, usa el "Total Final" o "Total a Pagar"

// ... rest of prompt
`

model: 'anthropic/claude-3.5-sonnet', // ← Better for complex receipts
// Or:
model: 'openai/gpt-4o', // ← Good balance

{msg.isThinking && (
  <div className="flex items-center gap-2 text-emerald-600 dark:text-emerald-400">
    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-emerald-600" />
    <span>Analizando tu solicitud...</span> {/* ← Change text */}
  </div>
)}

<div className="flex justify-between items-start">
  <div className="flex-1">
    {msg.content}
  </div>
  <span className="text-xs text-gray-400 ml-2">
    {new Date().toLocaleTimeString('es-MX', {
      hour: '2-digit',
      minute: '2-digit'
    })}
  </span>
</div>

# Existing variables
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1...
OPENROUTER_API_KEY=sk-or-v1-...
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Custom variables
NEXT_PUBLIC_DEFAULT_CURRENCY=MXN
NEXT_PUBLIC_DATE_FORMAT=es-MX
NEXT_PUBLIC_MAX_TRANSACTIONS_PER_PAGE=50
NEXT_PUBLIC_ENABLE_BUDGET_ALERTS=true

// File: components/DataViews.tsx
const defaultItemsPerPage = Number(
  process.env.NEXT_PUBLIC_MAX_TRANSACTIONS_PER_PAGE || 20
)

const [itemsPorPagina, setItemsPorPagina] = useState(defaultItemsPerPage)

const { error } = await supabase.from('transacciones').insert({
  tipo,
  monto: functionArgs.monto,
  categoria: functionArgs.categoria,
  // ... other fields
})

// Add custom validation
if (!error) {
  // Send notification if amount > 1000
  if (functionArgs.monto > 1000) {
    await fetch('/api/notifications/send', {
      method: 'POST',
      body: JSON.stringify({
        message: `Gran transacción registrada: $${functionArgs.monto}`,
        tipo: 'alerta'
      })
    })
  }
}

// File: lib/categoryIcons.ts
export const CATEGORY_ICONS: Record<string, string> = {
  'Alimentación': '🍔',
  'Transporte': '🚗',
  'Vivienda': '🏠',
  'Salud': '💊',
  'Entretenimiento': '🎮',
  'Educación': '📚',
  'Otros Gastos': '📦',
  'Salario': '💼',
  'Ventas': '💰',
  'Servicios': '🔧',
  'Inversiones': '📈',
  'Otros Ingresos': '💵',
}

// Use in component
import { CATEGORY_ICONS } from '@/lib/categoryIcons'

<span>{CATEGORY_ICONS[tx.categoria]} {tx.categoria}</span>