30-Day Commitments CLI

Dashboard interactivo en terminal para dar seguimiento a compromisos profesionales de 30 dias. Construido con Ink (React para CLIs).

        __________  __  _____  _______________  __________   _____________
       / ____/ __ \/  |/  /  |/  /  _/_  __/  |/  / ____/ | / /_  __/ ___/
      / /   / / / / /|_/ / /|_/ // /  / / / /|_/ / __/ /  |/ / / /  \__ \
     / /___/ /_/ / /  / / /  / // /  / / / /  / / /___/ /|  / / /  ___/ /
     \____/\____/_/  /_/_/  /_/___/ /_/ /_/  /_/_____/_/ |_/ /_/  /____/

Caracteristicas

• Secuencia de arranque animada con arte ASCII figlet, barra de progreso y carga paso a paso
• Dashboard con 6 pantallas interactivas y capacidades de busqueda/filtrado
• Vista de detalle con secciones colapsables, tabs e indicadores de prioridad
• Navegacion por teclado con retroalimentacion visual y filtrado en tiempo real
• Seguimiento de estado (completado / en progreso / pendiente) con indicadores por colores
• Sistema de prioridad (alta / media / baja) con soporte de filtrado

Pantallas

| Pantalla | Descripcion | |----------|-------------| | Autoanalisis | Autoevaluacion con fortalezas, areas de mejora y enfoque a 30 dias | | Compromiso #1 | Operaciones backend - calidad, observabilidad y estandares de despliegue | | Compromiso #2 | Colaboracion - reduccion de cuellos de botella mediante documentacion y handoffs | | Compromiso #3 | Impacto en negocio - sistema de matching de leads para el marketplace V1 | | Metricas Exitosas | Metricas de exito y objetivos para el periodo de 30 dias | | Necesidad de Soporte | Dependencias y soporte necesario para maximizar el impacto |

Instalacion

# Instalacion global
npm install -g erik-30d-commitments-cli

# O ejecutar directamente con npx
npx erik-30d-commitments-cli

Requisitos

• Node.js >= 18

Uso

# Despues de la instalacion global
commitments

# O con npx
npx erik-30d-commitments-cli

Atajos de Teclado

Dashboard

| Tecla | Accion | |-------|--------| | ↑ ↓ | Navegar entre pantallas | | Enter | Abrir pantalla seleccionada | | / | Entrar en modo busqueda | | Esc | Salir del modo busqueda | | 1 | Filtrar: prioridad alta | | 2 | Filtrar: prioridad media | | 3 | Filtrar: prioridad baja | | Q | Salir de la aplicacion |

Pantalla de Detalle

| Tecla | Accion | |-------|--------| | ← → | Cambiar entre tabs | | Enter | Contraer/expandir seccion | | Esc | Volver al dashboard | | Q | Salir de la aplicacion |

Modo Busqueda

| Tecla | Accion | |-------|--------| | Cualquier tecla | Escribir consulta de busqueda | | Backspace | Eliminar caracter | | Esc | Salir del modo busqueda |

Stack Tecnologico

• Ink ^5.2.1 - React para CLIs
• @inkjs/ui ^2.0.0 - Componentes UI (Spinner, ProgressBar, Select, Badge)
• ink-motion ^1.0.4 - Componentes de animacion (Shimmer, Fade, Wave)
• ink-divider ^4.1.1 - Divisores horizontales
• figlet ^1.11.0 - Texto arte ASCII
• React ^18.3.1 - Framework UI
• TypeScript ^5.6.3 - Seguridad de tipos

Desarrollo

# Instalar dependencias
pnpm install

# Ejecutar en modo desarrollo
pnpm dev

# Compilar para produccion
pnpm build

# Ejecutar version compilada
pnpm start

Estructura del Proyecto

src/
  index.tsx              # Punto de entrada
  app.tsx                # App principal con enrutamiento de vistas
  data/
    commitments.ts       # Datos de pantallas y tipos
  screens/
    BootScreen.tsx       # Secuencia de arranque animada
    DashboardScreen.tsx  # Dashboard principal con busqueda/filtrado
    DetailScreen.tsx     # Vista de detalle con tabs
  components/
    Header.tsx           # Encabezado de pantalla con badges
    Footer.tsx           # Sugerencias de atajos de teclado
    Menu.tsx             # Lista de menu del dashboard
    BoxCard.tsx          # Componente de tarjeta con borde
    SectionList.tsx      # Lista de secciones colapsables
  lib/
    theme.ts             # Colores, simbolos y helpers
    animations.ts        # Hooks de animacion personalizados

Licencia

MIT