Base de la page de création/édition d'un DAD

client/src/components/DecisionSupportFilePage/ClarificationSection.tsx

@@ -0,0 +1,67 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+
+export interface ClarificationSectionProps {
+  dsf: DecisionSupportFile,
+};
+
+export const ClarificationSection: FunctionComponent<ClarificationSectionProps> = ({ dsf }) => {
+  return (
+    <section>
+      <div className="box">
+        <div className="field">
+          <label className="label">Intitulé du dossier</label>
+          <div className="control">
+            <input className="input" type="text" />
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Quelle décision devons nous prendre ?</label>
+          <div className="control">
+            <textarea className="textarea" placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre." rows={10}></textarea>
+          </div>
+          <p className="help is-info"><i className="fa fa-info-circle"></i> Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.</p>
+        </div>
+        <div className="field">
+          <label className="label">Pourquoi devons nous prendre cette décision ?</label>
+          <div className="control">
+            <textarea className="textarea" placeholder="Décrire pourquoi il est important de prendre cette décision." rows={10}></textarea>
+          </div>
+          <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer si des obligations légales pèsent sur cette prise de décision.</p>
+        </div>
+        <div className="field">
+          <label className="label">Portée de la décision</label>
+          <div className="control">
+            <div className="select">
+              <select>
+                <option></option>
+                <option>Individuelle</option>
+                <option>Groupe identifié</option>
+                <option>Collective</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Nature de la décision</label>
+          <div className="control">
+            <div className="select">
+              <select>
+                <option></option>
+                <option>Opérationnelle</option>
+                <option>Tactique</option>
+                <option>Stratégique</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Existe t'il une échéance particulière pour cette décision ?</label>
+          <div className="control">
+            <input className="input" type="date" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};