Custom approval process : to Add Custom fields to "Items to Approve" home page component

I  have approval process on Opportunity. my requirement is like to display custom field (TC Meeting Notes)to "Items to Approve" home page component, we can't customise this, but we can create a custom component for this behaviour using Visualforce.  i have created vf page apex class and
custom home page component .
here TC_Meeting_Notes__c is custom field from opportunity :
Idea link: https://success.salesforce.com/ideaView?id=08730000000BrKHAA0



VF page:
<apex:page controller="ItemstoApprovvecontroller" sidebar="false" showHeader="false" tabStyle="Approver_Configuration__c" >
    <apex:form >
        <apex:pageBlock title="Items To Approve">
            <apex:pageBlockTable value="{!items_to_approve}" var="item_to_approve">
                <apex:column headerValue="Action" width="160 px" >
                                    <apex:commandLink target="_top" value="Reassign |" action="{!REASSIGNnavigation}" style="text-decoration:none;color: #015ba7;" styleClass="cactionLink">
                                                       <apex:param name="myParam" value="{!item_to_approve.approvalid }" />
                                                                                             
                                                                    </apex:commandLink>

                    <apex:commandLink target="_top" value=" Approve / Reject" action="{!ApproveRejectnavigation}" style="text-decoration:none;color: #015ba7;"  >

                   <apex:param name="myParam" value="{!item_to_approve.approvalid }" />
                </apex:commandLink>

         
                </apex:column>
               <apex:column headerValue="Type"  width="100 px">
                    <apex:outputText >{!item_to_approve.objtype}
                      </apex:outputText>
                </apex:column>
             
                <apex:column headerValue="Deal" width="300 px">
                    <apex:outputLink target="_top" value="/{!item_to_approve.id}">{!item_to_approve.name}
                      </apex:outputLink>
                </apex:column>
             
             
                <apex:column headerValue="TC Meeting Notes">
                    <apex:outputtext >{!item_to_approve.tcmeetingcomments}
                      </apex:outputtext>
                </apex:column>
                <apex:column headerValue="Date Submitted" width="150 px">
                    <apex:outputtext >{!item_to_approve.DateSubmited }
                      </apex:outputtext>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex class:
public class ItemstoApprovvecontroller {
 
    ApexPages.standardController stdController= null;
    public ItemstoApprovvecontroller(ApexPages.StandardController controller) {
        stdController=controller;
    }
    public opportunity Objectopportunity {get; set;}
    public List<opportunity> lstopportunityapprove {get; set;}
    ID Oppyid;
    Set<ID> oppyids=new Set<ID>();
 
    public class item_wrapper {
        public item_wrapper(id id,string name,string objtype,String DateSubmited,string tcmeetingcomments, id approvalid ) {
            this.id = id;
            this.name = name;
            this.objtype = objtype;
            this.DateSubmited = DateSubmited;
            this.tcmeetingcomments=tcmeetingcomments;
            this.approvalid =approvalid ;
        }
        public id id { get; set; }
        public string name { get; set; }
        public string objtype { get; set; }
        public String DateSubmited { get; set; }
        public string tcmeetingcomments{ get; set; }
        public id approvalid { get; set; }
     
    }
 
    public list<item_wrapper> items_to_approve { get; set; }
 
    public ItemstoApprovvecontroller() {
        items_to_approve = new list<item_wrapper>();
     
        map<id,ProcessInstanceWorkItem> mpaPIWIdToPIW = new map<id,ProcessInstanceWorkItem>();
        list<ProcessInstanceWorkItem> lstPIWI = [select processinstance.targetobjectid,CreatedDate ,processinstance.targetobject.name,ProcessInstance.TargetObject.type from processinstanceworkitem where actorid = :userinfo.getuserid() Order by CreatedDate Desc];
        if(!lstPIWI.isEmpty()){
            for(ProcessInstanceWorkItem item: lstPIWI) {
                oppyids.add(item.processinstance.targetobjectid);
                if(!mpaPIWIdToPIW.containsKey(item.processinstance.targetobjectid)){
                    mpaPIWIdToPIW.put(item.processinstance.targetobjectid,item);
                }
            }
        }
     
        map<id,Opportunity> mapoptyIdtoMeetingnotes = new map<id,Opportunity>();
     
        if(oppyids.size()>0){
            lstopportunityapprove=[select id,Owner.name,name,Deal_Comments__c,stagename,TC_Meeting_Notes__c  from Opportunity where id in : oppyids];
            if(!lstopportunityapprove.isEmpty()){
                for(opportunity objoppy:lstopportunityapprove){
                    mapoptyIdtoMeetingnotes.put(objoppy.id,objoppy);
                }
            }
        }
        if(!lstPIWI.isEmpty()){
         
            for(ProcessInstanceWorkItem item: mpaPIWIdToPIW.values()) {
                String dateTimeValue = item.CreatedDate.format('MM/dd/yyyy hh:mm a');
                system.debug(dateTimeValue +'Debug2 dateTimeValue ');
                if(item.processinstance.TargetObject.type == 'Opportunity'){
                                    system.debug(item.processinstance.targetobjectid +'Debug2 dateTimeValue ');

                    items_to_approve.add(new item_wrapper(item.processinstance.targetobjectid,item.processinstance.targetobject.name,item.processinstance.TargetObject.type,dateTimeValue ,mapoptyIdtoMeetingnotes.get(item.processinstance.targetobjectid).TC_Meeting_Notes__c,item.id ));
                }else{
                   system.debug(item.processinstance.targetobjectid +'Debug2 dateTimeValue ');


                    String sObjName = item.processinstance.targetobjectid.getSObjectType().getDescribe().getLabel();
                                                           system.debug(sObjName +'sObjNameValue ');

                    items_to_approve.add(new item_wrapper(item.processinstance.targetobjectid,item.processinstance.targetobject.name,sObjName ,dateTimeValue ,'',item.id ));
                }
            }
        }
    }  
    public  static String ApproveRejectnavigation() {
        String url='';
        string myParam = apexpages.currentpage().getparameters().get('myParam');
        url='https://'+ System.URL.getSalesforceBaseUrl().getHost() +
            '/p/process/ProcessInstanceWorkitemWizardStageManager?id=' + myParam ;    
     
        return url;
     
    }
    public  static String REASSIGNnavigation() {
        String url='';
        string myParam = apexpages.currentpage().getparameters().get('myParam');
        url='https://'+ System.URL.getSalesforceBaseUrl().getHost()+'/'+ myParam +'/e?et=REASSIGN';    
        return url;
     
    }
 
}