GE Water and Process Technologies Responsive UI Prototype Challenge (Tablet)

Welcome to GE Water and Process Technologies Responsive UI Prototype Challenge (Tablet)! The goal of this challenge is to create an HTML5 Responsive Prototype that is focused on the "Tablet" view! We want you to complete the Tablet screens and 2 mobile screens.

NOTE: This application will need to use Bootstrap as it is part of GE's preferred frameworks (http://getbootstrap.com/getting-started). 

As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. As this challenge is a FAST challenge we will allow documentation updates during final fixes if needed.

Additional Challenge Rules:
- Please refer to the attached Official Rules applicable to this challenge Link
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced of the Website, these Official Rules govern.
 

Final Submission Guidelines

Challenge Task Overview:
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. As we need this for a demonstration next week we are focused on the 'Tablet/Desktop" view for this challenge. It is very important that you implement and use Bootstrap correctly so we can update the mobile views in a future challenge.

Tips for Success: Ask questions early and get the Copilot or PM's feedback is very important for everyone to be successful in UI Prototype challenges.

Demo: Note our demo will be using "Chrome" to view and demonstrate your UI Prototype! Make sure to focus on everything working and looking great in this browser.

Required Pages:
- We are looking for the Tablet/Desktop screens/scenarios listed below
- Download the files and view /submission/iPad

1. Login
Please refer 01_Login Screen.png
- This screen allows the user to enter their username and password
- Clicking on “Login” will take the user to Dashboard screen.
- Create “Forgot Password and Create Account” as placeholder/dead links

2. Dashboard
Header in Logged in Screens:
- Header needs to be consistent across all screens, follow the header as shown in the storyboards.
- Implement the search text box, this provides dynamic search results (please see below more details on this)

Search (auto type ahead):
See: 04-1_Search_Auto Type Ahead.png
- We show the search results dynamically as the user types the text in the search box shown at top (demo this)
- Clicking on “ViewMore” should take the user to search results page (04-2_Search_Result.png)

Alarms:
See: 02-3A_Dashboard_Alarms.png, 02-3B_Dashboard_Alarms Full Mode.png
- Tapping on the alarm icon will show (02-3A_Dashboard_Alarms.png)
- If the user clicks on View More they will see (02-3B_Dashboard_Alarms Full Mode.png)
- (02-3B_Dashboard_Alarms Full Mode.png) - this screen should be able to scroll

Navigation:
See: 02-6_Dashboard_Navigation.png
- User will be able move between pages using the navigation available in the left sidebar.
- Few screens also has a sub-navigation as shown in (02-8_Dashboard_Navigation.png), plan your code accordingly.
- Capture the responsive nature of this in the Mobile view (02-6A_Dashboard_Navigation.png, 02-6B_Dashboard_2nd Navigation.png)

2. Dashboard Tabs
See: 02-2_Dashboard_On Order Info.png
- At the top, we show a consistent statistics below the header, in this clicking on “5 Items” in "On order" should show a pop-up as shown in (02-2_Dashboard_On Order Info.png)
- This is the landing screen shown after a user logs in and “Notifications” tab is the active selection by default.

2.1 Notifications Tab:
See: 02-1A_Dashboard_Notifications_Shipments.png, 
- Tabs: Notifications, Cases, News, Chatter
- Sub-navigation “Shipments, Orders and Open Invoices”
- Shipments: By default “Shipments” is selected, follow the content as shown in (02-1B_Dashboard_Notifications_Orders.png) for this view.
- Orders: See (02-1B_Dashboard_Notifications_Orders.png)
- Each row shows shipment details, 
- Please make shipment number and “Track” (will allow the user to track the shipment) as placeholder links.

2.2 Cases Tab:
- This can be a placeholder link for now

2.3 News Tab:
See: 02-4_Dashboard_News.png
- This has a sub-navigation “GE Power and Water, Products, Industry, Trends”
- Follow the content as shown in the storyboard
- Each of the News Titles will be hyperlinks - use placeholder link for now
- Content will scroll 

2.4Chatter Tab:
See: 02-5_Dashboard_Chatter.png
- This has a sub-navigation “Most Recent, Following, Trends”
- Follow the content, layout design provided
- Content will scroll 

3. My Account 
See: 03-1_Orders_Order History.png
- The closed view of this screen would be the default view when a user selects "Order History" from "My Account" (see navigation: 02-6_Dashboard_Navigation.png)

Orders Tabs:
- This view shows three tabs “Order History, Paymet History and Open Invoices”, 

3.1 Order History Tab:
See: 03-1_Orders_Order History.png
- Default state should have all the Orders in closed view
- User can sort on this table (default is "Order Placed")
- Wherever we find a down or up arrow icon for the column header, we need to implement sorting - clicking on “down arrow” sorts the table by descending order and “up arrow” sorts the table by ascending order
- Expanding: Each row has a “+” icon which onclick expands to show the breakdown of the order as shown in (03-1_Orders_Order History.png)
- Gear icon in each row can be clicked to show a flyout as shown in (03-2_Orders_Order Level Menu.png), each of the items in this pop-up will perform an action, for now have these as placeholder links and clicking on any item should hide the pop-up.

Expanded View
See: 03-2_Orders_Order Level Menu.png
- Clicking/Tabbing on “-” icon will hide the expanded view and revert the user back to a collapsed row view and changes the icon back to “+” icon.
- Each row within this expanded view shows two actions “MSDS, Fact Sheet” - please make them placeholder links for now.

3.2. Payment History Tab:
See: 03-3_Orders_Payment History.png
- Implement based on the design
- Wherever we find an down or up arrow icon for the column header, we need to implement sorting - clicking on “down arrow” sorts the table by descending order and “up arrow” sorts the table by ascending order! 

3.3. Open Invoices Tab:
See: 03-4_Orders_Open Invoices.png
- Default view should be "closed" (all rows are in their closed state)
- We need to show the Open balance and Past due in $ as shown..make sure to right justify this!
- Wherever we find an down or up arrow icon for the column header, we need to implement sorting - clicking on “down arrow” sorts the table by descending order and “up arrow” sorts the table by ascending order!
- Each row has a “+” icon which onclick expands to show the breakup of the invoices as shown in (03-4_Orders_Open Invoices.png)
- Gear icon in each row can be clicked to show a pop-up as shown in (03-5_Orders_Invoices Level Menu.png), each of the items in this pop-up/flyout will perform some action, for now have these as placeholder links and clicking on any item should hide the pop-up.

Expanded Tree View
See: 03-4_Orders_Open Invoices.png
- Clicking on “-” icon will hide the expanded view and revert the user back to a collapsed row view and changes the icon back to “+” icon.
- Each row within this expanded view shows two actions “MSDS, Fact Sheet” icons - please make them placeholder links for now.

4. Search
See: 04-2_Search_Result.png
- Make sure to show Search results

5. Knowledge Base
See: 05_01 Knowledge Base-default.png 
See: 05_Knowledge Base_MSDS.png (correct tabs and design)
- Correct Tab Order Solutions, FAQ, MSDS, Fact Sheets
- User will go to the MSDS page (05_01 Knowledge Base-default.png  - make sure to use the design of 05_Knowledge Base_MSDS.png)
- User will search and see results (05_02 Knowledge Base-Find Result.png/05_Knowledge Base_MSDS.png)

6. Support
See: 06_Support.png
- User arrives on this page can can click on the "knowledge base" to go to the knowledge base
- User can see Latest Cases via chatter on the right (see if someone is having the same issue or question as them)
User can:
- Select a Case Topic
- Create a Message
- Attach an image (Tablet) or attachment (Desktop)
- Pick Severity of the issue
- Send Request

7. Profile Screen
See: 07-1_Profile_Contact Details.png
- User clicks on the top right "Welcome George" Profile area
- They can go to their Contact Detail or My Notifications from the Profile dropdown
- Show the Contact Details screen
- Show the My Notification screen (demo the "toggle" control)

Mobile Views
- We want to make sure to capture the initial responsive views for Mobile
- Make sure the breakpoints and Bootstrap are set up correctly
- Download the files and view /submission/iPhone

Mobile: Login
See: 01_Login Screen.png
- We want to capture this view in the prototype
- Login takes the user to (02-1A_Dashboard_Shipment.png)

Mobile: Dashboard
See: 02-1A_Dashboard_Shipment.png
- Important: The top/header navigation should not scroll off the screen - all four navigation items should fit on the screen (Notifications, Cases, News, Chatter). Adjust fonts sizes/design accordingly.
- We want to capture the initial Dashboard view in the prototype
- Hamburger Navigation should work
- Everything else can be placeholder links

Mobile: Navigation
See: 02-6A_Dashboard_Navigation.png
- We want to capture the Mobile navigation view in the prototype

Important features of this UI Prototype Challenge
- Tablet/Desktop view!
- Bootstrap is used properly!
- High quality submissions at our deadline!

Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- 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.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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")
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Requirements:
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. We would like to use following JavaScript libraries:
- jQuery
- Bootstrap 3

Browsers Requirements:
- Safari Browser on iPad and iPhone
- Chrome Browser (PC and Mac) = this is the main browser we will be using during our demo!

Final Fixes Note: Firefox/Internet Explorer can be left for Final Fixes if needed.
- Firefox (PC and Mac)
- Internet Explorer (Latest version)