feat: implement Moving Motivators feature with session management, real-time event handling, and UI components for enhanced user experience

src/app/sessions/WorkshopTabs.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { Card, Badge } from '@/components/ui';
+
+type WorkshopType = 'all' | 'swot' | 'motivators';
+
+interface ShareUser {
+  id: string;
+  name: string | null;
+  email: string;
+}
+
+interface Share {
+  id: string;
+  role: 'VIEWER' | 'EDITOR';
+  user: ShareUser;
+}
+
+interface SwotSession {
+  id: string;
+  title: string;
+  collaborator: string;
+  updatedAt: Date;
+  isOwner: boolean;
+  role: 'OWNER' | 'VIEWER' | 'EDITOR';
+  user: { id: string; name: string | null; email: string };
+  shares: Share[];
+  _count: { items: number; actions: number };
+  workshopType: 'swot';
+}
+
+interface MotivatorSession {
+  id: string;
+  title: string;
+  participant: string;
+  updatedAt: Date;
+  isOwner: boolean;
+  role: 'OWNER' | 'VIEWER' | 'EDITOR';
+  user: { id: string; name: string | null; email: string };
+  shares: Share[];
+  _count: { cards: number };
+  workshopType: 'motivators';
+}
+
+type AnySession = SwotSession | MotivatorSession;
+
+interface WorkshopTabsProps {
+  swotSessions: SwotSession[];
+  motivatorSessions: MotivatorSession[];
+}
+
+export function WorkshopTabs({ swotSessions, motivatorSessions }: WorkshopTabsProps) {
+  const [activeTab, setActiveTab] = useState<WorkshopType>('all');
+
+  // Combine and sort all sessions
+  const allSessions: AnySession[] = [...swotSessions, ...motivatorSessions].sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+  );
+
+  // Filter based on active tab
+  const filteredSessions =
+    activeTab === 'all'
+      ? allSessions
+      : activeTab === 'swot'
+        ? swotSessions
+        : motivatorSessions;
+
+  // Separate by ownership
+  const ownedSessions = filteredSessions.filter((s) => s.isOwner);
+  const sharedSessions = filteredSessions.filter((s) => !s.isOwner);
+
+  return (
+    <div className="space-y-6">
+      {/* Tabs */}
+      <div className="flex gap-2 border-b border-border pb-4">
+        <TabButton
+          active={activeTab === 'all'}
+          onClick={() => setActiveTab('all')}
+          icon="📋"
+          label="Tous"
+          count={allSessions.length}
+        />
+        <TabButton
+          active={activeTab === 'swot'}
+          onClick={() => setActiveTab('swot')}
+          icon="📊"
+          label="SWOT"
+          count={swotSessions.length}
+        />
+        <TabButton
+          active={activeTab === 'motivators'}
+          onClick={() => setActiveTab('motivators')}
+          icon="🎯"
+          label="Moving Motivators"
+          count={motivatorSessions.length}
+        />
+      </div>
+
+      {/* Sessions */}
+      {filteredSessions.length === 0 ? (
+        <div className="text-center py-12 text-muted">
+          Aucun atelier de ce type pour le moment
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {/* My Sessions */}
+          {ownedSessions.length > 0 && (
+            <section>
+              <h2 className="text-lg font-semibold text-foreground mb-4">
+                📁 Mes ateliers ({ownedSessions.length})
+              </h2>
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {ownedSessions.map((s) => (
+                  <SessionCard key={s.id} session={s} />
+                ))}
+              </div>
+            </section>
+          )}
+
+          {/* Shared Sessions */}
+          {sharedSessions.length > 0 && (
+            <section>
+              <h2 className="text-lg font-semibold text-foreground mb-4">
+                🤝 Partagés avec moi ({sharedSessions.length})
+              </h2>
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {sharedSessions.map((s) => (
+                  <SessionCard key={s.id} session={s} />
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TabButton({
+  active,
+  onClick,
+  icon,
+  label,
+  count,
+}: {
+  active: boolean;
+  onClick: () => void;
+  icon: string;
+  label: string;
+  count: number;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors
+        ${active
+          ? 'bg-primary text-primary-foreground'
+          : 'text-muted hover:bg-card-hover hover:text-foreground'
+        }
+      `}
+    >
+      <span>{icon}</span>
+      <span>{label}</span>
+      <Badge variant={active ? 'default' : 'primary'} className="ml-1">
+        {count}
+      </Badge>
+    </button>
+  );
+}
+
+function SessionCard({ session }: { session: AnySession }) {
+  const isSwot = session.workshopType === 'swot';
+  const href = isSwot ? `/sessions/${session.id}` : `/motivators/${session.id}`;
+  const icon = isSwot ? '📊' : '🎯';
+  const participant = isSwot
+    ? (session as SwotSession).collaborator
+    : (session as MotivatorSession).participant;
+  const accentColor = isSwot ? '#06b6d4' : '#8b5cf6';
+
+  return (
+    <Link href={href}>
+      <Card hover className="h-full p-4 relative overflow-hidden">
+        {/* Accent bar */}
+        <div
+          className="absolute top-0 left-0 right-0 h-1"
+          style={{ backgroundColor: accentColor }}
+        />
+
+        {/* Header: Icon + Title + Role badge */}
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-xl">{icon}</span>
+          <h3 className="font-semibold text-foreground line-clamp-1 flex-1">
+            {session.title}
+          </h3>
+          {!session.isOwner && (
+            <span
+              className="text-xs px-1.5 py-0.5 rounded"
+              style={{
+                backgroundColor: session.role === 'EDITOR' ? 'rgba(6,182,212,0.1)' : 'rgba(234,179,8,0.1)',
+                color: session.role === 'EDITOR' ? '#06b6d4' : '#eab308',
+              }}
+            >
+              {session.role === 'EDITOR' ? '✏️' : '👁️'}
+            </span>
+          )}
+        </div>
+
+        {/* Participant + Owner info */}
+        <p className="text-sm text-muted mb-3 line-clamp-1">
+          👤 {participant}
+          {!session.isOwner && (
+            <span className="text-xs"> · par {session.user.name || session.user.email}</span>
+          )}
+        </p>
+
+        {/* Footer: Stats + Avatars + Date */}
+        <div className="flex items-center justify-between text-xs">
+          {/* Stats */}
+          <div className="flex items-center gap-2 text-muted">
+            {isSwot ? (
+              <>
+                <span>{(session as SwotSession)._count.items} items</span>
+                <span>·</span>
+                <span>{(session as SwotSession)._count.actions} actions</span>
+              </>
+            ) : (
+              <span>{(session as MotivatorSession)._count.cards}/10</span>
+            )}
+          </div>
+
+          {/* Date */}
+          <span className="text-muted">
+            {new Date(session.updatedAt).toLocaleDateString('fr-FR', {
+              day: 'numeric',
+              month: 'short',
+            })}
+          </span>
+        </div>
+
+        {/* Shared with */}
+        {session.isOwner && session.shares.length > 0 && (
+          <div className="flex items-center gap-2 mt-3 pt-3 border-t border-border">
+            <span className="text-[10px] text-muted uppercase tracking-wide">Partagé</span>
+            <div className="flex flex-wrap gap-1.5">
+              {session.shares.slice(0, 3).map((share) => (
+                <div
+                  key={share.id}
+                  className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-primary/10 text-[10px] text-primary"
+                  title={share.role === 'EDITOR' ? 'Éditeur' : 'Lecteur'}
+                >
+                  <span className="font-medium">
+                    {share.user.name?.split(' ')[0] || share.user.email.split('@')[0]}
+                  </span>
+                  <span>{share.role === 'EDITOR' ? '✏️' : '👁️'}</span>
+                </div>
+              ))}
+              {session.shares.length > 3 && (
+                <span className="text-[10px] text-muted">
+                  +{session.shares.length - 3}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+      </Card>
+    </Link>
+  );
+}
+

src/app/sessions/page.tsx

@@ -1,7 +1,9 @@
 import Link from 'next/link';
 import { auth } from '@/lib/auth';
 import { getSessionsByUserId } from '@/services/sessions';
+import { getMotivatorSessionsByUserId } from '@/services/moving-motivators';
 import { Card, CardContent, Badge, Button } from '@/components/ui';
+import { WorkshopTabs } from './WorkshopTabs';
 
 export default async function SessionsPage() {
   const session = await auth();
@@ -10,129 +12,87 @@ export default async function SessionsPage() {
     return null;
   }
 
-  const sessions = await getSessionsByUserId(session.user.id);
+  // Fetch both SWOT and Moving Motivators sessions
+  const [swotSessions, motivatorSessions] = await Promise.all([
+    getSessionsByUserId(session.user.id),
+    getMotivatorSessionsByUserId(session.user.id),
+  ]);
 
-  // Separate owned vs shared sessions
-  const ownedSessions = sessions.filter((s) => s.isOwner);
-  const sharedSessions = sessions.filter((s) => !s.isOwner);
+  // Add type to each session for unified display
+  const allSwotSessions = swotSessions.map((s) => ({
+    ...s,
+    workshopType: 'swot' as const,
+  }));
+
+  const allMotivatorSessions = motivatorSessions.map((s) => ({
+    ...s,
+    workshopType: 'motivators' as const,
+  }));
+
+  // Combine and sort by updatedAt
+  const allSessions = [...allSwotSessions, ...allMotivatorSessions].sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+  );
+
+  const hasNoSessions = allSessions.length === 0;
 
   return (
     <main className="mx-auto max-w-7xl px-4 py-8">
       {/* Header */}
-      <div className="mb-8 flex items-center justify-between">
+      <div className="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold text-foreground">Mes Sessions SWOT</h1>
+          <h1 className="text-3xl font-bold text-foreground">Mes Ateliers</h1>
           <p className="mt-1 text-muted">
-            Gérez vos ateliers SWOT avec vos collaborateurs
+            Tous vos ateliers en un seul endroit
           </p>
         </div>
-        <Link href="/sessions/new">
-          <Button>
-            <span>✨</span>
-            Nouvelle Session
-          </Button>
-        </Link>
+        <div className="flex gap-2">
+          <Link href="/sessions/new">
+            <Button variant="outline">
+              <span>📊</span>
+              Nouveau SWOT
+            </Button>
+          </Link>
+          <Link href="/motivators/new">
+            <Button>
+              <span>🎯</span>
+              Nouveau Motivators
+            </Button>
+          </Link>
+        </div>
       </div>
 
-      {/* Sessions Grid */}
-      {sessions.length === 0 ? (
+      {/* Content */}
+      {hasNoSessions ? (
         <Card className="p-12 text-center">
-          <div className="text-5xl mb-4">📋</div>
+          <div className="text-5xl mb-4">🚀</div>
           <h2 className="text-xl font-semibold text-foreground mb-2">
-            Aucune session pour le moment
+            Commencez votre premier atelier
           </h2>
-          <p className="text-muted mb-6">
-            Créez votre première session SWOT pour commencer à analyser les forces,
-            faiblesses, opportunités et menaces de vos collaborateurs.
+          <p className="text-muted mb-6 max-w-md mx-auto">
+            Créez un atelier SWOT pour analyser les forces et faiblesses, ou un Moving Motivators pour découvrir les motivations de vos collaborateurs.
           </p>
-          <Link href="/sessions/new">
-            <Button>Créer ma première session</Button>
-          </Link>
+          <div className="flex gap-3 justify-center">
+            <Link href="/sessions/new">
+              <Button variant="outline">
+                <span>📊</span>
+                Créer un SWOT
+              </Button>
+            </Link>
+            <Link href="/motivators/new">
+              <Button>
+                <span>🎯</span>
+                Créer un Moving Motivators
+              </Button>
+            </Link>
+          </div>
         </Card>
       ) : (
-        <div className="space-y-8">
-          {/* My Sessions */}
-          {ownedSessions.length > 0 && (
-            <section>
-              <h2 className="text-lg font-semibold text-foreground mb-4">
-                📁 Mes sessions ({ownedSessions.length})
-              </h2>
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {ownedSessions.map((s) => (
-                  <SessionCard key={s.id} session={s} />
-                ))}
-              </div>
-            </section>
-          )}
-
-          {/* Shared Sessions */}
-          {sharedSessions.length > 0 && (
-            <section>
-              <h2 className="text-lg font-semibold text-foreground mb-4">
-                🤝 Sessions partagées avec moi ({sharedSessions.length})
-              </h2>
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {sharedSessions.map((s) => (
-                  <SessionCard key={s.id} session={s} />
-                ))}
-              </div>
-            </section>
-          )}
-        </div>
+        <WorkshopTabs
+          swotSessions={allSwotSessions}
+          motivatorSessions={allMotivatorSessions}
+        />
       )}
     </main>
   );
 }
-
-type SessionWithMeta = Awaited<ReturnType<typeof getSessionsByUserId>>[number];
-
-function SessionCard({ session: s }: { session: SessionWithMeta }) {
-  return (
-    <Link href={`/sessions/${s.id}`}>
-      <Card hover className="h-full p-6">
-        <div className="mb-4 flex items-start justify-between">
-          <div className="flex-1 min-w-0">
-            <h3 className="font-semibold text-foreground line-clamp-1">
-              {s.title}
-            </h3>
-            <p className="text-sm text-muted">{s.collaborator}</p>
-            {!s.isOwner && (
-              <p className="text-xs text-muted mt-1">
-                Par {s.user.name || s.user.email}
-              </p>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            {!s.isOwner && (
-              <Badge variant={s.role === 'EDITOR' ? 'primary' : 'warning'}>
-                {s.role === 'EDITOR' ? '✏️' : '👁️'}
-              </Badge>
-            )}
-            <span className="text-2xl">📊</span>
-          </div>
-        </div>
-
-        <CardContent className="p-0">
-          <div className="flex flex-wrap gap-2 mb-4">
-            <Badge variant="primary">
-              {s._count.items} items
-            </Badge>
-            <Badge variant="success">
-              {s._count.actions} actions
-            </Badge>
-          </div>
-
-          <p className="text-xs text-muted">
-            Mis à jour le{' '}
-            {new Date(s.updatedAt).toLocaleDateString('fr-FR', {
-              day: 'numeric',
-              month: 'long',
-              year: 'numeric',
-            })}
-          </p>
-        </CardContent>
-      </Card>
-    </Link>
-  );
-}
-