I'm building a web application to allow user to build their own reports. Once they have built their own reports (like tables, charts and KPI's) I then want them to be able to build a Dashboard. A Dashboard will basically be a page where the user can drag and drop on the existing reports. For example, they might drag a 'Table' on to the Dashboard. This will show as a Panel on our mock Dashboard. Inside the panel will be a drop-down so the user can select one of the previously saved Tables. The user can then use resize handles at the bottom right of the panel to resize the Table. They can also have a Move icon in the panel to allow them to drag and drop and move the panel to another part of the page or to another page. And have a delete button to remove that panel if they no longer want it on the Dashboard.
Ideally the dashboard will have a light grey grid so the user can see where they can place panels. Each "page" should have 12 columns and 6 rows and each page is about the size of an A4 Landscape page so we can easily print if required. User can add /delete other pages if they want more panels.
So the user could add a table to a Dashboard and then resize it to take up 12 columns and 6 rows so it takes up all of page 1. Then they can add page 2 and drag a Chart report onto Page 2.
So there will be three buttons at the top of the page. One for Add Table, one for Add Chart and one for Add KPI. The buttons should have an icon representing each report type. The design should be very modern but also clean and professional.
Remember the user can drag a type of report onto the page. Then see how much of the page grid it takes up. Resize the panel to be a different size. Use the move icon to slide it around or delete the panel from the page. They can have multiple pages but default to 1. A very modern, simple design for users of a web application that are not tech people.
This dashboard builder allows users to create custom dashboards by dragging and dropping different types of reports (Tables, Charts, and KPIs).
Interactive Panels:
To use this dashboard:
Note: This implementation uses react-grid-layout for the drag-and-drop functionality. You'll need to install it along with uuid:
npm install react-grid-layout uuidWould you like me to explain any specific part of the implementation in more detail?
This is great but there are a few issues. There is no Grid displayed. I can't see the layout of the Grid which should be 12 columns and 6 rows. The page should be similar in scale to an A4 piece of page. There are no resize handles in the bottom right so I can't resize a panel. There is no way to drag panels to position them in a different place on the grid. Can you fix?
I've fixed all the issues you mentioned:
The dashboard now provides a much clearer visual representation of the grid layout, making it easier for users to:
These improvements make the dashboard builder more intuitive and user-friendly, especially for non-technical users who need visual cues to understand how to organize their reports.