feat: actualizar colores de estado y prioridad en gráficos y configuración de tareas

Author: tomas2p

client/src/components/dashboard/dashboardCharts.tsx

@@ -189,7 +189,7 @@ export function WeeklyTasksChart({ data, config }: WeeklyTasksChartProps) {
         <Bar
           dataKey="pending"
           stackId="a"
-          fill={config.pending?.color || "#6b7280"}
+          fill={config.pending?.color || "#f59e0b"}
           shape={<CustomBar dataKey="pending" />}
           maxBarSize={60}
         />

client/src/config/taskConfig.ts

@@ -30,7 +30,7 @@ export const priorityConfig = {
 export const statusConfig = {
   PENDING: {
     color:
-      "bg-gray-500/10 text-gray-600 dark:text-gray-400 [&_svg]:stroke-gray-600 dark:[&_svg]:stroke-gray-400",
+      "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 [&_svg]:stroke-yellow-600 dark:[&_svg]:stroke-yellow-400",
     label: "Pendiente",
   },
   IN_PROGRESS: {

client/src/hooks/useDashboardCharts.ts

@@ -2,6 +2,11 @@ import { useMemo } from "react";
 import { priorityConfig } from "@/config/taskConfig";
 import type { Task } from "@/types/tasks-system/task";
 import { useTranslation } from "react-i18next";
+import { TaskStatusColors, TaskPriorityColors } from "@/types/tasks-system/task";
+
+// Usa los colores importados
+const PRIORITY_COLORS = TaskPriorityColors;
+const STATUS_COLORS = TaskStatusColors;
 
 // Helper para obtener inicio de semana
 function getStartOfWeek(): Date {
@@ -20,20 +25,6 @@ function parseDate(value?: string): Date | null {
   return Number.isNaN(d.getTime()) ? null : d;
 }
 
-// Colores de gráficos
-const PRIORITY_COLORS = {
-  Baja: "#1d4ed8", // blue-700
-  Media: "#a16207", // yellow-700
-  Alta: "#c2410c", // orange-700
-  Urgente: "#b91c1c", // red-700
-} as const;
-
-const STATUS_COLORS = {
-  pending: "#374151", // gray-700
-  inProgress: "#1d4ed8", // blue-700
-  completed: "#15803d", // green-700
-} as const;
-
 interface UseDashboardChartsProps {
   accessibleTasks: Task[];
   accessibleLists?: Array<{ id: string; name: string }>;
@@ -184,17 +175,17 @@ export function useDashboardCharts({
       {
         name: t("dashboard.statusLabels.pending"),
         value: taskStats.pending,
-        fill: STATUS_COLORS.pending,
+        fill: STATUS_COLORS.PENDING,
       },
       {
         name: t("dashboard.statusLabels.inProgress"),
         value: taskStats.inProgress,
-        fill: STATUS_COLORS.inProgress,
+        fill: STATUS_COLORS.IN_PROGRESS,
       },
       {
         name: t("dashboard.statusLabels.completed"),
         value: taskStats.completed,
-        fill: STATUS_COLORS.completed,
+        fill: STATUS_COLORS.COMPLETED,
       },
     ].filter((item) => item.value > 0);
   }, [taskStats, t]);
@@ -203,15 +194,15 @@ export function useDashboardCharts({
     () => ({
       [t("dashboard.statusLabels.pending")]: {
         label: t("dashboard.statusLabels.pending"),
-        color: STATUS_COLORS.pending,
+        color: STATUS_COLORS.PENDING,
       },
       [t("dashboard.statusLabels.inProgress")]: {
         label: t("dashboard.statusLabels.inProgress"),
-        color: STATUS_COLORS.inProgress,
+        color: STATUS_COLORS.IN_PROGRESS,
       },
       [t("dashboard.statusLabels.completed")]: {
         label: t("dashboard.statusLabels.completed"),
-        color: STATUS_COLORS.completed,
+        color: STATUS_COLORS.COMPLETED,
       },
     }),
     [t],
@@ -273,15 +264,15 @@ export function useDashboardCharts({
     () => ({
       pending: {
         label: t("dashboard.statusLabels.pending"),
-        color: STATUS_COLORS.pending,
+        color: STATUS_COLORS.PENDING,
       },
       inProgress: {
         label: t("dashboard.statusLabels.inProgress"),
-        color: STATUS_COLORS.inProgress,
+        color: STATUS_COLORS.IN_PROGRESS,
       },
       completed: {
         label: t("dashboard.statusLabels.completed"),
-        color: STATUS_COLORS.completed,
+        color: STATUS_COLORS.COMPLETED,
       },
     }),
     [t],

client/src/types/tasks-system/task.ts

@@ -1,8 +1,21 @@
 import { SharePermission } from "../permissions";
 
 export type TaskStatus = "PENDING" | "IN_PROGRESS" | "COMPLETED";
+
+export const TaskStatusColors: Record<TaskStatus, string> = {
+  PENDING: "#FFA500",       // Orange
+  IN_PROGRESS: "#007BFF",   // Blue
+  COMPLETED: "#28A745",     // Green
+};
 export type TaskPriority = "LOW" | "MEDIUM" | "HIGH" | "URGENT";
 
+export const TaskPriorityColors: Record<TaskPriority, string> = {
+  LOW: "#6B7280",      // Gray
+  MEDIUM: "#3B82F6",   // Blue
+  HIGH: "#F59E0B",     // Yellow
+  URGENT: "#DC2626",   // Red
+};
+
 export interface Task {
   id: string;
   name: string;