@steedos-labs/content-compliance 0.8.22 → 0.8.24

package/main/default/pages/pepsico_content_review_detail.page.amis.json

@@ -9,146 +9,270 @@
             "showBackButton": "${!_inDrawer}",
             "id": "u:80e7e5512598"
         },
+        {
+            "type": "tpl",
+            "tpl": "<style>.pep-approval-wrap{position:relative}@media (min-width:640px){.pep-wrap-main{position:sticky;top:4rem;z-index:20}}.pep-approval-row > *{width:max(192px,calc((100% - 5 * 1.5rem) / 6))!important;flex:0 0 auto!important}.pep-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:5!important;width:24px!important;height:24px!important;min-width:0!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;border-radius:9999px!important;box-shadow:0 1px 4px rgba(0,0,0,.25)!important;opacity:0;pointer-events:none}.pep-arrow[data-off='0']{opacity:1;pointer-events:auto}.pep-arrow-left{left:-10px!important}.pep-arrow-right{right:-10px!important}.pep-approval-wrap[data-pep-js='1'] .pep-approval-row{scrollbar-width:none}.pep-approval-wrap[data-pep-js='1'] .pep-approval-row::-webkit-scrollbar{height:0}</style>",
+            "inline": false,
+            "wrapperComponent": "",
+            "id": "u:pep_approval_row_style"
+        },
+        {
+            "type": "custom",
+            "id": "u:pep_approval_arrow_ctl",
+            "html": "<span style=\"display:none\"></span>",
+            "onMount": "var upd=function(w){var row=w.querySelector('.pep-approval-row');var L=w.querySelector('.pep-arrow-left'), R=w.querySelector('.pep-arrow-right');if(!row||!L||!R){return;}var max=row.scrollWidth-row.clientWidth;var can=max>1;L.setAttribute('data-off',(!can||row.scrollLeft<=1)?'1':'0');R.setAttribute('data-off',(!can||row.scrollLeft>=max-1)?'1':'0');};var bind=function(){var ws=document.querySelectorAll('.pep-approval-wrap');for(var i=0;i<ws.length;i++){(function(w){if(w.__pepBound){upd(w);return;}var row=w.querySelector('.pep-approval-row');if(!row){return;}w.__pepBound=true;w.setAttribute('data-pep-js','1');var f=function(){upd(w);};row.addEventListener('scroll',f);window.addEventListener('resize',f);if(window.ResizeObserver){new ResizeObserver(f).observe(row);}f();})(ws[i]);}};bind();if(window.MutationObserver){var mo=new MutationObserver(function(){bind();});mo.observe(document.body,{childList:true,subtree:true});}window.__pepArrowsReady=true;"
+        },
         {
             "type": "container",
             "body": [
                 {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">Legal<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_prelegal || _display.pre_legal_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_legal_materials_quantity, pre_legal_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_legal_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_legal_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_legal_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_legal_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:pre_legal_card",
-                    "visibleOn": "${pre_legal_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
-                },
-                {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">NS<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_prens || _display.pre_ns_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_ns_materials_quantity, pre_ns_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_ns_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_ns_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_ns_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_ns_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:pre_ns_card",
-                    "visibleOn": "${pre_ns_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
-                },
-                {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">SRA<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_presra || _display.pre_sra_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_sra_materials_quantity, pre_sra_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_sra_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_sra_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_sra_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_sra_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:pre_sra_card",
-                    "visibleOn": "${pre_sra_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
-                },
-                {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">CA<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_preca || _display.pre_ca_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_ca_materials_quantity, pre_ca_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_ca_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_ca_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_ca_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_ca_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:pre_ca_card",
-                    "visibleOn": "${pre_ca_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
+                    "type": "button",
+                    "label": "",
+                    "icon": "fa-solid fa-angle-left",
+                    "level": "link",
+                    "tooltip": "向左滚动",
+                    "className": "pep-arrow pep-arrow-left text-gray-500",
+                    "id": "u:pre_scroll_left",
+                    "onEvent": {
+                        "click": {
+                            "actions": [
+                                {
+                                    "actionType": "custom",
+                                    "script": "var t = event && event.context && event.context.nativeEvent && event.context.nativeEvent.target; var w = t && t.closest ? t.closest('.pep-approval-wrap') : null; var el = w ? w.querySelector('.pep-approval-row') : document.querySelector('.pep-row-pre'); if (el) { el.scrollLeft = Math.max(0, Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + (-1) * Math.round(el.clientWidth * 0.8))); }"
+                                }
+                            ]
+                        }
+                    }
                 },
                 {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">QC<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_preqc || _display.pre_qc_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_qc_materials_quantity, pre_qc_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_qc_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_qc_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_qc_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_qc_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:pre_qc_card",
-                    "visibleOn": "${pre_qc_reviewer && approval_type === 'departmental_review' && ec_has_detail_page === 'yes' && review_status != 'draft'}",
-                    "editorState": "default"
+                    "type": "container",
+                    "body": [
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">Legal<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_prelegal || _display.pre_legal_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_prelegal || _display.pre_legal_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_legal_materials_quantity, pre_legal_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_legal_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_legal_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_legal_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_legal_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:pre_legal_card",
+                            "visibleOn": "${pre_legal_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">NS<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_prens || _display.pre_ns_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_prens || _display.pre_ns_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_ns_materials_quantity, pre_ns_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_ns_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_ns_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_ns_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_ns_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:pre_ns_card",
+                            "visibleOn": "${pre_ns_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">SRA<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_presra || _display.pre_sra_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_presra || _display.pre_sra_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_sra_materials_quantity, pre_sra_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_sra_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_sra_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_sra_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_sra_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:pre_sra_card",
+                            "visibleOn": "${pre_sra_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">CA<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_preca || _display.pre_ca_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_preca || _display.pre_ca_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_ca_materials_quantity, pre_ca_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_ca_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_ca_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_ca_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_ca_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:pre_ca_card",
+                            "visibleOn": "${pre_ca_reviewer && approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">QC<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_preqc || _display.pre_qc_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_preqc || _display.pre_qc_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_qc_materials_quantity, pre_qc_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_qc_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_qc_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_qc_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_qc_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:pre_qc_card",
+                            "visibleOn": "${pre_qc_reviewer && approval_type === 'departmental_review' && ec_has_detail_page === 'yes' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">固定<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_preguding || _display.pre_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_preguding || _display.pre_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_materials_quantity, pre_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:pre_guding_card",
+                            "visibleOn": "${pre_reviewer && approval_type === 'personnel_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        }
+                    ],
+                    "size": "none",
+                    "wrapperBody": false,
+                    "id": "u:pre_review_row",
+                    "isFixedHeight": false,
+                    "isFixedWidth": false,
+                    "className": "pep-approval-row pep-row-pre flex gap-6 overflow-x-auto flex-1 py-1"
                 },
                 {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md text-xs font-medium text-white\" style=\"background-color: #155798\">固定<br/>预审</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_preguding || _display.pre_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(pre_materials_quantity, pre_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(pre_approval_status === 'pass', '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', pre_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', pre_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !pre_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:pre_guding_card",
-                    "visibleOn": "${pre_reviewer && approval_type === 'personnel_review' && review_status != 'draft'}",
-                    "editorState": "default"
+                    "type": "button",
+                    "label": "",
+                    "icon": "fa-solid fa-angle-right",
+                    "level": "link",
+                    "tooltip": "向右滚动",
+                    "className": "pep-arrow pep-arrow-right text-gray-500",
+                    "id": "u:pre_scroll_right",
+                    "onEvent": {
+                        "click": {
+                            "actions": [
+                                {
+                                    "actionType": "custom",
+                                    "script": "var t = event && event.context && event.context.nativeEvent && event.context.nativeEvent.target; var w = t && t.closest ? t.closest('.pep-approval-wrap') : null; var el = w ? w.querySelector('.pep-approval-row') : document.querySelector('.pep-row-pre'); if (el) { el.scrollLeft = Math.max(0, Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + (1) * Math.round(el.clientWidth * 0.8))); }"
+                                }
+                            ]
+                        }
+                    }
                 }
             ],
             "size": "none",
             "wrapperBody": false,
-            "id": "u:pre_review_row",
+            "id": "u:pre_row_wrap",
             "isFixedHeight": false,
             "isFixedWidth": false,
             "visibleOn": "${(pre_ns_reviewer || pre_legal_reviewer || pre_sra_reviewer || pre_ca_reviewer || (pre_qc_reviewer && ec_has_detail_page === 'yes') || pre_reviewer) && review_status != 'draft' && is_skip_approver != true}",
-            "className": "mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-5 sm:m-4"
+            "className": "mt-3 sm:m-4 pep-approval-wrap pep-wrap-pre flex items-center"
         },
         {
             "type": "container",
             "body": [
                 {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">Legal</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_legal || _display.legal_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(legal_materials_quantity, legal_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(legal_approval_status === 'pass' && legal_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', legal_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', legal_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !legal_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:1b743b2be88d",
-                    "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
-                },
-                {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">NS</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_ns || _display.ns_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(ns_materials_quantity, ns_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(ns_approval_status === 'pass' && ns_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', ns_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', ns_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !ns_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:65eac8efca60",
-                    "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
-                },
-                {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">SRA</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_sra || _display.sra_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(sra_materials_quantity, sra_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(sra_approval_status === 'pass' && sra_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', sra_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', sra_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !sra_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:912d54a43263",
-                    "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
-                },
-                {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">CA</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_ca || _display.ca_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(ca_materials_quantity, ca_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(ca_approval_status === 'pass' && ca_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', ca_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', ca_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !ca_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:3dd4613d67ae",
-                    "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
-                    "editorState": "default"
-                },
-                {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">QC</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_qc || _display.qc_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(qc_materials_quantity, qc_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(qc_approval_status === 'pass' && qc_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', qc_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', qc_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !qc_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:qc_review_card",
-                    "visibleOn": "${approval_type === 'departmental_review' && ec_has_detail_page === 'yes' && review_status != 'draft'}",
-                    "editorState": "default"
+                    "type": "button",
+                    "label": "",
+                    "icon": "fa-solid fa-angle-left",
+                    "level": "link",
+                    "tooltip": "向左滚动",
+                    "className": "pep-arrow pep-arrow-left text-gray-500",
+                    "id": "u:main_scroll_left",
+                    "onEvent": {
+                        "click": {
+                            "actions": [
+                                {
+                                    "actionType": "custom",
+                                    "script": "var t = event && event.context && event.context.nativeEvent && event.context.nativeEvent.target; var w = t && t.closest ? t.closest('.pep-approval-wrap') : null; var el = w ? w.querySelector('.pep-approval-row') : document.querySelector('.pep-row-main'); if (el) { el.scrollLeft = Math.max(0, Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + (-1) * Math.round(el.clientWidth * 0.8))); }"
+                                }
+                            ]
+                        }
+                    }
                 },
                 {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">固定</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_guding || _display.reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(approval_materials_quantity, approval_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(approval_status === 'pass' && approval_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', approval_status === true, '<i class=\"fa-solid fa-check\"></i>', approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:ec5fe1e3ac08",
-                    "visibleOn": "${approval_type === 'personnel_review' && review_status != 'draft'}",
-                    "editorState": "default"
+                    "type": "container",
+                    "body": [
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">Legal</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_legal || _display.legal_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_legal || _display.legal_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(legal_materials_quantity, legal_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(legal_approval_status === 'pass' && legal_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', legal_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', legal_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !legal_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:1b743b2be88d",
+                            "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">NS</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_ns || _display.ns_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_ns || _display.ns_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(ns_materials_quantity, ns_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(ns_approval_status === 'pass' && ns_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', ns_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', ns_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !ns_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:65eac8efca60",
+                            "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">SRA</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_sra || _display.sra_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_sra || _display.sra_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(sra_materials_quantity, sra_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(sra_approval_status === 'pass' && sra_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', sra_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', sra_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !sra_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:912d54a43263",
+                            "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">CA</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_ca || _display.ca_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_ca || _display.ca_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(ca_materials_quantity, ca_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(ca_approval_status === 'pass' && ca_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', ca_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', ca_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !ca_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:3dd4613d67ae",
+                            "visibleOn": "${approval_type === 'departmental_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">QC</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_qc || _display.qc_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_qc || _display.qc_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(qc_materials_quantity, qc_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(qc_approval_status === 'pass' && qc_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', qc_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', qc_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !qc_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:qc_review_card",
+                            "visibleOn": "${approval_type === 'departmental_review' && ec_has_detail_page === 'yes' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">固定</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_guding || _display.reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_guding || _display.reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(approval_materials_quantity, approval_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(approval_status === 'pass' && approval_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', approval_status === true, '<i class=\"fa-solid fa-check\"></i>', approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:ec5fe1e3ac08",
+                            "visibleOn": "${approval_type === 'personnel_review' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        },
+                        {
+                            "type": "tpl",
+                            "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">Kids</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" title=\"${(_display.handler_kids || _display.kids_reviewer)|pick:label}\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_kids || _display.kids_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(kids_materials_quantity, kids_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(kids_approval_status === 'pass' && kids_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', kids_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', kids_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !kids_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
+                            "inline": true,
+                            "wrapperComponent": "",
+                            "id": "u:41fda075cc8b",
+                            "visibleOn": "${child_files === 'yes' && review_status != 'draft'}",
+                            "editorState": "default",
+                            "className": "w-48 flex-shrink-0"
+                        }
+                    ],
+                    "size": "none",
+                    "wrapperBody": false,
+                    "id": "u:364038776887",
+                    "isFixedHeight": false,
+                    "isFixedWidth": false,
+                    "className": "pep-approval-row pep-row-main flex gap-6 overflow-x-auto flex-1 py-1"
                 },
                 {
-                    "type": "tpl",
-                    "tpl": "<li class=\"col-span-1 flex rounded-md shadow-sm\">\n  <div class=\"flex w-16 shrink-0 items-center justify-center rounded-l-md bg-private text-base font-medium text-white\">Kids</div>\n  <div class=\"flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white\">\n    <div class=\"flex-1 truncate px-4 py-2 text-sm\">\n      <a href=\"#\" class=\"font-medium text-gray-900 hover:text-gray-600\">${(_display.handler_kids || _display.kids_reviewer)|pick:label}</a>\n      <p class=\"text-gray-500 m-0 h-5\"><span class='mr-4'>${CONCATENATE(IF(kids_materials_quantity, kids_materials_quantity, 0), ' / ', materials_quantity)}</span>${IFS(kids_approval_status === 'pass' && kids_bypassed === true, '<i style=\"color: #02355a\" title=\"已跳过\">  Bypass</i>', kids_approval_status === true, '<i class=\"fa-solid fa-check\"></i>', kids_approval_status === false, '<i class=\"fa-solid fa-xmark\"></i>', !kids_approval_status, '')}</p>\n    </div>\n  </div>\n</li>",
-                    "inline": true,
-                    "wrapperComponent": "",
-                    "id": "u:41fda075cc8b",
-                    "visibleOn": "${child_files === 'yes' && review_status != 'draft'}",
-                    "editorState": "default"
+                    "type": "button",
+                    "label": "",
+                    "icon": "fa-solid fa-angle-right",
+                    "level": "link",
+                    "tooltip": "向右滚动",
+                    "className": "pep-arrow pep-arrow-right text-gray-500",
+                    "id": "u:main_scroll_right",
+                    "onEvent": {
+                        "click": {
+                            "actions": [
+                                {
+                                    "actionType": "custom",
+                                    "script": "var t = event && event.context && event.context.nativeEvent && event.context.nativeEvent.target; var w = t && t.closest ? t.closest('.pep-approval-wrap') : null; var el = w ? w.querySelector('.pep-approval-row') : document.querySelector('.pep-row-main'); if (el) { el.scrollLeft = Math.max(0, Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + (1) * Math.round(el.clientWidth * 0.8))); }"
+                                }
+                            ]
+                        }
+                    }
                 }
             ],
             "size": "none",
             "wrapperBody": false,
-            "id": "u:364038776887",
+            "id": "u:main_row_wrap",
             "isFixedHeight": false,
             "isFixedWidth": false,
             "visibleOn": "${is_skip_approver != true}",
-            "className": "mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-5 sm:m-4 top-16 sm:sticky z-20"
+            "className": "mt-3 sm:m-4 pep-approval-wrap pep-wrap-main flex items-center"
         },
         {
             "type": "tabs",