{
  "version": "1.0",
  "roles": [
    {
      "id": "admin",
      "name": "Admin",
      "rules": [
        {
          "page": {
            "id": "admin_onboarding",
            "name": "Admin Onboarding",
            "sections": [
              {
                "id": "admin_onboarding_data",
                "name": "Onboarding Data",
                "permissions": ["checker", "maker", "approver"]
              },
              {
                "id": "admin_onboarding_documents",
                "name": "Documents",
                "permissions": ["checker"]
              }
            ]
          }
        },
        {
          "page": {
            "id": "user_management",
            "name": "User Management",
            "sections": [
              {
                "id": "user_list",
                "name": "User List",
                "permissions": ["maker", "approver"]
              }
            ]
          }
        }
      ]
    },
    {
      "id": "supervisor",
      "name": "Supervisor",
      "rules": [
        {
          "page": {
            "id": "admin_onboarding",
            "name": "Admin Onboarding",
            "sections": [
              {
                "id": "admin_onboarding_data",
                "name": "Onboarding Data",
                "permissions": ["checker", "approver"]
              }
            ]
          }
        }
      ]
    }
  ],
  "permission_definitions": {
    "checker": "Can view and verify data",
    "maker":   "Can create and edit data",
    "approver": "Can approve or reject data"
  }
}

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>
  )
}