Report-Generator

Reports Generator 📄

This web application has been developed with the Vue Framework following a technical challenge 🚀

The purpose is to create an interface that allows the user to view a list of reports that have been generated, and allows these reports to be downloaded in .xls (Excel) format files 📝

Requirements 💡

• Develop a SPA application in Vue Js, which has as an interface a button to generate user reports and a table that lists the generated reports.

• Consider responsive design and fidelity to the proposed design.

• Each time the “generate report” button is pressed, a form will open to create a new user report filtered by date, having to enter the “report title” as well as the “start date” and “end date” based on the date of birth (birth_date) of the users.

  Consider all the security validations that you think are convenient.

• Publish it as a static page on github, and simulate the information with static data (the list of reports or use localstorage, etc) to be able to evaluate the finish of the design. (simulates the back-end with static data).

Development Considerations 👩🏽‍💻

For error handling, respective validations were carried out so that the user cannot enter numbers in the first field, leave no empty space, or that the value of the final date is less than the value of the initial date.

A component from the Vue 3 datepicker package was implemented to provide the functionality, but some modifications were made by manipulating the styles to make it as close as possible to the requested prototype.

Similarly, properties were added so that the format was “DD/MM/YYYY”, since it initially showed “MM/DD/YYYY, HH:MM”

So it finally became the next pickerdate

As for the excel files, these are downloaded by clicking “Download” on the corresponding row, and the file name would be REPORT + ID number. (Example: REPORT0001)

Final result of the project 🎯

The views are as follows:

Initial view without records

Create new record

Listed Records

Excel report

This application was deployed in Github Pages, in which you have access in the following Link

https://mirianalejandra1996.github.io/Report-Generator/

Author 🎇

🙋🏽‍♀️ Mirian Alejandra Arévalo.

📧 Contact me on: mirianalejandra1996@gmail.com