alma/NeahNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

missions page 2

Browse Source
This commit is contained in:
alma 2025-05-06 14:47:13 +02:00
parent 9f37a8fdf7
commit 316d2df9dc
2 changed files with 190 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
app/mission-tab/[missionId]/page.tsx
View File

@ -138,7 +138,7 @@ export default function MissionTabDetailPage() {
// Loading state // Loading state
if (loading) { if (loading) {
return ( return (
<div className="flex justify-center items-center min-h-screen bg-gray-50 pt-6"> <div className="flex justify-center items-center min-h-screen bg-gray-50">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div> <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
</div> </div>
); );
@ -147,7 +147,7 @@ export default function MissionTabDetailPage() {
// Error state if mission not found // Error state if mission not found
if (!mission) { if (!mission) {
return ( return (
<div className="flex justify-center items-center min-h-screen bg-gray-50 px-4 pt-6"> <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
<div className="text-center bg-white p-8 rounded-lg shadow-sm border border-gray-200 max-w-md"> <div className="text-center bg-white p-8 rounded-lg shadow-sm border border-gray-200 max-w-md">
<h2 className="text-xl font-semibold text-gray-800 mb-2">Mission non trouvée</h2> <h2 className="text-xl font-semibold text-gray-800 mb-2">Mission non trouvée</h2>
<p className="text-gray-600 mb-6">Cette mission n'existe pas ou a été supprimée.</p> <p className="text-gray-600 mb-6">Cette mission n'existe pas ou a été supprimée.</p>
@ -165,8 +165,7 @@ export default function MissionTabDetailPage() {
const oddInfo = getODDInfo(mission.oddScope); const oddInfo = getODDInfo(mission.oddScope);
return ( return (
<div className="bg-gray-50 min-h-screen pt-6"> <div className="bg-gray-50 min-h-screen p-6">
<div className="max-w-screen-2xl mx-auto px-6">
{/* Back Button */} {/* Back Button */}
<div className="mb-4"> <div className="mb-4">
<Button <Button
@ -179,12 +178,6 @@ export default function MissionTabDetailPage() {
</Button> </Button>
</div> </div>
{/* Page Title */}
<div className="mb-6">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Détails de la Mission</h1>
<div className="h-1 w-24 bg-blue-600 rounded-full"></div>
</div>
{/* Header */} {/* Header */}
<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 mb-6 p-6">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
@ -202,7 +195,7 @@ export default function MissionTabDetailPage() {
</div> </div>
</div> </div>
{/* Display logo */} {/* Display logo instead of Participate button */}
<div className="w-24 h-24 rounded-md overflow-hidden flex-shrink-0"> <div className="w-24 h-24 rounded-md overflow-hidden flex-shrink-0">
{mission.logoUrl ? ( {mission.logoUrl ? (
<img <img
@ -219,171 +212,150 @@ export default function MissionTabDetailPage() {
parent.classList.add('flex'); parent.classList.add('flex');
parent.classList.add('items-center'); parent.classList.add('items-center');
parent.classList.add('justify-center'); parent.classList.add('justify-center');
parent.innerHTML = `<span class="text-2xl font-medium text-gray-400">${mission.name.slice(0, 2).toUpperCase()}</span>`; parent.innerHTML = `<span className="text-3xl font-medium text-gray-500">${mission.name.slice(0, 2).toUpperCase()}</span>`;
} }
}} }}
/> />
) : ( ) : (
<div className="w-full h-full bg-gray-100 flex items-center justify-center"> <div className="bg-gray-100 w-full h-full flex items-center justify-center">
<span className="text-2xl font-medium text-gray-400">{mission.name.slice(0, 2).toUpperCase()}</span> <span className="text-3xl font-medium text-gray-500">{mission.name.slice(0, 2).toUpperCase()}</span>
</div> </div>
)} )}
</div> </div>
</div> </div>
</div> </div>
{/* Info Grid */} {/* Mission Details Content */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100"> {/* Left Column - Details and Metadata */}
<div className="bg-amber-50 p-3 rounded-full mr-3"> <div className="lg:col-span-2 space-y-6">
<MapPin className="h-5 w-5 text-amber-600" /> {/* Mission Information */}
</div> <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
<div> <h2 className="text-lg font-semibold text-gray-900 mb-4">À propos de la mission</h2>
<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>
{/* Mission Badge Row */}
<div className="mb-6 flex flex-wrap gap-2">
{oddInfo.number && ( {oddInfo.number && (
<div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100"> <div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
<div className="bg-red-50 p-3 rounded-full mr-3 flex items-center justify-center">
<img <img
src={oddInfo.iconPath} src={oddInfo.iconPath}
alt={oddInfo.label} alt={oddInfo.label}
className="h-8 w-8" className="w-8 h-8"
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
}}
/> />
</div> <span className="text-sm font-medium text-gray-700">{oddInfo.label}</span>
<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>
)} )}
<div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
<MapPin className="w-4 h-4 text-gray-500" />
<span className="text-sm font-medium text-gray-700">{getMissionTypeLabel(mission.missionType)}</span>
</div>
<div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
<Clock className="w-4 h-4 text-gray-500" />
<span className="text-sm font-medium text-gray-700">{getDurationLabel(mission.projection)}</span>
</div>
<div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
<ThumbsUp className="w-4 h-4 text-gray-500" />
<span className="text-sm font-medium text-gray-700">Niveau: {getNiveauLabel(mission.niveau)}</span>
</div>
</div> </div>
{/* Project Description */} {/* Mission Description */}
<div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6"> {mission.intention && (
<h2 className="text-xl font-semibold text-gray-800 mb-4">Description de la mission</h2> <div className="mb-6">
<div className="text-gray-700 whitespace-pre-wrap"> <h3 className="text-md font-medium text-gray-800 mb-2">Description</h3>
{mission.intention || "Aucune description disponible pour cette mission."} <p className="text-gray-600 whitespace-pre-line">{mission.intention}</p>
</div>
)}
{/* Mission Creator */}
<div>
<h3 className="text-md font-medium text-gray-800 mb-2">Mission créée par</h3>
<div className="flex items-center">
<div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
<span className="text-xs font-medium text-blue-700">
{mission.creator.email.substring(0, 2).toUpperCase()}
</span>
</div>
<div>
<p className="text-sm text-gray-700">{mission.creator.email}</p>
<p className="text-xs text-gray-500">{formatDate(mission.createdAt)}</p>
</div>
</div>
</div> </div>
</div> </div>
{/* Attachments Section */} {/* Attachments Section */}
{mission.attachments && mission.attachments.length > 0 && ( {mission.attachments && mission.attachments.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">Documents</h2> <h2 className="text-lg font-semibold text-gray-900 mb-4">Fichiers joints</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div className="space-y-3">
{mission.attachments.map((attachment) => ( {mission.attachments.map((attachment) => (
<div key={attachment.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
<div className="flex items-center">
<div className="p-2 bg-blue-100 rounded-md mr-3">
<FileIcon className="h-5 w-5 text-blue-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-800">{attachment.filename}</p>
<p className="text-xs text-gray-500">
{(attachment.fileSize / 1024).toFixed(1)} KB • {attachment.fileType}
</p>
</div>
</div>
<a <a
key={attachment.id}
href={attachment.publicUrl} href={attachment.publicUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="bg-green-50 p-4 rounded-lg flex flex-col hover:bg-green-100 transition-colors" className="text-sm text-blue-600 hover:text-blue-800 font-medium"
> >
<div className="text-green-700 mb-2"> Télécharger
<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> </a>
</div>
))} ))}
</div> </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>
))}
</div> </div>
</div>
)}
{/* Right Column - Services and Profils */}
<div className="space-y-6">
{/* Services Section */} {/* Services Section */}
{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-lg font-semibold text-gray-900 mb-4">Services</h2>
<div className="flex flex-wrap gap-2"> <div className="space-y-2">
{mission.services.map((service, index) => ( {mission.services.map((service, index) => (
<span <div
key={index} key={index}
className="bg-blue-50 text-blue-800 px-3 py-2 rounded-full text-sm" className="flex items-center py-2 px-3 bg-blue-50 text-blue-700 rounded-md"
> >
{service} <span className="text-sm font-medium">{service}</span>
</span> </div>
))} ))}
</div> </div>
</div> </div>
)} )}
{/* Actions Footer */} {/* Profils Requis Section */}
<div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6 flex justify-between items-center"> {mission.profils && mission.profils.length > 0 && (
<Button <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
variant="outline" <h2 className="text-lg font-semibold text-gray-900 mb-4">Profils requis</h2>
className="text-gray-700 border-gray-300" <div className="space-y-2">
onClick={() => router.push('/mission-tab')} {mission.profils.map((profil, index) => (
<div
key={index}
className="flex items-center py-2 px-3 bg-purple-50 text-purple-700 rounded-md"
> >
Retour au tableau <Languages className="h-4 w-4 mr-2" />
</Button> <span className="text-sm font-medium">{profil}</span>
</div>
<Button className="bg-green-500 hover:bg-green-600 text-white px-6"> ))}
Participer à la mission </div>
</Button> </div>
)}
</div> </div>
</div> </div>
</div> </div>

26
app/mission-tab/page.tsx
View File

@ -125,17 +125,16 @@ export default function MissionTabPage() {
}; };
return ( return (
<div className="w-full bg-white min-h-screen pt-6"> <div className="flex flex-col h-full w-full bg-white">
{/* Page Title */} {/* Page Title */}
<div className="max-w-screen-2xl mx-auto px-6 mb-6"> <div className="bg-white border-b border-gray-100 py-3 px-6">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Le Tableau des Missions</h1> <h1 className="text-gray-800 text-xl font-bold">Le Tableau des Missions</h1>
<div className="h-1 w-24 bg-blue-600 rounded-full"></div>
</div> </div>
{/* Search Header */} {/* Search Header */}
<div className="max-w-screen-2xl mx-auto bg-white border border-gray-100 rounded-lg shadow-sm mb-6 py-4 px-6"> <div className="bg-white border-b border-gray-100 py-3 px-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-gray-800 text-lg font-medium">Toutes les missions disponibles</h2> <h2 className="text-gray-800 text-base font-medium">Toutes les missions disponibles</h2>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
<Input <Input
@ -149,13 +148,13 @@ export default function MissionTabPage() {
</div> </div>
{/* Missions Grid */} {/* Missions Grid */}
<div className="max-w-screen-2xl mx-auto p-6 bg-gray-50 rounded-lg border border-gray-100 mb-6"> <div className="flex-1 overflow-auto bg-gray-50 p-6">
{loading ? ( {loading ? (
<div className="flex justify-center items-center h-40"> <div className="flex justify-center items-center h-40">
<div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-600"></div> <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-600"></div>
</div> </div>
) : filteredMissions.length > 0 ? ( ) : filteredMissions.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredMissions.map((mission) => { {filteredMissions.map((mission) => {
const oddInfo = getODDInfo(mission); const oddInfo = getODDInfo(mission);
const niveauColor = getNiveauBadgeColor(mission.niveau); const niveauColor = getNiveauBadgeColor(mission.niveau);
@ -256,14 +255,11 @@ export default function MissionTabPage() {
})} })}
</div> </div>
) : ( ) : (
<div className="text-center py-16 px-6 bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="flex justify-center items-center h-40 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="text-center">
<Search className="h-8 w-8 text-gray-400" /> <p className="text-gray-500 font-medium mb-2">Aucune mission trouvée</p>
<p className="text-gray-400 text-sm">Modifiez vos critères de recherche ou réessayez plus tard.</p>
</div> </div>
<h3 className="text-lg font-medium text-gray-900 mb-2">Aucune mission trouvée</h3>
<p className="text-gray-500 mb-6 max-w-md mx-auto">
Essayez de modifier vos critères de recherche.
</p>
</div> </div>
)} )}
</div> </div>