Assist_Design/apps/portal/src/features/dashboard/hooks/useDashboardTasks.ts

"use client";

import { useMemo } from "react";
import {
  ExclamationCircleIcon,
  CreditCardIcon,
  ClockIcon,
  SparklesIcon,
  IdentificationIcon,
} from "@heroicons/react/24/outline";
import type { TaskTone } from "../components/TaskCard";
import type {
  DashboardTask as DomainDashboardTask,
  DashboardTaskType,
} from "@customer-portal/domain/dashboard";
import { useMeStatus } from "./useMeStatus";

/**
 * Task type for dashboard actions
 */
export type { DashboardTaskType };

export interface DashboardTask extends DomainDashboardTask {
  tone: TaskTone;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}

const TASK_ICONS: Record<DashboardTaskType, DashboardTask["icon"]> = {
  invoice: ExclamationCircleIcon,
  payment_method: CreditCardIcon,
  order: ClockIcon,
  internet_eligibility: ClockIcon,
  id_verification: IdentificationIcon,
  onboarding: SparklesIcon,
};

export interface UseDashboardTasksResult {
  tasks: DashboardTask[];
  isLoading: boolean;
  hasError: boolean;
  taskCount: number;
}

/**
 * Hook to return prioritized dashboard tasks computed by the BFF.
 */
export function useDashboardTasks(): UseDashboardTasksResult {
  const { data, isLoading, error } = useMeStatus();

  const tasks = useMemo<DashboardTask[]>(() => {
    const raw = data?.tasks ?? [];
    return raw.map(task => ({
      ...task,
      // Default to neutral when undefined (shouldn't happen due to domain validation)
      tone: (task.tone ?? "neutral") as TaskTone,
      icon: TASK_ICONS[task.type] ?? SparklesIcon,
    }));
  }, [data?.tasks]);

  return {
    tasks,
    isLoading,
    hasError: Boolean(error),
    taskCount: tasks.length,
  };
}