SunShot - PVBid UI Prototype

Welcome to the SunShot - PVBid UI Prototype Challenge! PVBid enables the solar integrator to quickly generate ballpark pricing with minimal information. The pricing accuracy improves with additional information. Automated features generate custom proposal documents within minutes.

For this challenge, the goal is to create an HTML prototype based on the provided storyboard design, wireframe, and requirements outlined in the Challenge Details section.

Final Submission Guidelines

The following are the requiered pages and functionality:

1. Landing page
- See 01_landing_page.png for reference
- User login redirects to Dashboard page. Both username and password field should be required before user can go to the Dashboard page.
- LinkedIn and Google+ are dead links.
- “Sign Up” link leads to the Sign Up page.
- “What We Do” section is a carousel.
- “How To Start A Bid” is a 2 column section. The left side is a text copy with a “Learn More” dead link. The right part is a carousel of image and videos. Put at least 8 images and at least 4 videos for this carouse. Create dummy image for the image requirements, while you can get sample videos from youtube that you can embed.

2. Signup
- See 02_sign_up.png for reference.
- Fields validation should be implemented.
- Social connect buttons can be dead links.
- On successful sign up, the user should be redirected to the Dashboard page.

3. Dashboard
- See 03_1_dashboard.png for reference.
- See the provided wireframe for the top navigation links.
- Link “Home” in the top navigation to this page.
- “Open Bids” table columns are sortable.
- The search field will lead to “View My Bids” page.
- The bottom widgets are draggable and removable.
- “drag” and “trash” icons only shows when the mouse hovers on the widget. See 03_2_dashboard.png for reference.
- Moving a widget to another location will move the other widgets accordingly.
- Removing a widget should automatically move the other widgets to fill in the correct order.
- The Calendar widget should be functional.
- The “Graphs & Reports” widget is a carousel, you can use image placeholder for the charts.
- The space with “+” icon is intended for adding more widgets on dashboard. For this challenge, you just need to make this a link.
- The header of each widgets links to related pages, “Open Bids” to “View My Bids” page while other will be dead links.

4. Create New Bid
- See 04_1_create_new_bid.png for reference.
- Clicking “Select Template” will launch the “Select a Bid Template” modal. See 04_2_create_new_bid.png for reference.
- Clicking “Choose from a list” from that modal will pull down the options. See 04_3_create_new_bid.png for reference. Clicking back the button will pull up the options.
- If user starts typing on the “Template Name” field, an auto suggest options should be displayed. See 04_4_create_new_bid.png for reference.
- Selecting from the list will place the selected name to the “Template Name” field and will display the template values to the template preview section. See 04_5_create_new_bid.png for reference.
- Clicking on the “X” icon, Cancel link, and on outside the modal area will close the modal window.
- Clicking “Select” will close the modal, it will set the template name to the “From Template” field, and it will move to the next step. See “Set Inputs” step below.
- Fields validation should be applied.
- The “Cancel” link and “Save” button located at the bottom of the page leads to “View My Bids” page.
- This page has 4 parts/steps, clicking on any of the step icons that are located at the top right part of the page will navigate to that particular step.
- For the 4th step (Contract), use the same circle from the first 3 steps for this icon.
- The steps are:

4.1 Client Info
- By default, this is already visible. See 04_1_create_new_bid.png for reference.
-  Clicking “Next” will lead to “Set Inputs” step.

4.2 Set Inputs
- See 04_6_create_new_bid.png for reference.
- On the “Bid Summary” section, use the content found in 04_10_create_new_bid.png
- Clicking any item in “Bid Summary” section will show the details fly out window. See 04_10B_create_new_bid.png for reference. When user update the value of any field, their total values should be auto computed. The math for doing the auto compute is as follows:
-- “Multiplier” will have a default value of 1
-- “Hours Total” will have a default value of 15
-- “Extended Cost” = “Multiplier” * “Hours Total”
-- “Total” for each row is the sum of “Extended Cost”
-- The grand “Total” is the sum of ALL the “Extended Cost” * “Quantity”
- Clicking the total under the “Bid Summary” section will show a popover Total Information. See 04_9_create_new_bid.png for reference.
- Clicking the “5 more component” item will expand the section to show the additional information. See 04_11_create_new_bid.png for reference.
- Clicking “Hide” will collapse back the “Bid Summary” section to its original form.
- Clicking “Previous” will move back to “Client Info” step, while clicking “Next” will lead to “System Components” step.

4.3 System Components
- See 05_0_create_new_bid.png for reference.
- All sections are expandable/collapsable.
- The “System Components” widgets for this step should be 7 instead of 3, these are: Fondant, Layers, Decoration, Design, Storage, Delivery, and Add Components.
- When in collapsed mode, only visible part is the widget header and the “quantity and total” section, see Sheet Cakes for reference.
- The content of other widget can be similar to the Fondant widget.
- Clicking on each widget’s items will show a popover of additional information, see 05_1_create_new_bid.png for reference.
- Clicking on the popover’s title (“1. Fondant Cake” in the 04_10B example) would take the user to 05_0 viewing the section labeled “1. Fondant Cake’
- The “+” icon will create a new line item below that is similar to the existing rows fields. The first field will be a select drop down with pre-filled dummy options, the rest of the fields are Labor (Multiplier, Hours Total, and Extended Cost), Materials (Multiplier, Hours Total, and Extended Cost), and Total.
- The fields should be auto-computed as defined in section "4.2 Set Inputs".
- The “trash” icon will remove the corresponding row.
- User should be able write custom notes and to upload a file in the “Note & Attachment” section.
- Updating any widget’s field values will auto compute their total.
- Clicking “Previous” will move back to “Set Inputs” step, while clicking “Next” will lead to Generate Contract step.

4.4 Generate Contract
- See 07_1_generate_contract.png for reference.
- “For Bid” field is a select element with options of pre-populated bids.
- The left part is a WYSIWYG editor, use an open source editor that match this requirements.
- The right part is a list of codes that can be used in the Contract Text Editor on the left side part.
- Codes listed in the right part should be draggable to the “Contract Text Editor” on the left. Example, if the user clicks and drags the [Address] over to between "This" and "Contract" at the top of the Contract Text Editor then Address will be injected and appear as: "This [Address] contract states that..."
- Clicking the “Show Text Available” will slide the right panel to display the “Text Available” column and eventually hides the Contract Text Editor. See 07_2_generate_contract.png for reference.
- Clicking the “Show Contractor Text Editor” will slide the panel back and will show the “Contractor Text Editor” as shown in 07_1_generate_contract.png.
- Each item under the “Text in use” are sortable.
- Items on the “Text available” column can be dragged to “Text in use” column and vice-versa. Moving an item should be contained to their specific row.
- When an item is moved to another column, that item should be removed from its existing cell.
- If a user select an item in “Text in Use” and hits the “delete” key then it will automatically moved that item to “Text Available”.
- The WYSIWYG editors under the “Text in use” column will allow the user to edit the item’s content on the fly.
- The “+Add” will allow the user to add new code, see the wireframe for functionality.
- “Preview” button will show the preview modal, see 07_3_generate_contract.png for reference.
- “Send to Review”, “Send to Client”, and “Cancel” are dead links.
- Clicking “Save” button will show the “Contract Saved” modal, see 07_4_generate_contract.png for reference.
- Clicking “Previous” will move back to “System Components” step.

5. Create New Line Item
- See 06_create_new_line_item.png for reference.
- All sections are expandable/collapsable.
- “Supplies”, “Rentals”, and “Add Unit Type” content can be similar to the content of “Work” widget.
- Updating any widget’s field values will auto compute their total.
- All “?” icon when hovered will display a popover.
- All “+” will add an item to its corresponding section and should match the existing fields on that section.
- “Cancel”, “Save”, and “Convert to System Component” leads to “View My Bids” page.

6. View My Bids
- See 08_1_view_my_bids.png for reference.
- The “Apply Filters” is expandable/collapsable section, see 08_2_view_my_bids.png for reference.
- What is selected in this “Apply Filters” should be reflected in “Filtered by” section.
- All table columns should be sortable.
- Table pagination can be dead links.

7. Cost Codes
- See 09_1_Cost-Codes.jpg for reference.
- Each items are expandable/collapsable.
- “Edit” and “Cancel” will be just dead links.
- Clicking any link from the “View by” section will lead to the following:

7.1 View by Cost Codes
- See 09_2_Cost-Codes.jpg for reference.
- Clicking on the “Reassociate” will show the modal as shown in 09_3_Cost-Codes.jpg
- The “Choose from the list” will pull down the pre-populate list of options.
- The “Cose code name” field is a auto-suggest field that will list options as the user types in.
- Clicking any item from the options list will close the modal.
- “Cancel”, “Save”, and the “x” icon will close the modal too.

7.2 View by Components
- See 09_4_Cost-Codes.jpg for reference.
- Use dummy content for the other widgets.
- Use the same content shown in 09_2_Cost-Codes.jpg for the sub-widgets (sections inside the widget), including the reassociate functionality from these sub-widgets.
- Other links are dead links.

General Notes:

1. All of the page layout should be responsive even though we don’t have specific storyboard for tablet view, the page should still look good and not messed up. Use your best judgement in this. Additional instructions:
- sections that stretch to the edges of the page should be fluid and should be set to 100%, while their content depends on the device width. Example of this sections are the header and footer.
- These are the breakpoints to consider: 480, 767, 768, 991, and 1200

2. Header navigations for Landing and Sign Up pages are dead links for now.

3. Footer links and social icons are also dead links.

4. Breadcrumbs should be linked to their corresponding pages.

5. All carousel elements should loop infinitely and are set to 10 seconds by default before sliding to the next item. The second delays should be configurable. By default, this carousel is auto play but there should be a settings to turn it off

6. Fields validation should take in consideration if it is required and if it has correct value for its field type, examples are emails, date, numbers, etc...

7. Cascade the font family to Arial if Helvetica Neue is not existing. I suggest to use this font stack: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;

8. Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.

Browser Compatibility:

- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- Tablet ( iPad browsers; Safari & Chrome, and Android browsers in both Landscape & Portrait mode)
- Smartphone (iPhone browsers; Safari & Chrome, and Android browsers in both Landscape & Portrait mode)

HTML5

- All HTML code should pass W3C HTML5 validation.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

CSS3

- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap for this challenge.
- All CSS code should pass W3C CSS3 validation.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.

Javascript

- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to AngularJS for this challenge.

Images

- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.

Submission Guidelines:

A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.