feat: jira and synchro

components/jira/JiraLogs.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { formatDistanceToNow } from 'date-fns';
+import { fr } from 'date-fns/locale';
+
+interface SyncLog {
+  id: string;
+  source: string;
+  status: string;
+  message: string | null;
+  tasksSync: number;
+  createdAt: string;
+}
+
+interface JiraLogsProps {
+  className?: string;
+}
+
+export function JiraLogs({ className = "" }: JiraLogsProps) {
+  const [logs, setLogs] = useState<SyncLog[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchLogs = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      
+      const response = await fetch('/api/jira/logs?limit=10');
+      if (!response.ok) {
+        throw new Error('Erreur lors de la récupération des logs');
+      }
+      
+      const { data } = await response.json();
+      setLogs(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Erreur inconnue');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'success':
+        return <Badge variant="success" size="sm">✓ Succès</Badge>;
+      case 'error':
+        return <Badge variant="danger" size="sm">✗ Erreur</Badge>;
+      default:
+        return <Badge variant="outline" size="sm">{status}</Badge>;
+    }
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-2 h-2 rounded-full bg-gray-400 animate-pulse"></div>
+            <h3 className="font-mono text-sm font-bold text-gray-400 uppercase tracking-wider">
+              LOGS JIRA
+            </h3>
+          </div>
+          <Button
+            onClick={fetchLogs}
+            disabled={isLoading}
+            variant="secondary"
+            size="sm"
+          >
+            {isLoading ? '⟳' : '🔄'}
+          </Button>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {error && (
+          <div className="p-3 bg-[var(--destructive)]/10 border border-[var(--destructive)]/20 rounded text-sm text-[var(--destructive)] break-words overflow-hidden">
+            {error}
+          </div>
+        )}
+
+        {isLoading ? (
+          <div className="space-y-2">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="p-3 bg-[var(--card)] rounded animate-pulse">
+                <div className="h-4 bg-[var(--border)] rounded w-3/4 mb-2"></div>
+                <div className="h-3 bg-[var(--border)] rounded w-1/2"></div>
+              </div>
+            ))}
+          </div>
+        ) : logs.length === 0 ? (
+          <div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
+            <div className="text-2xl mb-2">📋</div>
+            Aucun log de synchronisation
+          </div>
+        ) : (
+          <div className="space-y-2 max-h-96 overflow-y-auto">
+            {logs.map((log) => (
+              <div
+                key={log.id}
+                className="p-3 bg-[var(--card)] rounded border border-[var(--border)] hover:border-[var(--border)]/70 transition-colors"
+              >
+                <div className="flex items-center justify-between mb-2">
+                  {getStatusBadge(log.status)}
+                  <span className="text-xs text-[var(--muted-foreground)]">
+                    {formatDistanceToNow(new Date(log.createdAt), {
+                      addSuffix: true,
+                      locale: fr
+                    })}
+                  </span>
+                </div>
+                
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-[var(--foreground)] truncate flex-1 mr-2">
+                    {log.tasksSync > 0 ? (
+                      `${log.tasksSync} tâche${log.tasksSync > 1 ? 's' : ''} synchronisée${log.tasksSync > 1 ? 's' : ''}`
+                    ) : (
+                      'Aucune tâche synchronisée'
+                    )}
+                  </span>
+                </div>
+                
+                {log.message && (
+                  <div className="mt-2 text-xs text-[var(--muted-foreground)] bg-[var(--background)] p-2 rounded font-mono max-h-20 overflow-y-auto break-words">
+                    {log.message}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Info */}
+        <div className="text-xs text-[var(--muted-foreground)] p-2 border border-dashed border-[var(--border)] rounded">
+          Les logs sont conservés pour traçabilité des synchronisations
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/jira/JiraSync.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { jiraClient } from '@/clients/jira-client';
+import { JiraSyncResult } from '@/services/jira';
+
+interface JiraSyncProps {
+  onSyncComplete?: () => void;
+  className?: string;
+}
+
+export function JiraSync({ onSyncComplete, className = "" }: JiraSyncProps) {
+  const [isConnected, setIsConnected] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [lastSyncResult, setLastSyncResult] = useState<JiraSyncResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const testConnection = async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const status = await jiraClient.testConnection();
+      setIsConnected(status.connected);
+      if (!status.connected) {
+        setError(status.message);
+      }
+    } catch (err) {
+      setIsConnected(false);
+      setError(err instanceof Error ? err.message : 'Erreur de connexion');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const startSync = async () => {
+    setIsSyncing(true);
+    setError(null);
+    
+    try {
+      const result = await jiraClient.syncTasks();
+      setLastSyncResult(result);
+      
+      if (result.success) {
+        onSyncComplete?.();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Erreur de synchronisation');
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  const getConnectionStatus = () => {
+    if (isConnected === null) return null;
+    return isConnected ? (
+      <Badge variant="success" size="sm">✓ Connecté</Badge>
+    ) : (
+      <Badge variant="danger" size="sm">✗ Déconnecté</Badge>
+    );
+  };
+
+  const getSyncStatus = () => {
+    if (!lastSyncResult) return null;
+    
+    const { success, tasksCreated, tasksUpdated, tasksSkipped, errors } = lastSyncResult;
+    
+    return (
+      <div className="space-y-2 text-sm">
+        <div className="flex items-center gap-2">
+          <Badge variant={success ? "success" : "danger"} size="sm">
+            {success ? "✓ Succès" : "⚠ Erreurs"}
+          </Badge>
+          <span className="text-[var(--muted-foreground)]">
+            {new Date().toLocaleTimeString()}
+          </span>
+        </div>
+        
+        <div className="grid grid-cols-3 gap-2 text-xs">
+          <div className="text-center p-2 bg-[var(--card)] rounded">
+            <div className="font-mono font-bold text-emerald-400">{tasksCreated}</div>
+            <div className="text-[var(--muted-foreground)]">Créées</div>
+          </div>
+          <div className="text-center p-2 bg-[var(--card)] rounded">
+            <div className="font-mono font-bold text-blue-400">{tasksUpdated}</div>
+            <div className="text-[var(--muted-foreground)]">Mises à jour</div>
+          </div>
+          <div className="text-center p-2 bg-[var(--card)] rounded">
+            <div className="font-mono font-bold text-orange-400">{tasksSkipped}</div>
+            <div className="text-[var(--muted-foreground)]">Ignorées</div>
+          </div>
+        </div>
+        
+        {errors.length > 0 && (
+          <div className="p-2 bg-[var(--destructive)]/10 border border-[var(--destructive)]/20 rounded text-xs">
+            <div className="font-semibold text-[var(--destructive)] mb-1">Erreurs:</div>
+            {errors.map((err, i) => (
+              <div key={i} className="text-[var(--destructive)] font-mono">{err}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Card className={`${className}`}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></div>
+            <h3 className="font-mono text-sm font-bold text-blue-400 uppercase tracking-wider">
+              JIRA SYNC
+            </h3>
+          </div>
+          {getConnectionStatus()}
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Test de connexion */}
+        <div className="flex gap-2">
+          <Button
+            onClick={testConnection}
+            disabled={isLoading}
+            variant="secondary"
+            size="sm"
+            className="flex-1"
+          >
+            {isLoading ? (
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 border border-[var(--muted-foreground)] border-t-transparent rounded-full animate-spin"></div>
+                Test...
+              </div>
+            ) : (
+              'Tester connexion'
+            )}
+          </Button>
+          
+          <Button
+            onClick={startSync}
+            disabled={isSyncing || isConnected === false}
+            variant="primary"
+            size="sm"
+            className="flex-1"
+          >
+            {isSyncing ? (
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 border border-white border-t-transparent rounded-full animate-spin"></div>
+                Sync...
+              </div>
+            ) : (
+              '🔄 Synchroniser'
+            )}
+          </Button>
+        </div>
+
+        {/* Messages d'erreur */}
+        {error && (
+          <div className="p-3 bg-[var(--destructive)]/10 border border-[var(--destructive)]/20 rounded text-sm text-[var(--destructive)]">
+            {error}
+          </div>
+        )}
+
+        {/* Résultats de sync */}
+        {getSyncStatus()}
+
+        {/* Info */}
+        <div className="text-xs text-[var(--muted-foreground)] space-y-1">
+          <div>• Synchronisation unidirectionnelle (Jira → TowerControl)</div>
+          <div>• Les modifications locales sont préservées</div>
+          <div>• Seuls les tickets assignés sont synchronisés</div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/kanban/ColumnVisibilityToggle.tsx

@@ -44,7 +44,7 @@ export function ColumnVisibilityToggle({
           }`}
           title={hiddenStatuses.has(statusConfig.key) ? `Afficher ${statusConfig.label}` : `Masquer ${statusConfig.label}`}
         >
-          {hiddenStatuses.has(statusConfig.key) ? '👁️‍🗨️' : '👁️'} {statusConfig.label} ({statusCounts[statusConfig.key] || 0})
+          {hiddenStatuses.has(statusConfig.key) ? '👁️‍🗨️' : '👁️'} {statusConfig.label}{statusCounts[statusConfig.key] ? ` (${statusCounts[statusConfig.key]})` : ''}
         </button>
       ))}
     </div>

components/kanban/KanbanFilters.tsx

@@ -21,6 +21,11 @@ export interface KanbanFilters {
   swimlanesMode?: 'tags' | 'priority'; // Mode des swimlanes
   pinnedTag?: string; // Tag pour les objectifs principaux
   sortBy?: string; // Clé de l'option de tri sélectionnée
+  // Filtres spécifiques Jira
+  showJiraOnly?: boolean; // Afficher seulement les tâches Jira
+  hideJiraTasks?: boolean; // Masquer toutes les tâches Jira
+  jiraProjects?: string[]; // Filtrer par projet Jira
+  jiraTypes?: string[]; // Filtrer par type Jira (Story, Task, Bug, etc.)
 }
 
 interface KanbanFiltersProps {
@@ -135,11 +140,88 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
     setIsSortExpanded(!isSortExpanded);
   };
 
+  const handleJiraToggle = (mode: 'show' | 'hide' | 'all') => {
+    const updates: Partial<KanbanFilters> = {};
+    
+    switch (mode) {
+      case 'show':
+        updates.showJiraOnly = true;
+        updates.hideJiraTasks = false;
+        break;
+      case 'hide':
+        updates.showJiraOnly = false;
+        updates.hideJiraTasks = true;
+        break;
+      case 'all':
+        updates.showJiraOnly = false;
+        updates.hideJiraTasks = false;
+        break;
+    }
+    
+    onFiltersChange({ ...filters, ...updates });
+  };
+
+  const handleJiraProjectToggle = (project: string) => {
+    const currentProjects = filters.jiraProjects || [];
+    const newProjects = currentProjects.includes(project)
+      ? currentProjects.filter(p => p !== project)
+      : [...currentProjects, project];
+    
+    onFiltersChange({ 
+      ...filters, 
+      jiraProjects: newProjects.length > 0 ? newProjects : undefined 
+    });
+  };
+
+  const handleJiraTypeToggle = (type: string) => {
+    const currentTypes = filters.jiraTypes || [];
+    const newTypes = currentTypes.includes(type)
+      ? currentTypes.filter(t => t !== type)
+      : [...currentTypes, type];
+    
+    onFiltersChange({ 
+      ...filters, 
+      jiraTypes: newTypes.length > 0 ? newTypes : undefined 
+    });
+  };
+
   const handleClearFilters = () => {
     onFiltersChange({});
   };
 
-  const activeFiltersCount = (filters.tags?.length || 0) + (filters.priorities?.length || 0) + (filters.search ? 1 : 0);
+  // Récupérer les projets et types Jira disponibles dans TOUTES les tâches (pas seulement les filtrées)
+  // regularTasks est déjà disponible depuis la ligne 39
+  const availableJiraProjects = useMemo(() => {
+    const projects = new Set<string>();
+    regularTasks.forEach(task => {
+      if (task.source === 'jira' && task.jiraProject) {
+        projects.add(task.jiraProject);
+      }
+    });
+    return Array.from(projects).sort();
+  }, [regularTasks]);
+
+  const availableJiraTypes = useMemo(() => {
+    const types = new Set<string>();
+    regularTasks.forEach(task => {
+      if (task.source === 'jira' && task.jiraType) {
+        types.add(task.jiraType);
+      }
+    });
+    return Array.from(types).sort();
+  }, [regularTasks]);
+
+  // Vérifier s'il y a des tâches Jira dans le système (même masquées)
+  const hasJiraTasks = regularTasks.some(task => task.source === 'jira');
+
+  const activeFiltersCount = 
+    (filters.tags?.filter(Boolean).length || 0) + 
+    (filters.priorities?.filter(Boolean).length || 0) + 
+    (filters.search ? 1 : 0) + 
+    (filters.jiraProjects?.filter(Boolean).length || 0) + 
+    (filters.jiraTypes?.filter(Boolean).length || 0) + 
+    (filters.showJiraOnly ? 1 : 0) + 
+    (filters.hideJiraTasks ? 1 : 0);
 
   // Calculer les compteurs pour les priorités
   const priorityCounts = useMemo(() => {
@@ -310,7 +392,7 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
         {/* Filtres étendus */}
         {isExpanded && (
           <div className="mt-4 border-t border-[var(--border)]/50 pt-4">
-            {/* Grille responsive pour les filtres */}
+            {/* Grille responsive pour les filtres principaux */}
             <div className="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-6 lg:gap-8">
               {/* Filtres par priorité */}
               <div className="space-y-3">
@@ -318,7 +400,7 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
                   Priorités
                 </label>
                 <div className="grid grid-cols-2 gap-2">
-                  {priorityOptions.map((priority) => (
+                  {priorityOptions.filter(priority => priority.count > 0).map((priority) => (
                     <button
                       key={priority.value}
                       onClick={() => handlePriorityToggle(priority.value)}
@@ -345,7 +427,7 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
                     Tags
                   </label>
                   <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
-                    {sortedTags.map((tag) => (
+                    {sortedTags.filter(tag => (tagCounts[tag.name] || 0) > 0).map((tag) => (
                       <button
                         key={tag.id}
                         onClick={() => handleTagToggle(tag.name)}
@@ -359,7 +441,7 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
                           className="w-2 h-2 rounded-full" 
                           style={{ backgroundColor: tag.color }}
                         />
-                        {tag.name} ({tagCounts[tag.name] || 0})
+                        {tag.name} ({tagCounts[tag.name]})
                       </button>
                     ))}
                   </div>
@@ -367,6 +449,102 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
               )}
             </div>
 
+            {/* Filtres Jira - Ligne séparée mais intégrée */}
+            {hasJiraTasks && (
+              <div className="border-t border-[var(--border)]/30 pt-4 mt-4">
+                <div className="flex items-center gap-4 mb-3">
+                  <label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+                    🔌 Jira
+                  </label>
+                  
+                  {/* Toggle Jira Show/Hide - inline avec le titre */}
+                  <div className="flex gap-1">
+                    <Button
+                      variant={filters.showJiraOnly ? "primary" : "ghost"}
+                      onClick={() => handleJiraToggle('show')}
+                      size="sm"
+                      className="text-xs px-2 py-1 h-auto"
+                    >
+                      🔹 Seul
+                    </Button>
+                    <Button
+                      variant={filters.hideJiraTasks ? "danger" : "ghost"}
+                      onClick={() => handleJiraToggle('hide')}
+                      size="sm"
+                      className="text-xs px-2 py-1 h-auto"
+                    >
+                      🚫 Mask
+                    </Button>
+                    <Button
+                      variant={(!filters.showJiraOnly && !filters.hideJiraTasks) ? "primary" : "ghost"}
+                      onClick={() => handleJiraToggle('all')}
+                      size="sm"
+                      className="text-xs px-2 py-1 h-auto"
+                    >
+                      📋 All
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Projets et Types en 2 colonnes */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                  {/* Projets Jira */}
+                  {availableJiraProjects.length > 0 && (
+                    <div>
+                      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-2">
+                        Projets
+                      </label>
+                      <div className="flex flex-wrap gap-1">
+                        {availableJiraProjects.map((project) => (
+                          <button
+                            key={project}
+                            onClick={() => handleJiraProjectToggle(project)}
+                            className={`px-2 py-1 rounded border transition-all text-xs font-medium ${
+                              filters.jiraProjects?.includes(project)
+                                ? 'border-blue-400 bg-blue-400/10 text-blue-400'
+                                : 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]'
+                            }`}
+                          >
+                            📋 {project}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Types Jira */}
+                  {availableJiraTypes.length > 0 && (
+                    <div>
+                      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-2">
+                        Types
+                      </label>
+                      <div className="flex flex-wrap gap-1">
+                        {availableJiraTypes.map((type) => (
+                          <button
+                            key={type}
+                            onClick={() => handleJiraTypeToggle(type)}
+                            className={`px-2 py-1 rounded border transition-all text-xs font-medium ${
+                              filters.jiraTypes?.includes(type)
+                                ? 'border-purple-400 bg-purple-400/10 text-purple-400'
+                                : 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]'
+                            }`}
+                          >
+                            {type === 'Feature' && '✨ '} 
+                            {type === 'Story' && '📖 '} 
+                            {type === 'Task' && '📝 '} 
+                            {type === 'Bug' && '🐛 '} 
+                            {type === 'Support' && '🛠️ '} 
+                            {type === 'Enabler' && '🔧 '} 
+                            {type}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
             {/* Visibilité des colonnes */}
             <div className="col-span-full border-t border-[var(--border)]/50 pt-6 mt-4">
               <ColumnVisibilityToggle
@@ -379,7 +557,7 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
 
             {/* Résumé des filtres actifs */}
             {activeFiltersCount > 0 && (
-              <div className="bg-[var(--card)]/30 rounded-lg p-3 border border-[var(--border)]/50">
+              <div className="bg-[var(--card)]/30 rounded-lg p-3 border border-[var(--border)]/50 mt-4">
                 <div className="text-xs text-[var(--muted-foreground)] font-mono uppercase tracking-wider mb-2">
                   Filtres actifs
                 </div>
@@ -389,14 +567,34 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
                       Recherche: <span className="text-cyan-400">&ldquo;{filters.search}&rdquo;</span>
                     </div>
                   )}
-                  {filters.priorities?.length && (
+                  {(filters.priorities?.filter(Boolean).length || 0) > 0 && (
                     <div className="text-[var(--muted-foreground)]">
-                      Priorités: <span className="text-cyan-400">{filters.priorities.join(', ')}</span>
+                      Priorités: <span className="text-cyan-400">{filters.priorities?.filter(Boolean).join(', ')}</span>
                     </div>
                   )}
-                  {filters.tags?.length && (
+                  {(filters.tags?.filter(Boolean).length || 0) > 0 && (
                     <div className="text-[var(--muted-foreground)]">
-                      Tags: <span className="text-cyan-400">{filters.tags.join(', ')}</span>
+                      Tags: <span className="text-cyan-400">{filters.tags?.filter(Boolean).join(', ')}</span>
+                    </div>
+                  )}
+                  {filters.showJiraOnly && (
+                    <div className="text-[var(--muted-foreground)]">
+                      Affichage: <span className="text-blue-400">Jira seulement</span>
+                    </div>
+                  )}
+                  {filters.hideJiraTasks && (
+                    <div className="text-[var(--muted-foreground)]">
+                      Affichage: <span className="text-red-400">Masquer Jira</span>
+                    </div>
+                  )}
+                  {(filters.jiraProjects?.filter(Boolean).length || 0) > 0 && (
+                    <div className="text-[var(--muted-foreground)]">
+                      Projets Jira: <span className="text-blue-400">{filters.jiraProjects?.filter(Boolean).join(', ')}</span>
+                    </div>
+                  )}
+                  {(filters.jiraTypes?.filter(Boolean).length || 0) > 0 && (
+                    <div className="text-[var(--muted-foreground)]">
+                      Types Jira: <span className="text-purple-400">{filters.jiraTypes?.filter(Boolean).join(', ')}</span>
                     </div>
                   )}
                 </div>

components/kanban/TaskCard.tsx

@@ -161,16 +161,26 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
   }
 
 
+  // Styles spéciaux pour les tâches Jira
+  const isJiraTask = task.source === 'jira';
+  const jiraStyles = isJiraTask ? {
+    border: '1px solid rgba(0, 130, 201, 0.3)',
+    borderLeft: '3px solid #0082C9',
+    background: 'linear-gradient(135deg, rgba(0, 130, 201, 0.05) 0%, rgba(0, 130, 201, 0.02) 100%)'
+  } : {};
+
   // Vue compacte : seulement le titre
   if (compactView) {
     return (
       <Card 
         ref={setNodeRef}
-        style={style}
+        style={{ ...style, ...jiraStyles }}
         className={`p-2 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
           isDragging ? 'opacity-50 rotate-3 scale-105' : ''
         } ${
           task.status === 'done' ? 'opacity-60' : ''
+        } ${
+          isJiraTask ? 'jira-task' : ''
         }`}
         {...attributes}
         {...(isEditingTitle ? {} : listeners)}
@@ -244,11 +254,13 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
   return (
     <Card 
       ref={setNodeRef}
-      style={style}
+      style={{ ...style, ...jiraStyles }}
         className={`p-3 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
         isDragging ? 'opacity-50 rotate-3 scale-105' : ''
       } ${
         task.status === 'done' ? 'opacity-60' : ''
+      } ${
+        isJiraTask ? 'jira-task' : ''
       }`}
       {...attributes}
       {...(isEditingTitle ? {} : listeners)}
@@ -363,10 +375,22 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
             <div className="flex items-center gap-2">
               {task.source !== 'manual' && task.source && (
                 <Badge variant="outline" size="sm">
-                  {task.source}
+                  {task.source === 'jira' && task.jiraKey ? task.jiraKey : task.source}
                 </Badge>
               )}
               
+    {task.jiraProject && (
+      <Badge variant="outline" size="sm" className="text-blue-400 border-blue-400/30">
+        {task.jiraProject}
+      </Badge>
+    )}
+
+    {task.jiraType && (
+      <Badge variant="outline" size="sm" className="text-purple-400 border-purple-400/30">
+        {task.jiraType}
+      </Badge>
+    )}
+              
               {task.completedAt && (
                 <span className="text-emerald-400 font-mono font-bold">✓ DONE</span>
               )}

components/settings/JiraConfigForm.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { AppConfig } from '@/lib/config';
+
+interface JiraConfigFormProps {
+  config: AppConfig;
+}
+
+export function JiraConfigForm({ config }: JiraConfigFormProps) {
+  const [formData, setFormData] = useState({
+    baseUrl: '',
+    email: '',
+    apiToken: ''
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setMessage(null);
+
+    try {
+      // Note: Dans un vrai environnement, ces variables seraient configurées côté serveur
+      // Pour cette démo, on affiche juste un message informatif
+      setMessage({
+        type: 'success',
+        text: 'Configuration sauvegardée. Redémarrez l\'application pour appliquer les changements.'
+      });
+    } catch (error) {
+      setMessage({
+        type: 'error',
+        text: 'Erreur lors de la sauvegarde de la configuration'
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const isJiraConfigured = config.integrations.jira.enabled;
+
+  return (
+    <div className="space-y-6">
+      {/* Statut actuel */}
+      <div className="flex items-center justify-between p-4 bg-[var(--card)] rounded border">
+        <div>
+          <h3 className="font-medium">Statut de l'intégration</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            {isJiraConfigured 
+              ? 'Jira est configuré et prêt à être utilisé'
+              : 'Jira n\'est pas configuré'
+            }
+          </p>
+        </div>
+        <Badge variant={isJiraConfigured ? 'success' : 'danger'}>
+          {isJiraConfigured ? '✓ Configuré' : '✗ Non configuré'}
+        </Badge>
+      </div>
+
+      {isJiraConfigured && (
+        <div className="p-4 bg-[var(--card)] rounded border">
+          <h3 className="font-medium mb-2">Configuration actuelle</h3>
+          <div className="space-y-2 text-sm">
+            <div>
+              <span className="text-[var(--muted-foreground)]">URL de base:</span>{' '}
+              <code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
+                {config.integrations.jira.baseUrl || 'Non définie'}
+              </code>
+            </div>
+            <div>
+              <span className="text-[var(--muted-foreground)]">Email:</span>{' '}
+              <code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
+                {config.integrations.jira.email || 'Non défini'}
+              </code>
+            </div>
+            <div>
+              <span className="text-[var(--muted-foreground)]">Token API:</span>{' '}
+              <code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
+                {config.integrations.jira.apiToken ? '••••••••' : 'Non défini'}
+              </code>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Formulaire de configuration */}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-2">
+            URL de base Jira Cloud
+          </label>
+          <input
+            type="url"
+            value={formData.baseUrl}
+            onChange={(e) => setFormData(prev => ({ ...prev, baseUrl: e.target.value }))}
+            placeholder="https://votre-domaine.atlassian.net"
+            className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
+            required
+          />
+          <p className="text-xs text-[var(--muted-foreground)] mt-1">
+            L'URL de votre instance Jira Cloud (ex: https://monentreprise.atlassian.net)
+          </p>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">
+            Email Jira
+          </label>
+          <input
+            type="email"
+            value={formData.email}
+            onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
+            placeholder="votre-email@exemple.com"
+            className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
+            required
+          />
+          <p className="text-xs text-[var(--muted-foreground)] mt-1">
+            L'email de votre compte Jira
+          </p>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">
+            Token API Jira
+          </label>
+          <input
+            type="password"
+            value={formData.apiToken}
+            onChange={(e) => setFormData(prev => ({ ...prev, apiToken: e.target.value }))}
+            placeholder="Votre token API Jira"
+            className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
+            required
+          />
+          <p className="text-xs text-[var(--muted-foreground)] mt-1">
+            Créez un token API depuis{' '}
+            <a 
+              href="https://id.atlassian.com/manage-profile/security/api-tokens" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-[var(--primary)] hover:underline"
+            >
+              votre profil Atlassian
+            </a>
+          </p>
+        </div>
+
+        <Button
+          type="submit"
+          disabled={isLoading}
+          className="w-full"
+        >
+          {isLoading ? 'Sauvegarde...' : 'Sauvegarder la configuration'}
+        </Button>
+      </form>
+
+      {message && (
+        <div className={`p-4 rounded border ${
+          message.type === 'success' 
+            ? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
+            : 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
+        }`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* Instructions */}
+      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
+        <h3 className="font-medium mb-2">💡 Instructions de configuration</h3>
+        <div className="text-sm text-[var(--muted-foreground)] space-y-2">
+          <p><strong>1. URL de base:</strong> Votre domaine Jira Cloud (ex: https://monentreprise.atlassian.net)</p>
+          <p><strong>2. Email:</strong> L'email de votre compte Jira/Atlassian</p>
+          <p><strong>3. Token API:</strong> Créez un token depuis votre profil Atlassian :</p>
+          <ul className="ml-4 space-y-1 list-disc">
+            <li>Allez sur <a href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" rel="noopener noreferrer" className="text-[var(--primary)] hover:underline">id.atlassian.com</a></li>
+            <li>Cliquez sur "Create API token"</li>
+            <li>Donnez un nom descriptif (ex: "TowerControl")</li>
+            <li>Copiez le token généré</li>
+          </ul>
+          <p className="mt-3 text-xs">
+            <strong>Note:</strong> Ces variables doivent être configurées dans l'environnement du serveur (JIRA_BASE_URL, JIRA_EMAIL, JIRA_API_TOKEN)
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/settings/SettingsPageClient.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import { Header } from '@/components/ui/Header';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { JiraConfigForm } from '@/components/settings/JiraConfigForm';
+import { JiraSync } from '@/components/jira/JiraSync';
+import { JiraLogs } from '@/components/jira/JiraLogs';
+import { AppConfig } from '@/lib/config';
+
+interface SettingsPageClientProps {
+  config: AppConfig;
+}
+
+export function SettingsPageClient({ config }: SettingsPageClientProps) {
+  const [activeTab, setActiveTab] = useState<'general' | 'integrations' | 'advanced'>('general');
+
+  const tabs = [
+    { id: 'general' as const, label: 'Général', icon: '⚙️' },
+    { id: 'integrations' as const, label: 'Intégrations', icon: '🔌' },
+    { id: 'advanced' as const, label: 'Avancé', icon: '🛠️' }
+  ];
+
+  return (
+    <div className="min-h-screen bg-[var(--background)]">
+      <Header 
+        title="TowerControl"
+        subtitle="Configuration & Paramètres"
+      />
+      
+      <div className="container mx-auto px-4 py-4">
+        <div className="max-w-7xl mx-auto">
+          {/* En-tête compact */}
+          <div className="mb-4">
+            <h1 className="text-xl font-mono font-bold text-[var(--foreground)] mb-1">
+              Paramètres
+            </h1>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Configuration de TowerControl et de ses intégrations
+            </p>
+          </div>
+
+          <div className="flex gap-6">
+            {/* Navigation latérale compacte */}
+            <div className="w-56 flex-shrink-0">
+              <Card>
+                <CardContent className="p-0">
+                  {tabs.map((tab) => (
+                    <button
+                      key={tab.id}
+                      onClick={() => setActiveTab(tab.id)}
+                      className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${
+                        activeTab === tab.id
+                          ? 'bg-[var(--primary)]/10 text-[var(--primary)] border-r-2 border-[var(--primary)]'
+                          : 'text-[var(--muted-foreground)] hover:bg-[var(--card-hover)] hover:text-[var(--foreground)]'
+                      }`}
+                    >
+                      <span className="text-base">{tab.icon}</span>
+                      <span className="font-medium text-sm">{tab.label}</span>
+                    </button>
+                  ))}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Contenu principal */}
+            <div className="flex-1 min-h-0">
+              {activeTab === 'general' && (
+                <div className="space-y-6">
+                  <Card>
+                    <CardHeader>
+                      <h2 className="text-lg font-semibold">Préférences générales</h2>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
+                        <p className="text-sm text-[var(--muted-foreground)]">
+                          Les paramètres généraux seront disponibles dans une prochaine version.
+                        </p>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              )}
+
+              {activeTab === 'integrations' && (
+                <div className="h-full">
+                  {/* Layout en 2 colonnes pour optimiser l'espace */}
+                  <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 h-full">
+                    
+                    {/* Colonne 1: Configuration Jira */}
+                    <div className="xl:col-span-2">
+                      <Card className="h-fit">
+                        <CardHeader className="pb-3">
+                          <h2 className="text-base font-semibold">🔌 Intégration Jira Cloud</h2>
+                          <p className="text-xs text-[var(--muted-foreground)]">
+                            Synchronisation automatique des tickets
+                          </p>
+                        </CardHeader>
+                        <CardContent>
+                          <JiraConfigForm config={config} />
+                        </CardContent>
+                      </Card>
+                    </div>
+
+                    {/* Colonne 2: Actions et Logs */}
+                    <div className="space-y-4">
+                      {config.integrations.jira.enabled && (
+                        <>
+                          <JiraSync />
+                          <JiraLogs />
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'advanced' && (
+                <div className="space-y-6">
+                  <Card>
+                    <CardHeader>
+                      <h2 className="text-lg font-semibold">Paramètres avancés</h2>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
+                        <p className="text-sm text-[var(--muted-foreground)]">
+                          Les paramètres avancés seront disponibles dans une prochaine version.
+                        </p>
+                        <ul className="mt-2 text-xs text-[var(--muted-foreground)] space-y-1">
+                          <li>• Configuration de la base de données</li>
+                          <li>• Logs de debug</li>
+                          <li>• Export/Import des données</li>
+                          <li>• Réinitialisation</li>
+                        </ul>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/Header.tsx

@@ -4,13 +4,13 @@ import { useTheme } from '@/contexts/ThemeContext';
 import Link from 'next/link';
 
 interface HeaderProps {
-  title: string;
-  subtitle: string;
-  stats: TaskStats;
+  title?: string;
+  subtitle?: string;
+  stats?: TaskStats;
   syncing?: boolean;
 }
 
-export function Header({ title, subtitle, stats, syncing = false }: HeaderProps) {
+export function Header({ title = "TowerControl", subtitle = "Task Management", stats, syncing = false }: HeaderProps) {
   const { theme, toggleTheme } = useTheme();
 
   return (
@@ -55,6 +55,12 @@ export function Header({ title, subtitle, stats, syncing = false }: HeaderProps)
               >
                 Tags
               </Link>
+              <Link
+                href="/settings"
+                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
+              >
+                Settings
+              </Link>
               
               {/* Theme Toggle */}
               <button
@@ -75,29 +81,31 @@ export function Header({ title, subtitle, stats, syncing = false }: HeaderProps)
             </nav>
           </div>
 
-          {/* Stats essentielles */}
-          <div className="flex flex-wrap gap-3">
-            <StatCard 
-              label="TOTAL" 
-              value={String(stats.total).padStart(2, '0')} 
-              color="blue"
-            />
-            <StatCard 
-              label="DONE" 
-              value={String(stats.completed).padStart(2, '0')} 
-              color="green"
-            />
-            <StatCard 
-              label="ACTIVE" 
-              value={String(stats.inProgress).padStart(2, '0')} 
-              color="yellow"
-            />
-            <StatCard 
-              label="RATE" 
-              value={`${stats.completionRate}%`} 
-              color="purple"
-            />
-          </div>
+          {/* Stats essentielles - seulement si stats disponibles */}
+          {stats && (
+            <div className="flex flex-wrap gap-3">
+              <StatCard 
+                label="TOTAL" 
+                value={String(stats.total).padStart(2, '0')} 
+                color="blue"
+              />
+              <StatCard 
+                label="DONE" 
+                value={String(stats.completed).padStart(2, '0')} 
+                color="green"
+              />
+              <StatCard 
+                label="ACTIVE" 
+                value={String(stats.inProgress).padStart(2, '0')} 
+                color="yellow"
+              />
+              <StatCard 
+                label="RATE" 
+                value={`${stats.completionRate}%`} 
+                color="purple"
+              />
+            </div>
+          )}
         </div>
       </div>
     </header>

components/ui/SimpleHeader.tsx

@@ -1,78 +0,0 @@
-import { useTheme } from '@/contexts/ThemeContext';
-import Link from 'next/link';
-
-interface SimpleHeaderProps {
-  title: string;
-  subtitle: string;
-  syncing?: boolean;
-}
-
-export function SimpleHeader({ title, subtitle, syncing = false }: SimpleHeaderProps) {
-  const { theme, toggleTheme } = useTheme();
-
-  return (
-    <header className="bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
-      <div className="container mx-auto px-6 py-4">
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
-          {/* Titre tech avec glow */}
-          <div className="flex items-center gap-6">
-            <div className="flex items-center gap-4">
-              <div className={`w-3 h-3 rounded-full shadow-lg ${
-                syncing 
-                  ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
-                  : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
-              }`}></div>
-              <div>
-                <h1 className="text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider">
-                  {title}
-                </h1>
-                <p className="text-[var(--muted-foreground)] mt-1 font-mono text-sm">
-                  {subtitle} {syncing && '• Synchronisation...'}
-                </p>
-              </div>
-            </div>
-
-            {/* Navigation */}
-            <nav className="hidden sm:flex items-center gap-4">
-              <Link
-                href="/"
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
-              >
-                Kanban
-              </Link>
-              <Link
-                href="/daily"
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
-              >
-                Daily
-              </Link>
-              <Link
-                href="/tags"
-                className="text-[var(--muted-foreground)] hover:text-[var(--accent)] transition-colors font-mono text-sm uppercase tracking-wider"
-              >
-                Tags
-              </Link>
-              
-              {/* Theme Toggle */}
-              <button
-                onClick={toggleTheme}
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
-                title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
-              >
-                {theme === 'dark' ? (
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                  </svg>
-                ) : (
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                  </svg>
-                )}
-              </button>
-            </nav>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}