v2.1.0 - Tanstack Query & Table Implementation

Highlights

With this release of “The Roofing App” here are the following highlights:

• Tanstack Tables with sorting, filtering, and pagination
  • Customers, Quotes, Invoices, and Leads
• Tanstack Query for state management, caching, mutations and auto refreshes for data
• UI Refresh for Leads, Quotes, Invoices, and Customers Pages
  • Quote Request got rebranded to Leads because it better represents what that data is.
• Stat cards for each of the main pages in the app
  • Total new, scheduled, and closed leads
  • Total overdue, pending and paid invoices
  • Total accepted, pending, and rejected quotes
  • Total customers, total residential customers and total commercial customers
• Convert quote into an invoice with validation
• Invoice/Quote have proper internal/external note.
• Delete Alert Modal refreshed UI Design
• Empty State Cards for main pages when no data is found
• Proper error feedback toast messages to the user across action in the app.

Bug fixes & Small changes

• Fixed issue where user would be pushed to login page instead to dashboard when logged in.
• Fixed infinity place holder value when no invoices or quotes are available in respective forms.
• Theme color established for Apple devices to display instead of the color black
• Fixed problem where custom addresses were not being displayed and exported for Invoice and Quote.
• Fixed where certain addresses did not contain google maps hotlink to search for address in a new tab.

Roadmap

Here is my current roadmap to the future iteration I plan to make to this project. This serves as milestone that I want to reach to further the power of this software. My goal is to create something that is unique for its space and I cannot wait to integrate third-party roofing tools support which is something that will make it a serious app other small roofing companies can use. As I get close to each version release the more are the new features sets are prone to change.

v2.0.0 - Major Overhaul

Introducing v2.0 Release for the Roofing Webapp 🎉

After using the initial release of the web application locally for 1 year I ran into limitations, features that would be nice to have, and lack of reporting of the data and many more other limitations. I went back to the drawing board to improve the app across the board and add brand new features that would enhance/streamline the management of data for a small roofing company.

Here is a list of some major changes to the project:

• Upgrade to project from React.js v17 to v18.2 and all dependency along with it.
• Migrated from CRA to Vite
• Deprecated the use of mySQL database and Node.js server for Supabase.js
• Implemented new auth system using Supabase with Google Sign-in
• Redesign for Invoice, Quotes, Customers, Invoice Details, Quote Details, and Customer Details pages.
• Redesigned navbar that is not fully responsive
• New responsive pages across multiple devices now
• New customer details page can now display invoices/quotes that belong to a customer.
• New Quote Request page to capture customer request for a quote for a service we offer from website
  • Button to quickly save requestor as a customer with email validation
  • Ability to create, update, and delete a request
• New Dashboard page to report
  • Total New Quote Request
  • Total Overdue Invoices
  • Total Pending Quotes
  • Total Customers registered
  • Total Monthly Revenue with percent change by compared to the previous month
  • Total Revenue for the year with percent change compared to the previous year
  • Line graph of month by month revenue with dataset of 3 years prior of revenue generated
  • Recent activity for quote request, quotes, invoices, and customers
• New feedback toasts for user interaction with the UI such as creating, deleting, and updating data with success/error
• New multiple line-item support for quote/invoice
• New revamped forms that are dynamic settings for creating a invoice, or quote
• New delete dialog alert with abstraction for connected handle submits to work for invoices, customers, quotes, and QR all using one alert component.
• New PDF export support for invoice or quote
  • Preview Invoices in modal
  • Download button to save invoice with "RRINV-00" and quote with "RRQ-00" naming convention.
• New payment tracking for a invoice to accurately track revenues when company receives money
• New quick action bar to update data quickly for invoice/quote data
  • Quickly update invoice/quote status with dropdown menu
  • Add Payment to invoice
  • Add line-item to invoice/quote
• Replaced use of ChakraUI icons to react-icons
• Formatted main components of code using prettier with eslint standards
• New automatic calculation for total, subtotal, payments, and line-items for invoices that have an amount due using SQL triggers when changes are detected
• New customer note meant to be seen by the customer regarding details of the work that they should be aware of
• New measurement/general note meant to be seen only internally for quote/invoice.
• New ability to add custom address if the customer wants us to do another job for them but its not on their primary address we have stored for them
• Dark mode still working as intended with new changes
• Major refactor to codebase using SOLID Principles for React.js deleting a lot of code, restructuring components, adding logic abstraction when reusing the same component, refactoring code, and much more...
• New custom react hooks to make it easier to maintain project for the future changes for fetching data from the database and staging for the implementation of react-hooks
• New company website integration that can be used to expand features later down the road as the business grows.
• Updated dockerfile to work with the new techstack to get it deployed faster
• Updated Readme.md

Full Changelog: v1.0.0...v2.0.0

I have been working these past 3 months to get this release ready and always ended up adding more and more to the features. I needed to add a stop somewhere and found that his is a good stopping point until the next release. Already 📝 planning for a v2.1.0 release but will make sure prioritize and only add what is outline. As always the project is open source and free to be used by anyone. If you want to help expand this project you can always reach out and I can move my planned roadmap of version into Github. As always thank you and I will keep working to better my skills and help those around me. 🥳🙏

Initial Release

This is the initial release for the roofing webapp that currently support storing customer, employee, estimate, and invoice data. The client side of the application is built using react.js and the backend is built with a node.js server that depends on a mysql DB. With this release it contains docker compose that automatically builds containers for the frontend and backend that allows for faster production setup. User is required to host their own database with a database name of 'roofing_db' in mysql first or the node server will error out. If that is the case first set up the database then restart the docker container. Credentials are store in .env the variables under the server folder:
Node Server:
MYSQL_HOST=localhost
MYSQL_USER=
MYSQL_PASSWORD=
MYSQL_DB=roofing_db

Sensitive data is store in .env also for the react app under the client folder:
REACT_APP_BASE_URL=localhost

Features:

• Login System for security
• Managing customer/employee information
• Managing Estimate/Invoice Information
• Docker implementation for quick production deployment

Full Changelog: https://github.com/rrios4/roofing-webapp/commits/v1.0.0