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

missions ui

Browse Source
This commit is contained in:
alma 2025-05-06 13:36:25 +02:00
parent 8b81d33a80
commit b0e9f1d816
1 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/missions/page.tsx
View File

@ -33,6 +33,7 @@ interface Mission {
createdAt: string; createdAt: string;
creator: User; creator: User;
missionUsers: MissionUser[]; missionUsers: MissionUser[];
intention?: string;
} }
export default function MissionsPage() { export default function MissionsPage() {
@ -204,10 +205,26 @@ export default function MissionsPage() {
{/* Card Header with Name and Level */} {/* Card Header with Name and Level */}
<div className="px-5 pt-4 pb-3 flex justify-between items-center border-b border-gray-100"> <div className="px-5 pt-4 pb-3 flex justify-between items-center border-b border-gray-100">
<h2 className="text-base font-medium text-gray-900 line-clamp-2 flex-1">{mission.name}</h2> <h2 className="text-base font-medium text-gray-900 line-clamp-2 flex-1">{mission.name}</h2>
<span className={`ml-2 flex-shrink-0 text-sm font-bold px-2.5 py-1.5 rounded-md ${niveauColor}`}> <div className="flex items-center gap-2 ml-2">
{/* ODD scope icon moved next to level badge */}
{oddInfo.number && (
<div className="flex items-center bg-gray-100 p-1 rounded-md">
<img
src={oddInfo.iconPath}
alt={oddInfo.label}
className="w-8 h-8"
onError={(e) => {
// Fallback if image fails to load
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
</div>
)}
<span className={`flex-shrink-0 text-sm font-bold px-2.5 py-1.5 rounded-md ${niveauColor}`}>
{getNiveauLabel(mission.niveau)} {getNiveauLabel(mission.niveau)}
</span> </span>
</div> </div>
</div>
{/* Centered Logo */} {/* Centered Logo */}
<div className="flex justify-center items-center p-6 flex-grow"> <div className="flex justify-center items-center p-6 flex-grow">
@ -238,12 +255,13 @@ export default function MissionsPage() {
</div> </div>
</div> </div>
{/* Card Content - Only Services section */} {/* Card Content - Services and Description */}
<div className="px-5 pb-3"> <div className="px-5 pb-3">
{/* Services section */}
{mission.services && mission.services.length > 0 && ( {mission.services && mission.services.length > 0 && (
<div> <div>
<span className="text-sm font-medium text-gray-700 block mb-1">Services:</span> <span className="text-sm font-medium text-gray-700 block mb-1">Services:</span>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5 mb-3">
{mission.services.map(service => ( {mission.services.map(service => (
<span key={service} className="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs font-medium"> <span key={service} className="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs font-medium">
{service} {service}
@ -253,23 +271,11 @@ export default function MissionsPage() {
</div> </div>
)} )}
{/* ODD scope icon - moved here and enlarged */} {/* Description text (can be added from mission data) */}
{oddInfo.number && ( <div className="mt-2 text-sm text-gray-600 line-clamp-2">
<div className="flex justify-center mt-4"> {mission.intention ? mission.intention.substring(0, 100) + (mission.intention.length > 100 ? '...' : '') : 'Pas de description disponible.'}
<div className="flex items-center justify-center bg-gray-100 p-2 rounded-md">
<img
src={oddInfo.iconPath}
alt={oddInfo.label}
className="w-10 h-10"
onError={(e) => {
// Fallback if image fails to load
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
</div> </div>
</div> </div>
)}
</div>
{/* Card Footer */} {/* Card Footer */}
<div className="mt-auto px-5 py-3 border-t border-gray-100 bg-gray-50 flex justify-between items-center"> <div className="mt-auto px-5 py-3 border-t border-gray-100 bg-gray-50 flex justify-between items-center">
@ -278,7 +284,7 @@ export default function MissionsPage() {
</span> </span>
<Link href={`/missions/${mission.id}`}> <Link href={`/missions/${mission.id}`}>
<Button className="bg-black hover:bg-gray-800 text-white text-xs px-3 py-1 h-7 rounded-md"> <Button className="bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 h-7 rounded-md">
Voir détails Voir détails
</Button> </Button>
</Link> </Link>