Document de Conception — Task Management System (Frontend)

// src/api/client.ts

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api';

/**
 * Client HTTP centralisé pour les appels API.
 * Ajoute automatiquement le token JWT et gère les erreurs.
 */
async function apiClient<T>(
  endpoint: string,
  options: RequestInit = {}
): Promise<T> {
  const token = useAuthStore.getState().token;

  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...(token && { Authorization: `Bearer ${token}` }),
      ...options.headers,
    },
  });

  if (!response.ok) {
    const error: ApiError = await response.json();
    throw new ApiClientError(error.error, error.code, response.status, error.details);
  }

  // HTTP 204 No Content
  if (response.status === 204) return undefined as T;

  return response.json();
}

// src/hooks/useTasks.ts

/** Récupère la liste des tâches avec filtres optionnels */
function useTasksQuery(filters?: TaskFilters) {
  return useQuery({
    queryKey: ['tasks', filters],
    queryFn: () => fetchTasks(filters),
    staleTime: 30_000, // 30 secondes avant revalidation
  });
}

/** Récupère une tâche par son ID */
function useTaskQuery(taskId: string) {
  return useQuery({
    queryKey: ['tasks', taskId],
    queryFn: () => fetchTask(taskId),
    enabled: !!taskId,
  });
}

/** Crée une nouvelle tâche */
function useCreateTaskMutation() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (data: CreateTaskInput) => createTask(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['tasks'] });
      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
    },
  });
}

/** Met à jour une tâche existante */
function useUpdateTaskMutation() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: ({ id, data }: { id: string; data: UpdateTaskInput }) =>
      updateTask(id, data),
    onSuccess: (_, { id }) => {
      queryClient.invalidateQueries({ queryKey: ['tasks'] });
      queryClient.invalidateQueries({ queryKey: ['tasks', id] });
      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
    },
  });
}

/** Supprime une tâche */
function useDeleteTaskMutation() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (taskId: string) => deleteTask(taskId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['tasks'] });
      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
    },
  });
}

// src/hooks/useProjects.ts

/** Récupère la liste des projets */
function useProjectsQuery() {
  return useQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    staleTime: 60_000,
  });
}

/** Récupère les tâches d'un projet spécifique */
function useProjectTasksQuery(projectId: string) {
  return useQuery({
    queryKey: ['projects', projectId, 'tasks'],
    queryFn: () => fetchProjectTasks(projectId),
    enabled: !!projectId,
  });
}

/** Crée un nouveau projet */
function useCreateProjectMutation() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (data: CreateProjectInput) => createProject(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projects'] });
    },
  });
}

// src/api/tasks.ts

/** GET /api/tasks — Liste des tâches avec filtres optionnels (paginé) */
async function fetchTasks(filters?: TaskFilters): Promise<PaginatedResponse<Task>> {
  const params = new URLSearchParams();
  if (filters?.status) params.set('status', filters.status);
  if (filters?.priority) params.set('priority', filters.priority);
  if (filters?.projectId) params.set('projectId', filters.projectId);
  if (filters?.assignedTo) params.set('assignedTo', filters.assignedTo);
  if (filters?.sortBy) params.set('sortBy', filters.sortBy);
  if (filters?.page) params.set('page', String(filters.page));
  if (filters?.limit) params.set('limit', String(filters.limit));

  const query = params.toString();
  return apiClient<PaginatedResponse<Task>>(`/tasks${query ? `?${query}` : ''}`);
}

/** POST /api/tasks — Création d'une tâche */
async function createTask(data: CreateTaskInput): Promise<ApiResponseWithWarnings<Task>> {
  return apiClient<ApiResponseWithWarnings<Task>>('/tasks', {
    method: 'POST',
    body: JSON.stringify(data),
  });
}

/** PATCH /api/tasks/:id — Mise à jour d'une tâche */
async function updateTask(id: string, data: UpdateTaskInput): Promise<Task> {
  return apiClient<Task>(`/tasks/${id}`, {
    method: 'PATCH',
    body: JSON.stringify(data),
  });
}

/** DELETE /api/tasks/:id — Suppression d'une tâche */
async function deleteTask(id: string): Promise<void> {
  return apiClient<void>(`/tasks/${id}`, { method: 'DELETE' });
}

/** GET /api/tasks/:id — Détail d'une tâche */
async function fetchTask(id: string): Promise<Task> {
  return apiClient<Task>(`/tasks/${id}`);
}

// src/api/projects.ts

/** GET /api/projects — Liste des projets */
async function fetchProjects(): Promise<Project[]> {
  return apiClient<Project[]>('/projects');
}

/** GET /api/projects/:id/tasks — Tâches d'un projet */
async function fetchProjectTasks(projectId: string): Promise<Task[]> {
  return apiClient<Task[]>(`/projects/${projectId}/tasks`);
}

/** POST /api/projects — Création d'un projet */
async function createProject(data: CreateProjectInput): Promise<Project> {
  return apiClient<Project>('/projects', {
    method: 'POST',
    body: JSON.stringify(data),
  });
}

// src/stores/authStore.ts

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;

  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  hasRole: (role: Role) => boolean;
  hasAnyRole: (roles: Role[]) => boolean;
  canEditTask: (task: Task) => boolean;
}

const useAuthStore = create<AuthState>((set, get) => ({
  user: null,
  token: localStorage.getItem('auth_token'),
  isAuthenticated: !!localStorage.getItem('auth_token'),

  login: async (email, password) => {
    const response = await apiClient<{ user: User; token: string }>('/auth/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    });
    localStorage.setItem('auth_token', response.token);
    set({ user: response.user, token: response.token, isAuthenticated: true });
  },

  logout: () => {
    localStorage.removeItem('auth_token');
    set({ user: null, token: null, isAuthenticated: false });
  },

  hasRole: (role) => {
    const { user } = get();
    return user?.roles.includes(role) ?? false;
  },

  hasAnyRole: (roles) => {
    const { user } = get();
    return user?.roles.some((r) => roles.includes(r)) ?? false;
  },

  canEditTask: (task) => {
    const { user } = get();
    if (!user) return false;
    if (user.roles.includes('admin') || user.roles.includes('manager')) return true;
    if (user.roles.includes('developer')) return task.createdBy === user.id;
    return false; // viewer ne peut pas modifier
  },
}));

// src/stores/uiStore.ts

interface UIState {
  sidebarOpen: boolean;
  activeFilters: TaskFilters;
  sortBy: 'priority' | 'dueDate' | 'createdAt' | 'status';
  sortOrder: 'asc' | 'desc';

  toggleSidebar: () => void;
  setFilters: (filters: Partial<TaskFilters>) => void;
  resetFilters: () => void;
  setSortBy: (sortBy: UIState['sortBy']) => void;
  toggleSortOrder: () => void;
}

const useUIStore = create<UIState>((set) => ({
  sidebarOpen: true,
  activeFilters: {},
  sortBy: 'createdAt',
  sortOrder: 'desc',

  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
  setFilters: (filters) =>
    set((s) => ({ activeFilters: { ...s.activeFilters, ...filters } })),
  resetFilters: () => set({ activeFilters: {} }),
  setSortBy: (sortBy) => set({ sortBy }),
  toggleSortOrder: () =>
    set((s) => ({ sortOrder: s.sortOrder === 'asc' ? 'desc' : 'asc' })),
}));

// src/components/layout/AppLayout.tsx

/**
 * Layout principal de l'application.
 * Sidebar responsive (masquée sur mobile, toggle via hamburger).
 * Header avec informations utilisateur et badge de notifications.
 */
function AppLayout() {
  const { sidebarOpen, toggleSidebar } = useUIStore();
  const { user } = useAuthStore();

  return (
    <div className="flex h-screen bg-gray-50">
      <Sidebar open={sidebarOpen} onToggle={toggleSidebar} />
      <div className="flex flex-1 flex-col overflow-hidden">
        <Header user={user} onMenuToggle={toggleSidebar} />
        <main className="flex-1 overflow-y-auto p-6">
          <Outlet /> {/* React Router rend la page active ici */}
        </main>
      </div>
    </div>
  );
}

// src/components/tasks/TaskList.tsx

/**
 * Affiche la liste des tâches sous forme de tableau responsive.
 * Supporte le tri par colonnes et le filtrage.
 * Affiche un état vide si aucune tâche ne correspond aux filtres.
 */
function TaskList() {
  const filters = useUIStore((s) => s.activeFilters);
  const { data: tasks, isLoading, error } = useTasksQuery(filters);

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorDisplay error={error} />;
  if (!tasks?.length) return <EmptyState message="Aucune tâche trouvée" />;

  return (
    <div className="space-y-4">
      <TaskFilters />
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {tasks.map((task) => (
          <TaskCard key={task.id} task={task} />
        ))}
      </div>
    </div>
  );
}

// src/components/tasks/TaskCard.tsx

/**
 * Carte individuelle affichant les informations clés d'une tâche :
 * description, statut, priorité, échéance, indicateur de retard.
 * Clic → navigation vers la page de détail.
 */
function TaskCard({ task }: { task: Task }) {
  const navigate = useNavigate();
  const { canEditTask } = useAuthStore();

  return (
    <Card
      className="cursor-pointer hover:shadow-md transition-shadow"
      onClick={() => navigate(`/tasks/${task.id}`)}
      role="article"
      aria-label={`Tâche: ${task.description}`}
    >
      <CardHeader className="flex flex-row items-center justify-between">
        <TaskPriorityBadge priority={task.priority} />
        <TaskStatusBadge status={task.status} />
      </CardHeader>
      <CardContent>
        <p className="text-sm text-gray-700 line-clamp-2">{task.description}</p>
        {task.dueDate && (
          <div className="mt-2 flex items-center gap-1 text-xs text-gray-500">
            <CalendarIcon className="h-3 w-3" />
            <span className={task.isOverdue ? 'text-red-600 font-semibold' : ''}>
              {formatDate(task.dueDate)}
            </span>
            {task.isOverdue && (
              <span className="text-red-600 ml-1" role="status">En retard</span>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// src/components/tasks/TaskStatusBadge.tsx

const STATUS_CONFIG: Record<Status, { label: string; className: string }> = {
  'todo':        { label: 'À faire',    className: 'bg-gray-100 text-gray-800' },
  'in-progress': { label: 'En cours',   className: 'bg-blue-100 text-blue-800' },
  'completed':   { label: 'Terminée',   className: 'bg-green-100 text-green-800' },
};

function TaskStatusBadge({ status }: { status: Status }) {
  const config = STATUS_CONFIG[status];
  return (
    <Badge className={config.className} aria-label={`Statut: ${config.label}`}>
      {config.label}
    </Badge>
  );
}

// src/components/tasks/TaskPriorityBadge.tsx

const PRIORITY_CONFIG: Record<Priority, { label: string; className: string }> = {
  'low':    { label: 'Basse',   className: 'bg-slate-100 text-slate-700' },
  'medium': { label: 'Moyenne', className: 'bg-yellow-100 text-yellow-800' },
  'high':   { label: 'Haute',   className: 'bg-red-100 text-red-800' },
};

function TaskPriorityBadge({ priority }: { priority: Priority }) {
  const config = PRIORITY_CONFIG[priority];
  return (
    <Badge className={config.className} aria-label={`Priorité: ${config.label}`}>
      {config.label}
    </Badge>
  );
}

// src/components/projects/ProjectCard.tsx

/**
 * Carte affichant un projet avec son nom, sa description,
 * et un compteur de tâches par statut.
 */
function ProjectCard({ project }: { project: Project }) {
  const navigate = useNavigate();
  const { data: tasks } = useProjectTasksQuery(project.id);

  const statusCounts = useMemo(() => {
    if (!tasks) return { todo: 0, 'in-progress': 0, completed: 0 };
    return tasks.reduce(
      (acc, t) => ({ ...acc, [t.status]: acc[t.status] + 1 }),
      { todo: 0, 'in-progress': 0, completed: 0 }
    );
  }, [tasks]);

  return (
    <Card
      className="cursor-pointer hover:shadow-md transition-shadow"
      onClick={() => navigate(`/projects/${project.id}`)}
      role="article"
      aria-label={`Projet: ${project.name}`}
    >
      <CardHeader>
        <CardTitle>{project.name}</CardTitle>
        {project.description && (
          <CardDescription>{project.description}</CardDescription>
        )}
      </CardHeader>
      <CardContent className="flex gap-3">
        <span className="text-xs text-gray-500">{statusCounts.todo} à faire</span>
        <span className="text-xs text-blue-500">{statusCounts['in-progress']} en cours</span>
        <span className="text-xs text-green-500">{statusCounts.completed} terminées</span>
      </CardContent>
    </Card>
  );
}

// src/components/dashboard/StatusCounters.tsx

/**
 * Affiche trois cartes avec le nombre de tâches par statut.
 * Correspond à l'Exigence 11 — Tableau de bord de progression.
 */
function StatusCounters({ tasks }: { tasks: Task[] }) {
  const counts = useMemo(() => ({
    todo: tasks.filter((t) => t.status === 'todo').length,
    'in-progress': tasks.filter((t) => t.status === 'in-progress').length,
    completed: tasks.filter((t) => t.status === 'completed').length,
  }), [tasks]);

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3" role="region" aria-label="Compteurs de statut">
      <StatCard label="À faire" count={counts.todo} color="gray" />
      <StatCard label="En cours" count={counts['in-progress']} color="blue" />
      <StatCard label="Terminées" count={counts.completed} color="green" />
    </div>
  );
}

// src/components/dashboard/CompletionRate.tsx

/**
 * Affiche le taux de complétion sous forme de barre de progression.
 * Calcul : (completed / total) * 100, arrondi à l'entier.
 * Correspond à l'Exigence 11.4.
 */
function CompletionRate({ tasks }: { tasks: Task[] }) {
  const rate = useMemo(() => {
    if (tasks.length === 0) return 0;
    const completed = tasks.filter((t) => t.status === 'completed').length;
    return Math.round((completed / tasks.length) * 100);
  }, [tasks]);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Taux de complétion</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-4">
          <Progress value={rate} aria-label={`${rate}% complété`} />
          <span className="text-2xl font-bold">{rate}%</span>
        </div>
      </CardContent>
    </Card>
  );
}

// src/router.tsx

const router = createBrowserRouter([
  {
    path: '/login',
    element: <LoginPage />,
  },
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <AppLayout />
      </ProtectedRoute>
    ),
    errorElement: <ErrorBoundary />,
    children: [
      { index: true, element: <Navigate to="/tasks" replace /> },
      { path: 'tasks', element: <TasksPage /> },
      { path: 'tasks/:taskId', element: <TaskDetailPage /> },
      { path: 'projects', element: <ProjectsPage /> },
      { path: 'projects/:projectId', element: <ProjectDetailPage /> },
      {
        path: 'teams',
        element: (
          <ProtectedRoute requiredRoles={['admin', 'manager']}>
            <TeamsPage />
          </ProtectedRoute>
        ),
      },
      {
        path: 'dashboard',
        element: (
          <ProtectedRoute requiredRoles={['admin', 'manager']}>
            <DashboardPage />
          </ProtectedRoute>
        ),
      },
      { path: 'notifications', element: <NotificationsPage /> },
    ],
  },
  { path: '*', element: <NotFoundPage /> },
]);

// src/lib/validators.ts

import { z } from 'zod';

/** Valeurs valides pour les énumérations du domaine */
const STATUS_VALUES = ['todo', 'in-progress', 'completed'] as const;
const PRIORITY_VALUES = ['low', 'medium', 'high'] as const;
const ROLE_VALUES = ['admin', 'manager', 'developer', 'viewer'] as const;

/** Schéma de création d'une tâche (Exigences 1, 7) */
const createTaskSchema = z.object({
  description: z
    .string()
    .trim()
    .min(1, 'La description est obligatoire')
    .max(250, 'La description ne peut pas dépasser 250 caractères'),
  priority: z.enum(PRIORITY_VALUES).optional().default('medium'),
  dueDate: z
    .string()
    .datetime({ message: "Format de date invalide (ISO 8601 attendu)" })
    .optional()
    .nullable(),
  projectId: z.string().uuid().optional().nullable(),
});

/** Schéma de mise à jour d'une tâche */
const updateTaskSchema = z.object({
  description: z
    .string()
    .trim()
    .min(1, 'La description est obligatoire')
    .max(250, 'La description ne peut pas dépasser 250 caractères')
    .optional(),
  status: z.enum(STATUS_VALUES, {
    errorMap: () => ({
      message: `Statut invalide. Valeurs acceptées : ${STATUS_VALUES.join(', ')}`,
    }),
  }).optional(),
  priority: z.enum(PRIORITY_VALUES, {
    errorMap: () => ({
      message: `Priorité invalide. Valeurs acceptées : ${PRIORITY_VALUES.join(', ')}`,
    }),
  }).optional(),
  dueDate: z.string().datetime().optional().nullable(),
});

/** Schéma de création d'un projet (Exigence 2) */
const createProjectSchema = z.object({
  name: z.string().trim().min(1, 'Le nom du projet est obligatoire'),
  description: z.string().trim().optional().nullable(),
  teamId: z.string().uuid().optional().nullable(),
});

/** Schéma de connexion */
const loginSchema = z.object({
  email: z.string().email('Adresse email invalide'),
  password: z.string().min(1, 'Le mot de passe est obligatoire'),
});

// src/components/tasks/TaskForm.tsx

/**
 * Formulaire de création/édition de tâche.
 * Validation côté client avec Zod avant soumission.
 * Affiche les erreurs inline sous chaque champ.
 * Gère l'avertissement pour les échéances dans le passé (Exigence 7.4).
 */
function TaskForm({ task, onClose }: { task?: Task; onClose: () => void }) {
  const createMutation = useCreateTaskMutation();
  const updateMutation = useUpdateTaskMutation();
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [warning, setWarning] = useState<string | null>(null);

  const isEditing = !!task;

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const data = Object.fromEntries(formData);

    // Validation côté client
    const schema = isEditing ? updateTaskSchema : createTaskSchema;
    const result = schema.safeParse(data);

    if (!result.success) {
      const fieldErrors: Record<string, string> = {};
      result.error.issues.forEach((issue) => {
        const field = issue.path[0] as string;
        fieldErrors[field] = issue.message;
      });
      setErrors(fieldErrors);
      return;
    }

    // Avertissement échéance passée
    if (result.data.dueDate && new Date(result.data.dueDate) < new Date()) {
      setWarning("Attention : l'échéance spécifiée est déjà dépassée.");
    }

    // Soumission
    if (isEditing) {
      updateMutation.mutate({ id: task.id, data: result.data }, { onSuccess: onClose });
    } else {
      createMutation.mutate(result.data, { onSuccess: onClose });
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4" noValidate>
      <div>
        <Label htmlFor="description">Description *</Label>
        <Textarea
          id="description"
          name="description"
          defaultValue={task?.description}
          maxLength={250}
          required
          aria-describedby={errors.description ? 'description-error' : undefined}
          aria-invalid={!!errors.description}
        />
        {errors.description && (
          <p id="description-error" className="text-sm text-red-600 mt-1" role="alert">
            {errors.description}
          </p>
        )}
      </div>

      <div>
        <Label htmlFor="priority">Priorité</Label>
        <Select name="priority" defaultValue={task?.priority ?? 'medium'}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="low">Basse</SelectItem>
            <SelectItem value="medium">Moyenne</SelectItem>
            <SelectItem value="high">Haute</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="dueDate">Échéance</Label>
        <Input
          id="dueDate"
          name="dueDate"
          type="datetime-local"
          defaultValue={task?.dueDate ? formatDateForInput(task.dueDate) : undefined}
        />
        {warning && (
          <p className="text-sm text-yellow-600 mt-1" role="status">{warning}</p>
        )}
      </div>

      <div className="flex justify-end gap-2">
        <Button type="button" variant="outline" onClick={onClose}>
          Annuler
        </Button>
        <Button
          type="submit"
          disabled={createMutation.isPending || updateMutation.isPending}
        >
          {isEditing ? 'Mettre à jour' : 'Créer la tâche'}
        </Button>
      </div>
    </form>
  );
}

// src/components/common/ProtectedRoute.tsx

/**
 * Composant de protection des routes.
 * Vérifie l'authentification et optionnellement les rôles requis.
 * Redirige vers /login si non authentifié.
 * Affiche un message d'accès refusé si rôle insuffisant.
 */
function ProtectedRoute({
  children,
  requiredRoles,
}: {
  children: React.ReactNode;
  requiredRoles?: Role[];
}) {
  const { isAuthenticated, hasAnyRole } = useAuthStore();

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  if (requiredRoles && !hasAnyRole(requiredRoles)) {
    return (
      <div className="flex items-center justify-center h-full" role="alert">
        <Card className="max-w-md">
          <CardHeader>
            <CardTitle>Accès refusé</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Vous n'avez pas les permissions nécessaires pour accéder à cette page.</p>
            <p className="text-sm text-gray-500 mt-2">
              Rôles requis : {requiredRoles.join(', ')}
            </p>
          </CardContent>
        </Card>
      </div>
    );
  }

  return <>{children}</>;
}

// src/lib/permissions.ts

type Permission =
  | 'task:create'
  | 'task:edit-own'
  | 'task:edit-any'
  | 'task:self-assign'
  | 'project:create'
  | 'team:manage'
  | 'dashboard:view'
  | 'user:manage';

/** Matrice rôle → permissions */
const ROLE_PERMISSIONS: Record<Role, Permission[]> = {
  viewer: [],
  developer: ['task:create', 'task:edit-own', 'task:self-assign'],
  manager: ['task:create', 'task:edit-own', 'task:edit-any', 'task:self-assign', 'project:create', 'team:manage', 'dashboard:view'],
  admin: ['task:create', 'task:edit-own', 'task:edit-any', 'task:self-assign', 'project:create', 'team:manage', 'dashboard:view', 'user:manage'],
};

/** Vérifie si un utilisateur a une permission donnée */
function hasPermission(user: User, permission: Permission): boolean {
  return user.roles.some((role) => ROLE_PERMISSIONS[role].includes(permission));
}

/** Vérifie si un utilisateur peut éditer une tâche spécifique */
function canEditTask(user: User, task: Task): boolean {
  if (hasPermission(user, 'task:edit-any')) return true;
  if (hasPermission(user, 'task:edit-own') && task.createdBy === user.id) return true;
  return false;
}

// playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  retries: 1,
  workers: process.env.CI ? 1 : undefined,
  reporter: [['html'], ['list']],
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

// tests/e2e/tasks.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Gestion des tâches', () => {
  test.beforeEach(async ({ page }) => {
    // Connexion en tant que developer
    await page.goto('/login');
    await page.getByLabel('Email').fill('developer@example.com');
    await page.getByLabel('Mot de passe').fill('password123');
    await page.getByRole('button', { name: 'Se connecter' }).click();
    await expect(page).toHaveURL('/tasks');
  });

  test('Exigence 1.1 — Création d\'une tâche complète', async ({ page }) => {
    await page.getByRole('button', { name: 'Créer une tâche' }).click();

    await page.getByLabel('Description').fill('Corriger le bug #42');
    await page.getByLabel('Priorité').selectOption('high');
    await page.getByLabel('Échéance').fill('2025-12-31T18:00');

    await page.getByRole('button', { name: 'Créer la tâche' }).click();

    // Vérifier que la tâche apparaît dans la liste
    await expect(page.getByText('Corriger le bug #42')).toBeVisible();
    await expect(page.getByText('Haute')).toBeVisible();
    await expect(page.getByText('À faire')).toBeVisible();
  });

  test('Exigence 1.4 — Rejet d\'une description vide', async ({ page }) => {
    await page.getByRole('button', { name: 'Créer une tâche' }).click();

    // Soumettre sans description
    await page.getByRole('button', { name: 'Créer la tâche' }).click();

    // Vérifier le message d'erreur
    await expect(page.getByText('La description est obligatoire')).toBeVisible();
  });

  test('Exigence 3.1 — Changement de statut', async ({ page }) => {
    // Cliquer sur une tâche existante
    await page.getByText('Corriger le bug #42').click();

    // Changer le statut
    await page.getByLabel('Statut').selectOption('in-progress');
    await page.getByRole('button', { name: 'Mettre à jour' }).click();

    // Vérifier le nouveau statut
    await expect(page.getByText('En cours')).toBeVisible();
  });

  test('Exigence 5.3 — Viewer ne peut pas créer de tâche', async ({ page }) => {
    // Se déconnecter et se reconnecter en tant que viewer
    await page.getByRole('button', { name: 'Déconnexion' }).click();
    await page.getByLabel('Email').fill('viewer@example.com');
    await page.getByLabel('Mot de passe').fill('password123');
    await page.getByRole('button', { name: 'Se connecter' }).click();

    // Vérifier que le bouton "Créer une tâche" n'est pas visible
    await expect(page.getByRole('button', { name: 'Créer une tâche' })).not.toBeVisible();
  });

  test('Exigence 6.2 — Identification des tâches en retard', async ({ page }) => {
    // Vérifier qu'une tâche en retard affiche l'indicateur
    const overdueTask = page.locator('[data-testid="task-card"]').filter({
      hasText: 'En retard',
    });
    await expect(overdueTask).toBeVisible();
  });
});

// src/types/index.ts

/** Types du domaine — miroir des types backend */
export type Status = 'todo' | 'in-progress' | 'completed';
export type Priority = 'low' | 'medium' | 'high';
export type Role = 'admin' | 'manager' | 'developer' | 'viewer';

/** Tâche telle que reçue de l'API (dates en string ISO) */
export interface Task {
  id: string;
  description: string;
  status: Status;
  priority: Priority;
  projectId: string | null;
  dueDate: string | null;       // ISO 8601 string (pas Date)
  isOverdue: boolean;
  createdAt: string;
  createdBy: string;
  updatedAt: string;
  updatedBy: string | null;
  completedAt: string | null;
}

export interface Project {
  id: string;
  name: string;
  description: string | null;
  teamId: string | null;
  createdAt: string;
  createdBy: string;
}

export interface User {
  id: string;
  email: string;
  name: string;
  roles: Role[];
  createdAt: string;
}

export interface Team {
  id: string;
  name: string;
  memberIds: string[];
  createdAt: string;
  createdBy: string;
}

export interface Assignment {
  id: string;
  taskId: string;
  userId: string;
  assignedAt: string;
  assignedBy: string;
}

export interface Notification {
  id: string;
  userId: string;
  taskId: string;
  type: 'due-soon' | 'overdue';
  isRead: boolean;
  createdAt: string;
}

export interface HistoryEntry {
  id: string;
  taskId: string;
  field: 'status' | 'priority';
  previousValue: string;
  newValue: string;
  changedBy: string;
  changedAt: string;
}

/** Types d'erreur API */
export interface ApiError {
  error: string;
  code: string;
  details?: Record<string, unknown>;
}

export interface ApiResponseWithWarnings<T> {
  data: T;
  warnings?: string[];
}

/** Types d'entrée pour les formulaires */
export interface CreateTaskInput {
  description: string;
  priority?: Priority;
  dueDate?: string | null;
  projectId?: string | null;
}

export interface UpdateTaskInput {
  description?: string;
  status?: Status;
  priority?: Priority;
  dueDate?: string | null;
}

export interface CreateProjectInput {
  name: string;
  description?: string | null;
  teamId?: string | null;
}

export interface CreateTeamInput {
  name: string;
}

/** Types UI pour les filtres et le tri */
export interface TaskFilters {
  status?: Status;
  priority?: Priority;
  projectId?: string;
  assignedTo?: string;
  sortBy?: 'priority' | 'dueDate' | 'createdAt' | 'status';
  sortOrder?: 'asc' | 'desc';
  page?: number;
  limit?: number;
}

/** Type pour les statistiques du dashboard */
export interface DashboardStats {
  totalTasks: number;
  statusCounts: Record<Status, number>;
  completionRate: number;
  overdueTasks: number;
}

/** Type pour les réponses paginées de l'API */
export interface PaginatedResponse<T> {
  data: T[];
  pagination: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
  };
}

// src/components/common/ErrorBoundary.tsx

/**
 * Capture les erreurs React non gérées et affiche une page de secours.
 * Empêche le crash complet de l'application.
 */
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="flex items-center justify-center h-screen" role="alert">
          <Card className="max-w-md">
            <CardHeader>
              <CardTitle>Une erreur est survenue</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600">
                L'application a rencontré un problème inattendu.
              </p>
              <Button
                className="mt-4"
                onClick={() => {
                  this.setState({ hasError: false, error: null });
                  window.location.href = '/';
                }}
              >
                Retour à l'accueil
              </Button>
            </CardContent>
          </Card>
        </div>
      );
    }
    return this.props.children;
  }
}

// src/api/client.ts

/**
 * Erreur typée pour les réponses API en erreur.
 * Permet de distinguer les types d'erreur dans les handlers.
 */
class ApiClientError extends Error {
  constructor(
    message: string,
    public code: string,
    public statusCode: number,
    public details?: Record<string, unknown>
  ) {
    super(message);
    this.name = 'ApiClientError';
  }

  get isValidationError() { return this.statusCode === 400; }
  get isForbidden() { return this.statusCode === 403; }
  get isNotFound() { return this.statusCode === 404; }
  get isServerError() { return this.statusCode === 500; }
}

// src/lib/constants.ts

/** Labels français pour les statuts */
export const STATUS_LABELS: Record<Status, string> = {
  'todo': 'À faire',
  'in-progress': 'En cours',
  'completed': 'Terminée',
};

/** Labels français pour les priorités */
export const PRIORITY_LABELS: Record<Priority, string> = {
  'low': 'Basse',
  'medium': 'Moyenne',
  'high': 'Haute',
};

/** Labels français pour les rôles */
export const ROLE_LABELS: Record<Role, string> = {
  'admin': 'Administrateur',
  'manager': 'Gestionnaire',
  'developer': 'Développeur',
  'viewer': 'Observateur',
};

/** Ordre de tri des priorités (high = 0, low = 2) */
export const PRIORITY_ORDER: Record<Priority, number> = {
  'high': 0,
  'medium': 1,
  'low': 2,
};

/** URL de base de l'API */
export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api';