1 of 86

Waste Management System

TQM UI

TQM UI Tech Documentation

TQM is an independent UI module which only depends on the core UI libraries.

Here are the articles in this section:

How to enable TQM UI
UI: Plant operator
UI: ULB admin

How to Enable TQM UI

Enabling TQM module in DIGIT-UI

Overview

To access the TQM module in DIGIT-UI, enable it from MDMS and add TQM specific roles for the user to access TQM UI.

Enabling Module from MDMS

Add the following configuration in citymodule.json under this path in MDMS. The reference file is given below.

{
        "module": "Tqm",
        "code": "Tqm",
        "active": true,
        "order": 14,
        "additionalComponent": "TqmAdminNotification",
        "tenants": [
            {
                "code": "pg.cityb"
            },
            {
                "code": "pg.cityc"
            },
            {
                "code": "pg.citya"
            }
        ]
      }

Enabling TQM Module from UI

Add TQM to these files in DIGIT-UI codebase. Add it in enabledModules Array.

Note: The name "TQM" should match the name "Tqm" added in mdms(citymodule). However, uppercase or lowercase does not matter.

frontend\micro-ui\web\micro-ui-internals\example\src\index.js
frontend\micro-ui\web\src\App.js

Files for reference:

Sample object:

const enabledModules = [
  "DSS",
  "HRMS",
  "Payment",
  "FSM",
  "Utilities",
  "Tqm", // Note -> here case is different than that of in mdms but it does not matter as long as name is same
  
]

Roles Required to Access TQM UI

PQM_TP_OPERATOR -> This role is for Plant Operator user
PQM_ADMIN -> This role is for ULB Admin user

Note: One user cannot have both these roles because flows and UI is different for these users. These roles are added in the mdms. The reference file is given below

Recommended Core UI module version

Enhancements were made to the core module version to support some of the features in TQM UI such as help section and notification card in ULB admin's home page
The recommended core version for TQM UI is the following:

 "@egovernments/digit-ui-module-core": "1.8.0-beta.13"

UI: Plant Operator

Screens/Flows involving Plant Operator user

We have mobile-first screens for plant operators

The screens/flows for a plant operator are given below:

Plant operator home page
TQM landing page
Plant-user mapping
Inbox/update tests
View past test results/test's summary screen
Help section

Landing and Home Page

Logging in with the plant operator role will take the user to the landing page.

Landing Page

The landing page has a list of cards which includes the TQM card.
The landing page shows a pending tasks card at the bottom of the page.
The pending tasks card lists tests pending to be updated by this user.
The tasks which are overdue will show up first in the pending tasks card.
There is an option to view all the pending tasks which takes the user to TQM inbox page.

Home Page

Clicking on the Treatment Quality Monitoring (TQM) card will take the user to the TQM home page.
The TQM home page shows a TQM card with the links to Inbox, View Past Tests.
It also shows 2 cards below which are -> Your performance, Alerts card.
The "Your Performance" card shows relevant metrics such as test compliance and the percentage of tests that passed which shows the efficiency of the plant(s) linked to the logged in user.
The 'Alerts' card shows a count of the different types of alerts that were raised by the system. This data comes from the anomaly finder.

View Past Test Results/Test's Summary Screen

From the TQM card in the home screen, there is a link to "View Past Tests".

View Past Tests/Test's Summary Screen

The view past tests screen will show the tests whose workflow is completed, that is, they are in the submitted status.
The screen shows a list of cards, each card corresponding to a test, and shows test details similar to inbox.
Filters and sort options are available.
User can filter by Treatment process, Output Type, Test Type and the date range.
Sort is similar to inbox.

API Details:

Use the pqm-service.
URL for search "/pqm-service/v1/_search".
Sample request object:

{
    "testSearchCriteria": {
        "processCodes": [
            "WATER_FILTERING",
            "FECAL_SLUDGE_MANAGEMENT"
        ],
        "materialCodes": [
            "ARSENIC",
            "NA",
            "SCREENED_SLUDGE",
            "FECAL_SLUDGE",
            "EFFLUENTS",
            "BIOSOLID",
            "CHLORINE",
            "SALT",
            "IRON",
            "POTABLE_WATER"
        ],
        "testType": [
            "IOT_SCHEDULED",
            "LAB_ADHOC",
            "LAB_SCHEDULED"
        ],
        "fromDate": 1698777000000,
        "toDate": 1701368999000,
        "wfStatus": [
            "SUBMITTED"
        ],
        "plantCodes": [
            "ANGUL_FSTP",
            "PURI_FSTP"
        ]
    },
    "pagination": {
        "limit": 100
    },
    "RequestInfo": {
        "apiId": "Rainmaker",
        "authToken": "e5d10a5d-b262-47fc-a9ee-fc24c3a0de19",
        "userInfo": {
            "id": 721,
            "uuid": "41488b21-c742-4290-af8e-a2a1dc3749ac",
            "userName": "TQM_DEV_PLANTOPERATOR",
            "name": "Plant operator",
            "mobileNumber": "7281638699",
            "emailId": null,
            "locale": null,
            "type": "EMPLOYEE",
            "roles": [
                {
                    "name": "PQM TP OPERATOR",
                    "code": "PQM_TP_OPERATOR",
                    "tenantId": "pg.citya"
                }
            ],
            "active": true,
            "tenantId": "pg.citya",
            "permanentCity": null
        },
        "msgId": "1701076145507|en_IN",
        "plainAccessRequest": {}
    }
}

Sample curl for search:

curl 'https://unified-dev.digit.org/pqm-service/v1/_search' \
  -H 'authority: unified-dev.digit.org' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'content-type: application/json;charset=UTF-8' \
  -H 'cookie: _ga_V2CPZCVTXQ=GS1.1.1695293925.1.1.1695293950.0.0.0; __cuid=59fd9aac25b044f6af006bd4b159cbbf; amp_fef1e8=f4fc07f6-3fb0-4c67-8114-a1beb906e625R...1hf75985a.1hf76uet8.i.8.q; _ga_P1TZCPKF6S=GS1.1.1699974064.1.1.1699975479.60.0.0; _ga=GA1.2.1291438273.1695293925; _ga_0JZG96DZSM=GS1.1.1699977339.2.0.1699977339.60.0.0' \
  -H 'origin: https://unified-dev.digit.org' \
  -H 'referer: https://unified-dev.digit.org/sanitation-ui/employee/tqm/search-test-results' \
  -H 'sec-ch-ua: "Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"' \
  -H 'sec-ch-ua-mobile: ?1' \
  -H 'sec-ch-ua-platform: "Android"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: same-origin' \
  -H 'user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36' \
  --data-raw '{"testSearchCriteria":{"processCodes":["WATER_FILTERING","FECAL_SLUDGE_MANAGEMENT"],"materialCodes":["ARSENIC","NA","SCREENED_SLUDGE","FECAL_SLUDGE","EFFLUENTS","BIOSOLID","CHLORINE","SALT","IRON","POTABLE_WATER"],"testType":["IOT_SCHEDULED","LAB_ADHOC","LAB_SCHEDULED"],"fromDate":1698777000000,"toDate":1701368999000,"wfStatus":["SUBMITTED"],"plantCodes":["ANGUL_FSTP","PURI_FSTP"]},"pagination":{"limit":100},"RequestInfo":{"apiId":"Rainmaker","authToken":"e5d10a5d-b262-47fc-a9ee-fc24c3a0de19","userInfo":{"id":721,"uuid":"41488b21-c742-4290-af8e-a2a1dc3749ac","userName":"TQM_DEV_PLANTOPERATOR","name":"Plant operator","mobileNumber":"7281638699","emailId":null,"locale":null,"type":"EMPLOYEE","roles":[{"name":"PQM TP OPERATOR","code":"PQM_TP_OPERATOR","tenantId":"pg.citya"}],"active":true,"tenantId":"pg.citya","permanentCity":null},"msgId":"1701076145507|en_IN","plainAccessRequest":{}}}' \
  --compressed

Role-Action Mapping:

Role-action mapping is done for the search endpoint for a plant operator user role, that is:

PQM_TP_OPERATOR

Help Section

Help Flow

Every page in the plant operator's screen has a help button on the top right.
Clicking on it takes the user to the help screen which shows a list of videos. Each video has a title and a description.
Clicking on a video runs it in a media player.
Flows in the app can be stored in a video and it can be shown in this screen.
This page is fully configurable through MDMS.
Refer to the following MDMS file to configure the list of videos:

Multiple languages can be configured. Currently, English and Hindi are the two options available.

Sample configuration object:

{
          "TQM": {
              "moduleCode" : "TQM",
              "videosJson":  [
                  {
                      "headerLabel": "TQM_HELP_Q1",
                      "description": "TQM_HELP_Q1_DESC",
                      "en_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4",
                      "hi_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4"
                  },
                  {
                    "headerLabel": "TQM_HELP_Q2",
                    "description": "TQM_HELP_Q2_DESC",
                    "en_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4",
                    "hi_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4"
                  },
                  {
                    "headerLabel": "TQM_HELP_Q3",
                    "description": "TQM_HELP_Q4_DESC",
                    "en_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4",
                    "hi_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4"
                  },
                  {
                    "headerLabel": "TQM_HELP_Q4",
                    "description": "TQM_HELP_Q4_DESC",
                    "en_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4",
                    "hi_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4"
                  },
                  {
                    "headerLabel": "TQM_HELP_Q5",
                    "description": "TQM_HELP_Q5_DESC",
                    "en_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4",
                    "hi_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4"
                  },
                  {
                    "headerLabel": "TQM_HELP_Q6",
                    "description": "TQM_HELP_Q6_DESC",
                    "en_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4",
                    "hi_IN": "https://media.w3.org/2010/05/sintel/trailer.mp4"
                  }
              ],
              "screenHeader":"TQM_HELP_SECTION"
          }
      }

The above configuration object is used to render the screen. It has a video level header and description along with URLs for Hindi and English videos. The page level header is also present.
The module name can be configured. For example, here we have added the module name as TQM.

UI: ULB Admin

Screens/Flows involving ULB Admin user

We have Desktop-first Screens for ULB Admin user

The following screens/flows are available for an urban local body (ULB) admin:

ULB admin home page
Inbox/Test summary screen
View past test results/Test summary screen
Create adhoc test

View Past Test Results/Test's Summary Screen

From the TQM card in the home screen, there is a link to "View Past Tests".

View Past Tests/Test's Summary Screen

The view past tests screen will show the tests whose workflow is completed, that is, they are in the submitted status.
The screen shows a list of cards, each card corresponding to a test, and shows test details similar to inbox.
Filters and sort options are available.
User can filter by Treatment process, Output Type, Test Type and the date range.
Sort is similar to inbox.

API Details:

Use the pqm-service.
URL for search "/pqm-service/v1/_search".
Sample request object:

{
    "testSearchCriteria": {
        "processCodes": [
            "WATER_FILTERING",
            "FECAL_SLUDGE_MANAGEMENT"
        ],
        "materialCodes": [
            "ARSENIC",
            "NA",
            "SCREENED_SLUDGE",
            "FECAL_SLUDGE",
            "EFFLUENTS",
            "BIOSOLID",
            "CHLORINE",
            "SALT",
            "IRON",
            "POTABLE_WATER"
        ],
        "testType": [
            "IOT_SCHEDULED",
            "LAB_ADHOC",
            "LAB_SCHEDULED"
        ],
        "fromDate": 1698777000000,
        "toDate": 1701368999000,
        "wfStatus": [
            "SUBMITTED"
        ],
        "plantCodes": [
            "ANGUL_FSTP",
            "PURI_FSTP"
        ]
    },
    "pagination": {
        "limit": 100
    },
    "RequestInfo": {
        "apiId": "Rainmaker",
        "authToken": "e5d10a5d-b262-47fc-a9ee-fc24c3a0de19",
        "userInfo": {
            "id": 721,
            "uuid": "41488b21-c742-4290-af8e-a2a1dc3749ac",
            "userName": "TQM_DEV_PLANTOPERATOR",
            "name": "Plant operator",
            "mobileNumber": "7281638699",
            "emailId": null,
            "locale": null,
            "type": "EMPLOYEE",
            "roles": [
                {
                    "name": "PQM TP OPERATOR",
                    "code": "PQM_TP_OPERATOR",
                    "tenantId": "pg.citya"
                }
            ],
            "active": true,
            "tenantId": "pg.citya",
            "permanentCity": null
        },
        "msgId": "1701076145507|en_IN",
        "plainAccessRequest": {}
    }
}

Sample curl for search:

curl 'https://unified-dev.digit.org/pqm-service/v1/_search' \
  -H 'authority: unified-dev.digit.org' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'content-type: application/json;charset=UTF-8' \
  -H 'cookie: _ga_V2CPZCVTXQ=GS1.1.1695293925.1.1.1695293950.0.0.0; __cuid=59fd9aac25b044f6af006bd4b159cbbf; amp_fef1e8=f4fc07f6-3fb0-4c67-8114-a1beb906e625R...1hf75985a.1hf76uet8.i.8.q; _ga_P1TZCPKF6S=GS1.1.1699974064.1.1.1699975479.60.0.0; _ga=GA1.2.1291438273.1695293925; _ga_0JZG96DZSM=GS1.1.1699977339.2.0.1699977339.60.0.0' \
  -H 'origin: https://unified-dev.digit.org' \
  -H 'referer: https://unified-dev.digit.org/sanitation-ui/employee/tqm/search-test-results' \
  -H 'sec-ch-ua: "Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"' \
  -H 'sec-ch-ua-mobile: ?1' \
  -H 'sec-ch-ua-platform: "Android"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: same-origin' \
  -H 'user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36' \
  --data-raw '{"testSearchCriteria":{"processCodes":["WATER_FILTERING","FECAL_SLUDGE_MANAGEMENT"],"materialCodes":["ARSENIC","NA","SCREENED_SLUDGE","FECAL_SLUDGE","EFFLUENTS","BIOSOLID","CHLORINE","SALT","IRON","POTABLE_WATER"],"testType":["IOT_SCHEDULED","LAB_ADHOC","LAB_SCHEDULED"],"fromDate":1698777000000,"toDate":1701368999000,"wfStatus":["SUBMITTED"],"plantCodes":["ANGUL_FSTP","PURI_FSTP"]},"pagination":{"limit":100},"RequestInfo":{"apiId":"Rainmaker","authToken":"e5d10a5d-b262-47fc-a9ee-fc24c3a0de19","userInfo":{"id":721,"uuid":"41488b21-c742-4290-af8e-a2a1dc3749ac","userName":"TQM_DEV_PLANTOPERATOR","name":"Plant operator","mobileNumber":"7281638699","emailId":null,"locale":null,"type":"EMPLOYEE","roles":[{"name":"PQM TP OPERATOR","code":"PQM_TP_OPERATOR","tenantId":"pg.citya"}],"active":true,"tenantId":"pg.citya","permanentCity":null},"msgId":"1701076145507|en_IN","plainAccessRequest":{}}}' \
  --compressed

Role-Action Mapping:

Role-action mapping is done for the search endpoint for a plant operator user role, that is:

PQM_TP_OPERATOR

Waste Management System

TQM UI

How to Enable TQM UI

Overview

Enabling Module from MDMS

Enabling TQM Module from UI

Roles Required to Access TQM UI

Recommended Core UI module version

UI: Plant Operator

The screens/flows for a plant operator are given below:

Landing and Home Page

Landing Page

Home Page

View Past Test Results/Test's Summary Screen

View Past Tests/Test's Summary Screen

API Details:

Sample curl for search:

Role-Action Mapping:

Help Section

Help Flow

UI: ULB Admin

The following screens/flows are available for an urban local body (ULB) admin:

TQM UI

UI: Plant Operator

The screens/flows for a plant operator are given below:

Landing and Home Page

Landing Page

Home Page

View Past Test Results/Test's Summary Screen

View Past Tests/Test's Summary Screen

API Details:

Sample curl for search:

Role-Action Mapping:

Help Section

Help Flow

UI: ULB Admin

The following screens/flows are available for an urban local body (ULB) admin:

How to Enable TQM UI

Overview

Enabling Module from MDMS

Enabling TQM Module from UI

Roles Required to Access TQM UI

Recommended Core UI module version