chore: update devbook.md to mark completion of layout, UI components, and homepage; update dev.db

devbook.md

@@ -135,16 +135,16 @@ Application de gestion d'ateliers SWOT pour entretiens managériaux.
 
 ## Phase 4 : Layout & Navigation
 
-- [ ] Créer le layout principal avec :
-  - [ ] Header avec navigation et user menu
-  - [ ] Theme toggle (dark/light)
-- [ ] Créer les composants UI de base :
-  - [ ] Button
-  - [ ] Card
-  - [ ] Input
-  - [ ] Modal
-  - [ ] Badge
-- [ ] Créer la page d'accueil `/` - Dashboard avec liste des sessions
+- [x] Créer le layout principal avec :
+  - [x] Header avec navigation et user menu
+  - [x] Theme toggle (dark/light)
+- [x] Créer les composants UI de base :
+  - [x] Button
+  - [x] Card
+  - [x] Input
+  - [x] Modal
+  - [x] Badge
+- [x] Créer la page d'accueil `/` - Dashboard avec liste des sessions
 
 ---
 

src/app/api/sessions/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from 'next/server';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/services/database';
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
+    }
+
+    const sessions = await prisma.session.findMany({
+      where: { userId: session.user.id },
+      include: {
+        _count: {
+          select: {
+            items: true,
+            actions: true,
+          },
+        },
+      },
+      orderBy: { updatedAt: 'desc' },
+    });
+
+    return NextResponse.json(sessions);
+  } catch (error) {
+    console.error('Error fetching sessions:', error);
+    return NextResponse.json(
+      { error: 'Erreur lors de la récupération des sessions' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { title, collaborator } = body;
+
+    if (!title || !collaborator) {
+      return NextResponse.json(
+        { error: 'Titre et collaborateur requis' },
+        { status: 400 }
+      );
+    }
+
+    const newSession = await prisma.session.create({
+      data: {
+        title,
+        collaborator,
+        userId: session.user.id,
+      },
+    });
+
+    return NextResponse.json(newSession, { status: 201 });
+  } catch (error) {
+    console.error('Error creating session:', error);
+    return NextResponse.json(
+      { error: 'Erreur lors de la création de la session' },
+      { status: 500 }
+    );
+  }
+}
+

src/app/sessions/new/page.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, Input } from '@/components/ui';
+
+export default function NewSessionPage() {
+  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 collaborator = formData.get('collaborator') as string;
+
+    if (!title || !collaborator) {
+      setError('Veuillez remplir tous les champs');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title, collaborator }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || 'Une erreur est survenue');
+        setLoading(false);
+        return;
+      }
+
+      router.push(`/sessions/${data.id}`);
+    } catch {
+      setError('Une erreur est survenue');
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>✨</span>
+            Nouvelle Session SWOT
+          </CardTitle>
+          <CardDescription>
+            Créez une nouvelle session d&apos;atelier SWOT pour un 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 de la session"
+              name="title"
+              placeholder="Ex: Entretien annuel 2025"
+              required
+            />
+
+            <Input
+              label="Nom du collaborateur"
+              name="collaborator"
+              placeholder="Ex: Jean Dupont"
+              required
+            />
+
+            <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 la session
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+

src/app/sessions/page.tsx

@@ -0,0 +1,105 @@
+import Link from 'next/link';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/services/database';
+import { Card, CardContent, Badge, Button } from '@/components/ui';
+
+async function getSessions(userId: string) {
+  return prisma.session.findMany({
+    where: { userId },
+    include: {
+      _count: {
+        select: {
+          items: true,
+          actions: true,
+        },
+      },
+    },
+    orderBy: { updatedAt: 'desc' },
+  });
+}
+
+export default async function SessionsPage() {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return null;
+  }
+
+  const sessions = await getSessions(session.user.id);
+
+  return (
+    <main className="mx-auto max-w-7xl px-4 py-8">
+      {/* Header */}
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Mes Sessions SWOT</h1>
+          <p className="mt-1 text-muted">
+            Gérez vos ateliers SWOT avec vos collaborateurs
+          </p>
+        </div>
+        <Link href="/sessions/new">
+          <Button>
+            <span>✨</span>
+            Nouvelle Session
+          </Button>
+        </Link>
+      </div>
+
+      {/* Sessions Grid */}
+      {sessions.length === 0 ? (
+        <Card className="p-12 text-center">
+          <div className="text-5xl mb-4">📋</div>
+          <h2 className="text-xl font-semibold text-foreground mb-2">
+            Aucune session pour le moment
+          </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>
+          <Link href="/sessions/new">
+            <Button>Créer ma première session</Button>
+          </Link>
+        </Card>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {sessions.map((s) => (
+            <Link key={s.id} href={`/sessions/${s.id}`}>
+              <Card hover className="h-full p-6">
+                <div className="mb-4 flex items-start justify-between">
+                  <div>
+                    <h3 className="font-semibold text-foreground line-clamp-1">
+                      {s.title}
+                    </h3>
+                    <p className="text-sm text-muted">{s.collaborator}</p>
+                  </div>
+                  <span className="text-2xl">📊</span>
+                </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>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}
+

src/components/ui/Badge.tsx

@@ -0,0 +1,50 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+type BadgeVariant =
+  | 'default'
+  | 'primary'
+  | 'strength'
+  | 'weakness'
+  | 'opportunity'
+  | 'threat'
+  | 'success'
+  | 'warning'
+  | 'destructive';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: 'bg-card-hover text-foreground border-border',
+  primary: 'bg-primary/10 text-primary border-primary/20',
+  strength: 'bg-strength-bg text-strength border-strength-border',
+  weakness: 'bg-weakness-bg text-weakness border-weakness-border',
+  opportunity: 'bg-opportunity-bg text-opportunity border-opportunity-border',
+  threat: 'bg-threat-bg text-threat border-threat-border',
+  success: 'bg-success/10 text-success border-success/20',
+  warning: 'bg-warning/10 text-warning border-warning/20',
+  destructive: 'bg-destructive/10 text-destructive border-destructive/20',
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className = '', variant = 'default', children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={`
+          inline-flex items-center rounded-full border px-2.5 py-0.5
+          text-xs font-medium
+          ${variantStyles[variant]}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+

src/components/ui/Button.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    'bg-primary text-primary-foreground hover:bg-primary-hover border-transparent',
+  secondary:
+    'bg-card text-foreground hover:bg-card-hover border-border',
+  outline:
+    'bg-transparent text-foreground hover:bg-card-hover border-border',
+  ghost:
+    'bg-transparent text-foreground hover:bg-card-hover border-transparent',
+  destructive:
+    'bg-destructive text-white hover:bg-destructive/90 border-transparent',
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: 'h-8 px-3 text-sm gap-1.5',
+  md: 'h-10 px-4 text-sm gap-2',
+  lg: 'h-12 px-6 text-base gap-2',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = '', variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || loading}
+        className={`
+          inline-flex items-center justify-center rounded-lg border font-medium
+          transition-colors focus-visible:outline-none focus-visible:ring-2
+          focus-visible:ring-ring focus-visible:ring-offset-2
+          disabled:pointer-events-none disabled:opacity-50
+          ${variantStyles[variant]}
+          ${sizeStyles[size]}
+          ${className}
+        `}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="h-4 w-4 animate-spin"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+

src/components/ui/Card.tsx

@@ -0,0 +1,66 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  hover?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className = '', hover = false, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          rounded-xl border border-border bg-card
+          ${hover ? 'transition-colors hover:bg-card-hover cursor-pointer' : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`p-6 pb-4 ${className}`} {...props} />
+  )
+);
+
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className = '', ...props }, ref) => (
+    <h3 ref={ref} className={`text-lg font-semibold text-foreground ${className}`} {...props} />
+  )
+);
+
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className = '', ...props }, ref) => (
+    <p ref={ref} className={`mt-1 text-sm text-muted ${className}`} {...props} />
+  )
+);
+
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+);
+
+CardContent.displayName = 'CardContent';
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`flex items-center p-6 pt-0 ${className}`} {...props} />
+  )
+);
+
+CardFooter.displayName = 'CardFooter';
+

src/components/ui/Input.tsx

@@ -0,0 +1,44 @@
+import { forwardRef, InputHTMLAttributes } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className = '', label, error, id, ...props }, ref) => {
+    const inputId = id || props.name;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="mb-2 block text-sm font-medium text-foreground"
+          >
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={`
+            w-full rounded-lg border bg-input px-4 py-2.5 text-foreground
+            placeholder:text-muted-foreground
+            focus:outline-none focus:ring-2 focus:ring-primary/20
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
+            ${className}
+          `}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1.5 text-sm text-destructive">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+

src/components/ui/Modal.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { Fragment, ReactNode, useEffect, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeStyles = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+};
+
+function subscribe() {
+  return () => {};
+}
+
+function useIsMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalProps) {
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  if (!isMounted || !isOpen) return null;
+
+  return createPortal(
+    <Fragment>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className={`
+            w-full ${sizeStyles[size]} rounded-xl border border-border
+            bg-card shadow-xl
+            animate-in fade-in-0 zoom-in-95
+          `}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? 'modal-title' : undefined}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          {title && (
+            <div className="flex items-center justify-between border-b border-border px-6 py-4">
+              <h2 id="modal-title" className="text-lg font-semibold text-foreground">
+                {title}
+              </h2>
+              <button
+                onClick={onClose}
+                className="rounded-lg p-1 text-muted hover:bg-card-hover hover:text-foreground transition-colors"
+                aria-label="Fermer"
+              >
+                <svg
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
+
+          {/* Content */}
+          <div className="p-6">{children}</div>
+        </div>
+      </div>
+    </Fragment>,
+    document.body
+  );
+}
+
+interface ModalFooterProps {
+  children: ReactNode;
+}
+
+export function ModalFooter({ children }: ModalFooterProps) {
+  return (
+    <div className="flex items-center justify-end gap-3 border-t border-border -mx-6 -mb-6 mt-6 px-6 py-4 bg-card-hover/50 rounded-b-xl">
+      {children}
+    </div>
+  );
+}

src/components/ui/Textarea.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className = '', label, error, id, ...props }, ref) => {
+    const textareaId = id || props.name;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="mb-2 block text-sm font-medium text-foreground"
+          >
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={textareaId}
+          className={`
+            w-full rounded-lg border bg-input px-4 py-2.5 text-foreground
+            placeholder:text-muted-foreground
+            focus:outline-none focus:ring-2 focus:ring-primary/20
+            disabled:cursor-not-allowed disabled:opacity-50
+            resize-none
+            ${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
+            ${className}
+          `}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1.5 text-sm text-destructive">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+

src/components/ui/index.ts

@@ -0,0 +1,7 @@
+export { Button } from './Button';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Badge } from './Badge';
+export { Modal, ModalFooter } from './Modal';
+