feat: jira and synchro

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