Un panel para una clínica con varias especialidades: la agenda de la semana por profesional, la historia del paciente a un clic, las finanzas y los indicadores del día. Una demo navegable que hice por mi cuenta, sin cliente: ocho profesionales, estado de las citas en tiempo real, historia clínica con antecedentes y cuatro gráficos de gestión. El prototipo de alta fidelidad que va antes del producto.
01 / EL PROBLEMA
La agenda en un cuaderno, las fichas en un cajón.
Una clínica con varios profesionales y distintas aseguradoras tiene un problema clásico: la recepción lleva la agenda en un sitio, la historia clínica en otro y las finanzas en un tercero. Cuando llama un paciente, nadie ve de una vez la agenda del médico correcto, la aseguradora del paciente y su última visita.
El costo aparece en huecos que nadie llenó, controles que nunca se agendaron e ingresos que se escapan. Quería mostrar toda la clínica en una sola pantalla —agenda, paciente y dinero en el mismo lugar— e hice la demo para eso.
02 / EL ENFOQUE
La agenda es la pantalla de inicio, no un menú escondido.
La decisión de diseño fue poner la semana en el centro. Abres el panel, ves los seis días y filtras por profesional con un clic: ocho médicos, cada especialidad con su color. Cada cita lleva un estado real: confirmada, en espera, en consulta, atendida o no asistió.
Desde el bloque de la cita abres la historia del paciente en un panel lateral —aseguradora, contacto y visitas recientes— sin cambiar de pantalla ni perder tu lugar en la agenda. Así resolví el problema central: todo a un clic del calendario.
03 / LA CONSTRUCCIÓN
Estado en vivo, historia en panel lateral, gestión en cuatro gráficos.
Agenda por profesional, en color. Seis columnas (de lunes a sábado), un filtro por médico y una leyenda de especialidades que pinta toda la semana. Un vistazo y entiendes la clínica.
La historia sin salir de la agenda. La ficha se abre en un panel lateral con datos, aseguradora y antecedentes, pensada para una recepción que atiende llamadas mientras navega.
Cuatro gráficos de gestión. Citas de la semana, reparto por especialidad, ingresos del semestre (cobrado frente a previsto) y la mezcla de aseguradoras. Suficiente para que el dueño entienda el mes sin abrir un informe.
La demo funciona entera en el navegador con datos ficticios. En producción se apoya en Next.js + Prisma + Postgres, más una integración de calendario y de pagos, pero todo el flujo de la recepción ya está aquí.
04 / RESULTADO
Toda la clínica en un enlace.
En lugar de prometer "un sistema de citas", envío la demo y la persona recorre su propia rutina: filtra al médico, abre una historia, lee las finanzas. Seis pantallas, ocho profesionales, cinco estados de cita en vivo y cuatro gráficos, en un solo archivo, en el móvil o en el ordenador.
Es la pieza hecha por iniciativa propia que abre la conversación con una clínica real y deja claro el alcance antes de escribir código de producción.
Pantallas
6
Especialidades
8
Estados en vivo
5
Archivo
1 HTML
