⏱️ Time-Tracked To-Do List

Una aplicación web moderna de gestión de tareas con seguimiento preciso de tiempo, diseñada para medir el tiempo efectivo de trabajo versus tiempo pausado.

🎥 Este proyecto fue desarrollado durante el video: Ver en YouTube

---

✨ Características

🎯 Gestión de Tareas

• ✅ Crear, editar y completar tareas
• 📝 Descripciones opcionales para cada tarea
• 🗑️ Eliminación de tareas (excepto completadas)

⏱️ Control de Tiempo Preciso

• ▶️ Iniciar sesiones de trabajo con cronómetro en tiempo real
• ⏸️ Pausar con motivo obligatorio
• 🔄 Reanudar sesiones pausadas
• 📊 Diferenciación automática entre tiempo de trabajo y tiempo pausado
• 🚫 Solo una tarea puede estar activa a la vez (pausa automática de otras)

📈 Análisis y Estadísticas

• 📉 Gráficas visuales de tiempos por sesión (Recharts)
• 📊 Estadísticas detalladas al completar tareas:
  • Tiempo total de trabajo
  • Tiempo total de pausas
  • Tiempo global
  • Contador de pausas
  • Lista de motivos de pausa con duraciones
• 🎨 Visualización con colores (verde = trabajo, naranja = pausa)

💾 Persistencia

• 💿 Almacenamiento local con localStorage
• 🔄 Recuperación automática al recargar la página
• 🔧 Migración automática de datos antiguos

---

🛠️ Tecnologías

Este proyecto está construido con tecnologías modernas:

• Next.js 16 - Framework React con App Router
• React 19 - Biblioteca UI
• TypeScript - Tipado estático
• Zustand - Gestión de estado global
• Recharts - Gráficas y visualizaciones
• Tailwind CSS - Estilos utilitarios
• shadcn/ui - Componentes UI accesibles
• localStorage - Persistencia del lado del cliente

---

🚀 Inicio Rápido

Prerrequisitos

• Node.js 18+
• npm, pnpm o yarn

Instalación

1. Clonar el repositorio

   git clone <tu-repositorio>
   cd video

2. Instalar dependencias

   npm install
   # o
   pnpm install
   # o
   yarn install

3. Ejecutar en desarrollo

   npm run dev
   # o
   pnpm dev
   # o
   yarn dev

4. Abrir en el navegador

   http://localhost:3000
   

Build de Producción

npm run build
npm start

🚀 Deploy a GitHub Pages

Este proyecto está configurado para desplegarse fácilmente en GitHub Pages.

Opción 1: Deploy Automático (Recomendado)

1. Configura GitHub Actions (ya incluido en .github/workflows/deploy.yml)
2. Actualiza next.config.ts con el nombre de tu repositorio:

   basePath: '/nombre-de-tu-repositorio',

3. Push a la rama main - El deploy se ejecutará automáticamente

Opción 2: Deploy Manual

# Build y deploy
npm run deploy

# O manualmente:
npm run build
git subtree push --prefix out origin gh-pages

Configurar GitHub Pages

1. Ve a Settings → Pages en tu repositorio
2. En Source, selecciona GitHub Actions
3. Tu sitio estará disponible en: https://tu-usuario.github.io/nombre-del-repo/

📖 Para más detalles, consulta GITHUB_PAGES_SETUP.md

---

📁 Estructura del Proyecto

video/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Layout principal
│   ├── page.tsx           # Página principal
│   └── globals.css        # Estilos globales
├── components/            # Componentes React
│   ├── ui/               # Componentes UI (shadcn)
│   ├── CreateTaskForm.tsx
│   ├── TaskItem.tsx
│   ├── TaskList.tsx
│   ├── Timer.tsx
│   ├── PauseModal.tsx
│   ├── CompletionSummaryModal.tsx
│   └── TimeChart.tsx
├── domain/               # Tipos y modelos de dominio
│   └── types.ts
├── store/                # Estado global (Zustand)
│   └── useTaskStore.ts
├── utils/                # Utilidades
│   ├── time.ts          # Cálculos de tiempo
│   └── storage.ts       # Persistencia localStorage
└── lib/                 # Utilidades compartidas
    └── utils.ts

---

🎮 Uso

Crear una Tarea

1. Completa el formulario "Nueva tarea"
2. Ingresa un título (obligatorio)
3. Opcionalmente, agrega una descripción
4. Haz clic en "Crear tarea"

Trabajar en una Tarea

1. Haz clic en "Iniciar" para comenzar a trabajar
2. El cronómetro comenzará a contar el tiempo de trabajo
3. Si necesitas pausar:
   • Haz clic en "Pausar"
   • Ingresa un motivo obligatorio
   • El tiempo de pausa se registrará por separado
4. Para reanudar, haz clic en "Reanudar"

Completar una Tarea

1. Haz clic en "Completar" cuando termines
2. Se abrirá automáticamente un modal con:
   • Estadísticas de tiempo (trabajo, pausa, total)
   • Número de pausas
   • Lista de motivos de pausa
   • Gráfica visual de tiempos por sesión

Ver Estadísticas

• Las tareas completadas muestran un resumen básico
• Haz clic en "Ver resumen completo" para ver todas las estadísticas y la gráfica

---

📊 Modelo de Datos

Task

type Task = {
  id: string
  title: string
  description?: string
  status: 'idle' | 'running' | 'paused' | 'completed'
  createdAt: number
  completedAt?: number
  sessions: Session[]
  pauseCount: number
}

Session

type Session = {
  id: string
  type: 'work' | 'pause'
  reason?: string  // obligatorio si type === 'pause'
  startAt: number
  endAt?: number
}

---

🎯 Reglas de Negocio

1. Solo una tarea activa: Solo una tarea puede estar en estado running a la vez
2. Pausa automática: Al iniciar una nueva tarea, la tarea activa se pausa automáticamente
3. Motivo obligatorio: Toda pausa requiere un motivo explícito
4. Tareas completadas: No se pueden modificar después de completarse
5. Cálculos en tiempo real: Los tiempos se calculan dinámicamente, no se almacenan

---

🔧 Scripts Disponibles

npm run dev      # Servidor de desarrollo
npm run build    # Build de producción
npm run start    # Servidor de producción
npm run lint     # Ejecutar linter

---

📝 Licencia

Este proyecto es de código abierto y está disponible bajo la MIT License.

---

🙏 Créditos

• Desarrollado durante el video tutorial: YouTube
• Componentes UI: shadcn/ui
• Gráficas: Recharts

---

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

---

📧 Contacto

Si tienes preguntas o sugerencias, no dudes en abrir un issue en el repositorio.

---

⭐ Si te gusta este proyecto, considera darle una estrella ⭐

Hecho con ❤️ usando Next.js y React