Project Overview

This challenge is part of our Sunshot portfolio. Windowstreet is an app that Investors can use to track how their endowments are used and what the corresponding impact is on the reduction of mankind carbon footprint.

Challenge Overview

In this challenge, you are adding admin pages to the existing MEAN application to manage the models created in a previous challenge.

We have sketches for the Admin dashboard, we don’t have a UI prototype for that, you will use the default bootstrap theme to build the pages UI.

The expected from you in this challenge :

• Create backend CRUD ExpressJS controllers/services for existing models.

• Create frontend pages using AngularJS and Default bootstrap theme following sketches outlined under challenge requirements section.

• Connect the frontend with backend.

• The new code will be added as part of the existing web application.

Challenge Requirements

Pages Requirements

The following diagram show the pages flow. We built Login screen and Endowment Portal Landing page in a previous challenge. You are building the admin pages in this challenge.

General Admin Pages and Layout Guide

• The following structure is preferred as general admin page layout. You are welcome to improve it.

• The navigation menu items can be adjusted as needed. The item should distinct styling when the corresponding page is active.

  • Subpages should have breadcrumb and back button.

  • The items needed for navigations are :

    • Users

    • Endowments

    • Systems

    • Borrowers

    • Installers

• The listing page should be consistent across all pages and can look like this
  

  • The table should have pagination.

    • The pagination will be server side.

  • The table should have filtering/searching by the model fields including the “Ref” fields.

    • The filter will be in server side.

    • The sketch above show a simple presentation of filter feature, you can add multiple fields to address multiple model fields in the search.

  • The table will display all the fields of the Model, use proper width for each column. It does not have to be the same width.

  • For Ref field the table should render a descriptive field from the corresponding Ref record. i.e. in Endowment model we have userId, so in Endowment table we display User#username of endowment#userId instead of displaying the user id.

    • The column value should be a link that open up a popup displaying the Ref model full details.
      

      • For model with many fields use two columns to display fields.

  • The page will have few actions :

    • New button for adding new model record. It preferred to be a popup, an example of new user popup.
      

    • Edit button to edit corresponding table record. It also should use same popup/UI as new popup.

    • Delete button to delete corresponding record. Clicking on the button should prompt user with confirmation popup before processing the action.

    • {children} button(s)

      • We have one to many associations between models, we want to give user shortcut to view associated entities.

      • There will be one more more buttons depends on number of associated entities with the current displayed model listing page.

      • The button will take user to {child} listing page.

      • Here are the expected buttons in each model listing page :

        • Systems Listing page : it will have button to SystemPerformance listing page.

        • Endowments Listing page : it will have button to Borrowers listing page.

        • Borrowers Listing page : it will have button to Loans listing page and Systems listing page.

        • Loans Listing page : it will have button to LoanPayments listing page.

Login Page

• You will reuse existing login page.

• The admin user will be redirected to the Admin Landing page.

Users Listing Page (Admin Landing Page)

• The page list User records and support all User model CRUD operations.

• This page allow admin to manage users of the application :

  • Add new user

  • Edit existing user

    • Same Add new user popup will be used for edit.

    • ‘admin’ or ‘endowment’ roles are the only supported roles in the application for now.

  • Delete user

    • Confirmation popup should be displayed before processing the action.

• This is the landing page for the admin dashboard.

Endowments Listing Page

• The page will be used to manage Endowment model.

• It will follow the “General Admin Pages and Layout Guide” section.

• {children} buttons in the table :

  • “Borrowers” - take user to Borrowers listing page filtered by selected endowment.

Installers Listing Page

• The page will be used to manage Installer model.

• It will follow the “General Admin Pages and Layout Guide” section.

Borrowers Listing Page

• The page will be used to manage Borrower model.

• It will follow the “General Admin Pages and Layout Guide” section.

• {children} buttons in the table :

  • “Loans” - take user to Borrowers listing page filtered by selected Borrower.

  • “Systems” - take user to Systems listing page filtered by selected Borrower.

Loans Listing page

• The page will be used to manage Loan model.

• It will follow the “General Admin Pages and Layout Guide” section.

• {children} buttons in the table :

  • “Loan Payments” - take user to Loan Payments listing page filtered by selected Loan.

Loan Payments Listing Page

• The page will be used to manage LoanPayment model.

• It will follow the “General Admin Pages and Layout Guide” section.

• The page does not have direct access from navigation menu, it can only be accessed from “Loan Listing page”.

Systems Listing Page

• The page will be used to manage System model.

• It will follow the “General Admin Pages and Layout Guide” section.

• {children} buttons in the table :

  • “System Performances” - take user to System Performances listing page filtered by selected System.

• “upload” button in the table :

  • There will allow to submit new “System Performance” data by uploading a CSV file.

  • Sample CSV file is provided in challenge forums.

  • This should be a window modal (popup).

    • Progress bar of upload must be added.

    • Message should be displayed in the popup when upload fail or succeed.

System Performance Listing Page

• The page will be used to manage SystemPerformance model.

• It will follow the “General Admin Pages and Layout Guide” section.

• The page does not have direct access from navigation menu, it can only be accessed from “Systems Listing page”.

• The page will contain a button “upload” to submit new “System Performance” data.

  • Uploaded data will be associated with the currently selected System.

  • The upload will use the same UI and functionality as in Systems listing page.

General Note

• The root path for admin pages should be /admin

• You can use AngularJS bootstrap for the UI pages.

• All pages must be responsive.

  • Tables in responsive view must be vertically/horizontally scrollable.

• Provide a readme file for details about deploying the application, configuring it, and testing locally.

• All code must be documented.

Test Data

• The provided web application includes a script to generate test data.

• We are also providing you with a script to generate csv files.

Heroku Hosting

The application will be hosted in heroku. It is preferred to test your solution in Heroku and provide needed instructions to deploy there.

Folder Structure

Follow provided web application folder structure.

Deliverables

• A git patch file of the provided web application.

• An updated readme.md file detailing all information needed to setup and run the admin web dashboard locally and in heroku. With verification steps.

  • Use github flavored markup text.

• Text file with any notes to reviewer.

• You don't need to submit a word document for deployment guide.

• You don’t need to submit a video.

Final Submission Guidelines

.