Code Monkey home page Code Monkey logo

openmf / web-app Goto Github PK

View Code? Open in Web Editor NEW
206.0 38.0 487.0 216.69 MB

Mifos X Web App is the revamped version of the Mifos X Community App built on top of the Fineract Platform leveraging the popular Angular framework.

Home Page: https://openmf.github.io/web-app/

License: Mozilla Public License 2.0

JavaScript 0.09% TypeScript 60.83% HTML 37.09% SCSS 1.96% Dockerfile 0.02%
mifosx-platform angular-7 angular-material-7 typescript scss hacktoberfest

web-app's Introduction

Mifos X Web App Build Status Gitter

Mifos X Web App is the revamped version of the Mifos X Community App, an effective financial inclusion solution and the default web application built on top of the Mifos X platform for the Mifos User Community.

It is a Single-Page App (SPA) written in standard web technologies HTML5, SCSS and TypeScript. It leverages the popular Angular framework and Angular Material for material design components.

Getting started using

The latest code is continuously deployed at https://openmf.github.io/web-app/ whenever a PR is merged into the master branch.

Getting started developing

  1. Ensure you have the following installed in your system:

    git

    npm

  2. Install angular-cli globally.

npm install -g @angular/[email protected]
  1. Clone the project locally into your system.
git clone https://github.com/openMF/web-app.git
  1. cd into project root directory and make sure you are on the master branch.

  2. Install the dependencies.

npm install
  1. To preview the app, run the following command and navigate to http://localhost:4200/.
ng serve

The application is using the development server with basic authentication by default. The credentials for the same are:

Username - mifos
Password - password

Important Note: Please do not make any alterations to these credentials.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --configuration production flag for a production build.

Run npm run build:prod to build a production artifacts Instead.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular-CLI README.

Setting up a local server

Follow the given instructions for your operating system to setup a local server for the Mifos X platform.

Windows

Ubuntu

For connecting to server running elsewhere update the base API URL and/or tenant identifier property in the environments/environment.ts file and environments/environment.prod.ts file for development and production use respectively.

By default OAuth2 is disabled. To enable it, change the value of oauth.enabled property to true in the environments/environment.ts file and environments/environment.prod.ts file for development and production use respectively.

Docker

To locally build this Docker image from source (after git clone this repo), run:

docker build -t openmf/web-app:latest .

You can then run a Docker Container from the image above like this:

docker run -d -p 4200:80 openmf/web-app:latest

Access the webapp on http://localhost:4200 in your browser.

Docker compose

It is possible to do a 'one-touch' installation of Mifos X Web App using containers (AKA "Docker"). Fineract now packs the Mifos community-app web UI in it's docker deploy.

As Prerequisites, you must have docker and docker-compose installed on your machine; see Docker Install and Docker Compose Install.

Now to run a new MifosX Web App instance you can simply:

  1. git clone https://github.com/openMF/web-app.git ; cd web-app
  2. for windows, use git clone https://github.com/openMF/web-app.git --config core.autocrlf=input ; cd web-app
  3. docker-compose up -d
  4. Access the webapp on http://localhost:4200 in your browser.

You can also setup different configurations for the MifosX Web App using environment variables:

  1. Use environment variables (best choice if you run with Docker Compose):

Fineract backend settings

FINERACT_API_URLS

Value to set a Fineract server list (environments) to be used, Default value:

https://dev.mifos.io,https://demo.mifos.io,https://qa.mifos.io,https://staging.mifos.io,https://mobile.mifos.io,https://demo.fineract.dev,https://localhost:8443
FINERACT_API_URL

Default value used from the Fineract server list. Default value:

https://localhost:8443
FINERACT_PLATFORM_TENANT_IDENTIFIER

Fineract Tenant identifier to be used by default, It must be aligned with the Fineract tenants table. Default value:

default
FINERACT_PLATFORM_TENANTS_IDENTIFIER

Fineract Tenant identifier list to be used, Those must be aligned with the Fineract tenants table.

Setting for Languages (i18n) still under development

MIFOS_DEFAULT_LANGUAGE=en-US
MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT,sw-SW

These are the Language available now:

Language Code File
Czech cs cs-CS.json
German de de-DE.json
English en en-US.json
Spanish es es-MX.json
French fr fr-FR.json
Italian it it-IT.json
Korean ko ko-KO.json
Lithuanian li li-LI.json
Latvian lv lv-LV.json
Nepali ne ne-NE.json
Portuguese pt pt-PT.json
Swahili sw sw-SW.json

Setting for applying the Client preload in the Clients view, Default true

MIFOS_PRELOAD_CLIENTS=false

Setting for exporting report table to CSV file using this field delimiter

MIFOS_DEFAULT_CHAR_DELIMITER=,

Setting for Wait time in seconds for reading the user notifications, Default 60 seconds

MIFOS_WAIT_TIME_FOR_NOTIFICATIONS=60

Setting for Wait time in seconds for reading the COB Catch-Up status, Default 30 seconds

MIFOS_WAIT_TIME_FOR_CATCHUP=30

For more information look the env.sample file in the root directory of the project

Want to help? contributions welcome

Want to file a bug, request a feature, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues. Make sure you follow the guidelines before sending a contribution!

web-app's People

Contributors

abhaychawla avatar abhirup-99 avatar abhishekkumar08 avatar adamsaghy avatar alberto-art3ch avatar anika-001 avatar avikganguly01 avatar blasan avatar dependabot[bot] avatar edcable avatar galovics avatar gustavao avatar iohacker avatar jonathanzhang53 avatar josehernandezfintecheandomx avatar jov03 avatar luckyman20 avatar muddlebee avatar muskankhedia avatar onyx2406 avatar oussemadevcode avatar pc-11-00 avatar punwai avatar radhathakare avatar ramvr1256 avatar shobhi1310 avatar shrunk3 avatar spider0061 avatar vikashsprem avatar vorburger avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web-app's Issues

Self Service: Create Self Service User

Goal:

As a user,
I want a screen to create self-service users
so that I can activate accounts for new as well as existing self-service users.

Tasks:

  1. Add a screen to create self-service users
  2. Allow activation of a self-service user account for existing as well as new users

Acceptance Criteria:

  • Add a screen to create self-service users
  • Allow activation of a self-service user account for existing as well as new users

UPDATE: User Interface completed. Functionality can be completed once required APIs are available.

Fineract: https://issues.apache.org/jira/browse/FINERACT-638

Update Contributing.md

Update Contributing.md to include instructions on skipping a Travis CI build if it is not required for the particular commit. For example, when changes are made to *.md files.

Multiple usage of app header

Remove multiple usage of app header component and use the shell component to route with shell, loading the header only once initially.

Sample

Goal:
As a I want so that I can
i.e.

As DevOps I want Health liveness Probe on the microservice so that the health of the service can be monitored.

Tasks:

Add negative use-cases to Unit tests
Add Integration tests
Acceptance Criteria:

Negative use-cases for Unit Tests in the "common streaming library"
Integration tests in the "common streaming library"
Dependencies:

#148

Integrate custom themes

Few examples of themes using the official material design colour tool:
https://material.io/tools/color/
(Ref: https://material.io/design/color/#tools-for-picking-colors)

Based on the new skin of community app:
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=082331&primary.text.color=ffffff&secondary.color=4f99ed&secondary.text.color=000000

Based on the logo of Mifos:
Blue theme - https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1074b9&primary.text.color=ffffff&secondary.color=1daeec&secondary.text.color=000000
Green theme - https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1fb050&primary.text.color=000000&secondary.color=b4d575&secondary.text.color=000000
Blue/Green theme combinations -
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1074b9&secondary.color=1fb050&secondary.text.color=000000&primary.text.color=ffffff
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1074b9&secondary.color=b4d575&secondary.text.color=000000&primary.text.color=ffffff
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1daeec&secondary.color=b4d575&secondary.text.color=000000&primary.text.color=000000
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1daeec&secondary.color=1fb050&secondary.text.color=000000&primary.text.color=000000

Based on the material palette:
Blue theme - https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=2196F3&secondary.color=00BCD4&secondary.text.color=000000
Green theme - https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=2E7D32&secondary.color=00E676&primary.text.color=ffffff&secondary.text.color=000000
Blue/Green theme -
https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3D5AFE&secondary.color=00E676&primary.text.color=ffffff&secondary.text.color=000000
https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=00E676&secondary.color=3D5AFE&primary.text.color=000000&secondary.text.color=ffffff

node-sass package required as a dependency

Description

Running npm install does not install node-sass, which appears to be required to properly compile everything.

Steps to Reproduce

  1. Clone the repository
  2. Run npm install
  3. Run npm start
    You will receive a compilation error similar to https://dpaste.de/zebp

Expected Behaviour

The app compiles and the user can access the web-app on the localhost successfully.

Actual Behaviour

The app does not compile and the web-app cannot be accessed.

Settings

  • Mifos X version: Latest
  • Browser used: Chrome

Screenshots, if any

Create Client page enhancements

Current Behaviour:
Go to Clients>Create Client page. Here , you can add Family Member Details and Address multiple number of times. As you add multiple number of times, the create client page expands bigger and difficult to track.

Expected:

  1. If we click on โ€˜+โ€™ on Family Member Details and Address, it should navigate to new page.
  2. Create Block for each family member detail/Address & Place 'REMOVE' button on top of the each block.

Web-App Configuration

Goal:

As a user,
I want to configure the look and feel of the application
so that it suits the needs of the organization.

Tasks:

  1. Add settings for web-app configuration
  2. Allow configuration of the name of the organization, its description, a summary, default language and date format to be used within the application.
  3. Allow configuration of favicon and logo of the organization.
  4. Allow configuration of the theme and fonts for the application.
  5. Allow configuration of the contact information of the organization (website, email, phone)

Acceptance Criteria:

  • Add settings for web-app configuration
  • Allow configuration of the name of the organization, its description, a summary, default language and date format to be used within the application.
  • Allow configuration of favicon and logo of the organization.
  • Allow configuration of the theme for the application.
  • Allow configuration of the fonts for the application.
  • Allow configuration of the contact information of the organization (website, email, phone)

UPDATE: User Interface completed. Functionality can be completed once required APIs are available.

Fineract: https://issues.apache.org/jira/browse/FINERACT-638

Self Service: User Management

Goal:

As a user,
I want a screen to view all the clients (self-service/non-self-service users)
so that I can manage them as a whole.

Tasks:

  1. Add a screen to manage all clients (self-service/non-self-service users)
  2. Add feature to search
  3. Allow bulk activation/deactivation of self-service users
  4. Add feature for creating a self-service user
  5. Click and view details of a client (self-service/non-self-service users)
  6. Edit details of a client (self-service/non-self-service users)

Acceptance Criteria:

  • Add a screen to manage all clients (self-service/non-self-service users)
  • Add feature to search
  • Allow bulk activation/deactivation of self-service users
  • Add feature for creating a self-service user
  • Click and view details of a client (self-service/non-self-service users)
  • Edit details of a client (self-service/non-self-service users)

UPDATE: User Interface completed. Functionality can be completed once required APIs are available.

Fineract: https://issues.apache.org/jira/browse/FINERACT-638

Online Banking App and Android App Configuration

Goal:

As a user,
I want to configure the look and feel of online banking app and android app
so that it suits the needs of the organization and the self-service users.

Tasks:

  1. Add settings for online banking app and android app configuration
  2. Allow configuration of the name of the organization, its description, a summary, default language and date format to be used within the application.
  3. Allow configuration of favicon and logo of the organization. (where required)
  4. Allow configuration of the theme and fonts for the application.
  5. Allow configuration of the contact information of the organization (website, email, phone)

Acceptance Criteria:

  • Add settings for online banking app and android app configuration
  • Allow configuration of the name of the organization, its description, a summary, default language and date format to be used within the application.
  • Allow configuration of favicon and logo of the organization. (where required)
  • Allow configuration of the theme and fonts for the application.
  • Allow configuration of the contact information of the organization (website, email, phone)

UPDATE: User Interface completed. Functionality can be completed once required APIs are available.

Fineract: https://issues.apache.org/jira/browse/FINERACT-638

Loan Account Page Enhancements

As shown in screenshot, Loan Details in on right side of the page and loan summary is left.

loanaccountpage

Expected:

Keep Loan Details at left side of the page, and Loan Summary as right side of the page. Alignments must be maintained.

Checklist for fineract features

Fineract APIs implemented for:

  • User

  • App Configuration

  • Clients

  • Groups

  • Centers

  • Loans

  • Savings

  • Shares

  • Accounting

  • Reports

  • Organisation

  • System

  • Products

  • Templates

  • Self Service

Add a progress bar

Add a progress bar which can be activated while data is loaded through HTTP requests.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.