Módulo de Tareas

El módulo de Tareas de Factux te permite organizar y gestionar todas tus actividades de negocio de forma eficiente. Incluye múltiples vistas (Lista, Kanban, Calendario), soporte para tareas recurrentes, dependencias entre tareas, checklists y archivos adjuntos.

Ruta de Acceso

/owner/tasks

Vistas Disponibles

Vista Lista

Vista principal que muestra las tareas en formato de tabla con filtrado avanzado.

Características:

• Sidebar con estadísticas y filtros
• Búsqueda en tiempo real
• Filtros por estado, proyecto y prioridad
• Opción de mostrar/ocultar jerarquía completa (subtareas)
• Acciones rápidas: editar, eliminar, cambiar estado

Vista Kanban

Organiza las tareas en columnas según su estado para gestión visual estilo Kanban.

Características:

• Columnas por estado: Pendiente, En Progreso, Completada, Cancelada, En Espera
• Arrastrar y soltar para cambiar estados
• Indicadores visuales de prioridad
• Vista compacta de información esencial

Vista Calendario

Visualiza las tareas según su fecha de vencimiento en un calendario mensual.

Características:

• Calendario mensual interactivo
• Indicadores de tareas por día (puntos de colores)
• Panel lateral con detalles de tareas del día seleccionado
• Creación rápida de tareas con fecha preseleccionada
• Navegación entre meses

Histórico

Vista de todas las tareas completadas para revisión y análisis.

Características:

• Lista de tareas completadas
• Fecha de finalización
• Información de tiempo registrado
• Búsqueda y filtrado

Tareas Recurrentes

Gestión centralizada de todas las tareas con configuración de recurrencia activa.

Características:

• Lista de tareas recurrentes activas y pausadas
• Pausar/reanudar generación automática
• Vista previa de próximas fechas
• Configuración detallada de cada recurrencia

Estadísticas del Panel

El módulo muestra métricas clave en el sidebar:

• Total de tareas: Cantidad total de tareas (solo principales)
• Pendientes: Tareas por iniciar
• En Progreso: Tareas activas
• Completadas: Tareas finalizadas
• Vencidas: Tareas con fecha pasada no completadas
• Completadas esta semana: Tareas finalizadas en los últimos 7 días
• Horas registradas: Total de tiempo trabajado en tareas

Funcionalidades Principales

1. Crear y Editar Tareas

Formulario completo con pestañas organizadas:

• General: Información básica (título, descripción, fecha de vencimiento, prioridad, categoría)
• Recurrencia: Configuración de repetición automática
• Recordatorios: Notificaciones programadas (solo al editar)
• Configuración: Estado, progreso, proyecto, fecha inicio, horas estimadas, etiquetas

2. Prioridades

Sistema de 4 niveles de prioridad:

Prioridad	Color	Uso
Baja	🟢 Verde	Tareas sin urgencia
Media	🟡 Amarillo	Tareas normales
Alta	🟠 Naranja	Requiere atención pronto
Urgente	🔴 Rojo	Máxima prioridad

3. Estados de Tarea

Estado	Descripción
Pendiente	Tarea creada, sin iniciar
En Progreso	Tarea activa
Completada	Tarea finalizada
Cancelada	Tarea descartada
En Espera	Pausada temporalmente

4. Jerarquía de Tareas

Las tareas pueden tener subtareas (checklist items) que:

• Se crean desde el gestor de checklist
• Heredan automáticamente el proyecto de la tarea padre
• Tienen su propio estado y progreso
• Contribuyen al cálculo de progreso general

5. Filtrado Inteligente

Por Proyecto:

• Sin filtro: Solo tareas principales
• “Sin proyecto”: Tareas sin proyecto asignado
• Proyecto específico: Tareas y subtareas del proyecto

Otros Filtros:

• Estado
• Prioridad
• Categoría
• Búsqueda por texto
• Rango de fechas de vencimiento

Integración con Otros Módulos

Proyectos

Las tareas pueden asignarse a proyectos, heredando esta relación las subtareas.

Clientes

Las tareas pueden vincularse con clientes específicos para seguimiento de actividades.

Facturas y Gastos

Posibilidad de relacionar tareas con facturas o gastos para trazabilidad completa.

Permisos de Empleados

Los empleados pueden tener acceso restringido según configuración:

• Sin permisos: Solo visualización
• Con permisos de edición: Crear, editar y eliminar tareas

Detalles Técnicos

Componente Principal

• Archivo: Tasks.tsx
• Ruta: src/features/projects/sub-modules/tasks/pages/Tasks.tsx

Tipos TypeScript

// Estado de tarea
type TaskStatus = 'pending' | 'in_progress' | 'completed' | 'cancelled' | 'on_hold';

// Prioridad
type TaskPriority = 'low' | 'medium' | 'high' | 'urgent';

// Tipo de dependencia
type DependencyType = 'finish_to_start' | 'start_to_start' | 'finish_to_finish' | 'start_to_finish';

// Interfaz Task
interface Task {
  id: string;
  user_id: string;
  title: string;
  description?: string;
  priority: TaskPriority;
  status: TaskStatus;
  start_date?: string;
  due_date?: string;
  completed_at?: string;
  estimated_hours?: number;
  actual_hours?: number;
  progress: number;
  category?: string;
  tags?: string[];
  parent_task_id?: string;
  project_id?: string;
  customer_id?: string;
  invoice_id?: string;
  expense_id?: string;
  product_id?: string;
  reminder_enabled?: boolean;
  reminder_date?: string;
  reminder_sent?: boolean;
  // Relaciones
  project?: { id: string; name: string; };
  subtasks?: Task[];
  parent_task?: Task;
  attachments?: TaskAttachment[];
  comments?: TaskComment[];
  time_entries?: TaskTimeEntry[];
  dependencies?: TaskDependency[];
}

Componentes Principales

Componente	Descripción
TaskFormSheet	Formulario de creación/edición
TaskDetailModal	Modal con detalles completos
TaskListView	Vista en lista
TaskCalendar	Vista de calendario
TasksSidebar	Filtros y estadísticas
RecurringTasksList	Lista de tareas recurrentes
KanbanView	Vista Kanban

Tablas de Base de Datos

• tasks: Tabla principal de tareas
• task_dependencies: Dependencias entre tareas
• task_recurrence_config: Configuración de recurrencia
• task_attachments: Archivos adjuntos
• task_checklist: Items de checklist (subtareas)
• task_reminders: Recordatorios programados
• task_categories: Categorías de tareas
• task_comments: Comentarios en tareas
• task_time_entries: Registro de tiempo

Configuración de Colores

// Prioridades
const priorityConfig = {
  low: { color: "bg-blue-500/10 text-blue-700", dotColor: "bg-blue-500" },
  medium: { color: "bg-yellow-500/10 text-yellow-700", dotColor: "bg-yellow-500" },
  high: { color: "bg-orange-500/10 text-orange-700", dotColor: "bg-orange-500" },
  urgent: { color: "bg-red-500/10 text-red-700", dotColor: "bg-red-500" }
};

// Estados
const statusConfig = {
  pending: { label: "Pendiente", color: "bg-muted text-muted-foreground" },
  in_progress: { label: "En Progreso", color: "bg-blue-500/10 text-blue-700" },
  completed: { label: "Completada", color: "bg-green-500/10 text-green-700" },
  cancelled: { label: "Cancelada", color: "bg-red-500/10 text-red-700" },
  on_hold: { label: "En Espera", color: "bg-yellow-500/10 text-yellow-700" }
};

Queries React Query

// Todas las tareas del usuario
const { data: allTasks } = useQuery({
  queryKey: ['tasks', user?.id],
  queryFn: async () => {
    const { data, error } = await supabase
      .from('tasks')
      .select(`
        *,
        project:projects(id, name),
        parent_task:tasks!parent_task_id(id, title, project_id),
        subtasks:tasks!parent_task_id(*),
        attachments:task_attachments(*),
        comments:task_comments(*),
        time_entries:task_time_entries(*)
      `)
      .eq('user_id', user.id)
      .order('created_at', { ascending: false });
    return data;
  }
});

// Proyectos para filtros
const { data: projects } = useQuery({
  queryKey: ['projects', user?.id],
  queryFn: async () => {
    const { data, error } = await supabase
      .from('projects')
      .select('id, name')
      .eq('user_id', user.id)
      .order('name');
    return data;
  }
});

Filtrado Cliente

El filtrado se realiza en el cliente para respuesta instantánea:

const tasks = useMemo(() => {
  let filtered = [...allTasks];

  // Filtro de proyecto
  if (!selectedProject) {
    if (!showSubtasks) {
      filtered = filtered.filter(task => !task.parent_task_id);
    }
  } else if (selectedProject === "none") {
    filtered = filtered.filter(task => !task.project_id && !task.parent_task_id);
  } else {
    filtered = filtered.filter(task => task.project_id === selectedProject);
  }

  // Filtro de estado
  if (selectedStatus) {
    filtered = filtered.filter(task => task.status === selectedStatus);
  }

  // Otros filtros (prioridad, categoría, búsqueda, fechas)

  return filtered;
}, [allTasks, selectedStatus, selectedProject, filters, showSubtasks]);

Edge Functions

generate-recurring-tasks: Genera automáticamente nuevas instancias de tareas recurrentes según su configuración (ejecutada diariamente).

send-task-reminders: Envía recordatorios programados a través de notificaciones o email.