Citrix Partner Dashboard Responsive UI Prototype Challenge

Welcome to the Citrix Partner Dashboard Responsive UI Prototype Challenge! The goal of this challenge is to create a responsive HTML5 Prototype application for desktop browsers based on provided storyboard designs using AngularJS & Bootstrap frameworks.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to convert provided storyboard designs into working responsive prototype. You need to use Bootstrap to implement responsive page with fluid layouts to support desktop browsers. The prototype pages must look good on 1280px width devices. Your prototype must work properly in all the required browsers noted below.

We are looking for good and quality prototype code from this challenge. Please ask questions in the forum for any clarifications needed on the spec requirements.

Good luck and we are looking forward to your submissions!

Required Pages:

Below are the required pages described in details for this challenge. Use JSON data binding to load these data.

1. Landing Page:

• -User opens the application and will see the landing page (01 Landing Page.png).
• -The page content should be fluid layout.
• -User can switch between list view and grid view (refer grid view - 03 All Client_Grid View.png).
• -User click on column header to sort the records.
• -Use dead links for all remaining links and button click actions for now.

2. Client View:

• -Once user click on "Total number of clients" tab, show user the client view (02 All Client.png).
• -Click on pagination, allow user to load corresponding data.
• -User can switch between list view and grid view (grid view design - 03 All Client_Grid View.png).
• -Click on "View Details" link, show user the details screen (04 All Client_Grid View_Details.png).
• -If the user is not assigned, then follow the modal popup (05 All Client_Grid View_Details_Assign.png).
• -Click on "Advisor Name (Julio Cesar)" button, show user the select advisor screen (06 All Client_Grid View_Details_Select Advisor.png).
• -If the user is assigned, then follow the modal popup (04 All Client_Grid View_Details.png ).
• -Click on "Assign Now" button, show user the select advisor screen (06 All Client_Grid View_Details_Select Advisor.png).
• -Click on "Continue" button, show user the details screen (04 All Client_Grid View_Details.png).
• -Click on "Cancel" button, show user the previous screen (05 All Client_Grid View_Details_Assign.png).

3. Search Page:

• -Once user click on "Search" tab, show user the search view (07 Search Page.png).
• -User can switch between list view and grid view (refer grid view design - 03 All Client_Grid View.png).
• -User can enter text on search box to get the search results (08 Search Results.png).

4. Column Filter:

• -Show column filter box under each column name on client view, refer screen (09 Search Customer Name Column.png).
• -User can filter customer name column  as like "09 Search Customer Name Column.png", "10 Results Customer Name Column.png".
• -User can filter customer org id column  as like "11 Search Customer ID Column.png", "12 Results Customer ID Column.png".
• -User can filter contant phone column  as like "13 Search Contact Column.png", "14 Results Contact Column.png".
• -User can filter closest expiration date column  as like "15 Search Date_Pick.png", "16 Search Date_Custom Select.png", "17 Expired Next Month.png", "18 Expired Next Week.png".
• -User can filter renewal price column as like "19 Select Range Price.png".
• -Click on "done" button, apply the filters on renewal price column.
• -Click on "reset" button, revert the changes on price range.

5. Aproaching Date View:

• -Once user click on "Clients approaching renewal date" tab, show user the approaching date view. All clients in database within 60 days of current date (20 Approaching Date.png).
• -The table features are same as Client View.

6. Aproaching Date:

• -Once user click on "Client past expiration date" tab, show user the past expiration date view. Lists all clients with expiration dates past current date. (21 Past Expiration Date.png).
• -The table features are same as Client View.

7. Client Index:

• -Once user click on "A-Z Index" tab, show user the client index view (22 Client Index.png).
• -On mouse hover on each item should show user 'View Certificate' link.

Specific HTML/CSS/JavaScript 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.
• -The code must be properly formatted, documented with comments, modular and indented.

Font Requirements:

Use font - CitrixSans (Attached).

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
• AngularJS
• Bootstrap 3

Browsers Requirements:

• -IE 11+ Browsers (Windows)
• -Latest Chrome Browsers (Windows, Mac)
• -Latest Safari Browsers (Mac)
• -Latest Firefox Browsers (Windows, Mac)

Documentation Provided:

Please register to see attached documents.