MyOpenCRE: add inline help for CSV preparation (#686)

ui(myopencre): add inline help guide for CSV preparation

Author: PRAteek-singHWY

application/frontend/src/pages/MyOpenCRE/MyOpenCRE.scss

@@ -16,4 +16,14 @@
 
 .myopencre-preview {
   margin-top: 1rem;
+}
+
+.myopencre-intro {
+  font-size: 1.05rem;
+  font-weight: 400;
+  margin-bottom: 0.5rem;
+}
+
+.cursor-pointer summary {
+  cursor: pointer;
 }

application/frontend/src/pages/MyOpenCRE/MyOpenCRE.tsx

@@ -256,8 +256,29 @@ export const MyOpenCRE = () => {
 
       <div className="myopencre-section myopencre-upload">
         <Header as="h3">Upload Mapping CSV</Header>
+        <Message info className="cursor-pointer">
+          <details>
+            <summary>
+              <strong>How to prepare your CSV</strong>
+            </summary>
 
-        <p>Upload your completed mapping spreadsheet to import your standard into OpenCRE.</p>
+            <ul>
+              <li>Start from the downloaded CRE Catalogue CSV.</li>
+              <li>
+                Fill <code>standard|name</code> and <code>standard|id</code> for your standard.
+              </li>
+              <li>
+                Map your controls using CRE columns (<code>CRE 0</code>, <code>CRE 1</code>, …).
+              </li>
+
+              <li>
+                CRE values must be in the format <code>&lt;CRE-ID&gt;|&lt;Name&gt;</code>
+                <br />
+                <em>Example:</em> <code>616-305|Development processes for security</code>
+              </li>
+            </ul>
+          </details>
+        </Message>
 
         {!isUploadEnabled && (
           <Message info className="myopencre-disabled">