fix: fix display pieces justifivatives on intructeur (#673)

Author: YoannNumericite

.env.development

@@ -14,7 +14,7 @@
   .insideWrapper {
     margin-top: 28px;
     display: grid;
-    grid-template-columns: 2fr 2fr 3fr 3fr 1.2fr;
+    grid-template-columns: 2fr 2fr 3fr 4fr;
     grid-column-gap: 1rem;
   }
 

src/components/Dossier.module.scss

@@ -13,7 +13,7 @@ import Foldable from "src/components/Foldable";
 import IconLoader from "src/components/IconLoader";
 import Info from "src/components/Info";
 import InfoSociete from "src/components/InfoSociete";
-import { JustificatifsDossier } from "src/components/Justificatifs";
+import { DossierJustificatifs } from "src/components/DossierJustificatifs";
 import logoArrowUp from "src/images/arrow-up.svg";
 import { useDossier } from "src/lib/api";
 import type { Comments } from "src/lib/fetching/comments";
@@ -40,7 +40,6 @@ import CountPieces from "./CountPieces";
 import InputComments from "./inputComments";
 import ListComments from "./ListComments";
 import Table from "./Table";
-import { ValidationJustificatifsDossier } from "./ValidationJustificatifs";
 import { getUsersById } from "src/lib/fetching/users";
 
 interface Props {
@@ -254,17 +253,14 @@ const Dossier: React.FC<Props> = ({ dossierId, dataLinks }) => {
                 dossier.scenesSensibles.filter(scene => scene !== null).join(", ")}
             </Info>
             </div>
-            <Info title="PIECES JUSTIFICATIVES">
+            <Info title="PIECES JUSTIFICATIVES & VALIDATION">
               {dossier.source === "FORM_EDS" && (
-                <JustificatifsDossier dossier={dossier} dataLinks={dataLinks} />
+                <DossierJustificatifs 
+                  dossier={dossier} 
+                  showValidation={true}
+                />
               )}
             </Info>
-            <Info title="VALIDATION">
-              <ValidationJustificatifsDossier
-                dossier={dossier}
-                dataLinks={dataLinks}
-              />
-            </Info>
           </div>
           <div style={{ marginTop: "36px" }}>
             <div

src/components/Dossier.tsx

@@ -0,0 +1,50 @@
+.justificatifRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+.documentInfo {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.validationControls {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.compactSelect {
+  :global {
+    .fr-select {
+      height: 2rem;
+      min-height: auto;
+      font-size: 0.875rem;
+    }
+    
+    .fr-select-group {
+      margin-bottom: 0;
+    }
+    
+    .fr-label {
+      display: none; // Hide the label to save space
+    }
+  }
+}
+
+.statusIcon {
+  margin-right: 11px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.documentLink {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}