feat: add Weekly Check-in feature with models, UI components, and session management for enhanced team collaboration

src/app/api/weekly-checkin/[id]/subscribe/route.ts

@@ -0,0 +1,122 @@
+import { auth } from '@/lib/auth';
+import {
+  canAccessWeeklyCheckInSession,
+  getWeeklyCheckInSessionEvents,
+} from '@/services/weekly-checkin';
+
+export const dynamic = 'force-dynamic';
+
+// Store active connections per session
+const connections = new Map<string, Set<ReadableStreamDefaultController>>();
+
+export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id: sessionId } = await params;
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+
+  // Check access
+  const hasAccess = await canAccessWeeklyCheckInSession(sessionId, session.user.id);
+  if (!hasAccess) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  const userId = session.user.id;
+  let lastEventTime = new Date();
+  let controller: ReadableStreamDefaultController;
+
+  const stream = new ReadableStream({
+    start(ctrl) {
+      controller = ctrl;
+
+      // Register connection
+      if (!connections.has(sessionId)) {
+        connections.set(sessionId, new Set());
+      }
+      connections.get(sessionId)!.add(controller);
+
+      // Send initial ping
+      const encoder = new TextEncoder();
+      controller.enqueue(
+        encoder.encode(`data: ${JSON.stringify({ type: 'connected', userId })}\n\n`)
+      );
+    },
+    cancel() {
+      // Remove connection on close
+      connections.get(sessionId)?.delete(controller);
+      if (connections.get(sessionId)?.size === 0) {
+        connections.delete(sessionId);
+      }
+    },
+  });
+
+  // Poll for new events (simple approach, works with any DB)
+  const pollInterval = setInterval(async () => {
+    try {
+      const events = await getWeeklyCheckInSessionEvents(sessionId, lastEventTime);
+      if (events.length > 0) {
+        const encoder = new TextEncoder();
+        for (const event of events) {
+          // Don't send events to the user who created them
+          if (event.userId !== userId) {
+            controller.enqueue(
+              encoder.encode(
+                `data: ${JSON.stringify({
+                  type: event.type,
+                  payload: JSON.parse(event.payload),
+                  userId: event.userId,
+                  user: event.user,
+                  timestamp: event.createdAt,
+                })}\n\n`
+              )
+            );
+          }
+          lastEventTime = event.createdAt;
+        }
+      }
+    } catch {
+      // Connection might be closed
+      clearInterval(pollInterval);
+    }
+  }, 1000); // Poll every second
+
+  // Cleanup on abort
+  request.signal.addEventListener('abort', () => {
+    clearInterval(pollInterval);
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  });
+}
+
+// Helper to broadcast to all connections (called from actions)
+export function broadcastToWeeklyCheckInSession(sessionId: string, event: object) {
+  const sessionConnections = connections.get(sessionId);
+  if (!sessionConnections || sessionConnections.size === 0) {
+    return;
+  }
+
+  const encoder = new TextEncoder();
+  const message = encoder.encode(`data: ${JSON.stringify(event)}\n\n`);
+
+  for (const controller of sessionConnections) {
+    try {
+      controller.enqueue(message);
+    } catch {
+      // Connection might be closed, remove it
+      sessionConnections.delete(controller);
+    }
+  }
+
+  // Clean up empty sets
+  if (sessionConnections.size === 0) {
+    connections.delete(sessionId);
+  }
+}

src/app/page.tsx

@@ -68,6 +68,22 @@ export default function Home() {
               accentColor="#f59e0b"
               newHref="/year-review/new"
             />
+
+            {/* Weekly Check-in Workshop Card */}
+            <WorkshopCard
+              href="/sessions?tab=weekly-checkin"
+              icon="📝"
+              title="Weekly Check-in"
+              tagline="Le point hebdomadaire avec vos collaborateurs"
+              description="Chaque semaine, faites le point avec vos collaborateurs sur ce qui s'est bien passé, ce qui s'est mal passé, les enjeux du moment et les prochains enjeux."
+              features={[
+                '4 catégories : Bien passé, Mal passé, Enjeux du moment, Prochains enjeux',
+                'Ajout d\'émotions à chaque item (fierté, joie, frustration, etc.)',
+                'Suivi hebdomadaire régulier',
+              ]}
+              accentColor="#10b981"
+              newHref="/weekly-checkin/new"
+            />
           </div>
         </section>
 
@@ -355,6 +371,94 @@ export default function Home() {
           </div>
         </section>
 
+        {/* Weekly Check-in Deep Dive Section */}
+        <section className="mb-16">
+          <div className="flex items-center gap-3 mb-8">
+            <span className="text-4xl">📝</span>
+            <div>
+              <h2 className="text-3xl font-bold text-foreground">Weekly Check-in</h2>
+              <p className="text-green-500 font-medium">Le point hebdomadaire avec vos collaborateurs</p>
+            </div>
+          </div>
+
+          <div className="grid gap-8 lg:grid-cols-2">
+            {/* Why */}
+            <div className="rounded-xl border border-border bg-card p-6">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">💡</span>
+                Pourquoi faire un check-in hebdomadaire ?
+              </h3>
+              <p className="text-muted mb-4">
+                Le Weekly Check-in est un rituel de management qui permet de maintenir un lien régulier
+                avec vos collaborateurs. Il favorise la communication, l&apos;alignement et la détection
+                précoce des problèmes ou opportunités.
+              </p>
+              <ul className="space-y-2 text-sm text-muted">
+                <li className="flex items-start gap-2">
+                  <span className="text-green-500">•</span>
+                  Maintenir un suivi régulier et structuré avec chaque collaborateur
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-500">•</span>
+                  Identifier rapidement les points positifs et les difficultés rencontrées
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-500">•</span>
+                  Comprendre les priorités et enjeux du moment pour mieux accompagner
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-500">•</span>
+                  Créer un espace d&apos;échange ouvert où les émotions peuvent être exprimées
+                </li>
+              </ul>
+            </div>
+
+            {/* The 4 categories */}
+            <div className="rounded-xl border border-border bg-card p-6">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">📋</span>
+                Les 4 catégories du check-in
+              </h3>
+              <div className="space-y-3">
+                <CategoryPill icon="✅" name="Ce qui s'est bien passé" color="#22c55e" description="Les réussites et points positifs" />
+                <CategoryPill icon="⚠️" name="Ce qui s'est mal passé" color="#ef4444" description="Les difficultés et points d'amélioration" />
+                <CategoryPill icon="🎯" name="Enjeux du moment" color="#3b82f6" description="Sur quoi je me concentre actuellement" />
+                <CategoryPill icon="🚀" name="Prochains enjeux" color="#8b5cf6" description="Ce sur quoi je vais me concentrer prochainement" />
+              </div>
+            </div>
+
+            {/* How it works */}
+            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">⚙️</span>
+                Comment ça marche ?
+              </h3>
+              <div className="grid md:grid-cols-4 gap-4">
+                <StepCard
+                  number={1}
+                  title="Créer le check-in"
+                  description="Créez un nouveau check-in pour la semaine avec votre collaborateur"
+                />
+                <StepCard
+                  number={2}
+                  title="Remplir les catégories"
+                  description="Pour chaque catégorie, ajoutez les éléments pertinents de la semaine"
+                />
+                <StepCard
+                  number={3}
+                  title="Ajouter des émotions"
+                  description="Associez une émotion à chaque item pour mieux exprimer votre ressenti"
+                />
+                <StepCard
+                  number={4}
+                  title="Partager et discuter"
+                  description="Partagez le check-in avec votre collaborateur pour un échange constructif"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* OKRs Deep Dive Section */}
         <section className="mb-16">
           <div className="flex items-center gap-3 mb-8">

src/app/sessions/WorkshopTabs.tsx

@@ -15,10 +15,18 @@ import {
 import { deleteSwotSession, updateSwotSession } from '@/actions/session';
 import { deleteMotivatorSession, updateMotivatorSession } from '@/actions/moving-motivators';
 import { deleteYearReviewSession, updateYearReviewSession } from '@/actions/year-review';
+import { deleteWeeklyCheckInSession, updateWeeklyCheckInSession } from '@/actions/weekly-checkin';
 
-type WorkshopType = 'all' | 'swot' | 'motivators' | 'year-review' | 'byPerson';
+type WorkshopType = 'all' | 'swot' | 'motivators' | 'year-review' | 'weekly-checkin' | 'byPerson';
 
-const VALID_TABS: WorkshopType[] = ['all', 'swot', 'motivators', 'year-review', 'byPerson'];
+const VALID_TABS: WorkshopType[] = [
+  'all',
+  'swot',
+  'motivators',
+  'year-review',
+  'weekly-checkin',
+  'byPerson',
+];
 
 interface ShareUser {
   id: string;
@@ -84,12 +92,28 @@ interface YearReviewSession {
   workshopType: 'year-review';
 }
 
-type AnySession = SwotSession | MotivatorSession | YearReviewSession;
+interface WeeklyCheckInSession {
+  id: string;
+  title: string;
+  participant: string;
+  resolvedParticipant: ResolvedCollaborator;
+  date: Date;
+  updatedAt: Date;
+  isOwner: boolean;
+  role: 'OWNER' | 'VIEWER' | 'EDITOR';
+  user: { id: string; name: string | null; email: string };
+  shares: Share[];
+  _count: { items: number };
+  workshopType: 'weekly-checkin';
+}
+
+type AnySession = SwotSession | MotivatorSession | YearReviewSession | WeeklyCheckInSession;
 
 interface WorkshopTabsProps {
   swotSessions: SwotSession[];
   motivatorSessions: MotivatorSession[];
   yearReviewSessions: YearReviewSession[];
+  weeklyCheckInSessions: WeeklyCheckInSession[];
 }
 
 // Helper to get resolved collaborator from any session
@@ -98,6 +122,8 @@ function getResolvedCollaborator(session: AnySession): ResolvedCollaborator {
     return (session as SwotSession).resolvedCollaborator;
   } else if (session.workshopType === 'year-review') {
     return (session as YearReviewSession).resolvedParticipant;
+  } else if (session.workshopType === 'weekly-checkin') {
+    return (session as WeeklyCheckInSession).resolvedParticipant;
   } else {
     return (session as MotivatorSession).resolvedParticipant;
   }
@@ -141,6 +167,7 @@ export function WorkshopTabs({
   swotSessions,
   motivatorSessions,
   yearReviewSessions,
+  weeklyCheckInSessions,
 }: WorkshopTabsProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -165,6 +192,7 @@ export function WorkshopTabs({
     ...swotSessions,
     ...motivatorSessions,
     ...yearReviewSessions,
+    ...weeklyCheckInSessions,
   ].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
 
   // Filter based on active tab (for non-byPerson tabs)
@@ -175,7 +203,9 @@ export function WorkshopTabs({
         ? swotSessions
         : activeTab === 'motivators'
           ? motivatorSessions
-          : yearReviewSessions;
+          : activeTab === 'year-review'
+            ? yearReviewSessions
+            : weeklyCheckInSessions;
 
   // Separate by ownership
   const ownedSessions = filteredSessions.filter((s) => s.isOwner);
@@ -226,6 +256,13 @@ export function WorkshopTabs({
           label="Year Review"
           count={yearReviewSessions.length}
         />
+        <TabButton
+          active={activeTab === 'weekly-checkin'}
+          onClick={() => setActiveTab('weekly-checkin')}
+          icon="📝"
+          label="Weekly Check-in"
+          count={weeklyCheckInSessions.length}
+        />
       </div>
 
       {/* Sessions */}
@@ -343,18 +380,29 @@ function SessionCard({ session }: { session: AnySession }) {
 
   const isSwot = session.workshopType === 'swot';
   const isYearReview = session.workshopType === 'year-review';
+  const isWeeklyCheckIn = session.workshopType === 'weekly-checkin';
   const href = isSwot
     ? `/sessions/${session.id}`
     : isYearReview
       ? `/year-review/${session.id}`
-      : `/motivators/${session.id}`;
-  const icon = isSwot ? '📊' : isYearReview ? '📅' : '🎯';
+      : isWeeklyCheckIn
+        ? `/weekly-checkin/${session.id}`
+        : `/motivators/${session.id}`;
+  const icon = isSwot ? '📊' : isYearReview ? '📅' : isWeeklyCheckIn ? '📝' : '🎯';
   const participant = isSwot
     ? (session as SwotSession).collaborator
     : isYearReview
       ? (session as YearReviewSession).participant
-      : (session as MotivatorSession).participant;
-  const accentColor = isSwot ? '#06b6d4' : isYearReview ? '#f59e0b' : '#8b5cf6';
+      : isWeeklyCheckIn
+        ? (session as WeeklyCheckInSession).participant
+        : (session as MotivatorSession).participant;
+  const accentColor = isSwot
+    ? '#06b6d4'
+    : isYearReview
+      ? '#f59e0b'
+      : isWeeklyCheckIn
+        ? '#10b981'
+        : '#8b5cf6';
 
   const handleDelete = () => {
     startTransition(async () => {
@@ -362,7 +410,9 @@ function SessionCard({ session }: { session: AnySession }) {
         ? await deleteSwotSession(session.id)
         : isYearReview
           ? await deleteYearReviewSession(session.id)
-          : await deleteMotivatorSession(session.id);
+          : isWeeklyCheckIn
+            ? await deleteWeeklyCheckInSession(session.id)
+            : await deleteMotivatorSession(session.id);
 
       if (result.success) {
         setShowDeleteModal(false);
@@ -381,10 +431,15 @@ function SessionCard({ session }: { session: AnySession }) {
               title: editTitle,
               participant: editParticipant,
             })
-          : await updateMotivatorSession(session.id, {
-              title: editTitle,
-              participant: editParticipant,
-            });
+          : isWeeklyCheckIn
+            ? await updateWeeklyCheckInSession(session.id, {
+                title: editTitle,
+                participant: editParticipant,
+              })
+            : await updateMotivatorSession(session.id, {
+                title: editTitle,
+                participant: editParticipant,
+              });
 
       if (result.success) {
         setShowEditModal(false);
@@ -401,6 +456,8 @@ function SessionCard({ session }: { session: AnySession }) {
     setShowEditModal(true);
   };
 
+  const editParticipantLabel = isSwot ? 'Collaborateur' : 'Participant';
+
   return (
     <>
       <div className="relative group">
@@ -456,6 +513,17 @@ function SessionCard({ session }: { session: AnySession }) {
                     <span>·</span>
                     <span>Année {(session as YearReviewSession).year}</span>
                   </>
+                ) : isWeeklyCheckIn ? (
+                  <>
+                    <span>{(session as WeeklyCheckInSession)._count.items} items</span>
+                    <span>·</span>
+                    <span>
+                      {new Date((session as WeeklyCheckInSession).date).toLocaleDateString('fr-FR', {
+                        day: 'numeric',
+                        month: 'short',
+                      })}
+                    </span>
+                  </>
                 ) : (
                   <span>{(session as MotivatorSession)._count.cards}/10</span>
                 )}
@@ -570,7 +638,7 @@ function SessionCard({ session }: { session: AnySession }) {
               htmlFor="edit-participant"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              {isSwot ? 'Collaborateur' : 'Participant'}
+              {editParticipantLabel}
             </label>
             <Input
               id="edit-participant"

src/app/sessions/page.tsx

@@ -4,6 +4,7 @@ import { auth } from '@/lib/auth';
 import { getSessionsByUserId } from '@/services/sessions';
 import { getMotivatorSessionsByUserId } from '@/services/moving-motivators';
 import { getYearReviewSessionsByUserId } from '@/services/year-review';
+import { getWeeklyCheckInSessionsByUserId } from '@/services/weekly-checkin';
 import { Card, Button } from '@/components/ui';
 import { WorkshopTabs } from './WorkshopTabs';
 
@@ -33,12 +34,14 @@ export default async function SessionsPage() {
     return null;
   }
 
-  // Fetch SWOT, Moving Motivators, and Year Review sessions
-  const [swotSessions, motivatorSessions, yearReviewSessions] = await Promise.all([
-    getSessionsByUserId(session.user.id),
-    getMotivatorSessionsByUserId(session.user.id),
-    getYearReviewSessionsByUserId(session.user.id),
-  ]);
+  // Fetch SWOT, Moving Motivators, Year Review, and Weekly Check-in sessions
+  const [swotSessions, motivatorSessions, yearReviewSessions, weeklyCheckInSessions] =
+    await Promise.all([
+      getSessionsByUserId(session.user.id),
+      getMotivatorSessionsByUserId(session.user.id),
+      getYearReviewSessionsByUserId(session.user.id),
+      getWeeklyCheckInSessionsByUserId(session.user.id),
+    ]);
 
   // Add type to each session for unified display
   const allSwotSessions = swotSessions.map((s) => ({
@@ -56,11 +59,17 @@ export default async function SessionsPage() {
     workshopType: 'year-review' as const,
   }));
 
+  const allWeeklyCheckInSessions = weeklyCheckInSessions.map((s) => ({
+    ...s,
+    workshopType: 'weekly-checkin' as const,
+  }));
+
   // Combine and sort by updatedAt
   const allSessions = [
     ...allSwotSessions,
     ...allMotivatorSessions,
     ...allYearReviewSessions,
+    ...allWeeklyCheckInSessions,
   ].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
 
   const hasNoSessions = allSessions.length === 0;
@@ -87,11 +96,17 @@ export default async function SessionsPage() {
             </Button>
           </Link>
           <Link href="/year-review/new">
-            <Button>
+            <Button variant="outline">
               <span>📅</span>
               Nouveau Year Review
             </Button>
           </Link>
+          <Link href="/weekly-checkin/new">
+            <Button>
+              <span>📝</span>
+              Nouveau Check-in
+            </Button>
+          </Link>
         </div>
       </div>
 
@@ -104,9 +119,10 @@ export default async function SessionsPage() {
           </h2>
           <p className="text-muted mb-6 max-w-md mx-auto">
             Créez un atelier SWOT pour analyser les forces et faiblesses, un Moving Motivators pour
-            découvrir les motivations, ou un Year Review pour faire le bilan de l&apos;année.
+            découvrir les motivations, un Year Review pour faire le bilan de l&apos;année, ou un
+            Weekly Check-in pour le suivi hebdomadaire.
           </p>
-          <div className="flex gap-3 justify-center">
+          <div className="flex gap-3 justify-center flex-wrap">
             <Link href="/sessions/new">
               <Button variant="outline">
                 <span>📊</span>
@@ -120,11 +136,17 @@ export default async function SessionsPage() {
               </Button>
             </Link>
             <Link href="/year-review/new">
-              <Button>
+              <Button variant="outline">
                 <span>📅</span>
                 Créer un Year Review
               </Button>
             </Link>
+            <Link href="/weekly-checkin/new">
+              <Button>
+                <span>📝</span>
+                Créer un Check-in
+              </Button>
+            </Link>
           </div>
         </Card>
       ) : (
@@ -133,6 +155,7 @@ export default async function SessionsPage() {
             swotSessions={allSwotSessions}
             motivatorSessions={allMotivatorSessions}
             yearReviewSessions={allYearReviewSessions}
+            weeklyCheckInSessions={allWeeklyCheckInSessions}
           />
         </Suspense>
       )}

src/app/weekly-checkin/[id]/page.tsx

@@ -0,0 +1,101 @@
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { auth } from '@/lib/auth';
+import { getWeeklyCheckInSessionById } from '@/services/weekly-checkin';
+import { getUserOKRsForPeriod } from '@/services/okrs';
+import { getCurrentQuarterPeriod } from '@/lib/okr-utils';
+import { WeeklyCheckInBoard, WeeklyCheckInLiveWrapper } from '@/components/weekly-checkin';
+import { CurrentQuarterOKRs } from '@/components/weekly-checkin/CurrentQuarterOKRs';
+import { Badge, CollaboratorDisplay } from '@/components/ui';
+import { EditableWeeklyCheckInTitle } from '@/components/ui';
+
+interface WeeklyCheckInSessionPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function WeeklyCheckInSessionPage({ params }: WeeklyCheckInSessionPageProps) {
+  const { id } = await params;
+  const authSession = await auth();
+
+  if (!authSession?.user?.id) {
+    return null;
+  }
+
+  const session = await getWeeklyCheckInSessionById(id, authSession.user.id);
+
+  if (!session) {
+    notFound();
+  }
+
+  // Get current quarter OKRs for the participant (NOT the creator)
+  // We use session.resolvedParticipant.matchedUser.id which is the participant's user ID
+  const currentQuarterPeriod = getCurrentQuarterPeriod(session.date);
+  let currentQuarterOKRs: Awaited<ReturnType<typeof getUserOKRsForPeriod>> = [];
+  
+  // Only fetch OKRs if the participant is a recognized user (has matchedUser)
+  if (session.resolvedParticipant.matchedUser) {
+    // Use participant's ID, not session.userId (which is the creator's ID)
+    const participantUserId = session.resolvedParticipant.matchedUser.id;
+    currentQuarterOKRs = await getUserOKRsForPeriod(participantUserId, currentQuarterPeriod);
+  }
+
+  return (
+    <main className="mx-auto max-w-7xl px-4 py-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 text-sm text-muted mb-2">
+          <Link href="/sessions?tab=weekly-checkin" className="hover:text-foreground">
+            Weekly Check-in
+          </Link>
+          <span>/</span>
+          <span className="text-foreground">{session.title}</span>
+          {!session.isOwner && (
+            <Badge variant="accent" className="ml-2">
+              Partagé par {session.user.name || session.user.email}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-start justify-between">
+          <div>
+            <EditableWeeklyCheckInTitle
+              sessionId={session.id}
+              initialTitle={session.title}
+              isOwner={session.isOwner}
+            />
+            <div className="mt-2">
+              <CollaboratorDisplay collaborator={session.resolvedParticipant} size="lg" showEmail />
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge variant="primary">{session.items.length} items</Badge>
+            <span className="text-sm text-muted">
+              {new Date(session.date).toLocaleDateString('fr-FR', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Current Quarter OKRs */}
+      {currentQuarterOKRs.length > 0 && (
+        <CurrentQuarterOKRs okrs={currentQuarterOKRs} period={currentQuarterPeriod} />
+      )}
+
+      {/* Live Wrapper + Board */}
+      <WeeklyCheckInLiveWrapper
+        sessionId={session.id}
+        sessionTitle={session.title}
+        currentUserId={authSession.user.id}
+        shares={session.shares}
+        isOwner={session.isOwner}
+        canEdit={session.canEdit}
+      >
+        <WeeklyCheckInBoard sessionId={session.id} items={session.items} />
+      </WeeklyCheckInLiveWrapper>
+    </main>
+  );
+}

src/app/weekly-checkin/new/page.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Button,
+  Input,
+} from '@/components/ui';
+import { createWeeklyCheckInSession } from '@/actions/weekly-checkin';
+
+export default function NewWeeklyCheckInPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+    const title = formData.get('title') as string;
+    const participant = formData.get('participant') as string;
+    const dateStr = formData.get('date') as string;
+    const date = dateStr ? new Date(dateStr) : undefined;
+
+    if (!title || !participant) {
+      setError('Veuillez remplir tous les champs');
+      setLoading(false);
+      return;
+    }
+
+    const result = await createWeeklyCheckInSession({ title, participant, date });
+
+    if (!result.success) {
+      setError(result.error || 'Une erreur est survenue');
+      setLoading(false);
+      return;
+    }
+
+    router.push(`/weekly-checkin/${result.data?.id}`);
+  }
+
+  // Default date to today
+  const today = new Date().toISOString().split('T')[0];
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>📝</span>
+            Nouveau Check-in Hebdomadaire
+          </CardTitle>
+          <CardDescription>
+            Créez un check-in hebdomadaire pour faire le point sur la semaine avec votre
+            collaborateur
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {error && (
+              <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <Input
+              label="Titre du check-in"
+              name="title"
+              placeholder="Ex: Check-in semaine du 15 janvier"
+              required
+            />
+
+            <Input
+              label="Nom du collaborateur"
+              name="participant"
+              placeholder="Ex: Jean Dupont"
+              required
+            />
+
+            <div>
+              <label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">
+                Date du check-in
+              </label>
+              <input
+                id="date"
+                name="date"
+                type="date"
+                defaultValue={today}
+                required
+                className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+              />
+            </div>
+
+            <div className="rounded-lg border border-border bg-card-hover p-4">
+              <h3 className="font-medium text-foreground mb-2">Comment ça marche ?</h3>
+              <ol className="text-sm text-muted space-y-1 list-decimal list-inside">
+                <li>
+                  <strong>Ce qui s&apos;est bien passé</strong> : Notez les réussites et points
+                  positifs de la semaine
+                </li>
+                <li>
+                  <strong>Ce qui s&apos;est mal passé</strong> : Identifiez les difficultés et
+                  points d&apos;amélioration
+                </li>
+                <li>
+                  <strong>Enjeux du moment</strong> : Décrivez sur quoi vous vous concentrez
+                  actuellement
+                </li>
+                <li>
+                  <strong>Prochains enjeux</strong> : Définissez ce sur quoi vous allez vous
+                  concentrer prochainement
+                </li>
+              </ol>
+              <p className="text-sm text-muted mt-2">
+                💡 <strong>Astuce</strong> : Ajoutez une émotion à chaque item pour mieux exprimer
+                votre ressenti (fierté, joie, frustration, etc.)
+              </p>
+            </div>
+
+            <div className="flex gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => router.back()}
+                disabled={loading}
+              >
+                Annuler
+              </Button>
+              <Button type="submit" loading={loading} className="flex-1">
+                Créer le check-in
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}