ITSA Workflow

modules/purchase_trade/process_documentation/ITSA/Operations_Workflow.html

@@ -210,6 +210,51 @@
     margin-top: 2px;
     line-height: 1.4;
   }
+  .detail-toggle {
+    background: var(--accent-lt);
+    border: 1px solid #c7d6f0;
+    border-radius: 3px;
+    color: var(--accent);
+    cursor: pointer;
+    font-family: var(--font);
+    font-size: 10.5px;
+    font-weight: 600;
+    margin-top: 7px;
+    padding: 3px 8px;
+  }
+  .detail-toggle:hover { background: #dce8fa; }
+  .detail-panel {
+    background: #fbfcfe;
+    border-top: 1px solid var(--border);
+    padding: 14px 16px 16px;
+  }
+  .detail-panel h4 {
+    color: var(--text-primary);
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+  .detail-panel p,
+  .detail-panel li {
+    color: var(--text-secondary);
+    font-size: 11.5px;
+  }
+  .detail-panel ul {
+    margin: 8px 0 0 16px;
+  }
+  .screenshot-placeholder {
+    border: 1px dashed #b8c2d0;
+    border-radius: var(--radius);
+    color: var(--text-secondary);
+    font-size: 11px;
+    margin-top: 12px;
+    padding: 12px;
+  }
+  .screenshot-placeholder code {
+    color: var(--accent);
+    font-family: var(--mono);
+    font-size: 10.5px;
+  }
 
   /* Actor badge */
   .actor {
@@ -317,8 +362,9 @@
 <tbody>
   <tr>
     <td>
-      <div class="step-name"><a href="#purchase.purchase" data-tryton-model="purchase.purchase">Enter the Purchase Contract (PC-001)</a></div>
-      <div class="step-detail">Menu Purchases → validate → add line → freight fee → estimated BL date → price formula → [Confirm]</div>
+      <div class="step-name"><a href="#purchase.purchase" data-tryton-model="purchase.purchase">Enter the Purchase Contract</a></div>
+      <button class="detail-toggle" type="button" data-detail-target="purchase-contract-details" aria-expanded="false">Show details</button>
+      <div class="step-detail">Menu Purchases\Purchases → Enter contract information → add line →  add estimated BL date → add MTM settings → add price formula → [Confirm]</div>
     </td>
     <td><span class="actor actor-back">Back-office / CTRM</span></td>
     <td>
@@ -326,9 +372,25 @@
       <div class="process-detail">Trade capture · Contract terms management</div>
     </td>
   </tr>
+  <tr id="purchase-contract-details" class="step-details-row" hidden>
+    <td colspan="3">
+      <div class="detail-panel">
+        <h4>Purchase contract entry details</h4>
+        <p>Add detailed explanations for this step here: required fields, validation rules, expected controls, and common checks before confirming the purchase contract.</p>
+        <ul>
+          <li>Contract header:  Party(supplier), Number (filled in automatically), Reference(your own reference), Purchase Date, Payment Term, Currency, Weight basis, Operator, Trader, From Location, To Location, Incoterm.</li>
+          <li>Contract lines: product, quantity, unit, tolerance, price formula, Mtm.</li>
+        </ul>
+        <div class="screenshot-placeholder">
+          Add screenshots here. Example:
+          <code>&lt;img src="../assets/purchase_contract_header.png" alt="Purchase contract header"&gt;</code>
+        </div>
+      </div>
+    </td>
+  </tr>
   <tr>
     <td>
-      <div class="step-name">Enter budgeted costs on sale contracts</div>
+      <div class="step-name">Enter budgeted costs on contracts (usually on purchase side)</div>
       <div class="step-detail">FRT 80.00 · BRK 0.50 · LC Fees 0.35 USD/mt · Template: FOB China – CFR Chile</div>
     </td>
     <td><span class="actor actor-trade">Trading / Back-office</span></td>
@@ -635,6 +697,21 @@
     var database = hash.replace(/^#/, '').split('/')[0] || 'tradon';
     topWindow.location.hash = database + '/model/' + link.dataset.trytonModel;
   });
+
+  document.addEventListener('click', function(event) {
+    var button = event.target.closest('button[data-detail-target]');
+    if (!button) {
+      return;
+    }
+    var target = document.getElementById(button.dataset.detailTarget);
+    if (!target) {
+      return;
+    }
+    var isHidden = target.hasAttribute('hidden');
+    target.toggleAttribute('hidden', !isHidden);
+    button.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
+    button.textContent = isHidden ? 'Hide details' : 'Show details';
+  });
 </script>
 
 </body>