From 42e710dcfaa08e96104f754b7eb8e3c8e20bb7c9 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Fri, 9 Jan 2026 15:44:40 +0100
Subject: [PATCH] Mission Refactor Big

---
 app/missions/page.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/missions/page.tsx b/app/missions/page.tsx
index af9b98cd..8d4a8c6f 100644
--- a/app/missions/page.tsx
+++ b/app/missions/page.tsx
@@ -197,14 +197,7 @@ export default function MissionsPage() {
                 const niveauColor = getNiveauBadgeColor(mission.niveau);
                 
                 return (
-                  <div key={mission.id} className={`bg-white shadow-sm hover:shadow-md transition-shadow duration-200 border overflow-hidden h-full rounded-lg flex flex-col relative ${mission.isClosed ? 'border-amber-300' : 'border-gray-200'}`}>
-                    {/* Closed Badge */}
-                    {mission.isClosed && (
-                      <div className="absolute top-0 right-0 bg-amber-500 text-white text-xs font-medium px-3 py-1 rounded-bl-lg flex items-center gap-1 z-10">
-                        <Lock className="h-3 w-3" />
-                        Clôturée
-                      </div>
-                    )}
+                  <div key={mission.id} className={`bg-white shadow-sm hover:shadow-md transition-shadow duration-200 border overflow-hidden h-full rounded-lg flex flex-col ${mission.isClosed ? 'border-amber-300' : 'border-gray-200'}`}>
                     {/* Card Header with Name and Level */}
                     <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>
@@ -287,10 +280,18 @@ export default function MissionsPage() {
                     </div>
                       
                     {/* Card Footer */}
-                    <div className="mt-auto px-5 py-3 border-t border-gray-100 bg-gray-50 flex justify-between items-center">
-                      <span className="text-xs text-gray-500">
-                        Créée le {formatDate(mission.createdAt)}
-                      </span>
+                    <div className={`mt-auto px-5 py-3 border-t flex justify-between items-center ${mission.isClosed ? 'bg-amber-50 border-amber-200' : 'bg-gray-50 border-gray-100'}`}>
+                      <div className="flex flex-col gap-1">
+                        <span className="text-xs text-gray-500">
+                          Créée le {formatDate(mission.createdAt)}
+                        </span>
+                        {mission.isClosed && (
+                          <span className="flex items-center gap-1 text-xs font-medium text-amber-700">
+                            <Lock className="h-3 w-3" />
+                            Clôturée
+                          </span>
+                        )}
+                      </div>
                       
                       <Link href={`/missions/${mission.id}`}>
                         <Button className="bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 h-7 rounded-md">