feat: enhance Kanban components with visibleStatuses prop

- Added `visibleStatuses` prop to `KanbanBoard`, `PrioritySwimlanesBoard`, `SwimlanesBase`, and `SwimlanesBoard` for improved column visibility control.
- Updated `KanbanBoardContainer` to derive `visibleStatuses` from `useColumnVisibility`, allowing dynamic filtering of displayed statuses.
- Refactored `KanbanFilters` to accept `hiddenStatuses` and `onToggleStatusVisibility` props, enabling better integration with column visibility management.
- Cleaned up visibility logic across components to ensure consistent behavior and user experience.

components/kanban/Board.tsx

@@ -28,15 +28,16 @@ interface KanbanBoardProps {
   onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
   loading?: boolean;
   compactView?: boolean;
+  visibleStatuses?: TaskStatus[];
 }
 
-export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, loading = false, compactView = false }: KanbanBoardProps) {
+export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, loading = false, compactView = false, visibleStatuses }: KanbanBoardProps) {
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [activeTask, setActiveTask] = useState<Task | null>(null);
   
-  // Gestion de la visibilité des colonnes
-  const { hiddenStatuses, toggleStatusVisibility, getVisibleStatuses } = useColumnVisibility();
-
+  // Gestion de la visibilité des colonnes (utilise les props si disponibles)
+  const { getVisibleStatuses } = useColumnVisibility();
+  
   // Configuration des capteurs pour le drag & drop
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -67,7 +68,9 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
   }, [tasksByStatus]);
 
   // Filtrer les colonnes visibles
-  const visibleColumns = getVisibleStatuses(allColumns);
+  const visibleColumns = visibleStatuses ? 
+    allColumns.filter(column => visibleStatuses.includes(column.id)) :
+    getVisibleStatuses(allColumns);
 
   const handleCreateTask = async (data: CreateTaskData) => {
     if (onCreateTask) {

components/kanban/BoardContainer.tsx

@@ -10,6 +10,8 @@ import { EditTaskForm } from '@/components/forms/EditTaskForm';
 import { useTasksContext } from '@/contexts/TasksContext';
 import { Task, TaskStatus } from '@/lib/types';
 import { UpdateTaskData } from '@/clients/tasks-client';
+import { useColumnVisibility } from '@/hooks/useColumnVisibility';
+import { getAllStatuses } from '@/lib/status-config';
 
 export function KanbanBoardContainer() {
   const { 
@@ -25,6 +27,9 @@ export function KanbanBoardContainer() {
     tags
   } = useTasksContext();
 
+  const { hiddenStatuses, toggleStatusVisibility, getVisibleStatuses } = useColumnVisibility();
+  const allStatuses = getAllStatuses();
+  const visibleStatuses = getVisibleStatuses(allStatuses.map(s => ({ id: s.key }))).map(s => s.id);
   const [editingTask, setEditingTask] = useState<Task | null>(null);
 
   const handleEditTask = (task: Task) => {
@@ -56,9 +61,11 @@ export function KanbanBoardContainer() {
 
   return (
     <>
-      <KanbanFilters
-        filters={kanbanFilters}
+      <KanbanFilters 
+        filters={kanbanFilters} 
         onFiltersChange={setKanbanFilters}
+        hiddenStatuses={hiddenStatuses}
+        onToggleStatusVisibility={toggleStatusVisibility}
       />
       
       {/* Section Objectifs Principaux */}
@@ -82,6 +89,7 @@ export function KanbanBoardContainer() {
             onUpdateTitle={handleUpdateTitle}
             onUpdateStatus={handleUpdateStatus}
             compactView={kanbanFilters.compactView}
+            visibleStatuses={visibleStatuses}
           />
         ) : (
           <SwimlanesBoard 
@@ -91,6 +99,7 @@ export function KanbanBoardContainer() {
             onUpdateTitle={handleUpdateTitle}
             onUpdateStatus={handleUpdateStatus}
             compactView={kanbanFilters.compactView}
+            visibleStatuses={visibleStatuses}
           />
         )
       ) : (
@@ -103,6 +112,7 @@ export function KanbanBoardContainer() {
           onUpdateStatus={handleUpdateStatus}
           loading={loading}
           compactView={kanbanFilters.compactView}
+          visibleStatuses={visibleStatuses}
         />
       )}
       

components/kanban/KanbanFilters.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { TaskPriority } from '@/lib/types';
+import { TaskPriority, TaskStatus } from '@/lib/types';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useTasksContext } from '@/contexts/TasksContext';
@@ -26,11 +26,17 @@ export interface KanbanFilters {
 interface KanbanFiltersProps {
   filters: KanbanFilters;
   onFiltersChange: (filters: KanbanFilters) => void;
+  hiddenStatuses?: Set<TaskStatus>;
+  onToggleStatusVisibility?: (status: TaskStatus) => void;
 }
 
-export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps) {
+export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsHiddenStatuses, onToggleStatusVisibility }: KanbanFiltersProps) {
   const { tags: availableTags, regularTasks } = useTasksContext();
-  const { hiddenStatuses, toggleStatusVisibility } = useColumnVisibility();
+  const { hiddenStatuses: localHiddenStatuses, toggleStatusVisibility: localToggleStatusVisibility } = useColumnVisibility();
+  
+  // Utiliser les props si disponibles, sinon utiliser l'état local
+  const hiddenStatuses = propsHiddenStatuses || localHiddenStatuses;
+  const toggleStatusVisibility = onToggleStatusVisibility || localToggleStatusVisibility;
   const [isExpanded, setIsExpanded] = useState(false);
   const [isSortExpanded, setIsSortExpanded] = useState(false);
   const [isSwimlaneModeExpanded, setIsSwimlaneModeExpanded] = useState(false);

components/kanban/PrioritySwimlanesBoard.tsx

@@ -12,6 +12,7 @@ interface PrioritySwimlanesoardProps {
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
   onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
   compactView?: boolean;
+  visibleStatuses?: TaskStatus[];
 }
 
 export function PrioritySwimlanesBoard({ 
@@ -20,7 +21,8 @@ export function PrioritySwimlanesBoard({
   onEditTask, 
   onUpdateTitle, 
   onUpdateStatus, 
-  compactView = false 
+  compactView = false,
+  visibleStatuses
 }: PrioritySwimlanesoardProps) {
 
   // Grouper les tâches par priorités et créer les données de swimlanes
@@ -60,6 +62,7 @@ export function PrioritySwimlanesBoard({
       onUpdateTitle={onUpdateTitle}
       onUpdateStatus={onUpdateStatus}
       compactView={compactView}
+      visibleStatuses={visibleStatuses}
     />
   );
 }

components/kanban/SwimlanesBase.tsx

@@ -79,6 +79,7 @@ interface SwimlanesBaseProps {
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
   onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
   compactView?: boolean;
+  visibleStatuses?: TaskStatus[];
 }
 
 export function SwimlanesBase({ 
@@ -89,16 +90,17 @@ export function SwimlanesBase({
   onEditTask, 
   onUpdateTitle, 
   onUpdateStatus, 
-  compactView = false 
+  compactView = false,
+  visibleStatuses
 }: SwimlanesBaseProps) {
   const [activeTask, setActiveTask] = useState<Task | null>(null);
   const [collapsedSwimlanes, setCollapsedSwimlanes] = useState<Set<string>>(new Set());
   
   // Gestion de la visibilité des colonnes
-  const { hiddenStatuses, toggleStatusVisibility, getVisibleStatuses } = useColumnVisibility();
+  const { getVisibleStatuses } = useColumnVisibility();
   const allStatuses = getAllStatuses();
-  const visibleStatuses = getVisibleStatuses(allStatuses.map(s => ({ id: s.key })))
-    .map(s => s.id);
+  const statusesToShow = visibleStatuses || 
+    getVisibleStatuses(allStatuses.map(s => ({ id: s.key }))).map(s => s.id);
 
   // Configuration des sensors pour le drag & drop
   const sensors = useSensors(
@@ -161,9 +163,9 @@ export function SwimlanesBase({
         {/* Headers des colonnes visibles */}
         <div 
           className={`grid gap-4 px-6 py-4 ml-8`}
-          style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
+          style={{ gridTemplateColumns: `repeat(${statusesToShow.length}, minmax(0, 1fr))` }}
         >
-          {visibleStatuses.map(status => {
+          {statusesToShow.map(status => {
             const statusConfig = allStatuses.find(s => s.key === status);
             return (
               <div key={status} className="text-center">
@@ -214,9 +216,9 @@ export function SwimlanesBase({
                   {!isCollapsed && (
                     <div 
                       className={`grid gap-4 p-4`}
-                      style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
+                      style={{ gridTemplateColumns: `repeat(${statusesToShow.length}, minmax(0, 1fr))` }}
                     >
-                      {visibleStatuses.map(status => {
+                      {statusesToShow.map(status => {
                         const statusTasks = swimlane.tasks.filter(task => task.status === status);
                         
                         return (

components/kanban/SwimlanesBoard.tsx

@@ -12,6 +12,7 @@ interface SwimlanesboardProps {
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
   onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
   compactView?: boolean;
+  visibleStatuses?: TaskStatus[];
 }
 
 export function SwimlanesBoard({ 
@@ -20,7 +21,8 @@ export function SwimlanesBoard({
   onEditTask, 
   onUpdateTitle, 
   onUpdateStatus, 
-  compactView = false 
+  compactView = false,
+  visibleStatuses
 }: SwimlanesboardProps) {
   const { tags: availableTags } = useTasksContext();
 
@@ -80,6 +82,7 @@ export function SwimlanesBoard({
       onUpdateTitle={onUpdateTitle}
       onUpdateStatus={onUpdateStatus}
       compactView={compactView}
+      visibleStatuses={visibleStatuses}
     />
   );
 }