{
  "version": "1.0",
  "roles": [
    {
      "id": "admin",
      "name": "Admin",
      "permissions": [
        "admin_onboarding::data::maker",
        "admin_onboarding::data::checker",
        "admin_onboarding::data::approver",
        "user_management::list::maker",
        "user_management::list::approver"
      ]
    },
    {
      "id": "supervisor",
      "name": "Supervisor",
      "permissions": [
        "admin_onboarding::data::checker",
        "admin_onboarding::data::approver"
      ]
    }
  ]
}

function usePagePermission(pageId: string, sectionId: string) {
  const { userRole, config } = useAuth()

  return {
    canCheck:   hasPermission(config, userRole, pageId, sectionId, 'checker'),
    canMake:    hasPermission(config, userRole, pageId, sectionId, 'maker'),
    canApprove: hasPermission(config, userRole, pageId, sectionId, 'approver'),
  }
}

// ใน component
function OnboardingPage() {
  const { canMake, canApprove } = usePagePermission('admin_onboarding', 'admin_onboarding_data')

  return (
    <div>
      {canMake    && <button>Edit</button>}
      {canApprove && <button>Approve</button>}
    </div>
  )
}