New custom HTML inside the desk tied to permissions

I have an app that I have built which is a standard model. Nothing fancy.

I need to add a reporting dashboard to it. Let us say I want to create some bar and pie charts using js or some 3rd party js library. I would want to assign a separate role called ‘View Reports’ and hook this dashboard to the role. Only users assigned to this role can view the dashboard.

Data to the HTML/js can come from server side python files which I can pull from the document, summarize and send.

My questions:

  1. What are the frappe api touchpoints available to use it. Where will I place my HTML, CSS and JS files?
  2. What Python code needs to be written? For discussion purposes, we can assume that there is no filtering etc involved and the report is generated based on data in the model.

Any sample already existing will be highly appreciated.

@Deepak_Kumaran

You can see source code of ERPNext and learn development of such report(which is actually page in Frappe)

See Sales Funnel Report

When you create page, one python and js file is created.
You can write your code in python and js files.
For plug-in, you can use google charts or any third party javascript library.

Ok thanks. I will review this.
Thank you for your quick reply.

Is there a reference for using plug ins?