Sistema de Pagos Banco Robles

Una aplicación web moderna desarrollada con Next.js y Tailwind CSS para registrar pagos y visualizar ventas por empresa, conectada a Google Sheets como base de datos.

🚀 Características

• Registro de Pagos: Formulario intuitivo para registrar pagos de clientes
• Dashboard de Ventas: Visualización de ventas agrupadas por empresa
• Arquitectura Híbrida:
  • Empresas desde Google Sheets (lectura)
  • Ventas en Supabase (escritura/lectura)
• Diseño Responsive: Optimizado para todos los dispositivos
• UI Moderna: Interfaz elegante con Tailwind CSS y Lucide React

📋 Requisitos Previos

• Node.js 18.0 o superior
• npm o yarn
• Cuenta de Supabase (para base de datos)
• Acceso a la hoja de Google Sheets (para empresas)

� Instalación y Configuración

1. Clona el repositorio:

   git clone <tu-repo>
   cd robles-payment-app

2. Instala las dependencias:

   npm install

3. 🔑 CONFIGURACIÓN CRÍTICA - Variables de Entorno:

   ⚠️ IMPORTANTE: El archivo .env.local ha sido creado pero necesitas configurar tus credenciales reales de Supabase.

   Abre el archivo .env.local y sigue estos pasos:

   a) Crear proyecto en Supabase:

   • Ir a https://supabase.com
   • Crear una cuenta gratuita
   • Crear un nuevo proyecto
   • Esperar a que se configure (2-3 minutos)

   b) Obtener credenciales:

   • En el dashboard de tu proyecto, ir a Settings > API
   • Copiar "Project URL"
   • Copiar "anon public" key

   c) Actualizar .env.local:

   NEXT_PUBLIC_SUPABASE_URL=https://tu-proyecto.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=tu_anon_key_aqui

4. 🗄️ Configurar Base de Datos:

   Ver SUPABASE_SETUP.md para instrucciones completas

5. Ejecuta el proyecto:

   npm run dev

6. ✅ Verificar configuración:

   • Abrir: http://localhost:3000/api/test-supabase
   • Debe mostrar "test_completed" en lugar de errores

🗄️ Configuración de Base de Datos

Supabase (Ventas)

Crear tabla en Supabase:

create table public."Ventas" (
  id bigint generated by default as identity not null,
  created_at timestamp with time zone not null default now(),
  nombre_empresa character varying null,
  nombre_cliente character varying null,
  importe numeric null,
  constraint Ventas_pkey primary key (id)
);

Ver SUPABASE_SETUP.md para instrucciones detalladas.

📊 Arquitectura de Datos

Este proyecto utiliza una arquitectura híbrida:

Google Sheets (Solo Lectura)

• Hoja Empresas: Lista de empresas con campo de vigencia
• Solo empresas con vigencia "X" aparecen en el formulario de pagos

Supabase PostgreSQL (Lectura/Escritura)

• Tabla Ventas: Registro de todas las ventas realizadas
• Base de datos escalable con Row Level Security
• Mejor rendimiento para operaciones de escritura

📁 Estructura del Proyecto

src/
├── app/
│   ├── api/
│   │   ├── empresas/route.ts    # API para empresas
│   │   └── pagos/route.ts       # API para pagos
│   ├── ventas/
│   │   └── page.tsx             # Página de ventas
│   └── page.tsx                 # Página principal
├── components/
│   ├── FormularioPago.tsx       # Formulario de registro
│   ├── Navigation.tsx           # Barra de navegación
│   └── VentasPorEmpresa.tsx     # Dashboard de ventas
├── lib/
│   └── googleSheets.ts          # Servicio de Google Sheets
└── types/
    └── index.ts                 # Definiciones de tipos

🎯 Funcionalidades

Registro de Pagos

• Formulario con validación de campos
• Selección de empresa desde Google Sheets
• Métodos de pago: Tarjeta y Efectivo
• Fecha automática con opción de modificar
• Guardado directo en Google Sheets

Dashboard de Ventas

• Resumen general con totales
• Ventas agrupadas por empresa
• Filtrado por empresa específica
• Tabla detallada de transacciones
• Indicadores visuales y estadísticas

🔧 API Endpoints

GET /api/empresas

Obtiene la lista de empresas desde Google Sheets

GET /api/pagos

Obtiene todos los pagos registrados

POST /api/pagos

Registra un nuevo pago

{
  "empresaId": 1,
  "nombreCliente": "Juan",
  "apellidoCliente": "Pérez",
  "importe": 1500.00,
  "metodoPago": "tarjeta",
  "fechaPago": "2025-11-04",
  "empresaNombre": "Empresa ABC"
}

🎨 Tecnologías Utilizadas

• Next.js 14: Framework React con App Router
• TypeScript: Tipado estático
• Tailwind CSS: Framework de CSS utilitario
• Lucide React: Iconos modernos
• Supabase: Base de datos PostgreSQL en la nube (ventas)
• Google Sheets: Fuente de datos para empresas

📱 Diseño Responsive

La aplicación está optimizada para:

• 📱 Móviles (320px+)
• 📊 Tablets (768px+)
• 💻 Desktop (1024px+)

🚀 Despliegue

Para desplegar en producción:

1. Build del proyecto:

npm run build

2. Despliega en Vercel, Netlify o tu plataforma preferida

📞 Soporte

Para soporte técnico o preguntas sobre la implementación, contacta al equipo de desarrollo.

---

Banco Robles - Sistema de Pagos © 2025