thelovesmith/VSF

VSF Serverless Fullstack app

Vision Solar Finance Gatsby/Firebase Site

Task List

Landing Page (pages/index.js) (Kathleen)

• Mobile Responsiveness (For BG Image and the SignIn SignUp Component)
• Download correct BG image (no watermark)

SignIn Page (component/SignIn/index)

• Enable Google Sign-In in Firebase Console (Avery)
• Remove Social MEdia Sign-IN Options (Avery)
• Change Button Color (Kathleen)
• General Styling (Kathleen)

SignUP Page

• Add inputs for additional info needed for the Reps. (refer to the list at teh end of the readme)
• Create Validation only for (F. Name, L. Name, Email, Role ), they can add the other stuff in their Profile later via the account.js component(Kathleen)
• styles (Kathleen)

Navigation Menu Drawer (navigation.js)(Kathleen)

- Add Material Icons

• Change Font
• Remove Landing Page Link
• Change sign out to send you to the landing page
• Add Signout link to end of the navigation list
• Change links font, color, and style

Client/Homeowner View Component (homeowner.js) (Avery)

• Style Homeowner's General Information as a table on top portion of the compoenent
• Create a back/return button that sends you back to the home page (list of clients)
• file upload using Firebase or Multer??? try to stay away from server stuff SERVERLESS so probably firebase/firestore!!
• Start building out the foundation for this Homeowner contract, creating components for each separate task in project timeline. (refer to screenshots)
• Some files include media uploads to the DB or form fields subimitting information.
• Media and file uploads
• Project status breadcrumb
• Add Logos to the contact info for each client
• When a rep creates a contract or project for a homewoner, the project object should have a field called "projectID" that should be the same as the Homeowners ID from the Firebase Database. This is a way we can keep the contracts in separate list in the database while still linking them ro their respective homeowners.

Home Page (clientList.js)(Kathleen)

• Remove Address and Phone number from table
• Addtional Styling (Fonts Colors, shadows, padding, spacing)
• Eventually Create Homeowner will be moved to the homeowner.js page but this button will remain here

Account Page (o) (Avery)

• Remove Link Social Media Links, deactivate password
• Definitely needs Styling
• Change the forms to dropdowns after you click the "forgot password" or "change password" button (popover material ui component)
• Title header
• Think about other things a rep may need to see in their account page
  • Password Management

Firebase (Avery)

• Add Contract/Project API to Firebase object to create a list in the Firebase database.
• Initiliaze Contract list

Admin Page

• Keep this page and leave unstyled

Misc. TODO:

• Mke sure all buttons and forms are using a similar styling layout
• siteconfig
• Material UI, tables, textfield, form,
• reactHooks
• Style & Layout
  • Images/Logo/Colors (probably jack some colors from VS)
  • Have to create a new logo in illustrator???
• make it so users can only see the messages/clients that they created
• Make components that displays a clients profile for the Admin once they choose their name from the userlist

FUTURE Implementations

• Match Material UI styling with Theme config options
• configure the gatsby-plugin-material-ui
• esignature
• try updating to latest versions of packages every week (--yarn upgrade-interactive --latest--)
• Change all forms into Material Ui forms with validation(optional)(New Homeowner, sign in, sign up)
• Make Client info editable/deletable for their respective reps and admins
• Identity Provider configuration
• Applications and forms should have a "Save and Continue" button
• gatsby plugin manifest for PWA
• Choose a DOmain Name (visionsolar.app/vsf.dev/sales.visionsolar.com)
• consider switching over to Firestore so filtering through the database in the Firebase Admin Console would be easier

Styling

Colors

• #FAA818 Solar Orange
• #21303A Grey
• #ffffff White
• #333333 Dark greyish blue
• #428ACA cornflowerblue

Fonts

• Nunito or Nunito Sans (Headings, Titles)
• Montserrat (TExt, body )
• Spectral (menu, lists)
• Karla (Buttons, links)

Alternative Font Scheme

• Poppins (Headings, Titles)
• Nunito Sans (text, body)
• Karla (Buttons, links, Nav Items)

modules

• gatsby-source-filesystem exports three helper functions:
  • createFilePath
  • createRemoteFileNode
  • createFileNodeFromBuffer

MaterialUI

- Table
- button
- appBar
- SnackBar
- Stepper

Dividend Finance Notes/Comparison

• Dashboard and Pipeline will be same page in VSF or could be seperate pages
• There should be more options/button to create a client (not just the home dashboard)
• There should be a way to search through the client database for Admins

Pages and Components

• Client Display Page (is the same as the project display page)
• Client Info:
  • Project #/Contract #
  • Phone
  • Email
  • Address
  • Loan Type
• Project Timeline (breadcrumb?)
  • Credit App
    • Details
    • 
  • Product Selection
  • Financing Details
    • Addiotional Details (image)
    • Driver's license (upload)
    • Project Details (4.725 KW $15,400.00)
    • Send Agreements (Signed 2020-01-11)
    • Stipulations (documents requested and their status)
      • ACH Bank Info (uploadable??)x
      • Proof of Ownership (uploadable)
      • Proof of Income (uploadable)
      • Dividend Welcome Call (calling client or provider)
      • 
  • Intallation
    • Work Order
      • 
    • Substantial Completion
      • 
    • Permission to Operate
      • 
  • In service (I guess when the project is complete)

Data and Relationships

Reference the Dividend Finance Pipeline

• Reps (Team Page)

  • Id
  • Role
  • First Name
  • Last Name
  • Manager
  • Email
  • Phone
  • (edit)
  • (delete)

• Borrower/Client

  • Id
  • Rep Id
  • Namex
  • Next Step??
  • application progress indicator

• Project/Contract

  • Id
  • Borrower/Client Id
  • Rep Id
  • Loan amount
  • Loan type
  • Date Created
  • Date Loan Doc was Sent
  • Deficiency Reasons??
  • Cost/ Wattage
  • Date of Final Approval
  • Date of Work Order Execution

Images