{
  "version": "1.0",
  "roles": [
    {
      "id": "admin",
      "name": "Admin",
      "rules": [
        "admin_onboarding:data:maker",
        "admin_onboarding:data:checker",
        "admin_onboarding:data:approver",
        "user_management:list:maker",
        "user_management:list:approver"
      ]
    },
    {
      "id": "supervisor",
      "name": "Supervisor",
      "rules": [
        "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>
  )
}