From 17638e52b1d6c0d10d74b15c4ad8d7c26566b4a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Rivi=C3=A8re?= <remi.riviere.free@gmail.com>
Date: Mon, 27 Apr 2026 16:59:34 +0200
Subject: [PATCH 1/2] Format tag and add color for status tag

---
 .../app/[locale]/projects/[slug]/projectDetail.tsx    |  2 +-
 .../ProjectPresentation/ProjectPresentation.tsx       | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx
index aa718b68..1b44e6c0 100644
--- a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx
+++ b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx
@@ -16,7 +16,7 @@ function getProjectTags(project: ProjectPageData) {
       "type": "temporal" as 'temporal' | 'subject'
     })) || []),
     {
-      "label": `${project.start_date ? new Date(project.start_date).toLocaleDateString() : 'N/A'} / ${project.end_date ? new Date(project.end_date).toLocaleDateString() : 'N/A'}`,
+      "label": `${(project.start_date && project.end_date) ? `Du ${new Date(project.start_date).toLocaleDateString()} au ${new Date(project.end_date).toLocaleDateString()}` : (project.start_date ? `Depuis le ${new Date(project.start_date).toLocaleDateString()}` : (project.end_date ? `Terminé le ${new Date(project.end_date).toLocaleDateString()}` : 'N/A'))}`,
       "type": "temporal" as 'temporal' | 'subject'
     }, {
       "label": project.state,
diff --git a/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx b/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx
index bc038ebe..88e07188 100644
--- a/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx
+++ b/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx
@@ -30,6 +30,15 @@ const ProjectPresentation: React.FC<ProjectPresentationProps> = ({
 }) => {
   const t = useTranslations('components.projectPresentation');
 
+  const getTagColor = (tag?: string) => {
+    if(tag === "en cours") {
+      return 'bg-resistance'
+    } else if(tag === "terminé") {
+      return 'bg-alive'
+    } 
+    return "bg-back-green"
+  }
+
   return (
     <div
       className={clsx("container flex flex-col lg:flex-row lg:items-start gap-md", className)}
@@ -44,7 +53,7 @@ const ProjectPresentation: React.FC<ProjectPresentationProps> = ({
           <Title level="p" variant="x-small" className="mb-xs">{t('tags')}</Title>
           <ul className="flex flex-row flex-wrap gap-x-1 gap-y-2.5 max-w-96">
             {tags.map((tag, index) => (
-              <li key={index}><Tag color="text-black" bgColor="bg-back-green">{tag.label ?? ''}</Tag></li>
+              <li key={index}><Tag color="text-black" bgColor={getTagColor(tag.label)}>{tag.label ?? ''}</Tag></li>
             ))}
             {thematics?.map((thematic, index) => (
               <li key={index}><Tag color="text-black" bgColor={`bg-${thematic.color}`}>{thematic.name ?? ''}</Tag></li>

From 8e2d87d6a26a67e1ecbc5f0a8542eb52974e6b7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Rivi=C3=A8re?= <remi.riviere.free@gmail.com>
Date: Wed, 10 Jun 2026 12:27:00 +0200
Subject: [PATCH 2/2] color on tag definition instead of runtime

---
 .../1.0.0/full_documentation.json             |  2 +-
 .../projects/[slug]/projectDetail.tsx         | 21 +++++++++++++++----
 .../ProjectPresentation.tsx                   | 12 ++---------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
index b6cce2a0..d418b64d 100644
--- a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
+++ b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2026-02-27T11:12:11.224Z"
+    "x-generation-date": "2026-06-10T10:21:11.749Z"
   },
   "x-strapi-config": {
     "plugins": [
diff --git a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx
index 1b44e6c0..42df8668 100644
--- a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx
+++ b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx
@@ -10,21 +10,34 @@ type ProjectPageProps = {
 };
 
 function getProjectTags(project: ProjectPageData) {
+  const getTagColor = (tag?: string) => {
+      if(tag === "en cours") {
+        return 'bg-resistance'
+      } else if(tag === "terminé") {
+        return 'bg-alive'
+      } 
+      return "bg-back-green"
+    }
+
   return [
     ...(project.seasons?.map(season => ({
       "label": season.title,
-      "type": "temporal" as 'temporal' | 'subject'
+      "type": "temporal" as 'temporal' | 'subject',
+      "color": "bg-back-green" 
     })) || []),
     {
       "label": `${(project.start_date && project.end_date) ? `Du ${new Date(project.start_date).toLocaleDateString()} au ${new Date(project.end_date).toLocaleDateString()}` : (project.start_date ? `Depuis le ${new Date(project.start_date).toLocaleDateString()}` : (project.end_date ? `Terminé le ${new Date(project.end_date).toLocaleDateString()}` : 'N/A'))}`,
-      "type": "temporal" as 'temporal' | 'subject'
+      "type": "temporal" as 'temporal' | 'subject',
+      "color": "bg-back-green" 
     }, {
       "label": project.state,
-      "type": "subject" as 'temporal' | 'subject'
+      "type": "subject" as 'temporal' | 'subject',
+      "color": getTagColor(project.state) 
     },
     ...((project.category as string[])?.map(cat => ({
       "label": cat,
-      "type": "subject" as 'temporal' | 'subject'
+      "type": "subject" as 'temporal' | 'subject',
+      "color": "bg-back-green" 
     })) || [])];
 }
 
diff --git a/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx b/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx
index 88e07188..80f66e9c 100644
--- a/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx
+++ b/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx
@@ -8,6 +8,7 @@ export type ProjectPresentationProps = {
   tags?: {
     label?: string;
     type: 'temporal' | 'subject';
+    color: string;
   }[];
   description: string[];
   associations: {
@@ -30,15 +31,6 @@ const ProjectPresentation: React.FC<ProjectPresentationProps> = ({
 }) => {
   const t = useTranslations('components.projectPresentation');
 
-  const getTagColor = (tag?: string) => {
-    if(tag === "en cours") {
-      return 'bg-resistance'
-    } else if(tag === "terminé") {
-      return 'bg-alive'
-    } 
-    return "bg-back-green"
-  }
-
   return (
     <div
       className={clsx("container flex flex-col lg:flex-row lg:items-start gap-md", className)}
@@ -53,7 +45,7 @@ const ProjectPresentation: React.FC<ProjectPresentationProps> = ({
           <Title level="p" variant="x-small" className="mb-xs">{t('tags')}</Title>
           <ul className="flex flex-row flex-wrap gap-x-1 gap-y-2.5 max-w-96">
             {tags.map((tag, index) => (
-              <li key={index}><Tag color="text-black" bgColor={getTagColor(tag.label)}>{tag.label ?? ''}</Tag></li>
+              <li key={index}><Tag color="text-black" bgColor={tag.color}>{tag.label ?? ''}</Tag></li>
             ))}
             {thematics?.map((thematic, index) => (
               <li key={index}><Tag color="text-black" bgColor={`bg-${thematic.color}`}>{thematic.name ?? ''}</Tag></li>