Mission Refactor Big

app/api/missions/[missionId]/generate-plan/route.ts

@@ -0,0 +1,214 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from "@/app/api/auth/options";
+import { prisma } from '@/lib/prisma';
+import { logger } from '@/lib/logger';
+
+/**
+ * POST /api/missions/[missionId]/generate-plan
+ * 
+ * Generates an action plan by calling N8N webhook which uses an LLM.
+ * Saves the generated plan to the mission.
+ */
+export async function POST(
+  request: Request,
+  props: { params: Promise<{ missionId: string }> }
+) {
+  const params = await props.params;
+  
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { missionId } = params;
+    if (!missionId) {
+      return NextResponse.json({ error: 'Mission ID is required' }, { status: 400 });
+    }
+
+    // Get the mission
+    const mission = await prisma.mission.findUnique({
+      where: { id: missionId }
+    });
+
+    if (!mission) {
+      return NextResponse.json({ error: 'Mission not found' }, { status: 404 });
+    }
+
+    // Check if user has permission (creator or admin)
+    const isCreator = mission.creatorId === session.user.id;
+    const userRoles = Array.isArray(session.user.role) ? session.user.role : [];
+    const isAdmin = userRoles.includes('admin') || userRoles.includes('ADMIN');
+    
+    if (!isCreator && !isAdmin) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+    }
+
+    // Prepare data for N8N webhook
+    const webhookData = {
+      name: mission.name,
+      oddScope: mission.oddScope,
+      niveau: mission.niveau,
+      intention: mission.intention,
+      missionType: mission.missionType,
+      donneurDOrdre: mission.donneurDOrdre,
+      projection: mission.projection,
+      services: mission.services,
+      participation: mission.participation,
+      profils: mission.profils,
+    };
+
+    logger.debug('Calling N8N GeneratePlan webhook', {
+      missionId,
+      missionName: mission.name
+    });
+
+    // Call N8N webhook
+    const webhookUrl = process.env.N8N_GENERATE_PLAN_WEBHOOK_URL || 'https://brain.slm-lab.net/webhook/GeneratePlan';
+    const apiKey = process.env.N8N_API_KEY || '';
+
+    const response = await fetch(webhookUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': apiKey
+      },
+      body: JSON.stringify(webhookData),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      logger.error('N8N GeneratePlan webhook error', {
+        status: response.status,
+        error: errorText.substring(0, 200)
+      });
+      throw new Error(`Failed to generate plan: ${response.status}`);
+    }
+
+    // Parse the response
+    const responseText = await response.text();
+    let actionPlan: string;
+
+    try {
+      const result = JSON.parse(responseText);
+      // The LLM response might be in different formats
+      actionPlan = result.plan || result.actionPlan || result.content || result.text || responseText;
+    } catch {
+      // If not JSON, use the raw text
+      actionPlan = responseText;
+    }
+
+    logger.debug('Received action plan from N8N', {
+      missionId,
+      planLength: actionPlan.length
+    });
+
+    // Save the action plan to the mission
+    const updatedMission = await prisma.mission.update({
+      where: { id: missionId },
+      data: {
+        actionPlan: actionPlan,
+        actionPlanGeneratedAt: new Date()
+      }
+    });
+
+    logger.debug('Action plan saved successfully', {
+      missionId,
+      generatedAt: updatedMission.actionPlanGeneratedAt
+    });
+
+    return NextResponse.json({
+      success: true,
+      actionPlan: updatedMission.actionPlan,
+      generatedAt: updatedMission.actionPlanGeneratedAt
+    });
+
+  } catch (error) {
+    logger.error('Error generating action plan', {
+      error: error instanceof Error ? error.message : String(error),
+      missionId: params.missionId
+    });
+    return NextResponse.json(
+      { error: 'Failed to generate action plan', details: error instanceof Error ? error.message : String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * PUT /api/missions/[missionId]/generate-plan
+ * 
+ * Updates the action plan (allows manual editing by creator)
+ */
+export async function PUT(
+  request: Request,
+  props: { params: Promise<{ missionId: string }> }
+) {
+  const params = await props.params;
+  
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { missionId } = params;
+    if (!missionId) {
+      return NextResponse.json({ error: 'Mission ID is required' }, { status: 400 });
+    }
+
+    const body = await request.json();
+    const { actionPlan } = body;
+
+    if (typeof actionPlan !== 'string') {
+      return NextResponse.json({ error: 'actionPlan must be a string' }, { status: 400 });
+    }
+
+    // Get the mission
+    const mission = await prisma.mission.findUnique({
+      where: { id: missionId }
+    });
+
+    if (!mission) {
+      return NextResponse.json({ error: 'Mission not found' }, { status: 404 });
+    }
+
+    // Check if user has permission (creator or admin)
+    const isCreator = mission.creatorId === session.user.id;
+    const userRoles = Array.isArray(session.user.role) ? session.user.role : [];
+    const isAdmin = userRoles.includes('admin') || userRoles.includes('ADMIN');
+    
+    if (!isCreator && !isAdmin) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+    }
+
+    // Update the action plan
+    const updatedMission = await prisma.mission.update({
+      where: { id: missionId },
+      data: {
+        actionPlan: actionPlan
+      }
+    });
+
+    logger.debug('Action plan updated successfully', {
+      missionId
+    });
+
+    return NextResponse.json({
+      success: true,
+      actionPlan: updatedMission.actionPlan
+    });
+
+  } catch (error) {
+    logger.error('Error updating action plan', {
+      error: error instanceof Error ? error.message : String(error),
+      missionId: params.missionId
+    });
+    return NextResponse.json(
+      { error: 'Failed to update action plan', details: error instanceof Error ? error.message : String(error) },
+      { status: 500 }
+    );
+  }
+}
+

app/missions/[missionId]/page.tsx

@@ -2,7 +2,22 @@
 
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { FileIcon, Calendar, Eye, MapPin, Users, Clock, ThumbsUp, Languages, BarChart, Edit, Trash2 } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { 
+  FileIcon, 
+  Calendar, 
+  MapPin, 
+  Users, 
+  Clock, 
+  ThumbsUp, 
+  Languages, 
+  Trash2,
+  Sparkles,
+  Save,
+  Loader2,
+  FileText
+} from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
 import { useParams, useRouter } from "next/navigation";
 
@@ -37,6 +52,8 @@ interface Mission {
   services?: string[];
   profils?: string[];
   attachments?: Attachment[];
+  actionPlan?: string | null;
+  actionPlanGeneratedAt?: string | null;
   createdAt: string;
   creator: User;
   missionUsers: any[];
@@ -46,6 +63,11 @@ export default function MissionDetailPage() {
   const [mission, setMission] = useState<Mission | null>(null);
   const [loading, setLoading] = useState(true);
   const [deleting, setDeleting] = useState(false);
+  const [generatingPlan, setGeneratingPlan] = useState(false);
+  const [savingPlan, setSavingPlan] = useState(false);
+  const [editedPlan, setEditedPlan] = useState<string>("");
+  const [isPlanModified, setIsPlanModified] = useState(false);
+  const [activeTab, setActiveTab] = useState("general");
   const { toast } = useToast();
   const params = useParams();
   const router = useRouter();
@@ -63,6 +85,7 @@ export default function MissionDetailPage() {
         const data = await response.json();
         console.log("Mission details:", data);
         setMission(data);
+        setEditedPlan(data.actionPlan || "");
       } catch (error) {
         console.error('Error fetching mission details:', error);
         toast({
@@ -80,6 +103,13 @@ export default function MissionDetailPage() {
     }
   }, [missionId, toast]);
 
+  // Track if plan has been modified
+  useEffect(() => {
+    if (mission) {
+      setIsPlanModified(editedPlan !== (mission.actionPlan || ""));
+    }
+  }, [editedPlan, mission]);
+
   // Helper function to format date
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
@@ -119,13 +149,29 @@ export default function MissionDetailPage() {
     }
   };
 
+  const getDonneurDOrdreLabel = (donneurDOrdre: string) => {
+    switch(donneurDOrdre) {
+      case 'individual': return 'Individu';
+      case 'group': return 'ONG';
+      case 'organization': return 'Start-ups';
+      default: return donneurDOrdre;
+    }
+  };
+
+  const getParticipationLabel = (participation: string) => {
+    switch(participation) {
+      case 'volontaire': return 'Volontaire';
+      case 'cooptation': return 'Cooptation';
+      default: return participation;
+    }
+  };
+
   // Function to get odd info
   const getODDInfo = (oddScope: string[]) => {
     const oddCode = oddScope && oddScope.length > 0 
       ? oddScope[0] 
       : null;
     
-    // Extract number from odd code (e.g., "odd-3" -> "3")
     const oddNumber = oddCode ? oddCode.replace('odd-', '') : null;
     
     return {
@@ -135,11 +181,6 @@ export default function MissionDetailPage() {
     };
   };
   
-  // Handle edit mission
-  const handleEditMission = () => {
-    router.push(`/missions/${missionId}/edit`);
-  };
-  
   // Handle delete mission
   const handleDeleteMission = async () => {
     if (!confirm("Êtes-vous sûr de vouloir supprimer cette mission ? Cette action est irréversible.")) {
@@ -161,7 +202,6 @@ export default function MissionDetailPage() {
         description: "La mission a été supprimée avec succès",
       });
       
-      // Redirect back to missions list
       router.push('/missions');
     } catch (error) {
       console.error('Error deleting mission:', error);
@@ -175,6 +215,86 @@ export default function MissionDetailPage() {
     }
   };
 
+  // Handle generate action plan
+  const handleGeneratePlan = async () => {
+    try {
+      setGeneratingPlan(true);
+      
+      const response = await fetch(`/api/missions/${missionId}/generate-plan`, {
+        method: 'POST',
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to generate plan');
+      }
+      
+      const data = await response.json();
+      
+      setEditedPlan(data.actionPlan || "");
+      setMission(prev => prev ? {
+        ...prev,
+        actionPlan: data.actionPlan,
+        actionPlanGeneratedAt: data.generatedAt
+      } : null);
+      
+      toast({
+        title: "Plan d'action généré",
+        description: "Le plan d'action a été généré avec succès par l'IA",
+      });
+    } catch (error) {
+      console.error('Error generating plan:', error);
+      toast({
+        title: "Erreur",
+        description: error instanceof Error ? error.message : "Impossible de générer le plan d'action",
+        variant: "destructive",
+      });
+    } finally {
+      setGeneratingPlan(false);
+    }
+  };
+
+  // Handle save action plan
+  const handleSavePlan = async () => {
+    try {
+      setSavingPlan(true);
+      
+      const response = await fetch(`/api/missions/${missionId}/generate-plan`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ actionPlan: editedPlan }),
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to save plan');
+      }
+      
+      setMission(prev => prev ? {
+        ...prev,
+        actionPlan: editedPlan
+      } : null);
+      
+      setIsPlanModified(false);
+      
+      toast({
+        title: "Plan sauvegardé",
+        description: "Le plan d'action a été sauvegardé avec succès",
+      });
+    } catch (error) {
+      console.error('Error saving plan:', error);
+      toast({
+        title: "Erreur",
+        description: error instanceof Error ? error.message : "Impossible de sauvegarder le plan d'action",
+        variant: "destructive",
+      });
+    } finally {
+      setSavingPlan(false);
+    }
+  };
+
   // Loading state
   if (loading) {
     return (
@@ -206,7 +326,7 @@ export default function MissionDetailPage() {
 
   return (
     <div className="bg-gray-50 min-h-screen p-6">
-      {/* Header */}
+      {/* Header with Name and Logo */}
       <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
         <div className="flex justify-between items-start">
           <div>
@@ -219,7 +339,7 @@ export default function MissionDetailPage() {
             </div>
           </div>
           
-          {/* Display logo instead of Participate button */}
+          {/* Logo */}
           <div className="w-24 h-24 rounded-md overflow-hidden flex-shrink-0">
             {mission.logoUrl ? (
               <img 
@@ -227,20 +347,10 @@ export default function MissionDetailPage() {
                 alt={mission.name}
                 className="w-full h-full object-cover rounded-md"
                 onError={(e) => {
-                  console.error("Logo failed to load:", {
-                    missionId: mission.id,
-                    missionName: mission.name,
-                    logoUrl: mission.logoUrl,
-                    logoPath: mission.logo
-                  });
-                  // Show placeholder on error
                   (e.currentTarget as HTMLImageElement).style.display = 'none';
                   const parent = e.currentTarget.parentElement;
                   if (parent) {
-                    parent.classList.add('bg-gray-100');
+                    parent.classList.add('bg-gray-100', 'flex', 'items-center', 'justify-center');
-                    parent.classList.add('flex');
-                    parent.classList.add('items-center');
-                    parent.classList.add('justify-center');
                     parent.innerHTML = `<span class="text-2xl font-medium text-gray-400">${mission.name.slice(0, 2).toUpperCase()}</span>`;
                   }
                 }}
@@ -254,161 +364,271 @@ export default function MissionDetailPage() {
         </div>
       </div>
 
-      {/* Info Grid */}
+      {/* Tabs */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
+        <TabsList className="mb-6 bg-white border border-gray-200 p-1 rounded-lg">
-          <div className="bg-amber-50 p-3 rounded-full mr-3">
+          <TabsTrigger 
-            <MapPin className="h-5 w-5 text-amber-600" />
+            value="general" 
-          </div>
+            className="data-[state=active]:bg-blue-600 data-[state=active]:text-white px-6 py-2"
-          <div>
+          >
-            <p className="text-sm text-gray-500 font-medium">Type de mission</p>
+            <FileText className="h-4 w-4 mr-2" />
-            <p className="text-gray-800 font-medium">{getMissionTypeLabel(mission.missionType)}</p>
+            Général
-          </div>
+          </TabsTrigger>
-        </div>
+          <TabsTrigger 
+            value="plan" 
+            className="data-[state=active]:bg-blue-600 data-[state=active]:text-white px-6 py-2"
+          >
+            <Sparkles className="h-4 w-4 mr-2" />
+            Plan d'actions
+          </TabsTrigger>
+        </TabsList>
 
-        <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
+        {/* General Tab */}
-          <div className="bg-blue-50 p-3 rounded-full mr-3">
+        <TabsContent value="general" className="space-y-6">
-            <Users className="h-5 w-5 text-blue-600" />
+          {/* Info Grid */}
-          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div>
+            <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-            <p className="text-sm text-gray-500 font-medium">Donneur d'ordre</p>
+              <div className="bg-amber-50 p-3 rounded-full mr-3">
-            <p className="text-gray-800 font-medium">{mission.donneurDOrdre || "Non spécifié"}</p>
+                <MapPin className="h-5 w-5 text-amber-600" />
-          </div>
+              </div>
-        </div>
+              <div>
-        
+                <p className="text-sm text-gray-500 font-medium">Type de mission</p>
-        <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
+                <p className="text-gray-800 font-medium">{getMissionTypeLabel(mission.missionType)}</p>
-          <div className="bg-green-50 p-3 rounded-full mr-3">
+              </div>
-            <Clock className="h-5 w-5 text-green-600" />
-          </div>
-          <div>
-            <p className="text-sm text-gray-500 font-medium">Durée</p>
-            <p className="text-gray-800 font-medium">{getDurationLabel(mission.projection)}</p>
-          </div>
-        </div>
-        
-        <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-          <div className="bg-purple-50 p-3 rounded-full mr-3">
-            <ThumbsUp className="h-5 w-5 text-purple-600" />
-          </div>
-          <div>
-            <p className="text-sm text-gray-500 font-medium">Niveau</p>
-            <p className="text-gray-800 font-medium">{getNiveauLabel(mission.niveau)}</p>
-          </div>
-        </div>
-        
-        <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-          <div className="bg-indigo-50 p-3 rounded-full mr-3">
-            <Languages className="h-5 w-5 text-indigo-600" />
-          </div>
-          <div>
-            <p className="text-sm text-gray-500 font-medium">Participation</p>
-            <p className="text-gray-800 font-medium">{mission.participation || "Non spécifié"}</p>
-          </div>
-        </div>
-        
-        {oddInfo.number && (
-          <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-            <div className="bg-red-50 p-3 rounded-full mr-3 flex items-center justify-center">
-              <img 
-                src={oddInfo.iconPath} 
-                alt={oddInfo.label}
-                className="h-8 w-8" 
-              />
             </div>
-            <div>
+            
-              <p className="text-sm text-gray-500 font-medium">Objectif</p>
+            <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-              <p className="text-gray-800 font-medium">Développement durable</p>
+              <div className="bg-blue-50 p-3 rounded-full mr-3">
+                <Users className="h-5 w-5 text-blue-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-500 font-medium">Donneur d'ordre</p>
+                <p className="text-gray-800 font-medium">{getDonneurDOrdreLabel(mission.donneurDOrdre || "")}</p>
+              </div>
             </div>
-          </div>
-        )}
-      </div>
             
-      {/* Project Description */}
+            <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-      <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
+              <div className="bg-green-50 p-3 rounded-full mr-3">
-        <h2 className="text-xl font-semibold text-gray-800 mb-4">Description de la mission</h2>
+                <Clock className="h-5 w-5 text-green-600" />
-        <div className="text-gray-700 whitespace-pre-wrap">
+              </div>
-          {mission.intention || "Aucune description disponible pour cette mission."}
+              <div>
-        </div>
+                <p className="text-sm text-gray-500 font-medium">Durée</p>
-      </div>
+                <p className="text-gray-800 font-medium">{getDurationLabel(mission.projection)}</p>
+              </div>
+            </div>
             
-      {/* Attachments Section */}
+            <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-      {mission.attachments && mission.attachments.length > 0 && (
+              <div className="bg-purple-50 p-3 rounded-full mr-3">
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
+                <ThumbsUp className="h-5 w-5 text-purple-600" />
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">Documents</h2>
+              </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              <div>
-            {mission.attachments.map((attachment) => (
+                <p className="text-sm text-gray-500 font-medium">Niveau</p>
-              <a 
+                <p className="text-gray-800 font-medium">{getNiveauLabel(mission.niveau)}</p>
-                key={attachment.id} 
+              </div>
-                href={attachment.publicUrl} 
+            </div>
-                target="_blank" 
+            
-                rel="noopener noreferrer"
+            <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-                className="bg-green-50 p-4 rounded-lg flex flex-col hover:bg-green-100 transition-colors"
+              <div className="bg-indigo-50 p-3 rounded-full mr-3">
-              >
+                <Languages className="h-5 w-5 text-indigo-600" />
-                <div className="text-green-700 mb-2">
+              </div>
-                  <FileIcon className="h-10 w-10" />
+              <div>
+                <p className="text-sm text-gray-500 font-medium">Participation</p>
+                <p className="text-gray-800 font-medium">{getParticipationLabel(mission.participation || "")}</p>
+              </div>
+            </div>
+            
+            {oddInfo.number && (
+              <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
+                <div className="bg-red-50 p-3 rounded-full mr-3 flex items-center justify-center">
+                  <img 
+                    src={oddInfo.iconPath} 
+                    alt={oddInfo.label}
+                    className="h-8 w-8" 
+                  />
                 </div>
                 <div>
-                  <p className="font-medium text-gray-800 mb-1 truncate">{attachment.filename}</p>
+                  <p className="text-sm text-gray-500 font-medium">Objectif</p>
-                  <p className="text-sm text-gray-500">
+                  <p className="text-gray-800 font-medium">{oddInfo.label}</p>
-                    {attachment.fileType.split('/')[1]?.toUpperCase() || 'Fichier'}
-                  </p>
                 </div>
-              </a>
+              </div>
-            ))}
+            )}
           </div>
-        </div>
-      )}
 
-      {/* Skills Required Section */}
+          {/* Description */}
-      {mission.profils && mission.profils.length > 0 && (
+          <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">Description de la mission</h2>
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">Profils recherchés</h2>
+            <div className="text-gray-700 whitespace-pre-wrap">
-          <div className="flex flex-wrap gap-2">
+              {mission.intention || "Aucune description disponible pour cette mission."}
-            {mission.profils.map((profil, index) => (
+            </div>
-              <span 
-                key={index} 
-                className="bg-red-50 text-red-800 px-3 py-2 rounded-full text-sm"
-              >
-                {profil}
-              </span>
-            ))}
           </div>
-        </div>
-      )}
 
-      {/* Services Section */}
+          {/* Services */}
-      {mission.services && mission.services.length > 0 && (
+          {mission.services && mission.services.length > 0 && (
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">Services</h2>
+              <h2 className="text-xl font-semibold text-gray-800 mb-4">Services</h2>
-          <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap gap-2">
-            {mission.services.map((service, index) => (
+                {mission.services.map((service, index) => (
-              <span 
+                  <span 
-                key={index} 
+                    key={index} 
-                className="bg-blue-50 text-blue-800 px-3 py-2 rounded-full text-sm"
+                    className="bg-blue-50 text-blue-800 px-3 py-2 rounded-full text-sm font-medium"
-              >
+                  >
-                {service}
+                    {service}
-              </span>
+                  </span>
-            ))}
+                ))}
-          </div>
+              </div>
-        </div>
+            </div>
-      )}
-
-      {/* Action Buttons */}
-      <div className="flex justify-end gap-4 mb-8">
-        <Button 
-          variant="outline"
-          className="flex items-center gap-2 border-red-600 text-red-600 hover:bg-red-50 bg-white"
-          onClick={handleDeleteMission}
-          disabled={deleting}
-        >
-          {deleting ? (
-            <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-red-600"></div>
-          ) : (
-            <Trash2 className="h-4 w-4" />
           )}
-          Supprimer
+
-        </Button>
+          {/* Profils */}
-      </div>
+          {mission.profils && mission.profils.length > 0 && (
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
+              <h2 className="text-xl font-semibold text-gray-800 mb-4">Profils recherchés</h2>
+              <div className="flex flex-wrap gap-2">
+                {mission.profils.map((profil, index) => (
+                  <span 
+                    key={index} 
+                    className="bg-red-50 text-red-800 px-3 py-2 rounded-full text-sm font-medium"
+                  >
+                    {profil}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Attachments */}
+          {mission.attachments && mission.attachments.length > 0 && (
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
+              <h2 className="text-xl font-semibold text-gray-800 mb-4">Documents</h2>
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                {mission.attachments.map((attachment) => (
+                  <a 
+                    key={attachment.id} 
+                    href={attachment.publicUrl} 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="bg-green-50 p-4 rounded-lg flex flex-col hover:bg-green-100 transition-colors"
+                  >
+                    <div className="text-green-700 mb-2">
+                      <FileIcon className="h-10 w-10" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-800 mb-1 truncate">{attachment.filename}</p>
+                      <p className="text-sm text-gray-500">
+                        {attachment.fileType.split('/')[1]?.toUpperCase() || 'Fichier'}
+                      </p>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Delete Button */}
+          <div className="flex justify-end">
+            <Button 
+              variant="outline"
+              className="flex items-center gap-2 border-red-600 text-red-600 hover:bg-red-50 bg-white"
+              onClick={handleDeleteMission}
+              disabled={deleting}
+            >
+              {deleting ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4" />
+              )}
+              Supprimer la mission
+            </Button>
+          </div>
+        </TabsContent>
+
+        {/* Plan d'actions Tab */}
+        <TabsContent value="plan" className="space-y-6">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
+            <div className="flex justify-between items-center mb-6">
+              <div>
+                <h2 className="text-xl font-semibold text-gray-800">Plan d'actions</h2>
+                {mission.actionPlanGeneratedAt && (
+                  <p className="text-sm text-gray-500 mt-1">
+                    Généré le {formatDate(mission.actionPlanGeneratedAt)}
+                  </p>
+                )}
+              </div>
+              <div className="flex gap-3">
+                {isPlanModified && (
+                  <Button
+                    onClick={handleSavePlan}
+                    disabled={savingPlan}
+                    className="bg-green-600 hover:bg-green-700 text-white"
+                  >
+                    {savingPlan ? (
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                      <Save className="h-4 w-4 mr-2" />
+                    )}
+                    Sauvegarder
+                  </Button>
+                )}
+                <Button
+                  onClick={handleGeneratePlan}
+                  disabled={generatingPlan}
+                  className="bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  {generatingPlan ? (
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  ) : (
+                    <Sparkles className="h-4 w-4 mr-2" />
+                  )}
+                  {mission.actionPlan ? "Régénérer" : "Générer"}
+                </Button>
+              </div>
+            </div>
+
+            {/* Plan Content */}
+            {editedPlan || mission.actionPlan ? (
+              <div className="space-y-4">
+                <Textarea
+                  value={editedPlan}
+                  onChange={(e) => setEditedPlan(e.target.value)}
+                  placeholder="Le plan d'action généré apparaîtra ici. Vous pouvez le modifier après génération."
+                  className="min-h-[400px] font-mono text-sm bg-gray-50 border-gray-200"
+                />
+                {isPlanModified && (
+                  <p className="text-sm text-amber-600 flex items-center gap-1">
+                    <span className="w-2 h-2 bg-amber-500 rounded-full"></span>
+                    Modifications non sauvegardées
+                  </p>
+                )}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                  <Sparkles className="h-10 w-10 text-blue-500" />
+                </div>
+                <h3 className="text-lg font-medium text-gray-900 mb-2">
+                  Aucun plan d'action généré
+                </h3>
+                <p className="text-gray-500 mb-6 max-w-md">
+                  Cliquez sur le bouton "Générer" pour créer un plan d'action basé sur les informations de votre mission grâce à l'IA.
+                </p>
+                <Button
+                  onClick={handleGeneratePlan}
+                  disabled={generatingPlan}
+                  size="lg"
+                  className="bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  {generatingPlan ? (
+                    <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                  ) : (
+                    <Sparkles className="h-5 w-5 mr-2" />
+                  )}
+                  Générer le plan d'action
+                </Button>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

prisma/schema.prisma

@@ -132,6 +132,8 @@ model Mission {
   services          String[]      // Experience / Services
   participation     String?       // Friendly Address / Participation
   profils           String[]      // Level / Profils
+  actionPlan        String?       // Generated action plan from LLM (stored as text/markdown)
+  actionPlanGeneratedAt DateTime? // When the action plan was generated
   createdAt         DateTime      @default(now())
   updatedAt         DateTime      @updatedAt
   creator           User          @relation(fields: [creatorId], references: [id], onDelete: Cascade)