redesign layout and expand to full SCM coverage

- Replace MatOne-clone sidebar with distinct blue navy sidebar design
- Lighter blue color palette (#5699DA) for better readability
- Remove app icon/logo, use text 'SCM' branding
- Fix sidebar active tab highlighting (only current page, not entire group)
- Fix duplicated title/search/button inside overflow-x-auto containers
- Restructure all list pages: filters before table, table outside flex

Add 20 new pages to cover missing requirements from SCM spec:
- Purchase Requisition (list, create, approval queue)
- PO 3-Way Matching with mismatch detail view
- PO Amendment workflow
- Supplier Performance scorecards, contacts, blacklist
- Returns/RMA workflow and ATP check
- Lot/Batch and Serial number tracking
- ABC Analysis, Pick List generation
- Freight Cost comparison, Shipping Documents
- Scenario Planning
- Notification Center with preferences
- System Integrations registry
- Custom Report Builder

Add documentation:
- docs/BP-SCM-ENGLISH.md — full business process documentation
- docs/BP-SCM-INDONESIA.md — versi Bahasa Indonesia
- docs/DIFFERENCES-ENGLISH.md — SCM vs MatOne MMS comparison
- docs/DIFFERENCES-INDONESIA.md — perbandingan SCM vs MatOne

so-list.html

@@ -66,6 +66,9 @@
       <div class="ml-3 mt-0.5 space-y-0.5 border-l border-white/10">
         <a href="./po-list.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Purchase Order</a>
         <a href="./mr-list.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Material Request</a>
+        <a href="./pr-list.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Purchase Requisition</a>
+        <a href="./po-matching.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">3-Way Matching</a>
+
       </div>
     </div>
     <div>
@@ -86,6 +89,11 @@
         <a href="./inv-disposal.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Disposal</a>
         <a href="./inv-aging.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Aging</a>
         <a href="./inv-reorder.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Reorder</a>
+        <a href="./inv-lot-batch.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Lot/Batch</a>
+        <a href="./inv-serial.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Serial</a>
+        <a href="./inv-abc.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">ABC Analysis</a>
+        <a href="./inv-pick-list.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Pick List</a>
+
       </div>
     </div>
     <div>
@@ -93,6 +101,9 @@
       <div class="ml-3 mt-0.5 space-y-0.5 border-l border-white/10">
         <a href="./so-list.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs bg-white/20 font-bold text-white">Sales Order</a>
         <a href="./so-invoice.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Invoice</a>
+        <a href="./so-return.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Returns/RMA</a>
+        <a href="./so-atp.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">ATP Check</a>
+
       </div>
     </div>
     <div>
@@ -100,6 +111,9 @@
       <div class="ml-3 mt-0.5 space-y-0.5 border-l border-white/10">
         <a href="./ship-list.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Shipment</a>
         <a href="./ship-tracking.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Tracking</a>
+        <a href="./ship-freight.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Freight Cost</a>
+        <a href="./ship-documents.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Docs/BOL</a>
+
       </div>
     </div>
     <div>
@@ -115,6 +129,8 @@
       <div class="ml-3 mt-0.5 space-y-0.5 border-l border-white/10">
         <a href="./dp-forecast.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Forecast</a>
         <a href="./dp-replenishment.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Replenishment</a>
+        <a href="./dp-scenario.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Scenario</a>
+
       </div>
     </div>
     <div>
@@ -125,6 +141,9 @@
         <a href="./ad-approval-matrix.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Approval</a>
         <a href="./ad-numbering-profile.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Numbering</a>
         <a href="./ad-audit-log.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Audit</a>
+        <a href="./ad-notifications.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Notifications</a>
+        <a href="./ad-integrations.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Integrations</a>
+
       </div>
     </div>
     <div>
@@ -134,6 +153,8 @@
         <a href="./rp-procurement.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Procurement</a>
         <a href="./rp-sales.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Sales</a>
         <a href="./rp-logistics.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Logistics</a>
+        <a href="./rp-custom-builder.html" class="block rounded-r-lg py-1.5 pl-3 pr-2 text-xs text-white/65 hover:bg-white/10 hover:text-white">Custom Builder</a>
+
       </div>
     </div>
   </nav>