https://github.com/mirianalejandra1996/report-generator

📠 Project developed in VueJs that generates reports in .xlsx 📝(Excel) format for Tkambio company 💰
https://github.com/mirianalejandra1996/report-generator

challenge excel excel-export javascript javascript-framework laboratoria momentjs sass scss single-page-applications spa vue

Last synced: 5 days ago
JSON representation

📠 Project developed in VueJs that generates reports in .xlsx 📝(Excel) format for Tkambio company 💰

• Host: GitHub
• URL: https://github.com/mirianalejandra1996/report-generator
• Owner: mirianalejandra1996
• Created: 2022-05-10T04:21:27.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-17T17:41:37.000Z (7 months ago)
• Last Synced: 2024-04-17T18:28:11.051Z (7 months ago)
• Topics: challenge, excel, excel-export, javascript, javascript-framework, laboratoria, momentjs, sass, scss, single-page-applications, spa, vue
• Language: Vue
• Homepage: https://mirianalejandra1996.github.io/Report-Generator/
• Size: 1.89 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Reports Generator 📄

This web application has been developed with the [Vue Framework](https://vuejs.org/)  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](https://vue3datepicker.com/) 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](https://github.com), in which you have access in the following [Link](https://mirianalejandra1996.github.io/Report-Generator/)

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

## Author 🎇

[🙋🏽‍♀️ Mirian Alejandra Arévalo](https://github.com/mirianalejandra1996).

📧 Contact me on: [email protected]