Control Horario · Registro de Jornada · Vibecoding
FichaApp
App de registro diario de jornada laboral para un solo usuario. Offline, local, exportable. Primera fase de un sistema full-stack con panel web de administración.
🟢 Pantalla de Fichaje
Reloj en tiempo real · Botón ENTRADA y SALIDA · Resumen del día
Mockup de la pantalla
Lógica de estados
Sin fichar hoyReloj en tiempo real. Botón verde ENTRADA grande. Estado: "Sin fichar entrada hoy".
Entrada fichadaMuestra hora de entrada, contador de tiempo transcurrido en tiempo real. Botón rojo SALIDA.
Jornada completaResumen con entrada, salida y total de horas calculado. Mensaje de cierre del día.
{
"id": "2026-06-29",
"horaEntrada": "08:32",
"horaSalida": null,
"totalMinutos": null
}
📋 Historial de Jornadas
Lista cronológica · Horas totales · Swipe para eliminar
Mockup de la pantalla
Funcionalidad
Lista completa ordenadaTodos los registros de AsyncStorage ordenados por fecha descendente. Más reciente arriba.
Estado visual por filaTotal en cian si completo. Naranja "en curso" si sin salida. Guión "—" si falta la salida.
Eliminar con swipeSwipe a la izquierda sobre una fila muestra botón rojo de eliminar. Confirmación antes de borrar.
Días sin salidaSi solo hay entrada (sin salida), la fila se muestra en naranja como recordatorio.
📤 Exportación de Datos
CSV · JSON · expo-sharing · WhatsApp · Email · Files
Mockup de la pantalla
fecha,entrada,salida,total_horas 2026-06-28,09:00,18:00,9h 00min 2026-06-27,08:45,17:30,8h 45min 2026-06-26,08:00,16:00,8h 00min
Cómo funciona la exportación
Lee AsyncStorageLee todos los registros guardados y los ordena por fecha para generar el archivo.
Genera el archivo en memoriaConstruye el string CSV o el objeto JSON con todos los campos y lo escribe en un archivo temporal.
expo-sharing abre el panel nativoEl sistema operativo muestra el selector de apps: WhatsApp, email, Archivos, Drive, etc.
Nombre de archivo con fechaEl archivo se nombra automáticamente con la fecha de exportación para facilitar el archivado.
El RDL 8/2019 obliga a las empresas a registrar la jornada de sus trabajadores. Este CSV es válido como soporte documental básico.
Antes de ejecutar
Crea la carpeta del proyectoCrea una carpeta llamada fichaje en tu ordenador y ábrela en VS Code.
Abre OpenCode en el terminalCon la carpeta abierta en VS Code, abre un terminal y ejecuta opencode.
Pega el prompt y pulsa EnterCopia el prompt completo de la izquierda y pégalo en OpenCode.
Si algo no funciona como esperas, no edites el código. Escribe un prompt de corrección describiendo exactamente qué está mal y qué quieres que cambie. La iteración es el aprendizaje.
Evolución de FichajeApp
5 mejoras que llevan la app de local a full-stack con panel web
Fase 2 · App mejorada
Notas y tipo de jornadaModal post-fichaje para añadir nota libre y tipo: Normal, Teletrabajo, Guardia, Desplazamiento, Festivo.
Resumen semanal y mensualNueva pantalla con KPIs: días trabajados, horas totales, media diaria, barra de progreso 40h semanales.
Geolocalización con mapaGPS automático al fichar con expo-location. Mapa en el detalle del registro con pins de entrada y salida.
Supabase + login + multi-dispositivoMigra AsyncStorage a Supabase. Login con email. Sync automático. Modo offline con cola de sincronización.
Fase 3 · Panel web
Panel web Next.js + VercelDashboard de administración con tabla de usuarios, filtros, gráfico de horas semanales por usuario y gestión de equipos. Desplegado gratis en Vercel.
App móvil completa con las 3 pantallas. Registro local en AsyncStorage. Exportación CSV y JSON. Funciona sin internet, sin cuenta, sin servidor.
Añade notas, tipos de jornada, estadísticas semanales, geolocalización con mapa, autenticación con Supabase y sincronización multi-dispositivo con modo offline.
Dashboard web con Next.js para administradores: tabla de usuarios, historial por empleado, gráficos semanales, gestión de equipos y exportación masiva. Desplegado en Vercel.