Mission Refactor Big
This commit is contained in:
parent
f8bc9f00db
commit
9fae87e0ab
214
app/api/missions/[missionId]/generate-plan/route.ts
Normal file
214
app/api/missions/[missionId]/generate-plan/route.ts
Normal file
@ -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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
@ -134,11 +180,6 @@ export default function MissionDetailPage() {
|
||||
iconPath: oddNumber ? `/F SDG Icons 2019 WEB/F-WEB-Goal-${oddNumber.padStart(2, '0')}.png` : ""
|
||||
};
|
||||
};
|
||||
|
||||
// Handle edit mission
|
||||
const handleEditMission = () => {
|
||||
router.push(`/missions/${missionId}/edit`);
|
||||
};
|
||||
|
||||
// Handle delete mission
|
||||
const handleDeleteMission = async () => {
|
||||
@ -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('flex');
|
||||
parent.classList.add('items-center');
|
||||
parent.classList.add('justify-center');
|
||||
parent.classList.add('bg-gray-100', 'flex', 'items-center', '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 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
|
||||
<div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
|
||||
<div className="bg-amber-50 p-3 rounded-full mr-3">
|
||||
<MapPin className="h-5 w-5 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 font-medium">Type de mission</p>
|
||||
<p className="text-gray-800 font-medium">{getMissionTypeLabel(mission.missionType)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
|
||||
<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">{mission.donneurDOrdre || "Non spécifié"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
|
||||
<div className="bg-green-50 p-3 rounded-full mr-3">
|
||||
<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>
|
||||
<p className="text-gray-800 font-medium">Développement durable</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Tabs */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="mb-6 bg-white border border-gray-200 p-1 rounded-lg">
|
||||
<TabsTrigger
|
||||
value="general"
|
||||
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white px-6 py-2"
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-2" />
|
||||
Général
|
||||
</TabsTrigger>
|
||||
<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>
|
||||
|
||||
{/* Project Description */}
|
||||
<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>
|
||||
<div className="text-gray-700 whitespace-pre-wrap">
|
||||
{mission.intention || "Aucune description disponible pour cette mission."}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments Section */}
|
||||
{mission.attachments && mission.attachments.length > 0 && (
|
||||
<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">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" />
|
||||
{/* General Tab */}
|
||||
<TabsContent value="general" className="space-y-6">
|
||||
{/* Info Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
|
||||
<div className="bg-amber-50 p-3 rounded-full mr-3">
|
||||
<MapPin className="h-5 w-5 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 font-medium">Type de mission</p>
|
||||
<p className="text-gray-800 font-medium">{getMissionTypeLabel(mission.missionType)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
|
||||
<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 className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
|
||||
<div className="bg-green-50 p-3 rounded-full mr-3">
|
||||
<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">{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">
|
||||
{attachment.fileType.split('/')[1]?.toUpperCase() || 'Fichier'}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 font-medium">Objectif</p>
|
||||
<p className="text-gray-800 font-medium">{oddInfo.label}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Skills Required Section */}
|
||||
{mission.profils && mission.profils.length > 0 && (
|
||||
<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">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"
|
||||
>
|
||||
{profil}
|
||||
</span>
|
||||
))}
|
||||
{/* Description */}
|
||||
<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">Description de la mission</h2>
|
||||
<div className="text-gray-700 whitespace-pre-wrap">
|
||||
{mission.intention || "Aucune description disponible pour cette mission."}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Services Section */}
|
||||
{mission.services && mission.services.length > 0 && (
|
||||
<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">Services</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{mission.services.map((service, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="bg-blue-50 text-blue-800 px-3 py-2 rounded-full text-sm"
|
||||
>
|
||||
{service}
|
||||
</span>
|
||||
))}
|
||||
</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" />
|
||||
{/* Services */}
|
||||
{mission.services && mission.services.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">Services</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{mission.services.map((service, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="bg-blue-50 text-blue-800 px-3 py-2 rounded-full text-sm font-medium"
|
||||
>
|
||||
{service}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
Supprimer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Profils */}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user