feat: jira and synchro

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>
+  );
+}