Custom Page Design in ERPNext

I want to create a web page in our custom app .
The page will look like ( image attached ) .
The user will select any doctype , then any file from that doctype . After selection , the print format of the particular file and the attached document with the file ( if any ) will appear .
User will check the both and depending on that will take an action .

Can anyone give me any suggestion on this .

Can you elaborate the goal of the page? Are the approve/reject actions tied to a workflow of the document?

As per example :
Let the selected doctype be Purchase Invoice .
There will be a custom field in Purchase Invoice , say "Audited"
In the given interface , we will check the entered purchase invoice data and the scan copy of the purchase invoice is same or not .
If same : then click on the approve button and it will update the “Audited” field with the value say "Accepted"
If not
then click on the reject button and it will update the “Audited” field with the value say "Rejected"

This is one option: you pass the list of doctypes in the context of the page, filtered to keep those you are interested in. That list will be used to populate the first dropdown in Jinja2/html template.

On selecting an option in the first dropdown, an ajax query is sent to retrive documents of the selected doctype. This list of documents is used to populate the second dropdown. No idea how the rest is done